From cf49a6e7423aeca185e3309473f509cd8d49afa2 Mon Sep 17 00:00:00 2001
From: KimKyuHoi <k546kh@gmail.com>
Date: Tue, 4 Feb 2025 15:43:54 +0900
Subject: [PATCH 1/8] =?UTF-8?q?#71=20feat(fe):=20=EC=B1=84=ED=8C=85=20?=
 =?UTF-8?q?=EB=82=B4=20=EA=B3=B5=EC=9A=A9=20=ED=97=A4=EB=8D=94=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/frontend/apps/web/src/features/chat/ui/header.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 src/frontend/apps/web/src/features/chat/ui/header.tsx

diff --git a/src/frontend/apps/web/src/features/chat/ui/header.tsx b/src/frontend/apps/web/src/features/chat/ui/header.tsx
new file mode 100644
index 00000000..b404446a
--- /dev/null
+++ b/src/frontend/apps/web/src/features/chat/ui/header.tsx
@@ -0,0 +1,9 @@
+const Header = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <header className="h-[54px] w-full flex items-center justify-between px-4 bg-white border-b border-gray-200">
+      {children}
+    </header>
+  );
+};
+
+export default Header;

From d1b6542697ca4843442340ba0223a2efb84300d7 Mon Sep 17 00:00:00 2001
From: KimKyuHoi <k546kh@gmail.com>
Date: Tue, 4 Feb 2025 15:44:32 +0900
Subject: [PATCH 2/8] =?UTF-8?q?#71=20feat(fe):=20=EC=B1=84=ED=8C=85?=
 =?UTF-8?q?=EB=82=B4=20stockSlug=20=EC=97=B0=EA=B2=B0=20=EB=B0=8F=20?=
 =?UTF-8?q?=ED=97=A4=EB=8D=94=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../apps/web/app/(main)/[stockSlug]/page.tsx    |  4 ++--
 .../web/src/features/chat/ui/chat-container.tsx |  7 ++++---
 .../web/src/features/chat/ui/chat-header.tsx    | 17 ++++++++++++-----
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/frontend/apps/web/app/(main)/[stockSlug]/page.tsx b/src/frontend/apps/web/app/(main)/[stockSlug]/page.tsx
index d5c88713..6595a5fe 100644
--- a/src/frontend/apps/web/app/(main)/[stockSlug]/page.tsx
+++ b/src/frontend/apps/web/app/(main)/[stockSlug]/page.tsx
@@ -17,7 +17,7 @@ export async function generateMetadata({ params }) {
 
 export default function StockDetailsPage({ params }) {
   const { stockSlug } = params;
-  // console.log(1, params);
+  // console.log(1, stockSlug);
 
   return (
     <div className="flex py-6 px-[30px] h-full min-w-0 min-h-0">
@@ -32,7 +32,7 @@ export default function StockDetailsPage({ params }) {
       </div>
 
       <div className="pl-2 basis-[55%] flex-shrink-0 min-w-0">
-        <ChatContainer />
+        <ChatContainer stockSlug={stockSlug} />
       </div>
     </div>
   );
diff --git a/src/frontend/apps/web/src/features/chat/ui/chat-container.tsx b/src/frontend/apps/web/src/features/chat/ui/chat-container.tsx
index afae9a61..d2592860 100644
--- a/src/frontend/apps/web/src/features/chat/ui/chat-container.tsx
+++ b/src/frontend/apps/web/src/features/chat/ui/chat-container.tsx
@@ -1,14 +1,15 @@
 import { SidebarInset, SidebarProvider } from '@workspace/ui/components';
+import { SidebarContainer } from '@/src/shared/components/sidebar';
+
 import ChatHeader from './chat-header';
 import ChatSection from './chat-section';
-import { SidebarContainer } from '@/src/shared/components/sidebar';
 
-const ChatContainer = () => {
+const ChatContainer = ({ stockSlug }: { stockSlug: string }) => {
   return (
     <SidebarProvider className="flex w-full h-full min-w-0 min-h-0 border  rounded-md overflow-hidden">
       <SidebarContainer />
       <SidebarInset className="flex flex-col min-w-0 min-h-0 w-full h-full">
-        <ChatHeader />
+        <ChatHeader stockSlug={stockSlug} />
         <ChatSection />
       </SidebarInset>
     </SidebarProvider>
diff --git a/src/frontend/apps/web/src/features/chat/ui/chat-header.tsx b/src/frontend/apps/web/src/features/chat/ui/chat-header.tsx
index a6f02f27..8a870d43 100644
--- a/src/frontend/apps/web/src/features/chat/ui/chat-header.tsx
+++ b/src/frontend/apps/web/src/features/chat/ui/chat-header.tsx
@@ -1,11 +1,18 @@
 import { SidebarTrigger } from '@workspace/ui/components';
+import { Headset } from 'lucide-react';
+import Header from './header';
 
-const ChatHeader = () => {
+const ChatHeader = ({ stockSlug }: { stockSlug: string }) => {
   return (
-    <header className="h-[54px] w-full flex items-center justify-between px-2.5 py-[13px] bg-slate-300">
-      <SidebarTrigger />
-      123
-    </header>
+    <Header>
+      <div className="flex items-center gap-2">
+        <SidebarTrigger />
+        <span className="font-semibold">{stockSlug}</span>
+      </div>
+      <div className="flex items-center gap-2">
+        <Headset size={20} />
+      </div>
+    </Header>
   );
 };
 

From cc4002b091087419a66e2db2d37b38d7d8b6527b Mon Sep 17 00:00:00 2001
From: KimKyuHoi <k546kh@gmail.com>
Date: Tue, 4 Feb 2025 15:46:51 +0900
Subject: [PATCH 3/8] =?UTF-8?q?#71=20feat(fe):=20thread=20panel=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web/src/features/chat/ui/thread-header.tsx   | 16 ++++++++++++++++
 .../web/src/features/chat/ui/thread-panel.tsx    | 12 ++++++++++++
 .../web/src/features/chat/ui/thread-section.tsx  | 14 ++++++++++++++
 3 files changed, 42 insertions(+)
 create mode 100644 src/frontend/apps/web/src/features/chat/ui/thread-header.tsx
 create mode 100644 src/frontend/apps/web/src/features/chat/ui/thread-panel.tsx
 create mode 100644 src/frontend/apps/web/src/features/chat/ui/thread-section.tsx

diff --git a/src/frontend/apps/web/src/features/chat/ui/thread-header.tsx b/src/frontend/apps/web/src/features/chat/ui/thread-header.tsx
new file mode 100644
index 00000000..9bce8ab9
--- /dev/null
+++ b/src/frontend/apps/web/src/features/chat/ui/thread-header.tsx
@@ -0,0 +1,16 @@
+import Header from './header';
+
+import { X } from 'lucide-react';
+
+const ThreadHeader = ({ onClose }: { onClose: (value: boolean) => void }) => {
+  return (
+    <Header>
+      <span className="font-semibold text-gray-800">스레드</span>
+      <button onClick={() => onClose(false)}>
+        <X size={20} />
+      </button>
+    </Header>
+  );
+};
+
+export default ThreadHeader;
diff --git a/src/frontend/apps/web/src/features/chat/ui/thread-panel.tsx b/src/frontend/apps/web/src/features/chat/ui/thread-panel.tsx
new file mode 100644
index 00000000..71485a44
--- /dev/null
+++ b/src/frontend/apps/web/src/features/chat/ui/thread-panel.tsx
@@ -0,0 +1,12 @@
+import ThreadHeader from './thread-header';
+import ThreadSection from './thread-section';
+
+const ThreadPanel = ({ onClose }: { onClose: (value: boolean) => void }) => {
+  return (
+    <div className="z-50 maw-w-[906px] w-full h-full flex flex-col min-w-0 min-h-0">
+      <ThreadHeader onClose={onClose} /> <ThreadSection />
+    </div>
+  );
+};
+
+export default ThreadPanel;
diff --git a/src/frontend/apps/web/src/features/chat/ui/thread-section.tsx b/src/frontend/apps/web/src/features/chat/ui/thread-section.tsx
new file mode 100644
index 00000000..63d255fa
--- /dev/null
+++ b/src/frontend/apps/web/src/features/chat/ui/thread-section.tsx
@@ -0,0 +1,14 @@
+import ChatTextArea from './chat-textarea';
+
+const ThreadSection = () => {
+  return (
+    <div className="flex flex-col w-full h-full">
+      <div className="flex flex-1 flex-col w-full h-full overflow-y-auto"></div>
+      <div className="p-4">
+        <ChatTextArea />
+      </div>
+    </div>
+  );
+};
+
+export default ThreadSection;

From 8e6ead904b3d53976d52127c986a535108adae23 Mon Sep 17 00:00:00 2001
From: KimKyuHoi <k546kh@gmail.com>
Date: Tue, 4 Feb 2025 15:47:37 +0900
Subject: [PATCH 4/8] =?UTF-8?q?#71=20feat(fe):=20avatarlist=20=ED=98=B8?=
 =?UTF-8?q?=EB=B2=84=EB=A7=81=20=EC=8B=9C=20=EC=8A=A4=EB=A0=88=EB=93=9C=20?=
 =?UTF-8?q?=EA=B8=80=20=EB=B3=B4=EC=9D=B4=EA=B8=B0=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web/src/features/chat/ui/avatarlist.tsx   | 61 +++++++++++++------
 1 file changed, 43 insertions(+), 18 deletions(-)

diff --git a/src/frontend/apps/web/src/features/chat/ui/avatarlist.tsx b/src/frontend/apps/web/src/features/chat/ui/avatarlist.tsx
index 7e411795..28047b41 100644
--- a/src/frontend/apps/web/src/features/chat/ui/avatarlist.tsx
+++ b/src/frontend/apps/web/src/features/chat/ui/avatarlist.tsx
@@ -1,8 +1,14 @@
+'use client';
+
+import { useState } from 'react';
 import { Avatar, AvatarImage, AvatarFallback } from '@workspace/ui/components';
 
 import type { ChatContentWithAvatarsProps } from './chat-content';
 
-const AvatarList = ({ avatarUrls }: ChatContentWithAvatarsProps) => {
+const AvatarList = ({
+  avatarUrls,
+  setIsThreadOpen,
+}: ChatContentWithAvatarsProps) => {
   if (!avatarUrls) {
     avatarUrls = [
       'https://github.com/shadcn.png',
@@ -19,24 +25,43 @@ const AvatarList = ({ avatarUrls }: ChatContentWithAvatarsProps) => {
   const displayedAvatars = avatarUrls.slice(0, 5);
   const remainingCount = avatarUrls.length - displayedAvatars.length;
 
-  return (
-    <div className="px-1 py-1 mb-0.5 flex gap-1 items-center">
-      {displayedAvatars.map((url, index) => (
-        <Avatar
-          variant="square"
-          size="sm"
-          key={index}
-          className={index === 4 && remainingCount > 0 ? 'relative' : ''}
-        >
-          <AvatarImage src={url} />
-          <AvatarFallback>profile</AvatarFallback>
+  const [isHovered, setIsHovered] = useState(false);
 
-          {index === 4 && remainingCount > 0 && (
-            <div className="absolute top-0 right-0 w-6 h-6 bg-black-100 flex items-center justify-center text-white text-xs">+{remainingCount}</div>
-          )}
-        </Avatar>
-      ))}
-      {avatarUrls.length > 0 && <div className="ml-1 text-sm text-thread cursor-pointer">{avatarUrls.length}개의 댓글</div>}
+  return (
+    <div
+      className="px-1 py-1 pr-40 mb-0.5 flex gap-1 items-center justify-between hover:border-ghost hover:border hover:shadow-md cursor-pointer"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      onClick={() => setIsThreadOpen(true)}
+    >
+      <div className="flex items-center gap-1">
+        {displayedAvatars.map((url, index) => (
+          <Avatar
+            variant="square"
+            size="sm"
+            key={index}
+            className={index === 4 && remainingCount > 0 ? 'relative' : ''}
+          >
+            <AvatarImage src={url} />
+            <AvatarFallback>profile</AvatarFallback>
+            {index === 4 && remainingCount > 0 && (
+              <div className="absolute top-0 right-0 w-6 h-6 bg-black-100 flex items-center justify-center text-white text-xs">
+                +{remainingCount}
+              </div>
+            )}
+          </Avatar>
+        ))}
+        {avatarUrls.length > 0 && (
+          <div className="ml-1 text-sm text-thread">
+            {avatarUrls.length}개의 댓글
+          </div>
+        )}
+      </div>
+      <div
+        className={`ml-2 text-sm transition-all duration-300 ease-in-out ${isHovered ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-2'}`}
+      >
+        스레드 보기
+      </div>
     </div>
   );
 };

From 259b636feb0b918fee7c5802ee8ad313b0d43e82 Mon Sep 17 00:00:00 2001
From: KimKyuHoi <k546kh@gmail.com>
Date: Tue, 4 Feb 2025 15:47:58 +0900
Subject: [PATCH 5/8] =?UTF-8?q?#71=20feat(fe):=20=EC=8A=A4=EB=A0=88?=
 =?UTF-8?q?=EB=93=9C=20=EC=97=B4=EA=B8=B0=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../apps/web/src/features/chat/index.tsx      |  1 +
 .../web/src/features/chat/ui/chat-content.tsx | 13 ++++++---
 .../web/src/features/chat/ui/chat-section.tsx | 27 ++++++++++++++++---
 .../web/src/features/chat/ui/content-text.tsx | 13 +++++++--
 4 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/src/frontend/apps/web/src/features/chat/index.tsx b/src/frontend/apps/web/src/features/chat/index.tsx
index 1d699593..ff5ff4a1 100644
--- a/src/frontend/apps/web/src/features/chat/index.tsx
+++ b/src/frontend/apps/web/src/features/chat/index.tsx
@@ -1 +1,2 @@
 export { default as ChatContainer } from './ui/chat-container';
+export { default as ThreadContainer } from './ui/thread-panel';
diff --git a/src/frontend/apps/web/src/features/chat/ui/chat-content.tsx b/src/frontend/apps/web/src/features/chat/ui/chat-content.tsx
index 8035e0c6..0ffb8688 100644
--- a/src/frontend/apps/web/src/features/chat/ui/chat-content.tsx
+++ b/src/frontend/apps/web/src/features/chat/ui/chat-content.tsx
@@ -7,19 +7,26 @@ export type ChatContentProps = {
 
 export type ChatContentWithAvatarsProps = ChatContentProps & {
   avatarUrls?: string[];
+  setIsThreadOpen: (value: boolean) => void;
 };
 
-const ChatContent = ({ type = 'default', avatarUrls }: ChatContentWithAvatarsProps) => {
+const ChatContent = ({
+  type = 'live',
+  avatarUrls,
+  setIsThreadOpen,
+}: ChatContentWithAvatarsProps) => {
   const backgroundColor = type === 'live' ? 'bg-live' : 'bg-white';
-
   const hoverColor = type === 'default' ? 'hover:bg-chatboxHover' : '';
 
   return (
-    <div className={`flex w-full h-auto ${backgroundColor} pb-2 pl-5 pt-5 pr-6 gap-4 group relative ${hoverColor} transition-all duration-300`}>
+    <div
+      className={`flex w-full h-auto ${backgroundColor} pb-2 pl-5 pt-5 pr-6 gap-4 group relative ${hoverColor} transition-all duration-300`}
+    >
       <ContentAvatar type={type} />
       <ContentText
         type={type}
         avatarUrls={avatarUrls}
+        setIsThreadOpen={setIsThreadOpen}
       />
     </div>
   );
diff --git a/src/frontend/apps/web/src/features/chat/ui/chat-section.tsx b/src/frontend/apps/web/src/features/chat/ui/chat-section.tsx
index 2f53b0d4..cc425aaf 100644
--- a/src/frontend/apps/web/src/features/chat/ui/chat-section.tsx
+++ b/src/frontend/apps/web/src/features/chat/ui/chat-section.tsx
@@ -1,13 +1,32 @@
+'use client';
+
+import { useState } from 'react';
+
 import ChatContent from './chat-content';
 import ChatTextarea from './chat-textarea';
+import ThreadPanel from './thread-panel';
 
 const ChatSection = () => {
+  const [isThreadOpen, setIsThreadOpen] = useState(false);
+
   return (
-    <div className="flex flex-1 flex-col w-full h-full">
-      <div className="flex flex-1 flex-col w-full h-full overflow-y-auto">
-        <ChatContent />
+    <div className="relative flex flex-1 h-full">
+      {/* Main Chat Area */}
+      <div className="flex flex-col w-full h-full">
+        <div className="flex flex-1 flex-col w-full h-full overflow-y-auto">
+          <ChatContent setIsThreadOpen={setIsThreadOpen} />
+        </div>
+        <ChatTextarea />
+      </div>
+
+      {/* Thread Panel Overlay */}
+      <div
+        className={`absolute top-0 right-0 h-full w-full bg-white shadow-lg transform transition-transform duration-300 ease-in-out ${
+          isThreadOpen ? 'translate-x-0' : 'translate-x-full'
+        } w-96 z-50`}
+      >
+        {isThreadOpen && <ThreadPanel onClose={() => setIsThreadOpen(false)} />}
       </div>
-      <ChatTextarea />
     </div>
   );
 };
diff --git a/src/frontend/apps/web/src/features/chat/ui/content-text.tsx b/src/frontend/apps/web/src/features/chat/ui/content-text.tsx
index 0410ee51..c65cf230 100644
--- a/src/frontend/apps/web/src/features/chat/ui/content-text.tsx
+++ b/src/frontend/apps/web/src/features/chat/ui/content-text.tsx
@@ -3,7 +3,11 @@ import { Badge } from '@workspace/ui/components';
 import type { ChatContentWithAvatarsProps } from './chat-content';
 import AvatarList from './avatarlist';
 
-const ContentText = ({ type, avatarUrls }: ChatContentWithAvatarsProps) => {
+const ContentText = ({
+  type,
+  avatarUrls,
+  setIsThreadOpen,
+}: ChatContentWithAvatarsProps) => {
   return (
     <div className="flex flex-col ">
       <div className="flex flex-col gap-2">
@@ -21,7 +25,12 @@ const ContentText = ({ type, avatarUrls }: ChatContentWithAvatarsProps) => {
         </div>
         <div className="text-base">안녕하세요</div>
       </div>
-      <AvatarList avatarUrls={avatarUrls} />
+      <div onClick={() => setIsThreadOpen(true)}>
+        <AvatarList
+          avatarUrls={avatarUrls}
+          setIsThreadOpen={setIsThreadOpen}
+        />
+      </div>
     </div>
   );
 };

From 8007e603d4871856c9c957e4be42248092478512 Mon Sep 17 00:00:00 2001
From: KimKyuHoi <k546kh@gmail.com>
Date: Tue, 4 Feb 2025 16:05:09 +0900
Subject: [PATCH 6/8] =?UTF-8?q?#71=20feat(fe):=20chatting=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=8B=9D=20=ED=98=B8=EB=B2=84?=
 =?UTF-8?q?=ED=95=A0=20=EC=8B=9C=20=EB=B3=B4=EC=9D=B4=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web/src/features/chat/ui/chat-content.tsx | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/frontend/apps/web/src/features/chat/ui/chat-content.tsx b/src/frontend/apps/web/src/features/chat/ui/chat-content.tsx
index 0ffb8688..a4609bd1 100644
--- a/src/frontend/apps/web/src/features/chat/ui/chat-content.tsx
+++ b/src/frontend/apps/web/src/features/chat/ui/chat-content.tsx
@@ -1,6 +1,8 @@
 import ContentText from './content-text';
 import ContentAvatar from './content-avatar';
 
+import { MessageSquareText } from 'lucide-react';
+
 export type ChatContentProps = {
   type?: 'default' | 'live';
 };
@@ -23,11 +25,20 @@ const ChatContent = ({
       className={`flex w-full h-auto ${backgroundColor} pb-2 pl-5 pt-5 pr-6 gap-4 group relative ${hoverColor} transition-all duration-300`}
     >
       <ContentAvatar type={type} />
-      <ContentText
-        type={type}
-        avatarUrls={avatarUrls}
-        setIsThreadOpen={setIsThreadOpen}
-      />
+      <div className="flex w-full items-start justify-between">
+        <ContentText
+          type={type}
+          avatarUrls={avatarUrls}
+          setIsThreadOpen={setIsThreadOpen}
+        />
+        <div className="opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out">
+          <MessageSquareText
+            size="15"
+            className="cursor-pointer hover:text-gray-600"
+            onClick={() => setIsThreadOpen(true)}
+          />
+        </div>
+      </div>
     </div>
   );
 };

From 111cb5b111823427c47ccf08c06d81e76cda8fed Mon Sep 17 00:00:00 2001
From: KimKyuHoi <k546kh@gmail.com>
Date: Wed, 5 Feb 2025 00:26:17 +0900
Subject: [PATCH 7/8] =?UTF-8?q?#71=20fix(fe):=20=EC=BD=94=EB=93=9C?=
 =?UTF-8?q?=EB=A6=AC=EB=B7=B0=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../apps/web/src/features/chat/ui/avatarlist.tsx         | 2 +-
 .../apps/web/src/features/chat/ui/chat-header.tsx        | 9 +++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/frontend/apps/web/src/features/chat/ui/avatarlist.tsx b/src/frontend/apps/web/src/features/chat/ui/avatarlist.tsx
index 28047b41..5943c641 100644
--- a/src/frontend/apps/web/src/features/chat/ui/avatarlist.tsx
+++ b/src/frontend/apps/web/src/features/chat/ui/avatarlist.tsx
@@ -29,7 +29,7 @@ const AvatarList = ({
 
   return (
     <div
-      className="px-1 py-1 pr-40 mb-0.5 flex gap-1 items-center justify-between hover:border-ghost hover:border hover:shadow-md cursor-pointer"
+      className="px-1 py-1 pr-40 mb-0.5 flex gap-1 items-center justify-between hover:shadow-md cursor-pointer"
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
       onClick={() => setIsThreadOpen(true)}
diff --git a/src/frontend/apps/web/src/features/chat/ui/chat-header.tsx b/src/frontend/apps/web/src/features/chat/ui/chat-header.tsx
index 8a870d43..b9471680 100644
--- a/src/frontend/apps/web/src/features/chat/ui/chat-header.tsx
+++ b/src/frontend/apps/web/src/features/chat/ui/chat-header.tsx
@@ -1,4 +1,4 @@
-import { SidebarTrigger } from '@workspace/ui/components';
+import { Button, SidebarTrigger } from '@workspace/ui/components';
 import { Headset } from 'lucide-react';
 import Header from './header';
 
@@ -10,7 +10,12 @@ const ChatHeader = ({ stockSlug }: { stockSlug: string }) => {
         <span className="font-semibold">{stockSlug}</span>
       </div>
       <div className="flex items-center gap-2">
-        <Headset size={20} />
+        <Button
+          variant="default"
+          size="sm"
+        >
+          <Headset size={20} />
+        </Button>
       </div>
     </Header>
   );

From 11854717b206b86b8677c372010fe5e07eabebda Mon Sep 17 00:00:00 2001
From: KimKyuHoi <k546kh@gmail.com>
Date: Wed, 5 Feb 2025 13:44:52 +0900
Subject: [PATCH 8/8] =?UTF-8?q?#71=20fix(fe):=20=EC=95=A0=EB=8B=88?=
 =?UTF-8?q?=EB=A9=94=EC=9D=B4=EC=85=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/apps/web/src/features/chat/ui/avatarlist.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/apps/web/src/features/chat/ui/avatarlist.tsx b/src/frontend/apps/web/src/features/chat/ui/avatarlist.tsx
index 5943c641..9a197c01 100644
--- a/src/frontend/apps/web/src/features/chat/ui/avatarlist.tsx
+++ b/src/frontend/apps/web/src/features/chat/ui/avatarlist.tsx
@@ -58,7 +58,7 @@ const AvatarList = ({
         )}
       </div>
       <div
-        className={`ml-2 text-sm transition-all duration-300 ease-in-out ${isHovered ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-2'}`}
+        className={`ml-2 text-sm transition-all duration-300 ease-in-out ${isHovered ? 'opacity-100' : 'opacity-0'}`}
       >
         스레드 보기
       </div>