시계 위젯 설정을 팝오버로 변경

frontend/components/admin/dashboard/widgets/ClockWidget.tsx

@@ -1,12 +1,17 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { DashboardElement } from "../types";
+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;
 }
 
 /**
@@ -14,9 +19,11 @@ interface ClockWidgetProps {
  * - 실시간으로 1초마다 업데이트
  * - 아날로그/디지털/둘다 스타일 지원
  * - 타임존 지원
+ * - 내장 설정 UI
  */
-export function ClockWidget({ element }: ClockWidgetProps) {
+export function ClockWidget({ element, onConfigUpdate }: ClockWidgetProps) {
   const [currentTime, setCurrentTime] = useState(new Date());
+  const [settingsOpen, setSettingsOpen] = useState(false);
 
   // 기본 설정값
   const config = element.clockConfig || {
@@ -26,6 +33,13 @@ export function ClockWidget({ element }: ClockWidgetProps) {
     showSeconds: true,
     format24h: true,
     theme: "light",
+    customColor: "#3b82f6",
+  };
+
+  // 설정 저장 핸들러
+  const handleSaveSettings = (newConfig: ClockConfig) => {
+    onConfigUpdate?.(newConfig);
+    setSettingsOpen(false);
   };
 
   // 1초마다 시간 업데이트
@@ -38,23 +52,21 @@ export function ClockWidget({ element }: ClockWidgetProps) {
     return () => clearInterval(timer);
   }, []);
 
-  // 스타일별 렌더링
-  if (config.style === "analog") {
-    return (
-      <div className="h-full w-full">
+  // 시계 콘텐츠 렌더링
+  const renderClockContent = () => {
+    if (config.style === "analog") {
+      return (
         <AnalogClock
           time={currentTime}
           theme={config.theme}
           timezone={config.timezone}
           customColor={config.customColor}
         />
-      </div>
-    );
-  }
+      );
+    }
 
-  if (config.style === "digital") {
-    return (
-      <div className="h-full w-full">
+    if (config.style === "digital") {
+      return (
         <DigitalClock
           time={currentTime}
           timezone={config.timezone}
@@ -64,35 +76,53 @@ export function ClockWidget({ element }: ClockWidgetProps) {
           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>
     );
-  }
+  };
 
-  // '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>
+    <div className="relative h-full w-full">
+      {/* 시계 콘텐츠 */}
+      {renderClockContent()}
 
-      {/* 디지털 시계 (하단 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 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>
   );