feat: 메세지 리스트 위치 조정

datastreams-knu · Nov 21, 2024 · 3cd8bd0 · 3cd8bd0
1 parent d04979e
commit 3cd8bd0
Showing 1 changed file with 40 additions and 3 deletions.
diff --git 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);