132 lines
3.8 KiB
TypeScript
132 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { DashboardElement, ClockConfig } from "../types";
|
|
import { AnalogClock } from "./AnalogClock";
|
|
import { DigitalClock } from "./DigitalClock";
|
|
import { ClockSettings } from "./ClockSettings";
|
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Settings } from "lucide-react";
|
|
|
|
interface ClockWidgetProps {
|
|
element: DashboardElement;
|
|
onConfigUpdate?: (config: ClockConfig) => void;
|
|
}
|
|
|
|
/**
|
|
* 시계 위젯 메인 컴포넌트
|
|
* - 실시간으로 1초마다 업데이트
|
|
* - 아날로그/디지털/둘다 스타일 지원
|
|
* - 타임존 지원
|
|
* - 내장 설정 UI
|
|
*/
|
|
export function ClockWidget({ element, onConfigUpdate }: ClockWidgetProps) {
|
|
const [currentTime, setCurrentTime] = useState(new Date());
|
|
const [settingsOpen, setSettingsOpen] = useState(false);
|
|
|
|
// 기본 설정값
|
|
const config = element.clockConfig || {
|
|
style: "digital",
|
|
timezone: "Asia/Seoul",
|
|
showDate: true,
|
|
showSeconds: true,
|
|
format24h: true,
|
|
theme: "light",
|
|
customColor: "#3b82f6",
|
|
};
|
|
|
|
// 설정 저장 핸들러
|
|
const handleSaveSettings = (newConfig: ClockConfig) => {
|
|
onConfigUpdate?.(newConfig);
|
|
setSettingsOpen(false);
|
|
};
|
|
|
|
// 1초마다 시간 업데이트
|
|
useEffect(() => {
|
|
const timer = setInterval(() => {
|
|
setCurrentTime(new Date());
|
|
}, 1000);
|
|
|
|
// cleanup: 컴포넌트 unmount 시 타이머 정리
|
|
return () => clearInterval(timer);
|
|
}, []);
|
|
|
|
// 시계 콘텐츠 렌더링
|
|
const renderClockContent = () => {
|
|
if (config.style === "analog") {
|
|
return (
|
|
<AnalogClock
|
|
time={currentTime}
|
|
theme={config.theme}
|
|
timezone={config.timezone}
|
|
customColor={config.customColor}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (config.style === "digital") {
|
|
return (
|
|
<DigitalClock
|
|
time={currentTime}
|
|
timezone={config.timezone}
|
|
showDate={config.showDate}
|
|
showSeconds={config.showSeconds}
|
|
format24h={config.format24h}
|
|
theme={config.theme}
|
|
customColor={config.customColor}
|
|
/>
|
|
);
|
|
}
|
|
|
|
// 'both' - 아날로그 + 디지털
|
|
return (
|
|
<div className="flex h-full w-full flex-col overflow-hidden">
|
|
<div className="flex-[55] overflow-hidden">
|
|
<AnalogClock
|
|
time={currentTime}
|
|
theme={config.theme}
|
|
timezone={config.timezone}
|
|
customColor={config.customColor}
|
|
/>
|
|
</div>
|
|
<div className="flex-[45] overflow-hidden">
|
|
<DigitalClock
|
|
time={currentTime}
|
|
timezone={config.timezone}
|
|
showDate={false}
|
|
showSeconds={config.showSeconds}
|
|
format24h={config.format24h}
|
|
theme={config.theme}
|
|
customColor={config.customColor}
|
|
compact={true}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="relative h-full w-full">
|
|
{/* 시계 콘텐츠 */}
|
|
{renderClockContent()}
|
|
|
|
{/* 설정 버튼 - 우측 상단 (디자이너 모드에서만 표시) */}
|
|
{onConfigUpdate && (
|
|
<div className="absolute top-2 right-2">
|
|
<Popover open={settingsOpen} onOpenChange={setSettingsOpen}>
|
|
<PopoverTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="h-8 w-8 bg-white/80 hover:bg-white">
|
|
<Settings className="h-4 w-4" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-[500px] p-0" align="end">
|
|
<ClockSettings config={config} onSave={handleSaveSettings} onClose={() => setSettingsOpen(false)} />
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|