665 lines
29 KiB
TypeScript
665 lines
29 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useCallback, useEffect } from "react";
|
|
import { DashboardElement, ChartDataSource, QueryResult } from "../types";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { ChevronLeft, ChevronRight, Save, X } from "lucide-react";
|
|
import { DataSourceSelector } from "../data-sources/DataSourceSelector";
|
|
import { DatabaseConfig } from "../data-sources/DatabaseConfig";
|
|
import { ApiConfig } from "../data-sources/ApiConfig";
|
|
import { QueryEditor } from "../QueryEditor";
|
|
|
|
interface TodoWidgetConfigModalProps {
|
|
isOpen: boolean;
|
|
element: DashboardElement;
|
|
onClose: () => void;
|
|
onSave: (updates: Partial<DashboardElement>) => void;
|
|
}
|
|
|
|
/**
|
|
* 일정관리 위젯 설정 모달 (범용)
|
|
* - 2단계 설정: 데이터 소스 → 쿼리 입력/테스트
|
|
*/
|
|
export function TodoWidgetConfigModal({ isOpen, element, onClose, onSave }: TodoWidgetConfigModalProps) {
|
|
const [currentStep, setCurrentStep] = useState<1 | 2>(1);
|
|
const [title, setTitle] = useState(element.title || "일정관리 위젯");
|
|
const [dataSource, setDataSource] = useState<ChartDataSource>(
|
|
element.dataSource || { type: "database", connectionType: "current", refreshInterval: 0 },
|
|
);
|
|
const [queryResult, setQueryResult] = useState<QueryResult | null>(null);
|
|
|
|
// 데이터베이스 연동 설정
|
|
const [enableDbSync, setEnableDbSync] = useState(element.chartConfig?.enableDbSync || false);
|
|
const [dbSyncMode, setDbSyncMode] = useState<"simple" | "advanced">(element.chartConfig?.dbSyncMode || "simple");
|
|
const [tableName, setTableName] = useState(element.chartConfig?.tableName || "");
|
|
const [columnMapping, setColumnMapping] = useState(element.chartConfig?.columnMapping || {
|
|
id: "id",
|
|
title: "title",
|
|
description: "description",
|
|
priority: "priority",
|
|
status: "status",
|
|
assignedTo: "assigned_to",
|
|
dueDate: "due_date",
|
|
isUrgent: "is_urgent",
|
|
});
|
|
|
|
// 모달 열릴 때 element에서 설정 로드
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
setTitle(element.title || "일정관리 위젯");
|
|
|
|
// 데이터 소스 설정 로드 (저장된 설정 우선, 없으면 기본값)
|
|
const loadedDataSource = element.dataSource || {
|
|
type: "database",
|
|
connectionType: "current",
|
|
refreshInterval: 0
|
|
};
|
|
setDataSource(loadedDataSource);
|
|
|
|
// 저장된 쿼리가 있으면 자동으로 실행 (실제 결과 가져오기)
|
|
if (loadedDataSource.query) {
|
|
// 쿼리 자동 실행
|
|
const executeQuery = async () => {
|
|
try {
|
|
const token = localStorage.getItem("authToken");
|
|
const userLang = localStorage.getItem("userLang") || "KR";
|
|
|
|
const apiUrl = loadedDataSource.connectionType === "external" && loadedDataSource.externalConnectionId
|
|
? `http://localhost:9771/api/external-db/query?userLang=${userLang}`
|
|
: `http://localhost:9771/api/dashboards/execute-query?userLang=${userLang}`;
|
|
|
|
const requestBody = loadedDataSource.connectionType === "external" && loadedDataSource.externalConnectionId
|
|
? {
|
|
connectionId: parseInt(loadedDataSource.externalConnectionId),
|
|
query: loadedDataSource.query,
|
|
}
|
|
: { query: loadedDataSource.query };
|
|
|
|
const response = await fetch(apiUrl, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
body: JSON.stringify(requestBody),
|
|
});
|
|
|
|
if (response.ok) {
|
|
const result = await response.json();
|
|
const rows = result.data?.rows || result.data || [];
|
|
setQueryResult({
|
|
rows: rows,
|
|
rowCount: rows.length,
|
|
executionTime: 0,
|
|
});
|
|
} else {
|
|
// 실패해도 더미 결과로 2단계 진입 가능
|
|
setQueryResult({
|
|
rows: [{ _info: "저장된 쿼리가 있습니다. 다시 테스트해주세요." }],
|
|
rowCount: 1,
|
|
executionTime: 0,
|
|
});
|
|
}
|
|
} catch (error) {
|
|
// 에러 발생해도 2단계 진입 가능
|
|
setQueryResult({
|
|
rows: [{ _info: "저장된 쿼리가 있습니다. 다시 테스트해주세요." }],
|
|
rowCount: 1,
|
|
executionTime: 0,
|
|
});
|
|
}
|
|
};
|
|
|
|
executeQuery();
|
|
}
|
|
|
|
// DB 동기화 설정 로드
|
|
setEnableDbSync(element.chartConfig?.enableDbSync || false);
|
|
setDbSyncMode(element.chartConfig?.dbSyncMode || "simple");
|
|
setTableName(element.chartConfig?.tableName || "");
|
|
if (element.chartConfig?.columnMapping) {
|
|
setColumnMapping(element.chartConfig.columnMapping);
|
|
}
|
|
setCurrentStep(1);
|
|
}
|
|
}, [isOpen, element.id]);
|
|
|
|
// 데이터 소스 타입 변경
|
|
const handleDataSourceTypeChange = useCallback((type: "database" | "api") => {
|
|
if (type === "database") {
|
|
setDataSource((prev) => ({
|
|
...prev,
|
|
type: "database",
|
|
connectionType: "current",
|
|
}));
|
|
} else {
|
|
setDataSource((prev) => ({
|
|
...prev,
|
|
type: "api",
|
|
method: "GET",
|
|
}));
|
|
}
|
|
setQueryResult(null);
|
|
}, []);
|
|
|
|
// 데이터 소스 업데이트
|
|
const handleDataSourceUpdate = useCallback((updates: Partial<ChartDataSource>) => {
|
|
setDataSource((prev) => ({ ...prev, ...updates }));
|
|
}, []);
|
|
|
|
// 쿼리 실행 결과 처리
|
|
const handleQueryTest = useCallback(
|
|
(result: QueryResult) => {
|
|
// console.log("🎯 TodoWidget - handleQueryTest 호출됨!");
|
|
// console.log("📊 쿼리 결과:", result);
|
|
// console.log("📝 rows 개수:", result.rows?.length);
|
|
// console.log("❌ error:", result.error);
|
|
setQueryResult(result);
|
|
// console.log("✅ setQueryResult 호출 완료!");
|
|
|
|
// 강제 리렌더링 확인
|
|
// setTimeout(() => {
|
|
// console.log("🔄 1초 후 queryResult 상태:", result);
|
|
// }, 1000);
|
|
},
|
|
[],
|
|
);
|
|
|
|
// 저장
|
|
const handleSave = useCallback(() => {
|
|
if (!dataSource.query || !queryResult || queryResult.error) {
|
|
alert("쿼리를 입력하고 테스트를 먼저 실행해주세요.");
|
|
return;
|
|
}
|
|
|
|
if (!queryResult.rows || queryResult.rows.length === 0) {
|
|
alert("쿼리 결과가 없습니다. 데이터가 반환되는 쿼리를 입력해주세요.");
|
|
return;
|
|
}
|
|
|
|
// 간편 모드에서 테이블명 필수 체크
|
|
if (enableDbSync && dbSyncMode === "simple" && !tableName.trim()) {
|
|
alert("데이터베이스 연동을 활성화하려면 테이블명을 입력해주세요.");
|
|
return;
|
|
}
|
|
|
|
onSave({
|
|
title,
|
|
dataSource,
|
|
chartConfig: {
|
|
...element.chartConfig,
|
|
enableDbSync,
|
|
dbSyncMode,
|
|
tableName,
|
|
columnMapping,
|
|
insertQuery: element.chartConfig?.insertQuery,
|
|
updateQuery: element.chartConfig?.updateQuery,
|
|
deleteQuery: element.chartConfig?.deleteQuery,
|
|
},
|
|
});
|
|
|
|
onClose();
|
|
}, [title, dataSource, queryResult, enableDbSync, dbSyncMode, tableName, columnMapping, element.chartConfig, onSave, onClose]);
|
|
|
|
// 다음 단계로
|
|
const handleNext = useCallback(() => {
|
|
if (currentStep === 1) {
|
|
if (dataSource.type === "database") {
|
|
if (!dataSource.connectionId && dataSource.connectionType === "external") {
|
|
alert("외부 데이터베이스를 선택해주세요.");
|
|
return;
|
|
}
|
|
} else if (dataSource.type === "api") {
|
|
if (!dataSource.url) {
|
|
alert("API URL을 입력해주세요.");
|
|
return;
|
|
}
|
|
}
|
|
setCurrentStep(2);
|
|
}
|
|
}, [currentStep, dataSource]);
|
|
|
|
// 이전 단계로
|
|
const handlePrev = useCallback(() => {
|
|
if (currentStep === 2) {
|
|
setCurrentStep(1);
|
|
}
|
|
}, [currentStep]);
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50">
|
|
<div className="relative flex h-[90vh] w-[90vw] max-w-6xl flex-col rounded-lg bg-background shadow-xl">
|
|
{/* 헤더 */}
|
|
<div className="flex items-center justify-between border-b border-border px-6 py-4">
|
|
<div>
|
|
<h2 className="text-xl font-bold text-foreground">일정관리 위젯 설정</h2>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
데이터 소스와 쿼리를 설정하면 자동으로 일정 목록이 표시됩니다
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="rounded-lg p-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
|
|
>
|
|
<X className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* 진행 상태 */}
|
|
<div className="border-b border-border bg-muted px-6 py-3">
|
|
<div className="flex items-center gap-4">
|
|
<div className={`flex items-center gap-2 ${currentStep === 1 ? "text-primary" : "text-muted-foreground"}`}>
|
|
<div
|
|
className={`flex h-8 w-8 items-center justify-center rounded-full font-semibold ${
|
|
currentStep === 1 ? "bg-primary text-white" : "bg-muted"
|
|
}`}
|
|
>
|
|
1
|
|
</div>
|
|
<span className="font-medium">데이터 소스 선택</span>
|
|
</div>
|
|
<ChevronRight className="h-4 w-4 text-muted-foreground" />
|
|
<div className={`flex items-center gap-2 ${currentStep === 2 ? "text-primary" : "text-muted-foreground"}`}>
|
|
<div
|
|
className={`flex h-8 w-8 items-center justify-center rounded-full font-semibold ${
|
|
currentStep === 2 ? "bg-primary text-white" : "bg-muted"
|
|
}`}
|
|
>
|
|
2
|
|
</div>
|
|
<span className="font-medium">쿼리 입력 및 테스트</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 본문 */}
|
|
<div className="flex-1 overflow-y-auto p-6">
|
|
{/* Step 1: 데이터 소스 선택 */}
|
|
{currentStep === 1 && (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<Label className="text-base font-semibold">제목</Label>
|
|
<Input
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
placeholder="예: 오늘의 일정"
|
|
className="mt-2"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="text-base font-semibold">데이터 소스 타입</Label>
|
|
<DataSourceSelector
|
|
dataSource={dataSource}
|
|
onTypeChange={handleDataSourceTypeChange}
|
|
/>
|
|
</div>
|
|
|
|
{dataSource.type === "database" && (
|
|
<DatabaseConfig dataSource={dataSource} onUpdate={handleDataSourceUpdate} />
|
|
)}
|
|
|
|
{dataSource.type === "api" && <ApiConfig dataSource={dataSource} onUpdate={handleDataSourceUpdate} />}
|
|
</div>
|
|
)}
|
|
|
|
{/* Step 2: 쿼리 입력 및 테스트 */}
|
|
{currentStep === 2 && (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<div className="mb-4 rounded-lg bg-primary/10 p-4">
|
|
<h3 className="mb-2 font-semibold text-primary">💡 컬럼명 가이드</h3>
|
|
<p className="mb-2 text-sm text-primary">
|
|
쿼리 결과에 다음 컬럼명이 있으면 자동으로 일정 항목으로 변환됩니다:
|
|
</p>
|
|
<ul className="space-y-1 text-sm text-primary">
|
|
<li>
|
|
<code className="rounded bg-primary/10 px-1 py-0.5">id</code> - 고유 ID (없으면 자동 생성)
|
|
</li>
|
|
<li>
|
|
<code className="rounded bg-primary/10 px-1 py-0.5">title</code>,{" "}
|
|
<code className="rounded bg-primary/10 px-1 py-0.5">task</code>,{" "}
|
|
<code className="rounded bg-primary/10 px-1 py-0.5">name</code> - 제목 (필수)
|
|
</li>
|
|
<li>
|
|
<code className="rounded bg-primary/10 px-1 py-0.5">description</code>,{" "}
|
|
<code className="rounded bg-primary/10 px-1 py-0.5">desc</code>,{" "}
|
|
<code className="rounded bg-primary/10 px-1 py-0.5">content</code> - 상세 설명
|
|
</li>
|
|
<li>
|
|
<code className="rounded bg-primary/10 px-1 py-0.5">priority</code> - 우선순위 (urgent, high,
|
|
normal, low)
|
|
</li>
|
|
<li>
|
|
<code className="rounded bg-primary/10 px-1 py-0.5">status</code> - 상태 (pending, in_progress,
|
|
completed)
|
|
</li>
|
|
<li>
|
|
<code className="rounded bg-primary/10 px-1 py-0.5">assigned_to</code>,{" "}
|
|
<code className="rounded bg-primary/10 px-1 py-0.5">assignedTo</code>,{" "}
|
|
<code className="rounded bg-primary/10 px-1 py-0.5">user</code> - 담당자
|
|
</li>
|
|
<li>
|
|
<code className="rounded bg-primary/10 px-1 py-0.5">due_date</code>,{" "}
|
|
<code className="rounded bg-primary/10 px-1 py-0.5">dueDate</code>,{" "}
|
|
<code className="rounded bg-primary/10 px-1 py-0.5">deadline</code> - 마감일
|
|
</li>
|
|
<li>
|
|
<code className="rounded bg-primary/10 px-1 py-0.5">is_urgent</code>,{" "}
|
|
<code className="rounded bg-primary/10 px-1 py-0.5">isUrgent</code>,{" "}
|
|
<code className="rounded bg-primary/10 px-1 py-0.5">urgent</code> - 긴급 여부
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<QueryEditor
|
|
dataSource={dataSource}
|
|
onDataSourceChange={handleDataSourceUpdate}
|
|
onQueryTest={handleQueryTest}
|
|
/>
|
|
</div>
|
|
|
|
{/* 디버그: 항상 표시되는 테스트 메시지 */}
|
|
<div className="mt-4 rounded-lg bg-warning/10 border-2 border-warning p-4">
|
|
<p className="text-sm font-bold text-warning">
|
|
🔍 디버그: queryResult 상태 = {queryResult ? "있음" : "없음"}
|
|
</p>
|
|
{queryResult && (
|
|
<p className="text-xs text-warning mt-1">
|
|
rows: {queryResult.rows?.length}개, error: {queryResult.error || "없음"}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{queryResult && !queryResult.error && queryResult.rows && queryResult.rows.length > 0 && (
|
|
<div className="mt-4 rounded-lg bg-success/10 border-2 border-success p-4">
|
|
<h3 className="mb-2 font-semibold text-success">✅ 쿼리 테스트 성공!</h3>
|
|
<p className="text-sm text-success">
|
|
총 <strong>{queryResult.rows.length}개</strong>의 일정 항목을 찾았습니다.
|
|
</p>
|
|
<div className="mt-3 rounded bg-background p-3">
|
|
<p className="mb-2 text-xs font-semibold text-foreground">첫 번째 데이터 미리보기:</p>
|
|
<pre className="overflow-x-auto text-xs text-foreground">
|
|
{JSON.stringify(queryResult.rows[0], null, 2)}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 데이터베이스 연동 쿼리 (선택사항) */}
|
|
<div className="mt-6 space-y-4 rounded-lg border-2 border-purple-500 bg-purple-500/10 p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h3 className="font-semibold text-purple-700">🔗 데이터베이스 연동 (선택사항)</h3>
|
|
<p className="text-sm text-purple-700">
|
|
위젯에서 추가/수정/삭제 시 데이터베이스에 직접 반영
|
|
</p>
|
|
</div>
|
|
<label className="flex items-center gap-2">
|
|
<input
|
|
type="checkbox"
|
|
checked={enableDbSync}
|
|
onChange={(e) => setEnableDbSync(e.target.checked)}
|
|
className="h-4 w-4 rounded border-purple-500/50"
|
|
/>
|
|
<span className="text-sm font-medium text-purple-700">활성화</span>
|
|
</label>
|
|
</div>
|
|
|
|
{enableDbSync && (
|
|
<>
|
|
{/* 모드 선택 */}
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => setDbSyncMode("simple")}
|
|
className={`flex-1 rounded px-4 py-2 text-sm font-medium transition-colors ${
|
|
dbSyncMode === "simple"
|
|
? "bg-purple-500 text-white"
|
|
: "bg-background text-purple-500 hover:bg-purple-500/10"
|
|
}`}
|
|
>
|
|
간편 모드
|
|
</button>
|
|
<button
|
|
onClick={() => setDbSyncMode("advanced")}
|
|
className={`flex-1 rounded px-4 py-2 text-sm font-medium transition-colors ${
|
|
dbSyncMode === "advanced"
|
|
? "bg-purple-500 text-white"
|
|
: "bg-background text-purple-500 hover:bg-purple-500/10"
|
|
}`}
|
|
>
|
|
고급 모드
|
|
</button>
|
|
</div>
|
|
|
|
{/* 간편 모드 */}
|
|
{dbSyncMode === "simple" && (
|
|
<div className="space-y-4 rounded-lg border border-purple-500/50 bg-background p-4">
|
|
<p className="text-sm text-purple-700">
|
|
테이블명과 컬럼 매핑만 입력하면 자동으로 INSERT/UPDATE/DELETE 쿼리가 생성됩니다.
|
|
</p>
|
|
|
|
{/* 테이블명 */}
|
|
<div>
|
|
<Label className="text-sm font-semibold text-purple-700">테이블명 *</Label>
|
|
<Input
|
|
value={tableName}
|
|
onChange={(e) => setTableName(e.target.value)}
|
|
placeholder="예: tasks"
|
|
className="mt-2"
|
|
/>
|
|
</div>
|
|
|
|
{/* 컬럼 매핑 */}
|
|
<div>
|
|
<Label className="text-sm font-semibold text-purple-700">컬럼 매핑</Label>
|
|
<div className="mt-2 grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="text-xs text-foreground">ID 컬럼</label>
|
|
<Input
|
|
value={columnMapping.id}
|
|
onChange={(e) => setColumnMapping({ ...columnMapping, id: e.target.value })}
|
|
placeholder="id"
|
|
className="mt-1 h-8 text-sm"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs text-foreground">제목 컬럼</label>
|
|
<Input
|
|
value={columnMapping.title}
|
|
onChange={(e) => setColumnMapping({ ...columnMapping, title: e.target.value })}
|
|
placeholder="title"
|
|
className="mt-1 h-8 text-sm"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs text-foreground">설명 컬럼</label>
|
|
<Input
|
|
value={columnMapping.description}
|
|
onChange={(e) => setColumnMapping({ ...columnMapping, description: e.target.value })}
|
|
placeholder="description"
|
|
className="mt-1 h-8 text-sm"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs text-foreground">우선순위 컬럼</label>
|
|
<Input
|
|
value={columnMapping.priority}
|
|
onChange={(e) => setColumnMapping({ ...columnMapping, priority: e.target.value })}
|
|
placeholder="priority"
|
|
className="mt-1 h-8 text-sm"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs text-foreground">상태 컬럼</label>
|
|
<Input
|
|
value={columnMapping.status}
|
|
onChange={(e) => setColumnMapping({ ...columnMapping, status: e.target.value })}
|
|
placeholder="status"
|
|
className="mt-1 h-8 text-sm"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs text-foreground">담당자 컬럼</label>
|
|
<Input
|
|
value={columnMapping.assignedTo}
|
|
onChange={(e) => setColumnMapping({ ...columnMapping, assignedTo: e.target.value })}
|
|
placeholder="assigned_to"
|
|
className="mt-1 h-8 text-sm"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs text-foreground">마감일 컬럼</label>
|
|
<Input
|
|
value={columnMapping.dueDate}
|
|
onChange={(e) => setColumnMapping({ ...columnMapping, dueDate: e.target.value })}
|
|
placeholder="due_date"
|
|
className="mt-1 h-8 text-sm"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs text-foreground">긴급 여부 컬럼</label>
|
|
<Input
|
|
value={columnMapping.isUrgent}
|
|
onChange={(e) => setColumnMapping({ ...columnMapping, isUrgent: e.target.value })}
|
|
placeholder="is_urgent"
|
|
className="mt-1 h-8 text-sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 고급 모드 */}
|
|
{dbSyncMode === "advanced" && (
|
|
<div className="space-y-4">
|
|
<p className="text-sm text-purple-700">
|
|
복잡한 로직이 필요한 경우 직접 쿼리를 작성하세요.
|
|
</p>
|
|
|
|
{/* INSERT 쿼리 */}
|
|
<div>
|
|
<Label className="text-sm font-semibold text-purple-700">INSERT 쿼리 (추가)</Label>
|
|
<p className="mb-2 text-xs text-purple-500">
|
|
사용 가능한 변수: ${"{title}"}, ${"{description}"}, ${"{priority}"}, ${"{status}"}, ${"{assignedTo}"}, ${"{dueDate}"}, ${"{isUrgent}"}
|
|
</p>
|
|
<textarea
|
|
value={element.chartConfig?.insertQuery || ""}
|
|
onChange={(e) => {
|
|
const updates = {
|
|
...element,
|
|
chartConfig: {
|
|
...element.chartConfig,
|
|
insertQuery: e.target.value,
|
|
},
|
|
};
|
|
Object.assign(element, updates);
|
|
}}
|
|
placeholder="예: INSERT INTO tasks (title, description, status) VALUES ('${title}', '${description}', '${status}')"
|
|
className="h-20 w-full rounded border border-purple-500/50 bg-background px-3 py-2 text-sm font-mono focus:border-purple-500 focus:outline-none"
|
|
/>
|
|
</div>
|
|
|
|
{/* UPDATE 쿼리 */}
|
|
<div>
|
|
<Label className="text-sm font-semibold text-purple-700">UPDATE 쿼리 (상태 변경)</Label>
|
|
<p className="mb-2 text-xs text-purple-500">
|
|
사용 가능한 변수: ${"{id}"}, ${"{status}"}
|
|
</p>
|
|
<textarea
|
|
value={element.chartConfig?.updateQuery || ""}
|
|
onChange={(e) => {
|
|
const updates = {
|
|
...element,
|
|
chartConfig: {
|
|
...element.chartConfig,
|
|
updateQuery: e.target.value,
|
|
},
|
|
};
|
|
Object.assign(element, updates);
|
|
}}
|
|
placeholder="예: UPDATE tasks SET status = '${status}' WHERE id = ${id}"
|
|
className="h-20 w-full rounded border border-purple-500/50 bg-background px-3 py-2 text-sm font-mono focus:border-purple-500 focus:outline-none"
|
|
/>
|
|
</div>
|
|
|
|
{/* DELETE 쿼리 */}
|
|
<div>
|
|
<Label className="text-sm font-semibold text-purple-700">DELETE 쿼리 (삭제)</Label>
|
|
<p className="mb-2 text-xs text-purple-500">
|
|
사용 가능한 변수: ${"{id}"}
|
|
</p>
|
|
<textarea
|
|
value={element.chartConfig?.deleteQuery || ""}
|
|
onChange={(e) => {
|
|
const updates = {
|
|
...element,
|
|
chartConfig: {
|
|
...element.chartConfig,
|
|
deleteQuery: e.target.value,
|
|
},
|
|
};
|
|
Object.assign(element, updates);
|
|
}}
|
|
placeholder="예: DELETE FROM tasks WHERE id = ${id}"
|
|
className="h-20 w-full rounded border border-purple-500/50 bg-background px-3 py-2 text-sm font-mono focus:border-purple-500 focus:outline-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 하단 버튼 */}
|
|
<div className="flex items-center justify-between border-t border-border px-6 py-4">
|
|
<div>
|
|
{currentStep > 1 && (
|
|
<Button onClick={handlePrev} variant="outline">
|
|
<ChevronLeft className="mr-1 h-4 w-4" />
|
|
이전
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
<Button onClick={onClose} variant="outline">
|
|
취소
|
|
</Button>
|
|
|
|
{currentStep < 2 ? (
|
|
<Button onClick={handleNext}>
|
|
다음
|
|
<ChevronRight className="ml-1 h-4 w-4" />
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
onClick={handleSave}
|
|
disabled={(() => {
|
|
const isDisabled = !queryResult || queryResult.error || !queryResult.rows || queryResult.rows.length === 0;
|
|
// console.log("💾 저장 버튼 disabled:", isDisabled);
|
|
// console.log("💾 queryResult:", queryResult);
|
|
return isDisabled;
|
|
})()}
|
|
>
|
|
<Save className="mr-1 h-4 w-4" />
|
|
저장
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|