대시보드 중간 커밋

components/theme-toggle.tsx

@@ -12,6 +12,7 @@
 import * as React from "react";
 import { Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
+import { cn } from "@/lib/utils";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -21,23 +22,38 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 
+interface ThemeToggleProps {
+  className?: string;
+  iconClassName?: string;
+}
+
 /**
  * 테마 토글 컴포넌트
  * @remarks next-themes의 useTheme 훅 사용
  * @returns Dropdown 메뉴 형태의 테마 선택기
  */
-export function ThemeToggle() {
+export function ThemeToggle({ className, iconClassName }: ThemeToggleProps) {
   const { setTheme } = useTheme();
 
   return (
     <DropdownMenu modal={false}>
       {/* ========== 트리거 버튼 ========== */}
       <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="icon">
+        <Button variant="ghost" size="icon" className={className}>
           {/* 라이트 모드 아이콘 (회전 애니메이션) */}
-          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Sun
+            className={cn(
+              "h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0",
+              iconClassName,
+            )}
+          />
           {/* 다크 모드 아이콘 (회전 애니메이션) */}
-          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <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>