테마 적용

components/theme-toggle.tsx

@@ -1,9 +1,9 @@
 /**
  * @file components/theme-toggle.tsx
- * @description 라이트/다크/시스템 테마 전환 토글 버튼
+ * @description 라이트/다크 테마 즉시 전환 토글 버튼
  * @remarks
  * - [레이어] Components/UI
- * - [사용자 행동] 버튼 클릭 -> 드롭다운 메뉴 -> 테마 선택 -> 즉시 반영
+ * - [사용자 행동] 버튼 클릭 -> 라이트/다크 즉시 전환
  * - [연관 파일] theme-provider.tsx (next-themes)
  */
 
@@ -15,12 +15,6 @@ import { useTheme } from "next-themes";
 import { cn } from "@/lib/utils";
 
 import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
 
 interface ThemeToggleProps {
   className?: string;
@@ -30,46 +24,41 @@ interface ThemeToggleProps {
 /**
  * 테마 토글 컴포넌트
  * @remarks next-themes의 useTheme 훅 사용
- * @returns Dropdown 메뉴 형태의 테마 선택기
+ * @returns 단일 클릭으로 라이트/다크를 전환하는 버튼
+ * @see features/layout/components/header.tsx Header 액션 영역 - 사용자 테마 전환 버튼
  */
 export function ThemeToggle({ className, iconClassName }: ThemeToggleProps) {
-  const { setTheme } = useTheme();
+  const { resolvedTheme, setTheme } = useTheme();
+
+  const handleToggleTheme = React.useCallback(() => {
+    // 시스템 테마 사용 중에도 현재 화면 기준으로 명확히 라이트/다크를 토글합니다.
+    setTheme(resolvedTheme === "dark" ? "light" : "dark");
+  }, [resolvedTheme, setTheme]);
 
   return (
-    <DropdownMenu modal={false}>
-      {/* ========== 트리거 버튼 ========== */}
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="icon" className={className}>
-          {/* 라이트 모드 아이콘 (회전 애니메이션) */}
-          <Sun
-            className={cn(
-              "h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0",
-              iconClassName,
-            )}
-          />
-          {/* 다크 모드 아이콘 (회전 애니메이션) */}
-          <Moon
-            className={cn(
-              "absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100",
-              iconClassName,
-            )}
-          />
-          <span className="sr-only">Toggle theme</span>
-        </Button>
-      </DropdownMenuTrigger>
-
-      {/* ========== 메뉴 컨텐츠 (우측 정렬) ========== */}
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme("light")}>
-          Light
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("dark")}>
-          Dark
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("system")}>
-          System
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon"
+      className={className}
+      onClick={handleToggleTheme}
+      aria-label="테마 전환"
+    >
+      {/* ========== LIGHT ICON ========== */}
+      <Sun
+        className={cn(
+          "h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0",
+          iconClassName,
+        )}
+      />
+      {/* ========== DARK ICON ========== */}
+      <Moon
+        className={cn(
+          "absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100",
+          iconClassName,
+        )}
+      />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
   );
 }