100 lines
2.5 KiB
TypeScript
100 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { DashboardElement } from "../types";
|
|
import { AnalogClock } from "./AnalogClock";
|
|
import { DigitalClock } from "./DigitalClock";
|
|
|
|
interface ClockWidgetProps {
|
|
element: DashboardElement;
|
|
}
|
|
|
|
/**
|
|
* 시계 위젯 메인 컴포넌트
|
|
* - 실시간으로 1초마다 업데이트
|
|
* - 아날로그/디지털/둘다 스타일 지원
|
|
* - 타임존 지원
|
|
*/
|
|
export function ClockWidget({ element }: ClockWidgetProps) {
|
|
const [currentTime, setCurrentTime] = useState(new Date());
|
|
|
|
// 기본 설정값
|
|
const config = element.clockConfig || {
|
|
style: "digital",
|
|
timezone: "Asia/Seoul",
|
|
showDate: true,
|
|
showSeconds: true,
|
|
format24h: true,
|
|
theme: "light",
|
|
};
|
|
|
|
// 1초마다 시간 업데이트
|
|
useEffect(() => {
|
|
const timer = setInterval(() => {
|
|
setCurrentTime(new Date());
|
|
}, 1000);
|
|
|
|
// cleanup: 컴포넌트 unmount 시 타이머 정리
|
|
return () => clearInterval(timer);
|
|
}, []);
|
|
|
|
// 스타일별 렌더링
|
|
if (config.style === "analog") {
|
|
return (
|
|
<div className="h-full w-full">
|
|
<AnalogClock
|
|
time={currentTime}
|
|
theme={config.theme}
|
|
timezone={config.timezone}
|
|
customColor={config.customColor}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (config.style === "digital") {
|
|
return (
|
|
<div className="h-full w-full">
|
|
<DigitalClock
|
|
time={currentTime}
|
|
timezone={config.timezone}
|
|
showDate={config.showDate}
|
|
showSeconds={config.showSeconds}
|
|
format24h={config.format24h}
|
|
theme={config.theme}
|
|
customColor={config.customColor}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 'both' - 아날로그 + 디지털 (작은 크기에 최적화)
|
|
return (
|
|
<div className="flex h-full w-full flex-col overflow-hidden">
|
|
{/* 아날로그 시계 (상단 55%) */}
|
|
<div className="flex-[55] overflow-hidden">
|
|
<AnalogClock
|
|
time={currentTime}
|
|
theme={config.theme}
|
|
timezone={config.timezone}
|
|
customColor={config.customColor}
|
|
/>
|
|
</div>
|
|
|
|
{/* 디지털 시계 (하단 45%) - 컴팩트 버전 */}
|
|
<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>
|
|
);
|
|
}
|