206 lines
8.6 KiB
TypeScript
206 lines
8.6 KiB
TypeScript
|
"use client";
|
|||
|
|
|
|||
|
|
import { useState } from "react";
|
|||
|
|
import { ClockConfig } from "../types";
|
|||
|
|
import { Button } from "@/components/ui/button";
|
|||
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
|
|||
|
|
import { Label } from "@/components/ui/label";
|
|||
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|||
|
|
import { Switch } from "@/components/ui/switch";
|
|||
|
|
import { Input } from "@/components/ui/input";
|
|||
|
|
import { Card } from "@/components/ui/card";
|
|||
|
|
import { X } from "lucide-react";
|
|||
|
|
|
|||
|
|
interface ClockConfigModalProps {
|
|||
|
|
config: ClockConfig;
|
|||
|
|
onSave: (config: ClockConfig) => void;
|
|||
|
|
onClose: () => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 시계 위젯 설정 모달
|
|||
|
|
* - 스타일 선택 (아날로그/디지털/둘다)
|
|||
|
|
* - 타임존 선택
|
|||
|
|
* - 테마 선택
|
|||
|
|
* - 옵션 토글 (날짜, 초, 24시간)
|
|||
|
|
*/
|
|||
|
|
export function ClockConfigModal({ config, onSave, onClose }: ClockConfigModalProps) {
|
|||
|
|
const [localConfig, setLocalConfig] = useState<ClockConfig>(config);
|
|||
|
|
|
|||
|
|
const handleSave = () => {
|
|||
|
|
onSave(localConfig);
|
|||
|
|
onClose();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Dialog open={true} onOpenChange={onClose}>
|
|||
|
|
<DialogContent className="max-h-[90vh] max-w-2xl overflow-hidden p-0">
|
|||
|
|
<DialogHeader className="border-b p-6">
|
|||
|
|
<DialogTitle className="flex items-center gap-2 text-xl">
|
|||
|
|
<span>⏰</span>
|
|||
|
|
시계 위젯 설정
|
|||
|
|
</DialogTitle>
|
|||
|
|
</DialogHeader>
|
|||
|
|
|
|||
|
|
{/* 내용 - 스크롤 가능 */}
|
|||
|
|
<div className="flex-1 space-y-6 overflow-y-auto px-6 py-4">
|
|||
|
|
{/* 스타일 선택 */}
|
|||
|
|
<div className="space-y-3">
|
|||
|
|
<Label className="text-sm font-semibold">시계 스타일</Label>
|
|||
|
|
<div className="grid grid-cols-3 gap-3">
|
|||
|
|
{[
|
|||
|
|
{ value: "digital", label: "디지털", icon: "🔢" },
|
|||
|
|
{ value: "analog", label: "아날로그", icon: "🕐" },
|
|||
|
|
{ value: "both", label: "둘 다", icon: "⏰" },
|
|||
|
|
].map((style) => (
|
|||
|
|
<Button
|
|||
|
|
key={style.value}
|
|||
|
|
type="button"
|
|||
|
|
variant={localConfig.style === style.value ? "default" : "outline"}
|
|||
|
|
onClick={() => setLocalConfig({ ...localConfig, style: style.value as any })}
|
|||
|
|
className="flex h-auto flex-col items-center gap-2 p-4"
|
|||
|
|
>
|
|||
|
|
<span className="text-3xl">{style.icon}</span>
|
|||
|
|
<span className="text-sm font-medium">{style.label}</span>
|
|||
|
|
</Button>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 타임존 선택 */}
|
|||
|
|
<div className="space-y-3">
|
|||
|
|
<Label className="text-sm font-semibold">타임존</Label>
|
|||
|
|
<Select
|
|||
|
|
value={localConfig.timezone}
|
|||
|
|
onValueChange={(value) => setLocalConfig({ ...localConfig, timezone: value })}
|
|||
|
|
>
|
|||
|
|
<SelectTrigger className="w-full">
|
|||
|
|
<SelectValue />
|
|||
|
|
</SelectTrigger>
|
|||
|
|
<SelectContent>
|
|||
|
|
<SelectItem value="Asia/Seoul">🇰🇷 서울 (KST)</SelectItem>
|
|||
|
|
<SelectItem value="Asia/Tokyo">🇯🇵 도쿄 (JST)</SelectItem>
|
|||
|
|
<SelectItem value="Asia/Shanghai">🇨🇳 베이징 (CST)</SelectItem>
|
|||
|
|
<SelectItem value="America/New_York">🇺🇸 뉴욕 (EST)</SelectItem>
|
|||
|
|
<SelectItem value="America/Los_Angeles">🇺🇸 LA (PST)</SelectItem>
|
|||
|
|
<SelectItem value="Europe/London">🇬🇧 런던 (GMT)</SelectItem>
|
|||
|
|
<SelectItem value="Europe/Paris">🇫🇷 파리 (CET)</SelectItem>
|
|||
|
|
<SelectItem value="Australia/Sydney">🇦🇺 시드니 (AEDT)</SelectItem>
|
|||
|
|
</SelectContent>
|
|||
|
|
</Select>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 테마 선택 */}
|
|||
|
|
<div className="space-y-3">
|
|||
|
|
<Label className="text-sm font-semibold">테마</Label>
|
|||
|
|
<div className="grid grid-cols-3 gap-3">
|
|||
|
|
{[
|
|||
|
|
{
|
|||
|
|
value: "light",
|
|||
|
|
label: "Light",
|
|||
|
|
gradient: "bg-gradient-to-br from-white to-gray-100",
|
|||
|
|
text: "text-gray-900",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: "dark",
|
|||
|
|
label: "Dark",
|
|||
|
|
gradient: "bg-gradient-to-br from-gray-800 to-gray-900",
|
|||
|
|
text: "text-white",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: "custom",
|
|||
|
|
label: "사용자 지정",
|
|||
|
|
gradient: "bg-gradient-to-br from-blue-400 to-purple-600",
|
|||
|
|
text: "text-white",
|
|||
|
|
},
|
|||
|
|
].map((theme) => (
|
|||
|
|
<Button
|
|||
|
|
key={theme.value}
|
|||
|
|
type="button"
|
|||
|
|
variant="outline"
|
|||
|
|
onClick={() => setLocalConfig({ ...localConfig, theme: theme.value as any })}
|
|||
|
|
className={`relative h-auto overflow-hidden p-0 ${
|
|||
|
|
localConfig.theme === theme.value ? "ring-primary ring-2 ring-offset-2" : ""
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
<div className={`${theme.gradient} ${theme.text} w-full rounded p-3 text-center text-xs font-medium`}>
|
|||
|
|
{theme.label}
|
|||
|
|
</div>
|
|||
|
|
</Button>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 사용자 지정 색상 선택 */}
|
|||
|
|
{localConfig.theme === "custom" && (
|
|||
|
|
<Card className="border p-4">
|
|||
|
|
<Label className="mb-2 block text-sm font-medium">배경 색상 선택</Label>
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
<Input
|
|||
|
|
type="color"
|
|||
|
|
value={localConfig.customColor || "#3b82f6"}
|
|||
|
|
onChange={(e) => setLocalConfig({ ...localConfig, customColor: e.target.value })}
|
|||
|
|
className="h-12 w-20 cursor-pointer"
|
|||
|
|
/>
|
|||
|
|
<div className="flex-1">
|
|||
|
|
<Input
|
|||
|
|
type="text"
|
|||
|
|
value={localConfig.customColor || "#3b82f6"}
|
|||
|
|
onChange={(e) => setLocalConfig({ ...localConfig, customColor: e.target.value })}
|
|||
|
|
placeholder="#3b82f6"
|
|||
|
|
className="font-mono"
|
|||
|
|
/>
|
|||
|
|
<p className="text-muted-foreground mt-1 text-xs">시계의 배경색이나 강조색으로 사용됩니다</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</Card>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 옵션 토글 */}
|
|||
|
|
<div className="space-y-3">
|
|||
|
|
<Label className="text-sm font-semibold">표시 옵션</Label>
|
|||
|
|
<div className="grid grid-cols-3 gap-3">
|
|||
|
|
{/* 날짜 표시 */}
|
|||
|
|
<Card className="hover:bg-accent flex cursor-pointer flex-col items-center justify-center border p-4 text-center transition-colors">
|
|||
|
|
<span className="mb-2 text-2xl">📅</span>
|
|||
|
|
<Label className="mb-1 cursor-pointer text-sm font-medium">날짜 표시</Label>
|
|||
|
|
<Switch
|
|||
|
|
checked={localConfig.showDate}
|
|||
|
|
onCheckedChange={(checked) => setLocalConfig({ ...localConfig, showDate: checked })}
|
|||
|
|
/>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
{/* 초 표시 */}
|
|||
|
|
<Card className="hover:bg-accent flex cursor-pointer flex-col items-center justify-center border p-4 text-center transition-colors">
|
|||
|
|
<span className="mb-2 text-2xl">⏱️</span>
|
|||
|
|
<Label className="mb-1 cursor-pointer text-sm font-medium">초 표시</Label>
|
|||
|
|
<Switch
|
|||
|
|
checked={localConfig.showSeconds}
|
|||
|
|
onCheckedChange={(checked) => setLocalConfig({ ...localConfig, showSeconds: checked })}
|
|||
|
|
/>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
{/* 24시간 형식 */}
|
|||
|
|
<Card className="hover:bg-accent flex cursor-pointer flex-col items-center justify-center border p-4 text-center transition-colors">
|
|||
|
|
<span className="mb-2 text-2xl">🕐</span>
|
|||
|
|
<Label className="mb-1 cursor-pointer text-sm font-medium">24시간 형식</Label>
|
|||
|
|
<Switch
|
|||
|
|
checked={localConfig.format24h}
|
|||
|
|
onCheckedChange={(checked) => setLocalConfig({ ...localConfig, format24h: checked })}
|
|||
|
|
/>
|
|||
|
|
</Card>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<DialogFooter className="border-t p-6">
|
|||
|
|
<Button variant="outline" onClick={onClose}>
|
|||
|
|
취소
|
|||
|
|
</Button>
|
|||
|
|
<Button onClick={handleSave}>저장</Button>
|
|||
|
|
</DialogFooter>
|
|||
|
|
</DialogContent>
|
|||
|
|
</Dialog>
|
|||
|
|
);
|
|||
|
|
}
|