[agent-pipeline] pipe-20260310020928-52l9 round-2

frontend/components/layout/AppLayout.tsx

@@ -30,6 +30,7 @@ import { toast } from "sonner";
 import { ProfileModal } from "./ProfileModal";
 import { Logo } from "./Logo";
 import { SideMenu } from "./SideMenu";
+import { ThemeToggle } from "./ThemeToggle";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -530,6 +531,10 @@ function AppLayoutInner({ children }: AppLayoutProps) {
                 <span>결재함</span>
               </DropdownMenuItem>
               <DropdownMenuSeparator />
+              <div className="px-1 py-0.5">
+                <ThemeToggle />
+              </div>
+              <DropdownMenuSeparator />
               <DropdownMenuItem onClick={handleLogout}>
                 <LogOut className="mr-2 h-4 w-4" />
                 <span>로그아웃</span>
@@ -631,6 +636,11 @@ function AppLayoutInner({ children }: AppLayoutProps) {
           </nav>
         </div>
 
+        {/* 사이드바 하단 - 테마 토글 */}
+        <div className="border-t border-border px-3 py-1">
+          <ThemeToggle />
+        </div>
+
         {/* 사이드바 하단 - 사용자 프로필 */}
         <div className="border-t border-border bg-muted/30 p-3">
           <DropdownMenu modal={false}>

frontend/components/layout/ThemeToggle.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import { Moon, Sun } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+interface ThemeToggleProps {
+  collapsed?: boolean;
+}
+
+export function ThemeToggle({ collapsed = false }: ThemeToggleProps) {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return (
+      <Button variant="ghost" size={collapsed ? "icon" : "default"} className="w-full justify-start gap-2 opacity-0">
+        <Sun className="h-4 w-4" />
+      </Button>
+    );
+  }
+
+  const isDark = theme === "dark";
+
+  return (
+    <Button
+      variant="ghost"
+      size={collapsed ? "icon" : "default"}
+      onClick={() => setTheme(isDark ? "light" : "dark")}
+      className="w-full justify-start gap-2 text-sm"
+      title={isDark ? "라이트 모드" : "다크 모드"}
+    >
+      {isDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+      {!collapsed && (isDark ? "라이트 모드" : "다크 모드")}
+    </Button>
+  );
+}