달력과 투두리스트 합침, 배경색변경가능, 위젯끼리 밀어내는 기능과 세밀한 그리드 추가, 범용위젯 복구

2025-10-17 09:49:02 +09:00
parent 7097775343
commit fa08a26079
13 changed files with 992 additions and 113 deletions
--- a/frontend/components/dashboard/widgets/TodoWidget.tsx
+++ b/frontend/components/dashboard/widgets/TodoWidget.tsx
@@ -1,8 +1,9 @@
 "use client";

 import React, { useState, useEffect } from "react";
-import { Plus, Check, X, Clock, AlertCircle, GripVertical, ChevronDown } from "lucide-react";
+import { Plus, Check, X, Clock, AlertCircle, GripVertical, ChevronDown, Calendar as CalendarIcon } from "lucide-react";
 import { DashboardElement } from "@/components/admin/dashboard/types";
+import { useDashboard } from "@/contexts/DashboardContext";

 interface TodoItem {
  id: string;
@@ -33,6 +34,9 @@ interface TodoWidgetProps {
 }

 export default function TodoWidget({ element }: TodoWidgetProps) {
+  // Context에서 선택된 날짜 가져오기
+  const { selectedDate } = useDashboard();
+  
  const [todos, setTodos] = useState<TodoItem[]>([]);
  const [stats, setStats] = useState<TodoStats | null>(null);
  const [loading, setLoading] = useState(true);
@@ -51,22 +55,85 @@ export default function TodoWidget({ element }: TodoWidgetProps) {
    fetchTodos();
    const interval = setInterval(fetchTodos, 30000); // 30초마다 갱신
    return () => clearInterval(interval);
-  }, [filter]);
+  }, [filter, selectedDate]); // selectedDate도 의존성에 추가

  const fetchTodos = async () => {
    try {
      const token = localStorage.getItem("authToken");
-      const filterParam = filter !== "all" ? `?status=${filter}` : "";
-      const response = await fetch(`http://localhost:9771/api/todos${filterParam}`, {
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-      });
+      const userLang = localStorage.getItem("userLang") || "KR";
+      
+      // 외부 DB 조회 (dataSource가 설정된 경우)
+      if (element?.dataSource?.query) {
+        console.log("🔍 TodoWidget - 외부 DB 조회 시작");
+        console.log("📝 Query:", element.dataSource.query);
+        console.log("🔗 ConnectionId:", element.dataSource.externalConnectionId);
+        console.log("🔗 ConnectionType:", element.dataSource.connectionType);
+        
+        // 현재 DB vs 외부 DB 분기
+        const apiUrl = element.dataSource.connectionType === "external" && element.dataSource.externalConnectionId
+          ? `http://localhost:9771/api/external-db/query?userLang=${userLang}`
+          : `http://localhost:9771/api/dashboards/execute-query?userLang=${userLang}`;
+        
+        const requestBody = element.dataSource.connectionType === "external" && element.dataSource.externalConnectionId
+          ? {
+              connectionId: parseInt(element.dataSource.externalConnectionId),
+              query: element.dataSource.query,
+            }
+          : {
+              query: element.dataSource.query,
+            };

-      if (response.ok) {
-        const result = await response.json();
-        setTodos(result.data || []);
-        setStats(result.stats);
+        console.log("🌐 API URL:", apiUrl);
+        console.log("📦 Request Body:", requestBody);
+
+        const response = await fetch(apiUrl, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+          body: JSON.stringify(requestBody),
+        });
+
+        console.log("📡 Response status:", response.status);
+
+        if (response.ok) {
+          const result = await response.json();
+          console.log("✅ API 응답:", result);
+          console.log("📦 result.data:", result.data);
+          console.log("📦 result.data.rows:", result.data?.rows);
+          
+          // API 응답 형식에 따라 데이터 추출
+          const rows = result.data?.rows || result.data || [];
+          console.log("📊 추출된 rows:", rows);
+          
+          const externalTodos = mapExternalDataToTodos(rows);
+          console.log("📋 변환된 Todos:", externalTodos);
+          console.log("📋 변환된 Todos 개수:", externalTodos.length);
+          
+          setTodos(externalTodos);
+          setStats(calculateStatsFromTodos(externalTodos));
+          
+          console.log("✅ setTodos, setStats 호출 완료!");
+        } else {
+          const errorText = await response.text();
+          console.error("❌ API 오류:", errorText);
+        }
+      } 
+      // 내장 API 조회 (기본)
+      else {
+        const filterParam = filter !== "all" ? `?status=${filter}` : "";
+        const response = await fetch(`http://localhost:9771/api/todos${filterParam}`, {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        });
+
+        if (response.ok) {
+          const result = await response.json();
+          setTodos(result.data || []);
+          setStats(result.stats);
+        }
      }
    } catch (error) {
      // console.error("To-Do 로딩 오류:", error);
@@ -75,8 +142,48 @@ export default function TodoWidget({ element }: TodoWidgetProps) {
    }
  };

+  // 외부 DB 데이터를 TodoItem 형식으로 변환
+  const mapExternalDataToTodos = (data: any[]): TodoItem[] => {
+    return data.map((row, index) => ({
+      id: row.id || `todo-${index}`,
+      title: row.title || row.task || row.name || "제목 없음",
+      description: row.description || row.desc || row.content,
+      priority: row.priority || "normal",
+      status: row.status || "pending",
+      assignedTo: row.assigned_to || row.assignedTo || row.user,
+      dueDate: row.due_date || row.dueDate || row.deadline,
+      createdAt: row.created_at || row.createdAt || new Date().toISOString(),
+      updatedAt: row.updated_at || row.updatedAt || new Date().toISOString(),
+      completedAt: row.completed_at || row.completedAt,
+      isUrgent: row.is_urgent || row.isUrgent || row.urgent || false,
+      order: row.display_order || row.order || index,
+    }));
+  };
+
+  // Todo 배열로부터 통계 계산
+  const calculateStatsFromTodos = (todoList: TodoItem[]): TodoStats => {
+    return {
+      total: todoList.length,
+      pending: todoList.filter((t) => t.status === "pending").length,
+      inProgress: todoList.filter((t) => t.status === "in_progress").length,
+      completed: todoList.filter((t) => t.status === "completed").length,
+      urgent: todoList.filter((t) => t.isUrgent).length,
+      overdue: todoList.filter((t) => {
+        if (!t.dueDate) return false;
+        return new Date(t.dueDate) < new Date() && t.status !== "completed";
+      }).length,
+    };
+  };
+
+  // 외부 DB 조회 여부 확인
+  const isExternalData = !!element?.dataSource?.query;
+
  const handleAddTodo = async () => {
    if (!newTodo.title.trim()) return;
+    if (isExternalData) {
+      alert("외부 데이터베이스 조회 모드에서는 추가할 수 없습니다.");
+      return;
+    }

    try {
      const token = localStorage.getItem("authToken");
@@ -185,6 +292,27 @@ export default function TodoWidget({ element }: TodoWidgetProps) {
    return "⚠️ 오늘 마감";
  };

+  // 선택된 날짜로 필터링
+  const filteredTodos = selectedDate
+    ? todos.filter((todo) => {
+        if (!todo.dueDate) return false;
+        const todoDate = new Date(todo.dueDate);
+        return (
+          todoDate.getFullYear() === selectedDate.getFullYear() &&
+          todoDate.getMonth() === selectedDate.getMonth() &&
+          todoDate.getDate() === selectedDate.getDate()
+        );
+      })
+    : todos;
+
+  const formatSelectedDate = () => {
+    if (!selectedDate) return null;
+    const year = selectedDate.getFullYear();
+    const month = selectedDate.getMonth() + 1;
+    const day = selectedDate.getDate();
+    return `${year}년 ${month}월 ${day}일`;
+  };
+
  if (loading) {
    return (
      <div className="flex h-full items-center justify-center">
@@ -198,7 +326,15 @@ export default function TodoWidget({ element }: TodoWidgetProps) {
      {/* 헤더 */}
      <div className="border-b border-gray-200 bg-white px-4 py-3">
        <div className="mb-3 flex items-center justify-between">
-          <h3 className="text-lg font-bold text-gray-800">✅ {element?.customTitle || "To-Do / 긴급 지시"}</h3>
+          <div>
+            <h3 className="text-lg font-bold text-gray-800">✅ {element?.customTitle || "To-Do / 긴급 지시"}</h3>
+            {selectedDate && (
+              <div className="mt-1 flex items-center gap-1 text-xs text-green-600">
+                <CalendarIcon className="h-3 w-3" />
+                <span className="font-semibold">{formatSelectedDate()} 할일</span>
+              </div>
+            )}
+          </div>
          <button
            onClick={() => setShowAddForm(!showAddForm)}
            className="flex items-center gap-1 rounded-lg bg-primary px-3 py-1.5 text-sm text-white transition-colors hover:bg-primary/90"
@@ -315,16 +451,16 @@ export default function TodoWidget({ element }: TodoWidgetProps) {

      {/* To-Do 리스트 */}
      <div className="flex-1 overflow-y-auto p-4">
-        {todos.length === 0 ? (
+        {filteredTodos.length === 0 ? (
          <div className="flex h-full items-center justify-center text-gray-400">
            <div className="text-center">
              <div className="mb-2 text-4xl">📝</div>
-              <div>할 일이 없습니다</div>
+              <div>{selectedDate ? `${formatSelectedDate()} 할 일이 없습니다` : "할 일이 없습니다"}</div>
            </div>
          </div>
        ) : (
          <div className="space-y-2">
-            {todos.map((todo) => (
+            {filteredTodos.map((todo) => (
              <div
                key={todo.id}
                className={`group relative rounded-lg border-2 bg-white p-3 shadow-sm transition-all hover:shadow-md ${