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

frontend/app/globals.css

@@ -84,8 +84,8 @@
   --accent-foreground: 220.9 39.3% 11%;
   --destructive: 0 84.2% 60.2%;
   --destructive-foreground: 0 0% 100%;
-  --border: 220 13% 91%;
-  --input: 220 13% 91%;
+  --border: 220 13% 88%;
+  --input: 220 13% 88%;
   --ring: 217.2 91.2% 59.8%;
 
   /* Success Colors (Emerald) */
@@ -121,56 +121,73 @@
   --sidebar-ring: 217.2 91.2% 59.8%;
 }
 
-/* ===== Dark Theme ===== */
+/* ===== Dark Theme (Palantir-Inspired) ===== */
 .dark {
-  --background: 224 71% 4%;
-  --foreground: 210 20% 98%;
-  --card: 224 71% 4%;
-  --card-foreground: 210 20% 98%;
-  --popover: 224 71% 4%;
-  --popover-foreground: 210 20% 98%;
-  --primary: 217.2 91.2% 59.8%;
-  --primary-foreground: 0 0% 100%;
-  --secondary: 215 27.9% 16.9%;
-  --secondary-foreground: 210 20% 98%;
-  --muted: 215 27.9% 16.9%;
-  --muted-foreground: 217.9 10.6% 64.9%;
-  --accent: 215 27.9% 16.9%;
-  --accent-foreground: 210 20% 98%;
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 210 20% 98%;
-  --border: 215 27.9% 16.9%;
-  --input: 215 27.9% 16.9%;
-  --ring: 217.2 91.2% 59.8%;
+  /* 배경: 팔란티어 스타일 깊은 네이비 */
+  --background: 222 47% 6%;
+  --foreground: 210 20% 95%;
 
-  /* Success Colors (Emerald) - Dark */
-  --success: 142 76% 36%;
+  /* 카드: 배경보다 약간 밝게 (레이어 구분) */
+  --card: 220 40% 9%;
+  --card-foreground: 210 20% 95%;
+
+  /* 팝오버: 카드와 동일 */
+  --popover: 220 40% 9%;
+  --popover-foreground: 210 20% 95%;
+
+  /* Primary: 다크 배경에서 약간 더 밝은 블루 */
+  --primary: 217 91% 65%;
+  --primary-foreground: 0 0% 100%;
+
+  /* Secondary: 어두운 슬레이트 */
+  --secondary: 220 25% 14%;
+  --secondary-foreground: 210 20% 90%;
+
+  /* Muted: 차분한 회색-네이비 */
+  --muted: 220 20% 13%;
+  --muted-foreground: 215 15% 58%;
+
+  /* Accent: secondary와 유사 */
+  --accent: 220 25% 16%;
+  --accent-foreground: 210 20% 90%;
+
+  /* Destructive: 다크에서 더 밝은 레드 */
+  --destructive: 0 72% 51%;
+  --destructive-foreground: 0 0% 100%;
+
+  /* Border: 팔란티어 스타일 - 보더가 더 잘 보임 */
+  --border: 220 20% 18%;
+  --input: 220 20% 18%;
+  --ring: 217 91% 65%;
+
+  /* Success (Emerald) - 다크 배경용 밝기 조정 */
+  --success: 142 70% 42%;
   --success-foreground: 0 0% 100%;
 
-  /* Warning Colors (Amber) - Dark */
-  --warning: 38 92% 50%;
-  --warning-foreground: 0 0% 100%;
+  /* Warning (Amber) - 다크 배경용 밝기 조정 */
+  --warning: 38 92% 55%;
+  --warning-foreground: 0 0% 10%;
 
-  /* Info Colors (Cyan) - Dark */
-  --info: 188 94% 43%;
+  /* Info (Cyan) - 다크 배경용 밝기 조정 */
+  --info: 188 90% 48%;
   --info-foreground: 0 0% 100%;
 
-  /* Chart Colors - Dark */
-  --chart-1: 220 70% 50%;
-  --chart-2: 160 60% 45%;
-  --chart-3: 30 80% 55%;
-  --chart-4: 280 65% 60%;
-  --chart-5: 340 75% 55%;
+  /* Chart Colors - 다크 배경에서 선명한 컬러 */
+  --chart-1: 220 70% 55%;
+  --chart-2: 160 60% 48%;
+  --chart-3: 30 80% 58%;
+  --chart-4: 280 65% 63%;
+  --chart-5: 340 75% 58%;
 
-  /* Sidebar Colors - Dark */
-  --sidebar-background: 224 71% 4%;
-  --sidebar-foreground: 210 20% 98%;
-  --sidebar-primary: 217.2 91.2% 59.8%;
+  /* Sidebar - 메인 배경보다 약간 어둡게 */
+  --sidebar-background: 222 47% 5%;
+  --sidebar-foreground: 210 20% 90%;
+  --sidebar-primary: 217 91% 65%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 215 27.9% 16.9%;
-  --sidebar-accent-foreground: 210 20% 98%;
-  --sidebar-border: 215 27.9% 16.9%;
-  --sidebar-ring: 217.2 91.2% 59.8%;
+  --sidebar-accent: 220 25% 14%;
+  --sidebar-accent-foreground: 210 20% 90%;
+  --sidebar-border: 220 20% 16%;
+  --sidebar-ring: 217 91% 65%;
 }
 
 /* ===== Base Styles ===== */

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>
+  );
+}