07374c826c
- claudedocs 폴더 구조 재정리: archive/sessions, guides/migration·mobile·universal-list, refactoring 분류 - 오래된 세션 컨텍스트/체크리스트 문서 정리 (아카이브 이동 또는 삭제) - AuthContext → authStore(Zustand) 전환 시작, RootProvider 간소화 - GenericCRUDDialog 공통 다이얼로그 컴포넌트 추가 - PermissionDialog 삭제 → GenericCRUDDialog로 대체 - RankDialog/TitleDialog GenericCRUDDialog 기반으로 리팩토링 - toast-utils.ts 삭제 (미사용) - fileDownload.ts 개선, excel-download.ts 정리 - menuStore/themeStore Zustand 셀렉터 최적화 - useColumnSettings/useTableColumnStore 기능 보강 - 세금계산서/견적/작업자화면/결재 등 소규모 개선 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
83 lines
3.0 KiB
TypeScript
83 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import { useTheme, useSetTheme } from "@/stores/themeStore";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { Sun, Moon, Accessibility } from "lucide-react";
|
|
|
|
const themes = [
|
|
{ value: "light", label: "일반 모드", icon: Sun, color: "text-orange-500", emoji: "☀️" },
|
|
{ value: "dark", label: "다크 모드", icon: Moon, color: "text-blue-400", emoji: "🌙" },
|
|
{ value: "senior", label: "시니어 모드", icon: Accessibility, color: "text-green-500", emoji: "👓" },
|
|
];
|
|
|
|
interface ThemeSelectProps {
|
|
native?: boolean;
|
|
}
|
|
|
|
export function ThemeSelect({ native = true }: ThemeSelectProps) {
|
|
const theme = useTheme();
|
|
const setTheme = useSetTheme();
|
|
|
|
const currentTheme = themes.find((t) => t.value === theme);
|
|
const CurrentIcon = currentTheme?.icon || Sun;
|
|
|
|
// 네이티브 select
|
|
if (native) {
|
|
return (
|
|
<div className="relative min-w-[140px] w-auto">
|
|
<div className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none z-10">
|
|
<CurrentIcon className={`w-4 h-4 ${currentTheme?.color}`} />
|
|
</div>
|
|
<select
|
|
value={theme}
|
|
onChange={(e) => setTheme(e.target.value as "light" | "dark" | "senior")}
|
|
className="w-full h-9 pl-9 pr-3 rounded-xl border border-border/50 bg-background/50 backdrop-blur text-sm appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-0 transition-all"
|
|
>
|
|
{themes.map((themeOption) => (
|
|
<option key={themeOption.value} value={themeOption.value}>
|
|
{themeOption.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
|
|
<svg className="w-4 h-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Radix UI 모달 select
|
|
return (
|
|
<Select value={theme} onValueChange={(value) => setTheme(value as "light" | "dark" | "senior")}>
|
|
<SelectTrigger className="min-w-[140px] w-auto rounded-xl border-border/50 bg-background/50 backdrop-blur">
|
|
<div className="flex items-center gap-2">
|
|
<CurrentIcon className={`w-4 h-4 ${currentTheme?.color}`} />
|
|
<SelectValue>
|
|
<span className="text-sm">{currentTheme?.label}</span>
|
|
</SelectValue>
|
|
</div>
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{themes.map((themeOption) => {
|
|
const Icon = themeOption.icon;
|
|
return (
|
|
<SelectItem key={themeOption.value} value={themeOption.value}>
|
|
<div className="flex items-center gap-2">
|
|
<Icon className={`w-4 h-4 ${themeOption.color}`} />
|
|
<span>{themeOption.label}</span>
|
|
</div>
|
|
</SelectItem>
|
|
);
|
|
})}
|
|
</SelectContent>
|
|
</Select>
|
|
);
|
|
} |