사이드바 디자인 개선

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

@@ -1,13 +1,13 @@
 import { SidebarInset, SidebarProvider } from '@workspace/ui/components';
-import { SidebarContainer } from '@/src/shared/components/sidebar';
+import { SidebarContainer } from '@/src/features/workspace';
 
 import ChatHeader from './chat-header';
 import ChatSection from './chat-section';
 
 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 />
+      <SidebarContainer stockSlug={stockSlug} />
       <SidebarInset className="flex flex-col min-w-0 min-h-0 w-full h-full">
         <ChatHeader stockSlug={stockSlug} />
         <ChatSection />

src/frontend/apps/web/src/features/workspace/index.tsx

@@ -0,0 +1 @@
+export * from './ui';

src/frontend/apps/web/src/features/workspace/ui/index.ts

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

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

@@ -14,7 +14,7 @@ import {
 } from '@workspace/ui/components';
 import { ChevronRight } from 'lucide-react';
 
-const SidebarContainer = () => {
+const SidebarContainer = ({ stockSlug }: { stockSlug: string }) => {
   const data = {
     navMain: [
       {
@@ -48,8 +48,17 @@ const SidebarContainer = () => {
   };
   return (
     <Sidebar>
-      <SidebarHeader className="font-bold text-xl pt-4">#WSName</SidebarHeader>
-      <SidebarContent className="gap-0">
+      <SidebarHeader className="px-4 py-3.5 min-w-0 max-w-full border-b border-white/10">
+        <div className="flex flex-col gap-1">
+          <div className="text-[11px] text-white/40 font-medium tracking-wide uppercase">
+            Workspace
+          </div>
+          <div className="truncate text-white/95 font-bold text-[18px] tracking-tight">
+            {stockSlug}
+          </div>
+        </div>
+      </SidebarHeader>
+      <SidebarContent className="gap-1 pt-2">
         {data.navMain.map((item) => (
           <Collapsible
             key={item.title}
@@ -60,11 +69,11 @@ const SidebarContainer = () => {
             <SidebarGroup>
               <SidebarGroupLabel
                 asChild
-                className="group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                className="group/label text-sm text-white/90 hover:bg-white/10 hover:text-white transition-colors px-4 py-2"
               >
                 <CollapsibleTrigger>
                   {item.title}
-                  <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                  <ChevronRight className="ml-auto h-4 w-4 transition-transform group-data-[state=open]/collapsible:rotate-90 opacity-70 group-hover/label:opacity-100" />
                 </CollapsibleTrigger>
               </SidebarGroupLabel>
               <CollapsibleContent>
@@ -75,6 +84,7 @@ const SidebarContainer = () => {
                         <SidebarMenuButton
                           asChild
                           isActive={item.isActive}
+                          className="px-8 py-1.5 text-sm text-white/80 hover:text-white transition-colors"
                         >
                           <a href={item.url}>{item.title}</a>
                         </SidebarMenuButton>

src/frontend/packages/ui/src/components/Sidebar/sidebar.tsx

@@ -522,17 +522,18 @@ const SidebarMenuItem = React.forwardRef<
 SidebarMenuItem.displayName = 'SidebarMenuItem';
 
 const sidebarMenuButtonVariants = cva(
-  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm font-medium outline-none ring-sidebar-ring transition-all duration-200 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-active data-[active=true]:text-sidebar-active-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
   {
     variants: {
       variant: {
-        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        default:
+          'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:translate-x-1',
         outline:
-          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+          'bg-background shadow-sm hover:shadow-md transition-shadow duration-200 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
       },
       size: {
-        default: 'h-8 text-sm',
-        sm: 'h-7 text-xs',
+        default: 'h-9 text-sm',
+        sm: 'h-8 text-xs',
         lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',
       },
     },

src/frontend/packages/ui/src/styles/globals.css

@@ -29,14 +29,23 @@
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
+    /* 메인 사이드바 스타일링 */
+    --sidebar-background: 24 85% 60%;
+    --sidebar-foreground: 0 0% 100%;
+    --sidebar-primary: 0 0% 100%;
+    --sidebar-primary-foreground: 24 85% 60%;
+
+    /* 메뉴 아이템 스타일링 */
+    --sidebar-accent: 24 85% 55%;
+    --sidebar-accent-foreground: 0 0% 100%;
+
+    /* 구분선과 테두리 */
+    --sidebar-border: 0 0% 100% / 0.1;
+    --sidebar-ring: 0 0% 100%;
+
+    /* 활성 상태 스타일링 */
+    --sidebar-active: 0 0% 100% / 0.2;
+    --sidebar-active-foreground: 0 0% 100%;
   }
 
   .dark {
@@ -64,14 +73,23 @@
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
+    /* 다크모드 스타일링 */
+    --sidebar-background: 24 80% 50%;
+    --sidebar-foreground: 0 0% 100%;
+    --sidebar-primary: 0 0% 100%;
+    --sidebar-primary-foreground: 24 80% 50%;
+
+    /* 다크모드 메뉴 아이템 */
+    --sidebar-accent: 24 80% 45%;
+    --sidebar-accent-foreground: 0 0% 100%;
+
+    /* 다크모드 구분선과 테두리 */
+    --sidebar-border: 0 0% 100% / 0.1;
+    --sidebar-ring: 0 0% 100%;
+
+    /* 다크모드 활성 상태 */
+    --sidebar-active: 0 0% 100% / 0.2;
+    --sidebar-active-foreground: 0 0% 100%;
   }
 }
 

src/frontend/packages/ui/tailwind.config.ts

@@ -4,7 +4,11 @@ import { fontFamily } from 'tailwindcss/defaultTheme';
 
 const config = {
   darkMode: ['class'],
-  content: ['app/**/*.{ts,tsx}', 'src/**/*.{ts,tsx}', '../../packages/ui/src/components/**/*.{ts,tsx}'],
+  content: [
+    'app/**/*.{ts,tsx}',
+    'src/**/*.{ts,tsx}',
+    '../../packages/ui/src/components/**/*.{ts,tsx}',
+  ],
   theme: {
     extend: {
       fontFamily: {