123

frontend/components/layout/AppLayout.tsx

@@ -999,7 +999,11 @@ function AppLayoutInner({ children }: AppLayoutProps) {
           </div>
 
           {/* 테마 토글 */}
-          {(!isMobile && sidebarCollapsed) ? null : (
+          {(!isMobile && sidebarCollapsed) ? (
+            <div className="flex items-center justify-center border-t border-border py-2">
+              <ThemeToggle collapsed />
+            </div>
+          ) : (
             <div className="border-border border-t px-3 py-1">
               <ThemeToggle />
             </div>

frontend/components/layout/ThemeToggle.tsx

@@ -32,10 +32,10 @@ export function ThemeToggle({ collapsed = false }: ThemeToggleProps) {
       variant="ghost"
       size={collapsed ? "icon" : "default"}
       onClick={() => setTheme(isDark ? "light" : "dark")}
-      className="w-full justify-start gap-2 text-sm"
+      className={collapsed ? "h-10 w-10 justify-center" : "w-full justify-start gap-2 text-sm"}
       title={isDark ? "라이트 모드" : "다크 모드"}
     >
-      {isDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+      {isDark ? <Sun className={collapsed ? "h-5 w-5" : "h-4 w-4"} /> : <Moon className={collapsed ? "h-5 w-5" : "h-4 w-4"} />}
       {!collapsed && (isDark ? "라이트 모드" : "다크 모드")}
     </Button>
   );