From 25abb149e6892586b614eef80dea70402601e468 Mon Sep 17 00:00:00 2001
From: wooktori <jjun9503@gmail.com>
Date: Tue, 16 Dec 2025 10:14:52 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20chat=20=ED=83=AD=20UI=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/pages/message/chat/index.tsx | 80 ++++++++++++++++++++-
 1 file changed, 79 insertions(+), 1 deletion(-)

diff --git a/src/components/pages/message/chat/index.tsx b/src/components/pages/message/chat/index.tsx
index dc5cb065..ea2e51d9 100644
--- a/src/components/pages/message/chat/index.tsx
+++ b/src/components/pages/message/chat/index.tsx
@@ -1,3 +1,81 @@
+'use client';
+import Image from 'next/image';
+
+import { DEFAULT_PROFILE_IMAGE } from 'constants/default-images';
+
+import { cn } from '@/lib/utils';
+
+const dummy = [
+  {
+    id: 1,
+    name: '토끼조아',
+    message: '안녕하세요. 저는 토끼조아입니다 반가워요 혹시 어디 사시나요?',
+    messageCount: 8,
+  },
+  {
+    id: 2,
+    name: '바다소년',
+    message: '클라이밍 모임 하시나요?',
+    messageCount: 12,
+  },
+  {
+    id: 3,
+    name: '흰둥이',
+    message: '월월',
+    messageCount: 1,
+  },
+  {
+    id: 4,
+    name: '여행자',
+    message: '안녕하세요 여행자입니다.',
+    messageCount: 0,
+  },
+  {
+    id: 5,
+    name: '한별',
+    message: '고생하셨습니다',
+    messageCount: 0,
+  },
+];
+
 export const Chat = () => {
-  return <>채팅 컴포넌트</>;
+  return (
+    <ul className='flex flex-col'>
+      {dummy.map((item) => (
+        <li
+          key={item.id}
+          className='flex cursor-pointer items-center gap-3 bg-white p-5 transition hover:bg-gray-50'
+        >
+          {/* 프로필 이미지 */}
+          <div className='relative size-12 overflow-hidden rounded-full'>
+            <Image
+              className='object-cover'
+              alt='프로필 이미지'
+              fill
+              loading='eager'
+              src={DEFAULT_PROFILE_IMAGE}
+            />
+          </div>
+
+          {/* 텍스트 영역 */}
+          <div className='flex flex-1 flex-col'>
+            <span className='text-text-md-bold text-gray-800'>{item.name}</span>
+            <span className={cn('text-text-sm-medium line-clamp-1 text-gray-700')}>
+              {item.message}
+            </span>
+          </div>
+
+          {/* 안 읽은 메시지 수 */}
+          <span
+            className={cn(
+              'text-mono-white text-text-xs-bold rounded-full bg-red-500 px-2 py-0.5',
+              item.messageCount === 0 && 'opacity-0',
+            )}
+          >
+            {item.messageCount > 99 ? '99+' : item.messageCount}
+          </span>
+        </li>
+      ))}
+    </ul>
+  );
 };

From 79604a031de86f3fb2bf9c671900213cef5f3f76 Mon Sep 17 00:00:00 2001
From: wooktori <jjun9503@gmail.com>
Date: Tue, 16 Dec 2025 10:15:51 +0900
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20follow=20=ED=83=AD=20hover=EC=8B=9C?=
 =?UTF-8?q?=20=EC=83=89=EC=83=81=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/pages/message/message-following-card/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pages/message/message-following-card/index.tsx b/src/components/pages/message/message-following-card/index.tsx
index 2b1e433b..abb872c4 100644
--- a/src/components/pages/message/message-following-card/index.tsx
+++ b/src/components/pages/message/message-following-card/index.tsx
@@ -29,7 +29,7 @@ export const FollowingCard = ({
   return (
     <div
       data-testid='following-card'
-      className='flex cursor-pointer items-center gap-3 bg-white p-5'
+      className='flex cursor-pointer items-center gap-3 bg-white p-5 hover:bg-gray-50'
       onClick={handleClick}
     >
       <div className='relative size-12 overflow-hidden rounded-full'>