From 0072bb602f130ab5117a8bcc0531091d54d2beae Mon Sep 17 00:00:00 2001
From: kiyeong <kjr07145@gmail.com>
Date: Sat, 9 Nov 2024 18:15:11 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=A7=88=EB=AC=B8=EA=B3=BC=20=EB=8B=B5?=
 =?UTF-8?q?=EB=B3=80=20=EA=B5=AC=EB=B6=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/main/index.tsx              |  6 +++---
 src/pages/main/message-list/index.tsx | 28 ++++++++++++++++++---------
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/pages/main/index.tsx b/src/pages/main/index.tsx
index 43a4790..bdd973f 100644
--- a/src/pages/main/index.tsx
+++ b/src/pages/main/index.tsx
@@ -48,12 +48,12 @@ const MainPage = () => {
     }
   };
 
+  // 로딩 중일 때만 스크롤을 가장 아래로 이동
   useEffect(() => {
-    // 메시지 또는 입력 높이에 변동이 생길 때마다 스크롤을 가장 아래로 이동
-    if (bottomRef.current) {
+    if (loading && bottomRef.current) {
       bottomRef.current.scrollIntoView({ behavior: "smooth" });
     }
-  }, [messages, inputHeight, loading]);
+  }, [loading]);
 
   const toggleSidebar = () => {
     setSidebarOpen((prev) => !prev);
diff --git a/src/pages/main/message-list/index.tsx b/src/pages/main/message-list/index.tsx
index a1f5433..b465543 100644
--- a/src/pages/main/message-list/index.tsx
+++ b/src/pages/main/message-list/index.tsx
@@ -18,11 +18,17 @@ export const MessageList: React.FC<MessageListProps> = ({ messages }) => {
 
   return (
     <MessageListContainer ref={messageListRef}>
-      {messages.map((message, index) => (
-        <MessageBox key={index}>
-          <Text>{message}</Text>
-        </MessageBox>
-      ))}
+      {messages.map((message, index) => {
+        // 뒤에서부터 번호를 매긴 index 계산
+        const reversedIndex = messages.length - index;
+        const isEven = reversedIndex % 2 === 0;
+
+        return (
+          <MessageBox key={index} isEven={isEven}>
+            <Text>{message}</Text>
+          </MessageBox>
+        );
+      })}
     </MessageListContainer>
   );
 };
@@ -39,13 +45,17 @@ const MessageListContainer = styled(Box)`
   margin: 0 auto 60px; // 중앙 정렬 및 메시지 입력창과 간격을 둠
 `;
 
-// 메시지 박스 스타일 (동적 길이, 우측 정렬)
-const MessageBox = styled(Box)`
+// 메시지 박스 스타일 (동적 길이, 정렬 위치 설정)
+const MessageBox = styled(Box)<{ isEven: boolean }>`
   margin: 5px 0;
   padding: 10px;
-  background-color: #f0f0f0;
+  background-color: ${({ isEven }) =>
+    isEven ? "#FFDFB8" : "#f0f0f0"}; // 뒤에서부터 계산한 짝수 색상 설정
   border-radius: 8px;
   max-width: 80%; // 메시지 박스의 최대 너비 설정 (화면의 80%)
-  align-self: flex-end; // 우측 정렬
+  align-self: ${({ isEven }) =>
+    isEven
+      ? "flex-start"
+      : "flex-end"}; // 뒤에서부터 계산한 짝수는 좌측, 홀수는 우측 정렬
   word-wrap: break-word; // 긴 텍스트가 박스를 넘지 않도록 자동 줄바꿈
 `;