585 lines
23 KiB
TypeScript
585 lines
23 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useCallback, useEffect } from "react";
|
|
import { DashboardElement, ChartDataSource, ChartConfig, QueryResult } from "./types";
|
|
import { QueryEditor } from "./QueryEditor";
|
|
import { ChartConfigPanel } from "./ChartConfigPanel";
|
|
import { VehicleMapConfigPanel } from "./VehicleMapConfigPanel";
|
|
import { MapTestConfigPanel } from "./MapTestConfigPanel";
|
|
import { MultiChartConfigPanel } from "./MultiChartConfigPanel";
|
|
import { DatabaseConfig } from "./data-sources/DatabaseConfig";
|
|
import { ApiConfig } from "./data-sources/ApiConfig";
|
|
import MultiDataSourceConfig from "./data-sources/MultiDataSourceConfig";
|
|
import { ListWidgetConfigSidebar } from "./widgets/ListWidgetConfigSidebar";
|
|
import { YardWidgetConfigSidebar } from "./widgets/YardWidgetConfigSidebar";
|
|
import { X } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import CustomMetricConfigSidebar from "./widgets/custom-metric/CustomMetricConfigSidebar";
|
|
|
|
interface ElementConfigSidebarProps {
|
|
element: DashboardElement | null;
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onApply: (element: DashboardElement) => void;
|
|
}
|
|
|
|
/**
|
|
* 요소 설정 사이드바 컴포넌트
|
|
* - 왼쪽에서 슬라이드 인/아웃
|
|
* - 캔버스 위에 오버레이
|
|
* - "적용" 버튼으로 명시적 저장
|
|
*/
|
|
export function ElementConfigSidebar({ element, isOpen, onClose, onApply }: ElementConfigSidebarProps) {
|
|
const [dataSource, setDataSource] = useState<ChartDataSource>({
|
|
type: "database",
|
|
connectionType: "current",
|
|
refreshInterval: 0,
|
|
});
|
|
const [dataSources, setDataSources] = useState<ChartDataSource[]>([]);
|
|
const [chartConfig, setChartConfig] = useState<ChartConfig>({});
|
|
const [queryResult, setQueryResult] = useState<QueryResult | null>(null);
|
|
const [customTitle, setCustomTitle] = useState<string>("");
|
|
const [showHeader, setShowHeader] = useState<boolean>(true);
|
|
|
|
// 멀티 데이터 소스의 테스트 결과 저장 (ChartTestWidget용)
|
|
const [testResults, setTestResults] = useState<Map<string, { columns: string[]; rows: Record<string, unknown>[] }>>(
|
|
new Map(),
|
|
);
|
|
|
|
// 사이드바가 열릴 때 초기화
|
|
useEffect(() => {
|
|
if (isOpen && element) {
|
|
console.log("🔄 ElementConfigSidebar 초기화 - element.id:", element.id);
|
|
console.log("🔄 element.dataSources:", element.dataSources);
|
|
console.log("🔄 element.chartConfig?.dataSources:", element.chartConfig?.dataSources);
|
|
|
|
setDataSource(element.dataSource || { type: "database", connectionType: "current", refreshInterval: 0 });
|
|
|
|
// dataSources는 element.dataSources 또는 chartConfig.dataSources에서 로드
|
|
// ⚠️ 중요: 없으면 반드시 빈 배열로 초기화
|
|
const initialDataSources = element.dataSources || element.chartConfig?.dataSources || [];
|
|
console.log("🔄 초기화된 dataSources:", initialDataSources);
|
|
setDataSources(initialDataSources);
|
|
|
|
setChartConfig(element.chartConfig || {});
|
|
setQueryResult(null);
|
|
setTestResults(new Map()); // 테스트 결과도 초기화
|
|
setCustomTitle(element.customTitle || "");
|
|
setShowHeader(element.showHeader !== false);
|
|
} else if (!isOpen) {
|
|
// 사이드바가 닫힐 때 모든 상태 초기화
|
|
console.log("🧹 ElementConfigSidebar 닫힘 - 상태 초기화");
|
|
setDataSource({ type: "database", connectionType: "current", refreshInterval: 0 });
|
|
setDataSources([]);
|
|
setChartConfig({});
|
|
setQueryResult(null);
|
|
setTestResults(new Map());
|
|
setCustomTitle("");
|
|
setShowHeader(true);
|
|
}
|
|
}, [isOpen, element]);
|
|
|
|
// Esc 키로 사이드바 닫기
|
|
useEffect(() => {
|
|
if (!isOpen) return;
|
|
|
|
const handleEsc = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape") {
|
|
onClose();
|
|
}
|
|
};
|
|
|
|
window.addEventListener("keydown", handleEsc);
|
|
return () => window.removeEventListener("keydown", handleEsc);
|
|
}, [isOpen, onClose]);
|
|
|
|
// 데이터 소스 타입 변경
|
|
const handleDataSourceTypeChange = useCallback((type: "database" | "api") => {
|
|
if (type === "database") {
|
|
setDataSource({
|
|
type: "database",
|
|
connectionType: "current",
|
|
refreshInterval: 0,
|
|
});
|
|
} else {
|
|
setDataSource({
|
|
type: "api",
|
|
method: "GET",
|
|
refreshInterval: 0,
|
|
});
|
|
}
|
|
|
|
setQueryResult(null);
|
|
setChartConfig({});
|
|
}, []);
|
|
|
|
// 데이터 소스 업데이트
|
|
const handleDataSourceUpdate = useCallback((updates: Partial<ChartDataSource>) => {
|
|
setDataSource((prev) => ({ ...prev, ...updates }));
|
|
}, []);
|
|
|
|
// 차트 설정 변경 처리
|
|
const handleChartConfigChange = useCallback(
|
|
(newConfig: ChartConfig) => {
|
|
setChartConfig(newConfig);
|
|
|
|
// 🎯 실시간 미리보기: 즉시 부모에게 전달 (map-test 위젯용)
|
|
if (element && element.subtype === "map-test" && newConfig.tileMapUrl) {
|
|
onApply({
|
|
...element,
|
|
chartConfig: newConfig,
|
|
dataSource: dataSource,
|
|
customTitle: customTitle,
|
|
showHeader: showHeader,
|
|
});
|
|
}
|
|
},
|
|
[element, dataSource, customTitle, showHeader, onApply],
|
|
);
|
|
|
|
// 쿼리 테스트 결과 처리
|
|
const handleQueryTest = useCallback((result: QueryResult) => {
|
|
setQueryResult(result);
|
|
setChartConfig({});
|
|
}, []);
|
|
|
|
// 적용 처리
|
|
const handleApply = useCallback(() => {
|
|
if (!element) return;
|
|
|
|
console.log("🔧 적용 버튼 클릭 - dataSource:", dataSource);
|
|
console.log("🔧 적용 버튼 클릭 - dataSources:", dataSources);
|
|
console.log("🔧 적용 버튼 클릭 - chartConfig:", chartConfig);
|
|
|
|
// 다중 데이터 소스 위젯 체크
|
|
const isMultiDS =
|
|
element.subtype === "map-summary-v2" ||
|
|
element.subtype === "chart" ||
|
|
element.subtype === "list-v2" ||
|
|
element.subtype === "custom-metric-v2" ||
|
|
element.subtype === "risk-alert-v2";
|
|
|
|
const updatedElement: DashboardElement = {
|
|
...element,
|
|
// 다중 데이터 소스 위젯은 dataSources를 chartConfig에 저장
|
|
chartConfig: isMultiDS ? { ...chartConfig, dataSources } : chartConfig,
|
|
dataSources: isMultiDS ? dataSources : undefined, // 프론트엔드 호환성
|
|
dataSource: isMultiDS ? undefined : dataSource,
|
|
customTitle: customTitle.trim() || undefined,
|
|
showHeader,
|
|
};
|
|
|
|
console.log("🔧 적용할 요소:", updatedElement);
|
|
onApply(updatedElement);
|
|
// 사이드바는 열린 채로 유지 (연속 수정 가능)
|
|
}, [element, dataSource, dataSources, chartConfig, customTitle, showHeader, onApply]);
|
|
|
|
// 요소가 없으면 렌더링하지 않음
|
|
if (!element) return null;
|
|
|
|
// 리스트 위젯은 별도 사이드바로 처리
|
|
if (element.subtype === "list") {
|
|
return (
|
|
<ListWidgetConfigSidebar
|
|
element={element}
|
|
isOpen={isOpen}
|
|
onClose={onClose}
|
|
onApply={(updatedElement) => {
|
|
onApply(updatedElement);
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
// 야드 위젯은 사이드바로 처리
|
|
if (element.subtype === "yard-management-3d") {
|
|
return (
|
|
<YardWidgetConfigSidebar
|
|
element={element}
|
|
isOpen={isOpen}
|
|
onApply={(updates) => {
|
|
onApply({ ...element, ...updates });
|
|
}}
|
|
onClose={onClose}
|
|
/>
|
|
);
|
|
}
|
|
|
|
// 사용자 커스텀 카드 위젯은 사이드바로 처리
|
|
if (element.subtype === "custom-metric") {
|
|
return (
|
|
<CustomMetricConfigSidebar
|
|
element={element}
|
|
isOpen={isOpen}
|
|
onClose={onClose}
|
|
onApply={(updates) => {
|
|
onApply({ ...element, ...updates });
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
// 차트 설정이 필요 없는 위젯 (쿼리/API만 필요)
|
|
const isSimpleWidget =
|
|
element.subtype === "todo" ||
|
|
element.subtype === "booking-alert" ||
|
|
element.subtype === "maintenance" ||
|
|
element.subtype === "document" ||
|
|
element.subtype === "risk-alert" ||
|
|
element.subtype === "vehicle-status" ||
|
|
element.subtype === "vehicle-list" ||
|
|
element.subtype === "status-summary" ||
|
|
element.subtype === "delivery-status" ||
|
|
element.subtype === "delivery-status-summary" ||
|
|
element.subtype === "delivery-today-stats" ||
|
|
element.subtype === "cargo-list" ||
|
|
element.subtype === "customer-issues" ||
|
|
element.subtype === "driver-management" ||
|
|
element.subtype === "work-history" ||
|
|
element.subtype === "transport-stats";
|
|
|
|
// 자체 기능 위젯 (DB 연결 불필요, 헤더 설정만 가능)
|
|
const isSelfContainedWidget =
|
|
element.subtype === "weather" || element.subtype === "exchange" || element.subtype === "calculator";
|
|
|
|
// 지도 위젯 (위도/경도 매핑 필요)
|
|
const isMapWidget =
|
|
element.subtype === "vehicle-map" || element.subtype === "map-summary" || element.subtype === "map-test";
|
|
|
|
// 헤더 전용 위젯
|
|
const isHeaderOnlyWidget =
|
|
element.type === "widget" &&
|
|
(element.subtype === "clock" || element.subtype === "calendar" || isSelfContainedWidget);
|
|
|
|
// 다중 데이터 소스 위젯
|
|
const isMultiDataSourceWidget =
|
|
element.subtype === "map-summary-v2" ||
|
|
element.subtype === "chart" ||
|
|
element.subtype === "list-v2" ||
|
|
element.subtype === "custom-metric-v2" ||
|
|
element.subtype === "status-summary-test" ||
|
|
element.subtype === "risk-alert-v2";
|
|
|
|
// 저장 가능 여부 확인
|
|
const isPieChart = element.subtype === "pie" || element.subtype === "donut";
|
|
const isApiSource = dataSource.type === "api";
|
|
|
|
const hasYAxis =
|
|
chartConfig.yAxis &&
|
|
(typeof chartConfig.yAxis === "string" || (Array.isArray(chartConfig.yAxis) && chartConfig.yAxis.length > 0));
|
|
|
|
const isTitleChanged = customTitle.trim() !== (element.customTitle || "");
|
|
const isHeaderChanged = showHeader !== (element.showHeader !== false);
|
|
|
|
const canApply =
|
|
isTitleChanged ||
|
|
isHeaderChanged ||
|
|
(isMultiDataSourceWidget
|
|
? true // 다중 데이터 소스 위젯은 항상 적용 가능
|
|
: isSimpleWidget
|
|
? queryResult && queryResult.rows.length > 0
|
|
: isMapWidget
|
|
? element.subtype === "map-test"
|
|
? chartConfig.tileMapUrl || (queryResult && queryResult.rows.length > 0) // 🧪 지도 테스트 위젯: 타일맵 URL 또는 API 데이터
|
|
: queryResult && queryResult.rows.length > 0 && chartConfig.latitudeColumn && chartConfig.longitudeColumn
|
|
: queryResult &&
|
|
queryResult.rows.length > 0 &&
|
|
chartConfig.xAxis &&
|
|
(isPieChart || isApiSource ? (chartConfig.aggregation === "count" ? true : hasYAxis) : hasYAxis));
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"fixed top-14 left-0 z-[100] flex h-[calc(100vh-3.5rem)] w-80 flex-col bg-gray-50 transition-transform duration-300 ease-in-out",
|
|
isOpen ? "translate-x-0" : "translate-x-[-100%]",
|
|
)}
|
|
>
|
|
{/* 헤더 */}
|
|
<div className="flex items-center justify-between bg-white px-3 py-2 shadow-sm">
|
|
<div className="flex items-center gap-2">
|
|
<div className="bg-primary/10 flex h-6 w-6 items-center justify-center rounded">
|
|
<span className="text-primary text-xs font-bold">⚙</span>
|
|
</div>
|
|
<span className="text-xs font-semibold text-gray-900">{element.title}</span>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="flex h-6 w-6 items-center justify-center rounded transition-colors hover:bg-gray-100"
|
|
>
|
|
<X className="h-3.5 w-3.5 text-gray-500" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* 본문: 스크롤 가능 영역 */}
|
|
<div className="flex-1 overflow-y-auto p-3">
|
|
{/* 기본 설정 카드 */}
|
|
<div className="mb-3 rounded-lg bg-white p-3 shadow-sm">
|
|
<div className="mb-2 text-[10px] font-semibold tracking-wide text-gray-500 uppercase">기본 설정</div>
|
|
<div className="space-y-2">
|
|
{/* 커스텀 제목 입력 */}
|
|
<div>
|
|
<input
|
|
type="text"
|
|
value={customTitle}
|
|
onChange={(e) => setCustomTitle(e.target.value)}
|
|
onKeyDown={(e) => e.stopPropagation()}
|
|
placeholder="위젯 제목"
|
|
className="focus:border-primary focus:ring-primary/20 h-8 w-full rounded border border-gray-200 bg-gray-50 px-2 text-xs placeholder:text-gray-400 focus:bg-white focus:ring-1 focus:outline-none"
|
|
/>
|
|
</div>
|
|
|
|
{/* 헤더 표시 옵션 */}
|
|
<label className="flex cursor-pointer items-center gap-2 rounded border border-gray-200 bg-gray-50 px-2 py-1.5 transition-colors hover:border-gray-300">
|
|
<input
|
|
type="checkbox"
|
|
id="showHeader"
|
|
checked={showHeader}
|
|
onChange={(e) => setShowHeader(e.target.checked)}
|
|
className="text-primary focus:ring-primary h-3 w-3 rounded border-gray-300"
|
|
/>
|
|
<span className="text-xs text-gray-700">헤더 표시</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 다중 데이터 소스 위젯 */}
|
|
{isMultiDataSourceWidget && (
|
|
<>
|
|
<div className="rounded-lg bg-white p-3 shadow-sm">
|
|
<MultiDataSourceConfig
|
|
dataSources={dataSources}
|
|
onChange={setDataSources}
|
|
onTestResult={(result, dataSourceId) => {
|
|
// API 테스트 결과를 queryResult로 설정 (차트 설정용)
|
|
setQueryResult({
|
|
...result,
|
|
totalRows: result.rows.length,
|
|
executionTime: 0,
|
|
});
|
|
console.log("📊 API 테스트 결과 수신:", result, "데이터 소스 ID:", dataSourceId);
|
|
|
|
// ChartTestWidget용: 각 데이터 소스의 테스트 결과 저장
|
|
setTestResults((prev) => {
|
|
const updated = new Map(prev);
|
|
updated.set(dataSourceId, result);
|
|
console.log("📊 테스트 결과 저장:", dataSourceId, result);
|
|
return updated;
|
|
});
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* 지도 위젯: 타일맵 URL 설정 */}
|
|
{element.subtype === "map-summary-v2" && (
|
|
<div className="rounded-lg bg-white shadow-sm">
|
|
<details className="group">
|
|
<summary className="flex cursor-pointer items-center justify-between p-3 hover:bg-gray-50">
|
|
<div>
|
|
<div className="text-xs font-semibold tracking-wide text-gray-500 uppercase">
|
|
타일맵 설정 (선택사항)
|
|
</div>
|
|
<div className="text-muted-foreground mt-0.5 text-[10px]">기본 VWorld 타일맵 사용 중</div>
|
|
</div>
|
|
<svg
|
|
className="h-4 w-4 transition-transform group-open:rotate-180"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</summary>
|
|
<div className="border-t p-3">
|
|
<MapTestConfigPanel
|
|
config={chartConfig}
|
|
queryResult={undefined}
|
|
onConfigChange={handleChartConfigChange}
|
|
/>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
)}
|
|
|
|
{/* 차트 위젯: 차트 설정 */}
|
|
{element.subtype === "chart" && (
|
|
<div className="rounded-lg bg-white shadow-sm">
|
|
<details className="group" open>
|
|
<summary className="flex cursor-pointer items-center justify-between p-3 hover:bg-gray-50">
|
|
<div>
|
|
<div className="text-xs font-semibold tracking-wide text-gray-500 uppercase">차트 설정</div>
|
|
<div className="text-muted-foreground mt-0.5 text-[10px]">
|
|
{testResults.size > 0
|
|
? `${testResults.size}개 데이터 소스 • X축, Y축, 차트 타입 설정`
|
|
: "먼저 데이터 소스를 추가하고 API 테스트를 실행하세요"}
|
|
</div>
|
|
</div>
|
|
<svg
|
|
className="h-4 w-4 transition-transform group-open:rotate-180"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</summary>
|
|
<div className="border-t p-3">
|
|
<MultiChartConfigPanel
|
|
config={chartConfig}
|
|
dataSources={dataSources}
|
|
testResults={testResults}
|
|
onConfigChange={handleChartConfigChange}
|
|
/>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{/* 헤더 전용 위젯이 아닐 때만 데이터 소스 표시 */}
|
|
{!isHeaderOnlyWidget && !isMultiDataSourceWidget && (
|
|
<div className="rounded-lg bg-white p-3 shadow-sm">
|
|
<div className="mb-2 text-[10px] font-semibold tracking-wide text-gray-500 uppercase">데이터 소스</div>
|
|
|
|
<Tabs
|
|
defaultValue={dataSource.type}
|
|
onValueChange={(value) => handleDataSourceTypeChange(value as "database" | "api")}
|
|
className="w-full"
|
|
>
|
|
<TabsList className="grid h-7 w-full grid-cols-2 bg-gray-100 p-0.5">
|
|
<TabsTrigger
|
|
value="database"
|
|
className="h-6 rounded text-[11px] data-[state=active]:bg-white data-[state=active]:shadow-sm"
|
|
>
|
|
데이터베이스
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="api"
|
|
className="h-6 rounded text-[11px] data-[state=active]:bg-white data-[state=active]:shadow-sm"
|
|
>
|
|
REST API
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="database" className="mt-2 space-y-2">
|
|
<DatabaseConfig dataSource={dataSource} onChange={handleDataSourceUpdate} />
|
|
<QueryEditor
|
|
dataSource={dataSource}
|
|
onDataSourceChange={handleDataSourceUpdate}
|
|
onQueryTest={handleQueryTest}
|
|
/>
|
|
|
|
{/* 차트/지도 설정 */}
|
|
{!isSimpleWidget &&
|
|
(element.subtype === "map-test" || (queryResult && queryResult.rows.length > 0)) && (
|
|
<div className="mt-2">
|
|
{isMapWidget ? (
|
|
element.subtype === "map-test" ? (
|
|
<MapTestConfigPanel
|
|
config={chartConfig}
|
|
queryResult={queryResult || undefined}
|
|
onConfigChange={handleChartConfigChange}
|
|
/>
|
|
) : (
|
|
queryResult &&
|
|
queryResult.rows.length > 0 && (
|
|
<VehicleMapConfigPanel
|
|
config={chartConfig}
|
|
queryResult={queryResult}
|
|
onConfigChange={handleChartConfigChange}
|
|
/>
|
|
)
|
|
)
|
|
) : (
|
|
queryResult &&
|
|
queryResult.rows.length > 0 && (
|
|
<ChartConfigPanel
|
|
config={chartConfig}
|
|
queryResult={queryResult}
|
|
onConfigChange={handleChartConfigChange}
|
|
chartType={element.subtype}
|
|
dataSourceType={dataSource.type}
|
|
query={dataSource.query}
|
|
/>
|
|
)
|
|
)}
|
|
</div>
|
|
)}
|
|
</TabsContent>
|
|
|
|
<TabsContent value="api" className="mt-2 space-y-2">
|
|
<ApiConfig dataSource={dataSource} onChange={handleDataSourceUpdate} onTestResult={handleQueryTest} />
|
|
|
|
{/* 차트/지도 설정 */}
|
|
{!isSimpleWidget &&
|
|
(element.subtype === "map-test" || (queryResult && queryResult.rows.length > 0)) && (
|
|
<div className="mt-2">
|
|
{isMapWidget ? (
|
|
element.subtype === "map-test" ? (
|
|
<MapTestConfigPanel
|
|
config={chartConfig}
|
|
queryResult={queryResult || undefined}
|
|
onConfigChange={handleChartConfigChange}
|
|
/>
|
|
) : (
|
|
queryResult &&
|
|
queryResult.rows.length > 0 && (
|
|
<VehicleMapConfigPanel
|
|
config={chartConfig}
|
|
queryResult={queryResult}
|
|
onConfigChange={handleChartConfigChange}
|
|
/>
|
|
)
|
|
)
|
|
) : (
|
|
queryResult &&
|
|
queryResult.rows.length > 0 && (
|
|
<ChartConfigPanel
|
|
config={chartConfig}
|
|
queryResult={queryResult}
|
|
onConfigChange={handleChartConfigChange}
|
|
chartType={element.subtype}
|
|
dataSourceType={dataSource.type}
|
|
query={dataSource.query}
|
|
/>
|
|
)
|
|
)}
|
|
</div>
|
|
)}
|
|
</TabsContent>
|
|
</Tabs>
|
|
|
|
{/* 데이터 로드 상태 */}
|
|
{queryResult && (
|
|
<div className="mt-2 flex items-center gap-1.5 rounded bg-green-50 px-2 py-1">
|
|
<div className="h-1.5 w-1.5 rounded-full bg-green-500" />
|
|
<span className="text-[10px] font-medium text-green-700">
|
|
{queryResult.rows.length}개 데이터 로드됨
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 푸터: 적용 버튼 */}
|
|
<div className="flex gap-2 bg-white p-2 shadow-[0_-2px_8px_rgba(0,0,0,0.05)]">
|
|
<button
|
|
onClick={onClose}
|
|
className="flex-1 rounded bg-gray-100 py-2 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-200"
|
|
>
|
|
취소
|
|
</button>
|
|
<button
|
|
onClick={handleApply}
|
|
disabled={isHeaderOnlyWidget ? false : !canApply}
|
|
className="bg-primary hover:bg-primary/90 flex-1 rounded py-2 text-xs font-medium text-white transition-colors disabled:cursor-not-allowed disabled:opacity-50"
|
|
>
|
|
적용
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|