시계 위젯 구현

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

@@ -6,7 +6,9 @@ interface DigitalClockProps {
   showDate: boolean;
   showSeconds: boolean;
   format24h: boolean;
-  theme: "light" | "dark" | "blue" | "gradient";
+  theme: "light" | "dark" | "custom";
+  compact?: boolean; // 작은 크기에서 사용
+  customColor?: string; // 사용자 지정 색상
 }
 
 /**
@@ -16,7 +18,16 @@ interface DigitalClockProps {
  * - 날짜/초 표시 옵션
  * - 12/24시간 형식 지원
  */
-export function DigitalClock({ time, timezone, showDate, showSeconds, format24h, theme }: DigitalClockProps) {
+export function DigitalClock({
+  time,
+  timezone,
+  showDate,
+  showSeconds,
+  format24h,
+  theme,
+  compact = false,
+  customColor,
+}: DigitalClockProps) {
   // 시간 포맷팅 (타임존 적용)
   const timeString = new Intl.DateTimeFormat("ko-KR", {
     timeZone: timezone,
@@ -41,18 +52,27 @@ export function DigitalClock({ time, timezone, showDate, showSeconds, format24h,
   const timezoneLabel = getTimezoneLabel(timezone);
 
   // 테마별 스타일
-  const themeClasses = getThemeClasses(theme);
+  const themeClasses = getThemeClasses(theme, customColor);
 
   return (
-    <div className={`flex h-full flex-col items-center justify-center p-4 text-center ${themeClasses.container}`}>
-      {/* 날짜 표시 */}
-      {showDate && dateString && <div className={`mb-3 text-sm font-medium ${themeClasses.date}`}>{dateString}</div>}
+    <div
+      className={`flex h-full flex-col items-center justify-center ${compact ? "p-1" : "p-4"} text-center ${themeClasses.container}`}
+      style={themeClasses.style}
+    >
+      {/* 날짜 표시 (compact 모드에서는 숨김) */}
+      {!compact && showDate && dateString && (
+        <div className={`mb-3 text-sm font-medium ${themeClasses.date}`}>{dateString}</div>
+      )}
 
       {/* 시간 표시 */}
-      <div className={`text-5xl font-bold tabular-nums ${themeClasses.time}`}>{timeString}</div>
+      <div className={`font-bold tabular-nums ${themeClasses.time} ${compact ? "text-xl" : "text-5xl"}`}>
+        {timeString}
+      </div>
 
       {/* 타임존 표시 */}
-      <div className={`mt-3 text-xs font-medium ${themeClasses.timezone}`}>{timezoneLabel}</div>
+      <div className={`${compact ? "mt-0.5" : "mt-3"} text-xs font-medium ${themeClasses.timezone}`}>
+        {timezoneLabel}
+      </div>
     </div>
   );
 }
@@ -78,7 +98,18 @@ function getTimezoneLabel(timezone: string): string {
 /**
  * 테마별 클래스 반환
  */
-function getThemeClasses(theme: string) {
+function getThemeClasses(theme: string, customColor?: string) {
+  if (theme === "custom" && customColor) {
+    // 사용자 지정 색상 사용
+    return {
+      container: "text-white",
+      date: "text-white/80",
+      time: "text-white",
+      timezone: "text-white/70",
+      style: { backgroundColor: customColor },
+    };
+  }
+
   const themes = {
     light: {
       container: "bg-white text-gray-900",
@@ -92,18 +123,12 @@ function getThemeClasses(theme: string) {
       time: "text-white",
       timezone: "text-gray-400",
     },
-    blue: {
-      container: "bg-gradient-to-br from-blue-400 to-blue-600 text-white",
+    custom: {
+      container: "bg-gradient-to-br from-blue-400 to-purple-600 text-white",
       date: "text-blue-100",
       time: "text-white",
       timezone: "text-blue-200",
     },
-    gradient: {
-      container: "bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 text-white",
-      date: "text-purple-100",
-      time: "text-white",
-      timezone: "text-pink-200",
-    },
   };
 
   return themes[theme as keyof typeof themes] || themes.light;