diff --git a/frontend/app/globals.css b/frontend/app/globals.css index 8c056ad1..d4bff573 100644 --- a/frontend/app/globals.css +++ b/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 ===== */ diff --git a/frontend/components/layout/AppLayout.tsx b/frontend/components/layout/AppLayout.tsx index d62c5a95..60cb039a 100644 --- a/frontend/components/layout/AppLayout.tsx +++ b/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) { 결재함 +
+ +
+ 로그아웃 @@ -631,6 +636,11 @@ function AppLayoutInner({ children }: AppLayoutProps) { + {/* 사이드바 하단 - 테마 토글 */} +
+ +
+ {/* 사이드바 하단 - 사용자 프로필 */}
diff --git a/frontend/components/layout/ThemeToggle.tsx b/frontend/components/layout/ThemeToggle.tsx new file mode 100644 index 00000000..b6ea71be --- /dev/null +++ b/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 ( + + ); + } + + const isDark = theme === "dark"; + + return ( + + ); +}