사이드바 스타일 수정 및 배치

src/frontend/apps/web/app/(main)/[stockSlug]/page.tsx

@@ -21,7 +21,7 @@ export default function StockDetailsPage({ params }) {
 
   return (
     <div className="flex py-6 px-[30px] h-full min-w-0 min-h-0">
-      <div className="pr-2 basis-[45vw] flex flex-col min-w-0">
+      <div className="pr-2 basis-[45%] flex flex-col min-w-0">
         <Link
           href={'/'}
           className="w-fit"

src/frontend/apps/web/src/features/chat/ui/chat-container.tsx

@@ -1,16 +1,17 @@
+import { SidebarInset, SidebarProvider } from '@workspace/ui/components';
 import ChatHeader from './chat-header';
 import ChatSection from './chat-section';
+import { SidebarContainer } from '@/src/shared/components/sidebar';
 
 const ChatContainer = () => {
   return (
-    <div className="flex w-full h-full bg-white">
-      <aside className="w-44 h-full bg-gray-400 flex-shrink-0">sidebar</aside>
-
-      <div className="flex flex-col min-w-0 min-h-0 w-full h-full">
+    <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 />
         <ChatSection />
-      </div>
-    </div>
+      </SidebarInset>
+    </SidebarProvider>
   );
 };
 

src/frontend/apps/web/src/features/chat/ui/chat-header.tsx

@@ -1,5 +1,12 @@
+import { SidebarTrigger } from '@workspace/ui/components';
+
 const ChatHeader = () => {
-  return <header className="h-[54px] w-full flex items-center justify-between px-2.5 py-[13px] bg-slate-300">123</header>;
+  return (
+    <header className="h-[54px] w-full flex items-center justify-between px-2.5 py-[13px] bg-slate-300">
+      <SidebarTrigger />
+      123
+    </header>
+  );
 };
 
 export default ChatHeader;

src/frontend/apps/web/src/shared/components/sidebar/index.ts

@@ -0,0 +1 @@
+export { default as SidebarContainer } from './ui/sidebar-container';

src/frontend/apps/web/src/shared/components/sidebar/ui/sidebar-container.tsx

@@ -0,0 +1,93 @@
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@workspace/ui/components';
+import { ChevronRight } from 'lucide-react';
+
+const SidebarContainer = () => {
+  const data = {
+    navMain: [
+      {
+        title: '참여한 채널',
+        items: [
+          {
+            title: 'one',
+            url: '#',
+          },
+          {
+            title: 'two',
+            url: '#',
+            isActive: true,
+          },
+        ],
+      },
+      {
+        title: '전체 채널',
+        items: [
+          {
+            title: 'three',
+            url: '#',
+          },
+          {
+            title: 'four',
+            url: '#',
+          },
+        ],
+      },
+    ],
+  };
+  return (
+    <Sidebar>
+      <SidebarHeader className="font-bold text-xl pt-4">#WSName</SidebarHeader>
+      <SidebarContent className="gap-0">
+        {data.navMain.map((item) => (
+          <Collapsible
+            key={item.title}
+            title={item.title}
+            defaultOpen
+            className="group/collapsible"
+          >
+            <SidebarGroup>
+              <SidebarGroupLabel
+                asChild
+                className="group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+              >
+                <CollapsibleTrigger>
+                  {item.title}
+                  <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                </CollapsibleTrigger>
+              </SidebarGroupLabel>
+              <CollapsibleContent>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    {item.items.map((item) => (
+                      <SidebarMenuItem key={item.title}>
+                        <SidebarMenuButton
+                          asChild
+                          isActive={item.isActive}
+                        >
+                          <a href={item.url}>{item.title}</a>
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    ))}
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </CollapsibleContent>
+            </SidebarGroup>
+          </Collapsible>
+        ))}
+      </SidebarContent>
+    </Sidebar>
+  );
+};
+export default SidebarContainer;