기본 시간(서울) 시계 위젯 구현

2025-10-14 09:41:33 +09:00
parent 9775b28d9d
commit 4813da827e
8 changed files with 1041 additions and 24 deletions
--- a/frontend/components/admin/dashboard/widgets/ClockWidget.tsx
+++ b/frontend/components/admin/dashboard/widgets/ClockWidget.tsx
@@ -0,0 +1,86 @@
+"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} />
+      </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}
+        />
+      </div>
+    );
+  }
+
+  // 'both' - 아날로그 + 디지털
+  return (
+    <div className="flex h-full w-full flex-col">
+      {/* 아날로그 시계 (상단 60%) */}
+      <div className="flex-[3]">
+        <AnalogClock time={currentTime} theme={config.theme} />
+      </div>
+
+      {/* 디지털 시계 (하단 40%) */}
+      <div className="flex-[2]">
+        <DigitalClock
+          time={currentTime}
+          timezone={config.timezone}
+          showDate={config.showDate}
+          showSeconds={config.showSeconds}
+          format24h={config.format24h}
+          theme={config.theme}
+        />
+      </div>
+    </div>
+  );
+}