From 3cd8bd0845603393c86268717daf5fb6d325ffe8 Mon Sep 17 00:00:00 2001
From: kiyeong <kjr07145@gmail.com>
Date: Thu, 21 Nov 2024 09:22:38 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A9=94=EC=84=B8=EC=A7=80=20=EB=A6=AC?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=9C=84=EC=B9=98=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MainPage/messageList/MessageList.tsx      | 43 +++++++++++++++++--
 1 file changed, 40 insertions(+), 3 deletions(-)

diff --git a/src/pages/MainPage/messageList/MessageList.tsx b/src/pages/MainPage/messageList/MessageList.tsx
index 3bb2721..e6ba786 100644
--- a/src/pages/MainPage/messageList/MessageList.tsx
+++ b/src/pages/MainPage/messageList/MessageList.tsx
@@ -8,10 +8,25 @@ interface MessageListProps {
 export const MessageList: React.FC<MessageListProps> = ({ messages }) => {
   const messageListRef = useRef<HTMLDivElement>(null);
 
-  // 새로운 메시지가 추가될 때마다 스크롤을 아래로 이동
+  // 초기 화면 중앙으로 스크롤 설정
   useEffect(() => {
     if (messageListRef.current) {
-      messageListRef.current.scrollTop = messageListRef.current.scrollHeight;
+      const container = messageListRef.current;
+      container.scrollTop =
+        container.scrollHeight / 2 - container.clientHeight / 2;
+    }
+  }, []);
+
+  // 새로운 메시지가 추가될 때 애니메이션과 함께 스크롤
+  useEffect(() => {
+    if (messageListRef.current) {
+      const container = messageListRef.current;
+
+      // 자연스러운 스크롤 효과
+      container.scrollTo({
+        top: container.scrollHeight,
+        behavior: "smooth",
+      });
     }
   }, [messages]);
 
@@ -22,13 +37,14 @@ export const MessageList: React.FC<MessageListProps> = ({ messages }) => {
       maxW="800px"
       display="flex"
       flexDirection="column"
+      justifyContent="center" // 중앙에서부터 시작
       minH="60vh"
       overflow="auto"
       p="10px"
       m="0 auto 60px"
     >
       {messages
-        .slice() // 원본 배열을 복사하여 수정
+        .slice() // 원본 배열 복사
         .map((message, index) => {
           const isEven = index % 2 === 1;
 
@@ -43,6 +59,11 @@ export const MessageList: React.FC<MessageListProps> = ({ messages }) => {
               alignSelf={isEven ? "flex-start" : "flex-end"}
               wordBreak="break-word"
               fontSize={{ base: "xl", md: "2xl" }}
+              animation="fadeIn 0.5s ease" // CSS 애니메이션
+              style={{
+                opacity: 0,
+                animation: "fadeIn 0.5s ease forwards",
+              }}
             >
               <Text>{message}</Text>
             </Box>
@@ -51,3 +72,19 @@ export const MessageList: React.FC<MessageListProps> = ({ messages }) => {
     </Box>
   );
 };
+
+// CSS 애니메이션 추가
+const style = document.createElement("style");
+style.innerHTML = `
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+`;
+document.head.appendChild(style);