From c44adfae610f6ea40d33198380ca5e095cd24d60 Mon Sep 17 00:00:00 2001
From: parkyejin <uiop5809@naver.com>
Date: Thu, 5 Sep 2024 00:13:02 +0900
Subject: [PATCH] =?UTF-8?q?design(#63):=20=EC=B5=9C=EA=B7=BC=20=EB=A9=94?=
 =?UTF-8?q?=EC=84=B8=EC=A7=80=20=EB=82=B4=EC=97=AD=2010=EA=B8=80=EC=9E=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/chatting/page.tsx                   | 4 ++--
 src/components/chatting/ChattingMessage.tsx | 8 ++++----
 src/components/chatting/ChattingProfile.tsx | 5 ++++-
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/app/chatting/page.tsx b/src/app/chatting/page.tsx
index b901a7d..c5bdbce 100644
--- a/src/app/chatting/page.tsx
+++ b/src/app/chatting/page.tsx
@@ -216,7 +216,7 @@ const Chatting = () => {
               </button>
             )}
           </div>
-          <div className="flex-1 overflow-y-auto box-border">
+          <div className="flex-1 overflow-y-auto box-border p-2">
             {messages.length > 0 ? (
               messages.map((msg, index) => {
                 const currentRoom =
@@ -225,7 +225,7 @@ const Chatting = () => {
                     (room) => room.chatRoomId === currentChatRoomId,
                   )
                 return (
-                  <div key={index} className="my-2 p-2 box-border">
+                  <div key={index} className="my-2 p-1 box-border">
                     <ChattingMessage
                       other={currentRoom!!.memberSimpleInfo}
                       msg={msg}
diff --git a/src/components/chatting/ChattingMessage.tsx b/src/components/chatting/ChattingMessage.tsx
index 406148e..f4fa283 100644
--- a/src/components/chatting/ChattingMessage.tsx
+++ b/src/components/chatting/ChattingMessage.tsx
@@ -24,7 +24,7 @@ const ChattingMessage = ({ other, msg }: ChattingMessageProps) => {
 
   return (
     <div
-      className={`flex items-end mb-4 ${isMine ? 'justify-end' : 'justify-start'}`}
+      className={`flex items-end ${isMine ? 'justify-end' : 'justify-start'}`}
     >
       <div
         className={`flex items-center gap-2.5 ${isMine ? 'flex-row-reverse' : 'flex-row'}`}
@@ -32,14 +32,14 @@ const ChattingMessage = ({ other, msg }: ChattingMessageProps) => {
         {!isMine && (
           <Image
             src={other.profileImgUrl}
-            width={56}
-            height={56}
+            width={50}
+            height={50}
             alt="profile"
             className="rounded-full"
           />
         )}
         <div
-          className={`flex flex-col gap-1 ${isMine ? 'items-end' : 'items-start'}`}
+          className={`flex items-end gap-2 ${isMine ? 'flex-row-reverse' : 'flex-row'}`}
         >
           <div
             className={`text-headline text-gray2 font-semibold rounded-7.5 px-5 py-4 max-w-90 ${isMine ? 'bg-main4' : 'bg-white border border-main'}`}
diff --git a/src/components/chatting/ChattingProfile.tsx b/src/components/chatting/ChattingProfile.tsx
index d9b1f43..86cec2c 100644
--- a/src/components/chatting/ChattingProfile.tsx
+++ b/src/components/chatting/ChattingProfile.tsx
@@ -19,6 +19,9 @@ const ChattingProfile = ({
   onClick,
   current,
 }: ChattingProfileProps) => {
+  const truncatedMessage =
+    lastMessage.length > 10 ? `${lastMessage.slice(0, 10)}...` : lastMessage
+
   return (
     <div
       className={`flex items-center gap-4.5 cursor-pointer p-4 ${
@@ -48,7 +51,7 @@ const ChattingProfile = ({
             <div className="text-gray2 text-caption">{lastSendAt}</div>
           )}
         </div>
-        <div className="text-body text-maindark">{lastMessage}</div>
+        <div className="text-body text-maindark">{truncatedMessage}</div>
       </div>
     </div>
   )