사이드바 접기 기능 추가

adminfront/src/components/layout/AppLayout.test.tsx

@@ -127,6 +127,22 @@ describe("admin AppLayout", () => {
     expect(worksmobileIcon.querySelector('path[fill="white"]')).toBeNull();
   });
 
+  it("toggles the sidebar and persists the collapsed state", async () => {
+    renderLayout();
+
+    const collapseButton = await screen.findByRole("button", {
+      name: "사이드바 접기",
+    });
+    fireEvent.click(collapseButton);
+
+    expect(window.localStorage.getItem("baron_shell_sidebar_collapsed")).toBe(
+      "true",
+    );
+    expect(
+      screen.getByRole("button", { name: "사이드바 펼치기" }),
+    ).toBeInTheDocument();
+  });
+
   it("opens profile menu, navigates, toggles theme/session, and logs out", async () => {
     renderLayout();
 

adminfront/src/components/layout/AppLayout.tsx

@@ -26,11 +26,13 @@ import {
   buildShellProfileSummary,
   buildShellSessionStatus,
   readShellSessionExpiryEnabled,
+  readShellSidebarCollapsed,
   readShellTheme,
   type ShellSidebarNavItem,
   type ShellTranslator,
   shellLayoutClasses,
   writeShellSessionExpiryEnabled,
+  writeShellSidebarCollapsed,
 } from "../../../../common/shell";
 import { canAccessWorksmobile } from "../../features/tenants/routes/worksmobileAccess";
 import { buildAuthenticatedOrgChartUrl } from "../../features/users/orgChartPicker";
@@ -165,6 +167,9 @@ function AppLayout() {
   const isDevelopmentRuntime = import.meta.env.MODE === "development";
   const [theme, setTheme] = useState<"light" | "dark">(readShellTheme);
   const [isProfileOpen, setIsProfileOpen] = useState(false);
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(() =>
+    readShellSidebarCollapsed(false),
+  );
   const [isSessionExpiryEnabled, setIsSessionExpiryEnabled] = useState(() =>
     readShellSessionExpiryEnabled(!isDevelopmentRuntime),
   );
@@ -508,10 +513,18 @@ function AppLayout() {
       return next;
     });
   };
+  const handleSidebarToggle = () => {
+    setIsSidebarCollapsed((prev) => {
+      const next = !prev;
+      writeShellSidebarCollapsed(next);
+      return next;
+    });
+  };
   const sidebarNavContent = (
     <div className={shellLayoutClasses.navList}>
       {navItems.map((item) => {
         const { labelKey, labelFallback, to, icon: Icon, isExternal } = item;
+        const label = t(labelKey, labelFallback);
 
         if (isExternal) {
           return (
@@ -522,11 +535,18 @@ function AppLayout() {
               rel="noopener noreferrer"
               className={[
                 shellLayoutClasses.navItemBase,
+                isSidebarCollapsed
+                  ? shellLayoutClasses.navItemBaseCollapsed
+                  : "",
                 shellLayoutClasses.navItemIdle,
               ].join(" ")}
+              title={label}
+              aria-label={label}
             >
               <Icon size={18} />
-              <span>{t(labelKey, labelFallback)}</span>
+              <span className={isSidebarCollapsed ? "sr-only" : ""}>
+                {label}
+              </span>
             </a>
           );
         }
@@ -539,6 +559,9 @@ function AppLayout() {
             className={({ isActive }) =>
               [
                 shellLayoutClasses.navItemBase,
+                isSidebarCollapsed
+                  ? shellLayoutClasses.navItemBaseCollapsed
+                  : "",
                 item.isActive !== undefined
                   ? item.isActive
                     ? shellLayoutClasses.navItemActive
@@ -548,9 +571,11 @@ function AppLayout() {
                     : shellLayoutClasses.navItemIdle,
               ].join(" ")
             }
+            title={label}
+            aria-label={label}
           >
             <Icon size={18} />
-            <span>{t(labelKey, labelFallback)}</span>
+            <span className={isSidebarCollapsed ? "sr-only" : ""}>{label}</span>
           </NavLink>
         );
       })}
@@ -561,10 +586,17 @@ function AppLayout() {
       <button
         type="button"
         onClick={handleLogout}
-        className={shellLayoutClasses.logoutButton}
+        className={
+          isSidebarCollapsed
+            ? shellLayoutClasses.logoutButtonCollapsed
+            : shellLayoutClasses.logoutButton
+        }
+        title={t("ui.shell.nav.logout", "Logout")}
       >
         <LogOut size={18} />
-        <span>{t("ui.shell.nav.logout", "Logout")}</span>
+        <span className={isSidebarCollapsed ? "sr-only" : ""}>
+          {t("ui.shell.nav.logout", "Logout")}
+        </span>
       </button>
     </div>
   );
@@ -578,13 +610,23 @@ function AppLayout() {
   }
 
   return (
-    <div className={shellLayoutClasses.root}>
+    <div
+      className={
+        isSidebarCollapsed
+          ? shellLayoutClasses.rootCollapsed
+          : shellLayoutClasses.root
+      }
+    >
       <AppSidebar
         brandLabel={t("ui.admin.brand", "Baron 로그인")}
         brandTitle={t("ui.admin.title", "Admin Control")}
         brandIcon={<ShieldHalf size={20} />}
         navContent={sidebarNavContent}
         footerContent={sidebarFooterContent}
+        collapsed={isSidebarCollapsed}
+        onToggleCollapsed={handleSidebarToggle}
+        collapseLabel={t("ui.shell.sidebar.collapse", "사이드바 접기")}
+        expandLabel={t("ui.shell.sidebar.expand", "사이드바 펼치기")}
       />
 
       <div className={shellLayoutClasses.contentWide}>

adminfront/src/locales/en.toml

@@ -1541,6 +1541,10 @@ unknown_name = "Unknown User"
 logout = "Logout"
 profile = "My Profile"
 
+[ui.shell.sidebar]
+collapse = "Collapse sidebar"
+expand = "Expand sidebar"
+
 [ui.shell.role]
 rp_admin = "Service Administrator (RP Admin)"
 super_admin = "System Administrator (Super Admin)"

adminfront/src/locales/ko.toml

@@ -1544,6 +1544,10 @@ unknown_name = "Unknown User"
 logout = "Logout"
 profile = "내 정보"
 
+[ui.shell.sidebar]
+collapse = "사이드바 접기"
+expand = "사이드바 펼치기"
+
 [ui.shell.role]
 rp_admin = "서비스 관리자 (RP Admin)"
 super_admin = "시스템 관리자 (Super Admin)"

adminfront/src/locales/template.toml

@@ -1513,6 +1513,10 @@ unknown_name = ""
 logout = ""
 profile = ""
 
+[ui.shell.sidebar]
+collapse = ""
+expand = ""
+
 [ui.shell.role]
 rp_admin = ""
 super_admin = ""