사이드바 접기 기능 추가

common/shell/AppSidebar.tsx

@@ -1,3 +1,4 @@
+import { Menu, SquareMenu } from "lucide-react";
 import type { ComponentType, ReactNode } from "react";
 import { shellLayoutClasses } from "./layout";
 
@@ -14,9 +15,13 @@ export type ShellSidebarNavItem = {
 type ShellSidebarProps = {
   brandLabel: string;
   brandTitle: string;
-  brandIcon: ReactNode;
+  brandIcon?: ReactNode;
   navContent: ReactNode;
   footerContent: ReactNode;
+  collapsed?: boolean;
+  onToggleCollapsed?: () => void;
+  collapseLabel?: string;
+  expandLabel?: string;
 };
 
 export function AppSidebar({
@@ -25,14 +30,57 @@ export function AppSidebar({
   brandIcon,
   navContent,
   footerContent,
+  collapsed = false,
+  onToggleCollapsed,
+  collapseLabel = "Collapse sidebar",
+  expandLabel = "Expand sidebar",
 }: ShellSidebarProps) {
   return (
-    <aside className={shellLayoutClasses.aside}>
+    <aside
+      className={
+        collapsed ? shellLayoutClasses.asideCollapsed : shellLayoutClasses.aside
+      }
+    >
       <div>
-        <div className={shellLayoutClasses.brandSection}>
-          <div className={shellLayoutClasses.brandWrap}>
-            <div className={shellLayoutClasses.brandIcon}>{brandIcon}</div>
-            <div>
+        <div
+          className={
+            collapsed
+              ? shellLayoutClasses.brandSectionCollapsed
+              : shellLayoutClasses.brandSection
+          }
+        >
+          <div
+            className={
+              collapsed
+                ? shellLayoutClasses.brandWrapCollapsed
+                : shellLayoutClasses.brandWrap
+            }
+          >
+            {onToggleCollapsed ? (
+              <button
+                type="button"
+                onClick={onToggleCollapsed}
+                className="grid h-11 w-11 place-items-center rounded-xl border border-border bg-primary/15 text-primary shadow-[0_12px_30px_rgba(54,211,153,0.22)] transition hover:bg-primary/20"
+                aria-label={collapsed ? expandLabel : collapseLabel}
+                title={collapsed ? expandLabel : collapseLabel}
+              >
+                <span className="sr-only">
+                  {collapsed ? expandLabel : collapseLabel}
+                </span>
+                {collapsed ? <Menu size={20} /> : <SquareMenu size={20} />}
+              </button>
+            ) : (
+              <div
+                className={
+                  collapsed
+                    ? shellLayoutClasses.brandIconCollapsed
+                    : shellLayoutClasses.brandIcon
+                }
+              >
+                {brandIcon}
+              </div>
+            )}
+            <div className={collapsed ? "hidden" : "block"}>
               <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">
                 {brandLabel}
               </p>
@@ -40,7 +88,15 @@ export function AppSidebar({
             </div>
           </div>
         </div>
-        <nav className={shellLayoutClasses.navWrap}>{navContent}</nav>
+        <nav
+          className={
+            collapsed
+              ? shellLayoutClasses.navWrapCollapsed
+              : shellLayoutClasses.navWrap
+          }
+        >
+          {navContent}
+        </nav>
       </div>
 
       <div>{footerContent}</div>