Merge pull request 'lhj' (#137) from lhj into main

Reviewed-on: http://39.117.244.52:3000/kjs/ERP-node/pulls/137

frontend/components/admin/dashboard/CanvasElement.tsx

@@ -78,7 +78,7 @@ const RiskAlertWidget = dynamic(() => import("@/components/dashboard/widgets/Ris
   loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
 });
 
-const TodoWidget = dynamic(() => import("@/components/dashboard/widgets/TodoWidget"), {
+const TaskWidget = dynamic(() => import("@/components/dashboard/widgets/TaskWidget"), {
   ssr: false,
   loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
 });
@@ -88,11 +88,6 @@ const BookingAlertWidget = dynamic(() => import("@/components/dashboard/widgets/
   loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
 });
 
-const MaintenanceWidget = dynamic(() => import("@/components/dashboard/widgets/MaintenanceWidget"), {
-  ssr: false,
-  loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
-});
-
 const DocumentWidget = dynamic(() => import("@/components/dashboard/widgets/DocumentWidget"), {
   ssr: false,
   loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
@@ -922,25 +917,20 @@ export function CanvasElement({
             <CustomStatsWidget element={element} />
           </div>
         ) : element.type === "widget" && element.subtype === "custom-metric" ? (
-          // 사용자 커스텀 카드 위젯 렌더링
+          // 사용자 커스텀 카드 위젯 렌더링 (main에서 추가)
           <div className="h-full w-full">
             <CustomMetricWidget element={element} />
           </div>
-        ) : element.type === "widget" && element.subtype === "todo" ? (
-          // To-Do 위젯 렌더링
+        ) : element.type === "widget" && (element.subtype === "todo" || element.subtype === "maintenance") ? (
+          // Task 위젯 렌더링 (To-Do + 정비 일정 통합, lhj)
           <div className="widget-interactive-area h-full w-full">
-            <TodoWidget element={element} />
+            <TaskWidget element={element} />
           </div>
         ) : element.type === "widget" && element.subtype === "booking-alert" ? (
           // 예약 요청 알림 위젯 렌더링
           <div className="widget-interactive-area h-full w-full">
             <BookingAlertWidget />
           </div>
-        ) : element.type === "widget" && element.subtype === "maintenance" ? (
-          // 정비 일정 위젯 렌더링
-          <div className="widget-interactive-area h-full w-full">
-            <MaintenanceWidget />
-          </div>
         ) : element.type === "widget" && element.subtype === "document" ? (
           // 문서 다운로드 위젯 렌더링
           <div className="widget-interactive-area h-full w-full">

frontend/components/admin/dashboard/DashboardTopMenu.tsx

@@ -190,14 +190,14 @@ export function DashboardTopMenu({
             <SelectGroup>
               <SelectLabel>일반 위젯</SelectLabel>
               <SelectItem value="weather">날씨</SelectItem>
+              {/* <SelectItem value="weather-map">날씨 지도</SelectItem> */}
               <SelectItem value="exchange">환율</SelectItem>
               <SelectItem value="calculator">계산기</SelectItem>
               <SelectItem value="calendar">달력</SelectItem>
               <SelectItem value="clock">시계</SelectItem>
-              <SelectItem value="todo">할 일</SelectItem>
+              <SelectItem value="todo">일정관리 위젯</SelectItem>
               {/* <SelectItem value="booking-alert">예약 알림</SelectItem> */}
-              <SelectItem value="maintenance">정비 일정</SelectItem>
-              {/* <SelectItem value="document">문서</SelectItem> */}
+              <SelectItem value="document">문서</SelectItem>
               <SelectItem value="risk-alert">리스크 알림</SelectItem>
             </SelectGroup>
             {/* 범용 위젯으로 대체 가능하여 주석처리 */}

frontend/components/admin/dashboard/ElementConfigModal.tsx

@@ -67,15 +67,42 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
   // 모달이 열릴 때 초기화
   useEffect(() => {
     if (isOpen) {
-      setDataSource(element.dataSource || { type: "database", connectionType: "current", refreshInterval: 0 });
+      const dataSourceToSet = element.dataSource || { type: "database", connectionType: "current", refreshInterval: 0 };
+      setDataSource(dataSourceToSet);
       setChartConfig(element.chartConfig || {});
       setQueryResult(null);
       setCurrentStep(1);
       setCustomTitle(element.customTitle || "");
       setShowHeader(element.showHeader !== false); // showHeader 초기화
+
+      // 쿼리가 이미 있으면 자동 실행
+      if (dataSourceToSet.type === "database" && dataSourceToSet.query) {
+        console.log("🔄 기존 쿼리 자동 실행:", dataSourceToSet.query);
+        executeQueryAutomatically(dataSourceToSet);
+      }
     }
   }, [isOpen, element]);
 
+  // 쿼리 자동 실행 함수
+  const executeQueryAutomatically = async (dataSourceToExecute: ChartDataSource) => {
+    if (dataSourceToExecute.type !== "database" || !dataSourceToExecute.query) return;
+
+    try {
+      const { queryApi } = await import("@/lib/api/query");
+      const result = await queryApi.executeQuery({
+        query: dataSourceToExecute.query,
+        connectionType: dataSourceToExecute.connectionType || "current",
+        externalConnectionId: dataSourceToExecute.externalConnectionId,
+      });
+
+      console.log("✅ 쿼리 자동 실행 완료:", result);
+      setQueryResult(result);
+    } catch (error) {
+      console.error("❌ 쿼리 자동 실행 실패:", error);
+      // 실패해도 모달은 열리도록 (사용자가 다시 실행 가능)
+    }
+  };
+
   // 데이터 소스 타입 변경
   const handleDataSourceTypeChange = useCallback((type: "database" | "api") => {
     if (type === "database") {

frontend/components/admin/dashboard/QueryEditor.tsx

@@ -35,6 +35,13 @@ export function QueryEditor({ dataSource, onDataSourceChange, onQueryTest }: Que
   const [error, setError] = useState<string | null>(null);
   const [sampleQueryOpen, setSampleQueryOpen] = useState(false);
 
+  // dataSource.query가 변경되면 query state 업데이트 (저장된 쿼리 불러오기)
+  React.useEffect(() => {
+    if (dataSource?.query) {
+      setQuery(dataSource.query);
+    }
+  }, [dataSource?.query]);
+
   // 쿼리 실행
   const executeQuery = useCallback(async () => {
     // console.log("🚀 executeQuery 호출됨!");

frontend/components/admin/dashboard/VehicleMapConfigPanel.tsx

@@ -134,6 +134,37 @@ export function VehicleMapConfigPanel({ config, queryResult, onConfigChange }: V
             </select>
           </div>
 
+          {/* 날씨 정보 표시 옵션 */}
+        <div className="space-y-1.5">
+          <label className="flex items-center gap-2 text-xs font-medium text-gray-700 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={currentConfig.showWeather || false}
+              onChange={(e) => updateConfig({ showWeather: e.target.checked })}
+              className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-primary"
+            />
+            <span>날씨 정보 표시</span>
+          </label>
+          <p className="text-xs text-gray-500 ml-6">
+            마커 팝업에 해당 위치의 날씨 정보를 함께 표시합니다
+          </p>
+        </div>
+
+        <div className="space-y-1.5">
+          <label className="flex items-center gap-2 text-xs font-medium text-gray-700 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={currentConfig.showWeatherAlerts || false}
+              onChange={(e) => updateConfig({ showWeatherAlerts: e.target.checked })}
+              className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-primary"
+            />
+            <span>기상특보 영역 표시</span>
+          </label>
+          <p className="text-xs text-gray-500 ml-6">
+            현재 발효 중인 기상특보(주의보/경보)를 지도에 색상 영역으로 표시합니다
+          </p>
+        </div>
+
           {/* 설정 미리보기 */}
           <div className="p-3 bg-gray-50 rounded-lg">
             <div className="text-xs font-medium text-gray-700 mb-2">📋 설정 미리보기</div>
@@ -142,6 +173,8 @@ export function VehicleMapConfigPanel({ config, queryResult, onConfigChange }: V
               <div><strong>경도:</strong> {currentConfig.longitudeColumn || '미설정'}</div>
               <div><strong>라벨:</strong> {currentConfig.labelColumn || '없음'}</div>
               <div><strong>상태:</strong> {currentConfig.statusColumn || '없음'}</div>
+              <div><strong>날씨 표시:</strong> {currentConfig.showWeather ? '활성화' : '비활성화'}</div>
+              <div><strong>기상특보 표시:</strong> {currentConfig.showWeatherAlerts ? '활성화' : '비활성화'}</div>
               <div><strong>데이터 개수:</strong> {queryResult.rows.length}개</div>
             </div>
           </div>

frontend/components/admin/dashboard/types.ts

@@ -15,6 +15,7 @@ export type ElementSubtype =
   | "combo" // 차트 타입
   | "exchange"
   | "weather"
+  | "weather-map" // 날씨 지도 위젯
   | "clock"
   | "calendar"
   | "calculator"
@@ -168,6 +169,8 @@ export interface ChartConfig {
   longitudeColumn?: string; // 경도 컬럼
   labelColumn?: string; // 라벨 컬럼
   statusColumn?: string; // 상태 컬럼
+  showWeather?: boolean; // 날씨 정보 표시 여부
+  showWeatherAlerts?: boolean; // 기상특보 영역 표시 여부
 }
 
 export interface QueryResult {

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

@@ -5,6 +5,7 @@ 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";
@@ -19,23 +20,108 @@ interface TodoWidgetConfigModalProps {
 }
 
 /**
- * To-Do 위젯 설정 모달
+ * 일정관리 위젯 설정 모달 (범용)
  * - 2단계 설정: 데이터 소스 → 쿼리 입력/테스트
  */
 export function TodoWidgetConfigModal({ isOpen, element, onClose, onSave }: TodoWidgetConfigModalProps) {
   const [currentStep, setCurrentStep] = useState<1 | 2>(1);
-  const [title, setTitle] = useState(element.title || "✅ To-Do / 긴급 지시");
+  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 || "✅ To-Do / 긴급 지시");
-      if (element.dataSource) {
-        setDataSource(element.dataSource);
+      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);
     }
@@ -94,13 +180,29 @@ export function TodoWidgetConfigModal({ isOpen, element, onClose, onSave }: Todo
       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, onSave, onClose]);
+  }, [title, dataSource, queryResult, enableDbSync, dbSyncMode, tableName, columnMapping, element.chartConfig, onSave, onClose]);
 
   // 다음 단계로
   const handleNext = useCallback(() => {
@@ -135,9 +237,9 @@ export function TodoWidgetConfigModal({ isOpen, element, onClose, onSave }: Todo
         {/* 헤더 */}
         <div className="flex items-center justify-between border-b border-gray-200 px-6 py-4">
           <div>
-            <h2 className="text-xl font-bold text-gray-800">To-Do 위젯 설정</h2>
+            <h2 className="text-xl font-bold text-gray-800">일정관리 위젯 설정</h2>
             <p className="mt-1 text-sm text-gray-500">
-              데이터 소스와 쿼리를 설정하면 자동으로 To-Do 목록이 표시됩니다
+              데이터 소스와 쿼리를 설정하면 자동으로 일정 목록이 표시됩니다
             </p>
           </div>
           <button
@@ -185,7 +287,7 @@ export function TodoWidgetConfigModal({ isOpen, element, onClose, onSave }: Todo
                 <Input
                   value={title}
                   onChange={(e) => setTitle(e.target.value)}
-                  placeholder="예: ✅ 오늘의 할 일"
+                  placeholder="예: 오늘의 일정"
                   className="mt-2"
                 />
               </div>
@@ -213,7 +315,7 @@ export function TodoWidgetConfigModal({ isOpen, element, onClose, onSave }: Todo
                 <div className="mb-4 rounded-lg bg-blue-50 p-4">
                   <h3 className="mb-2 font-semibold text-blue-900">💡 컬럼명 가이드</h3>
                   <p className="mb-2 text-sm text-blue-700">
-                    쿼리 결과에 다음 컬럼명이 있으면 자동으로 To-Do 항목으로 변환됩니다:
+                    쿼리 결과에 다음 컬럼명이 있으면 자동으로 일정 항목으로 변환됩니다:
                   </p>
                   <ul className="space-y-1 text-sm text-blue-600">
                     <li>
@@ -278,7 +380,7 @@ export function TodoWidgetConfigModal({ isOpen, element, onClose, onSave }: Todo
                 <div className="mt-4 rounded-lg bg-green-50 border-2 border-green-500 p-4">
                   <h3 className="mb-2 font-semibold text-green-900">✅ 쿼리 테스트 성공!</h3>
                   <p className="text-sm text-green-700">
-                    총 <strong>{queryResult.rows.length}개</strong>의 To-Do 항목을 찾았습니다.
+                    총 <strong>{queryResult.rows.length}개</strong>의 일정 항목을 찾았습니다.
                   </p>
                   <div className="mt-3 rounded bg-white p-3">
                     <p className="mb-2 text-xs font-semibold text-gray-600">첫 번째 데이터 미리보기:</p>
@@ -288,6 +390,232 @@ export function TodoWidgetConfigModal({ isOpen, element, onClose, onSave }: Todo
                   </div>
                 </div>
               )}
+
+              {/* 데이터베이스 연동 쿼리 (선택사항) */}
+              <div className="mt-6 space-y-4 rounded-lg border-2 border-purple-200 bg-purple-50 p-4">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <h3 className="font-semibold text-purple-900">🔗 데이터베이스 연동 (선택사항)</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-300"
+                    />
+                    <span className="text-sm font-medium text-purple-900">활성화</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-600 text-white"
+                            : "bg-white text-purple-600 hover:bg-purple-100"
+                        }`}
+                      >
+                        간편 모드
+                      </button>
+                      <button
+                        onClick={() => setDbSyncMode("advanced")}
+                        className={`flex-1 rounded px-4 py-2 text-sm font-medium transition-colors ${
+                          dbSyncMode === "advanced"
+                            ? "bg-purple-600 text-white"
+                            : "bg-white text-purple-600 hover:bg-purple-100"
+                        }`}
+                      >
+                        고급 모드
+                      </button>
+                    </div>
+
+                    {/* 간편 모드 */}
+                    {dbSyncMode === "simple" && (
+                      <div className="space-y-4 rounded-lg border border-purple-300 bg-white p-4">
+                        <p className="text-sm text-purple-700">
+                          테이블명과 컬럼 매핑만 입력하면 자동으로 INSERT/UPDATE/DELETE 쿼리가 생성됩니다.
+                        </p>
+
+                        {/* 테이블명 */}
+                        <div>
+                          <Label className="text-sm font-semibold text-purple-900">테이블명 *</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-900">컬럼 매핑</Label>
+                          <div className="mt-2 grid grid-cols-2 gap-3">
+                            <div>
+                              <label className="text-xs text-gray-600">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-gray-600">제목 컬럼</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-gray-600">설명 컬럼</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-gray-600">우선순위 컬럼</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-gray-600">상태 컬럼</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-gray-600">담당자 컬럼</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-gray-600">마감일 컬럼</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-gray-600">긴급 여부 컬럼</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-900">INSERT 쿼리 (추가)</Label>
+                          <p className="mb-2 text-xs text-purple-600">
+                            사용 가능한 변수: ${"{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-300 bg-white 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-900">UPDATE 쿼리 (상태 변경)</Label>
+                          <p className="mb-2 text-xs text-purple-600">
+                            사용 가능한 변수: ${"{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-300 bg-white 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-900">DELETE 쿼리 (삭제)</Label>
+                          <p className="mb-2 text-xs text-purple-600">
+                            사용 가능한 변수: ${"{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-300 bg-white px-3 py-2 text-sm font-mono focus:border-purple-500 focus:outline-none"
+                          />
+                        </div>
+                      </div>
+                    )}
+                  </>
+                )}
+              </div>
             </div>
           )}
         </div>