달력 위젯 구현

This commit is contained in:
dohyeons
2025-10-14 10:48:17 +09:00
parent 4dbb55f6e1
commit 2311729338
11 changed files with 715 additions and 294 deletions

View File

@@ -1,10 +1,9 @@
"use client";
import React, { useState, useCallback } from "react";
import { DashboardElement, ChartDataSource, ChartConfig, QueryResult, ClockConfig } from "./types";
import { DashboardElement, ChartDataSource, ChartConfig, QueryResult } from "./types";
import { QueryEditor } from "./QueryEditor";
import { ChartConfigPanel } from "./ChartConfigPanel";
import { ClockConfigModal } from "./widgets/ClockConfigModal";
interface ElementConfigModalProps {
element: DashboardElement;
@@ -57,46 +56,14 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
onClose();
}, [element, dataSource, chartConfig, onSave, onClose]);
// 시계 위젯 설정 저장
const handleClockConfigSave = useCallback(
(clockConfig: ClockConfig) => {
const updatedElement: DashboardElement = {
...element,
clockConfig,
};
onSave(updatedElement);
},
[element, onSave],
);
// 모달이 열려있지 않으면 렌더링하지 않음
if (!isOpen) return null;
// 시계 위젯은 자체 설정 UI를 가지고 있으므로 모달 표시하지 않음
if (element.type === "widget" && element.subtype === "clock") {
// 시계, 달력 위젯은 자체 설정 UI를 가지고 있으므로 모달 표시하지 않음
if (element.type === "widget" && (element.subtype === "clock" || element.subtype === "calendar")) {
return null;
}
// 이전 코드 호환성 유지 (아래 주석 처리된 코드는 제거 예정)
if (false && element.type === "widget" && element.subtype === "clock") {
return (
<ClockConfigModal
config={
element.clockConfig || {
style: "digital",
timezone: "Asia/Seoul",
showDate: true,
showSeconds: true,
format24h: true,
theme: "light",
}
}
onSave={handleClockConfigSave}
onClose={onClose}
/>
);
}
return (
<div className="bg-opacity-50 fixed inset-0 z-50 flex items-center justify-center bg-black">
<div className="flex h-[80vh] w-full max-w-4xl flex-col rounded-lg bg-white shadow-xl">