Merge branch 'main' of http://39.117.244.52:3000/kjs/ERP-node into feat/dashboard

2025-10-20 14:28:40 +09:00
parent f16f75c083 652aa1e9b0
commit 597b9b9a51
21 changed files with 1539 additions and 33 deletions
--- a/frontend/components/admin/dashboard/CanvasElement.tsx
+++ b/frontend/components/admin/dashboard/CanvasElement.tsx
@@ -4,7 +4,7 @@ import React, { useState, useCallback, useRef, useEffect } from "react";
 import dynamic from "next/dynamic";
 import { DashboardElement, QueryResult } from "./types";
 import { ChartRenderer } from "./charts/ChartRenderer";
-import { snapToGrid, snapSizeToGrid, GRID_CONFIG } from "./gridUtils";
+import { GRID_CONFIG } from "./gridUtils";

 // 위젯 동적 임포트
 const WeatherWidget = dynamic(() => import("@/components/dashboard/widgets/WeatherWidget"), {
@@ -112,10 +112,23 @@ const YardManagement3DWidget = dynamic(() => import("./widgets/YardManagement3DW
  loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
 });

+// 작업 이력 위젯
+const WorkHistoryWidget = dynamic(() => import("@/components/dashboard/widgets/WorkHistoryWidget"), {
+  ssr: false,
+  loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
+});
+
+// 운송 통계 위젯
+const TransportStatsWidget = dynamic(() => import("@/components/dashboard/widgets/TransportStatsWidget"), {
+  ssr: false,
+  loading: () => <div className="flex h-full items-center justify-center text-sm text-gray-500">로딩 중...</div>,
+});
+
 interface CanvasElementProps {
  element: DashboardElement;
  isSelected: boolean;
  cellSize: number;
+  subGridSize: number;
  canvasWidth?: number;
  onUpdate: (id: string, updates: Partial<DashboardElement>) => void;
  onRemove: (id: string) => void;
@@ -133,6 +146,7 @@ export function CanvasElement({
  element,
  isSelected,
  cellSize,
+  subGridSize,
  canvasWidth = 1560,
  onUpdate,
  onRemove,
@@ -233,7 +247,6 @@ export function CanvasElement({
        rawX = Math.min(rawX, maxX);

        // 드래그 중 실시간 스냅 (마그네틱 스냅)
-        const subGridSize = Math.floor(cellSize / 3);
        const gridSize = cellSize + 5; // GAP 포함한 실제 그리드 크기
        const magneticThreshold = 15; // 큰 그리드에 끌리는 거리 (px)

@@ -291,7 +304,6 @@ export function CanvasElement({
        newWidth = Math.min(newWidth, maxWidth);

        // 리사이즈 중 실시간 스냅 (마그네틱 스냅)
-        const subGridSize = Math.floor(cellSize / 3);
        const gridSize = cellSize + 5; // GAP 포함한 실제 그리드 크기
        const magneticThreshold = 15;

@@ -336,6 +348,7 @@ export function CanvasElement({
      element.subtype,
      canvasWidth,
      cellSize,
+      subGridSize,
    ],
  );

@@ -726,10 +739,21 @@ export function CanvasElement({
              isEditMode={true}
              config={element.yardConfig}
              onConfigChange={(newConfig) => {
+                console.log("🏗️ 야드 설정 업데이트:", { elementId: element.id, newConfig });
                onUpdate(element.id, { yardConfig: newConfig });
              }}
            />
          </div>
+        ) : element.type === "widget" && element.subtype === "work-history" ? (
+          // 작업 이력 위젯 렌더링
+          <div className="h-full w-full">
+            <WorkHistoryWidget element={element} />
+          </div>
+        ) : element.type === "widget" && element.subtype === "transport-stats" ? (
+          // 운송 통계 위젯 렌더링
+          <div className="h-full w-full">
+            <TransportStatsWidget element={element} />
+          </div>
        ) : element.type === "widget" && element.subtype === "todo" ? (
          // To-Do 위젯 렌더링
          <div className="widget-interactive-area h-full w-full">
--- a/frontend/components/admin/dashboard/DashboardCanvas.tsx
+++ b/frontend/components/admin/dashboard/DashboardCanvas.tsx
@@ -156,8 +156,7 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
          const rawY = e.clientY - rect.top + (ref.current?.scrollTop || 0);

          // 마그네틱 스냅 (큰 그리드 우선, 없으면 서브그리드)
-          const subGridSize = Math.floor(cellSize / 3);
-          const gridSize = cellSize + 5; // GAP 포함한 실제 그리드 크기
+          const gridSize = cellSize + GRID_CONFIG.GAP; // GAP 포함한 실제 그리드 크기
          const magneticThreshold = 15;

          // X 좌표 스냅
@@ -196,6 +195,9 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
    // 동적 그리드 크기 계산
    const cellWithGap = cellSize + GRID_CONFIG.GAP;
    const gridSize = `${cellWithGap}px ${cellWithGap}px`;
+    
+    // 서브그리드 크기 계산 (gridConfig에서 정확하게 계산된 값 사용)
+    const subGridSize = gridConfig.SUB_GRID_SIZE;

    // 12개 컬럼 구분선 위치 계산
    const columnLines = Array.from({ length: GRID_CONFIG.COLUMNS + 1 }, (_, i) => i * cellWithGap);
@@ -208,12 +210,12 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
          backgroundColor,
          height: `${canvasHeight}px`,
          minHeight: `${canvasHeight}px`,
-          // 세밀한 그리드 배경
+          // 서브그리드 배경 (세밀한 점선)
          backgroundImage: `
-            linear-gradient(rgba(59, 130, 246, 0.08) 1px, transparent 1px),
-            linear-gradient(90deg, rgba(59, 130, 246, 0.08) 1px, transparent 1px)
+            linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px)
          `,
-          backgroundSize: gridSize,
+          backgroundSize: `${subGridSize}px ${subGridSize}px`,
          backgroundPosition: "0 0",
          backgroundRepeat: "repeat",
        }}
@@ -229,8 +231,9 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
            className="pointer-events-none absolute top-0 h-full"
            style={{
              left: `${x}px`,
-              width: "2px",
-              zIndex: 1,
+              width: "1px",
+              backgroundColor: i === 0 || i === GRID_CONFIG.COLUMNS ? "rgba(59, 130, 246, 0.3)" : "rgba(59, 130, 246, 0.15)",
+              zIndex: 0,
            }}
          />
        ))}
@@ -248,6 +251,7 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
            element={element}
            isSelected={selectedElement === element.id}
            cellSize={cellSize}
+            subGridSize={subGridSize}
            canvasWidth={canvasWidth}
            onUpdate={handleUpdateWithCollisionDetection}
            onRemove={onRemoveElement}
--- a/frontend/components/admin/dashboard/DashboardDesigner.tsx
+++ b/frontend/components/admin/dashboard/DashboardDesigner.tsx
@@ -333,21 +333,31 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
      try {
        const { dashboardApi } = await import("@/lib/api/dashboard");

-        const elementsData = elements.map((el) => ({
-          id: el.id,
-          type: el.type,
-          subtype: el.subtype,
-          position: el.position,
-          size: el.size,
-          title: el.title,
-          customTitle: el.customTitle,
-          showHeader: el.showHeader,
-          content: el.content,
-          dataSource: el.dataSource,
-          chartConfig: el.chartConfig,
-          listConfig: el.listConfig,
-          yardConfig: el.yardConfig,
-        }));
+        const elementsData = elements.map((el) => {
+          // 야드 위젯인 경우 설정 로그 출력
+          if (el.subtype === "yard-management-3d") {
+            console.log("💾 야드 위젯 저장:", {
+              id: el.id,
+              yardConfig: el.yardConfig,
+              hasLayoutId: !!el.yardConfig?.layoutId,
+            });
+          }
+          return {
+            id: el.id,
+            type: el.type,
+            subtype: el.subtype,
+            position: el.position,
+            size: el.size,
+            title: el.title,
+            customTitle: el.customTitle,
+            showHeader: el.showHeader,
+            content: el.content,
+            dataSource: el.dataSource,
+            chartConfig: el.chartConfig,
+            listConfig: el.listConfig,
+            yardConfig: el.yardConfig,
+          };
+        });

        let savedDashboard;

@@ -634,6 +644,10 @@ function getElementTitle(type: ElementType, subtype: ElementSubtype): string {
        return "문서 위젯";
      case "yard-management-3d":
        return "야드 관리 3D";
+      case "work-history":
+        return "작업 이력";
+      case "transport-stats":
+        return "운송 통계";
      default:
        return "위젯";
    }
@@ -676,6 +690,10 @@ function getElementContent(type: ElementType, subtype: ElementSubtype): string {
        return "list-widget";
      case "yard-management-3d":
        return "yard-3d";
+      case "work-history":
+        return "work-history";
+      case "transport-stats":
+        return "transport-stats";
      default:
        return "위젯 내용이 여기에 표시됩니다";
    }
--- a/frontend/components/admin/dashboard/DashboardSaveModal.tsx
+++ b/frontend/components/admin/dashboard/DashboardSaveModal.tsx
@@ -183,6 +183,10 @@ export function DashboardSaveModal({
              id="title"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
+              onKeyDown={(e) => {
+                // 모든 키보드 이벤트를 input 필드 내부에서만 처리
+                e.stopPropagation();
+              }}
              placeholder="예: 생산 현황 대시보드"
              className="w-full"
            />
@@ -195,6 +199,10 @@ export function DashboardSaveModal({
              id="description"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
+              onKeyDown={(e) => {
+                // 모든 키보드 이벤트를 textarea 내부에서만 처리
+                e.stopPropagation();
+              }}
              placeholder="대시보드에 대한 간단한 설명을 입력하세요"
              rows={3}
              className="w-full resize-none"
--- a/frontend/components/admin/dashboard/DashboardSidebar.tsx
+++ b/frontend/components/admin/dashboard/DashboardSidebar.tsx
@@ -219,6 +219,18 @@ export function DashboardSidebar() {
              subtype="list"
              onDragStart={handleDragStart}
            />
+            <DraggableItem
+              title="작업 이력"
+              type="widget"
+              subtype="work-history"
+              onDragStart={handleDragStart}
+            />
+            <DraggableItem
+              title="운송 통계"
+              type="widget"
+              subtype="transport-stats"
+              onDragStart={handleDragStart}
+            />
          </div>
        )}
      </div>
--- a/frontend/components/admin/dashboard/DashboardTopMenu.tsx
+++ b/frontend/components/admin/dashboard/DashboardTopMenu.tsx
@@ -182,6 +182,7 @@ export function DashboardTopMenu({
              <SelectLabel>데이터 위젯</SelectLabel>
              <SelectItem value="list">리스트 위젯</SelectItem>
              <SelectItem value="yard-management-3d">야드 관리 3D</SelectItem>
+              <SelectItem value="transport-stats">운송 통계</SelectItem>
              {/* <SelectItem value="map">지도</SelectItem> */}
              <SelectItem value="map-summary">커스텀 지도 카드</SelectItem>
              {/* <SelectItem value="list-summary">커스텀 목록 카드</SelectItem> */}
--- a/frontend/components/admin/dashboard/ElementConfigModal.tsx
+++ b/frontend/components/admin/dashboard/ElementConfigModal.tsx
@@ -36,6 +36,11 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element

  // 차트 설정이 필요 없는 위젯 (쿼리/API만 필요)
  const isSimpleWidget =
+    element.subtype === "todo" || // To-Do 위젯
+    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" || // 커스텀 상태 카드
@@ -45,7 +50,15 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
    element.subtype === "delivery-today-stats" ||
    element.subtype === "cargo-list" ||
    element.subtype === "customer-issues" ||
-    element.subtype === "driver-management";
+    element.subtype === "driver-management" ||
+    element.subtype === "work-history" || // 작업 이력 위젯 (쿼리 필요)
+    element.subtype === "transport-stats"; // 운송 통계 위젯 (쿼리 필요)
+  
+  // 자체 기능 위젯 (DB 연결 불필요, 헤더 설정만 가능)
+  const isSelfContainedWidget = 
+    element.subtype === "weather" || // 날씨 위젯 (외부 API)
+    element.subtype === "exchange" || // 환율 위젯 (외부 API)
+    element.subtype === "calculator"; // 계산기 위젯 (자체 기능)

  // 지도 위젯 (위도/경도 매핑 필요)
  const isMapWidget = element.subtype === "vehicle-map" || element.subtype === "map-summary";
@@ -59,6 +72,7 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
      setQueryResult(null);
      setCurrentStep(1);
      setCustomTitle(element.customTitle || "");
+      setShowHeader(element.showHeader !== false); // showHeader 초기화
    }
  }, [isOpen, element]);

@@ -135,8 +149,12 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
  // 모달이 열려있지 않으면 렌더링하지 않음
  if (!isOpen) return null;

-  // 시계, 달력, To-Do 위젯은 헤더 설정만 가능
-  const isHeaderOnlyWidget = element.type === "widget" && (element.subtype === "clock" || element.subtype === "calendar" || element.subtype === "todo");
+  // 시계, 달력, 날씨, 환율, 계산기 위젯은 헤더 설정만 가능
+  const isHeaderOnlyWidget = 
+    element.type === "widget" && 
+    (element.subtype === "clock" || 
+     element.subtype === "calendar" || 
+     isSelfContainedWidget);

  // 기사관리 위젯은 자체 설정 UI를 가지고 있으므로 모달 표시하지 않음
  if (element.type === "widget" && element.subtype === "driver-management") {
@@ -154,11 +172,15 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element

  // customTitle이 변경되었는지 확인
  const isTitleChanged = customTitle.trim() !== (element.customTitle || "");
+  
+  // showHeader가 변경되었는지 확인
+  const isHeaderChanged = showHeader !== (element.showHeader !== false);

  const canSave =
    isTitleChanged || // 제목만 변경해도 저장 가능
+    isHeaderChanged || // 헤더 표시 여부만 변경해도 저장 가능
    (isSimpleWidget
-      ? // 간단한 위젯: 2단계에서 쿼리 테스트 후 저장 가능
+      ? // 간단한 위젯: 2단계에서 쿼리 테스트 후 저장 가능 (차트 설정 불필요)
        currentStep === 2 && queryResult && queryResult.rows.length > 0
      : isMapWidget
        ? // 지도 위젯: 위도/경도 매핑 필요
@@ -184,7 +206,7 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
    <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 backdrop-blur-sm">
      <div
        className={`flex flex-col rounded-xl border bg-white shadow-2xl ${
-          currentStep === 1 ? "h-auto max-h-[70vh] w-full max-w-3xl" : "h-[85vh] w-full max-w-5xl"
+          currentStep === 1 && !isSimpleWidget ? "h-auto max-h-[70vh] w-full max-w-3xl" : "h-[85vh] w-full max-w-5xl"
        }`}
      >
        {/* 모달 헤더 */}
@@ -336,7 +358,7 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
                저장
              </Button>
            ) : currentStep === 1 ? (
-              // 1단계: 다음 버튼
+              // 1단계: 다음 버튼 (차트 위젯, 간단한 위젯 모두)
              <Button onClick={handleNext}>
                다음
                <ChevronRight className="ml-2 h-4 w-4" />
@@ -354,3 +376,4 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
    </div>
  );
 }
+
--- a/frontend/components/admin/dashboard/QueryEditor.tsx
+++ b/frontend/components/admin/dashboard/QueryEditor.tsx
@@ -208,6 +208,10 @@ ORDER BY 하위부서수 DESC`,
          <Textarea
            value={query}
            onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={(e) => {
+              // 모든 키보드 이벤트를 textarea 내부에서만 처리
+              e.stopPropagation();
+            }}
            placeholder="SELECT * FROM your_table WHERE condition = 'value';"
            className="h-40 resize-none font-mono text-sm"
          />
--- a/frontend/components/admin/dashboard/types.ts
+++ b/frontend/components/admin/dashboard/types.ts
@@ -36,7 +36,9 @@ export type ElementSubtype =
  | "maintenance"
  | "document"
  | "list"
-  | "yard-management-3d"; // 야드 관리 3D 위젯
+  | "yard-management-3d" // 야드 관리 3D 위젯
+  | "work-history" // 작업 이력 위젯
+  | "transport-stats"; // 운송 통계 위젯

 export interface Position {
  x: number;
--- a/frontend/components/admin/dashboard/widgets/YardManagement3DWidget.tsx
+++ b/frontend/components/admin/dashboard/widgets/YardManagement3DWidget.tsx
@@ -57,6 +57,17 @@ export default function YardManagement3DWidget({
    }
  }, [isEditMode]);

+  // 레이아웃 목록이 로드되었고, 설정이 없으면 첫 번째 레이아웃 자동 선택
+  useEffect(() => {
+    if (isEditMode && layouts.length > 0 && !config?.layoutId && onConfigChange) {
+      console.log("🔧 첫 번째 야드 레이아웃 자동 선택:", layouts[0]);
+      onConfigChange({
+        layoutId: layouts[0].id,
+        layoutName: layouts[0].name,
+      });
+    }
+  }, [isEditMode, layouts, config?.layoutId, onConfigChange]);
+
  // 레이아웃 선택 (편집 모드에서만)
  const handleSelectLayout = (layout: YardLayout) => {
    if (onConfigChange) {
@@ -243,12 +254,16 @@ export default function YardManagement3DWidget({

  // 뷰 모드: 선택된 레이아웃의 3D 뷰어 표시
  if (!config?.layoutId) {
+    console.warn("⚠️ 야드관리 위젯: layoutId가 설정되지 않음", { config, isEditMode });
    return (
      <div className="flex h-full w-full items-center justify-center bg-gray-50">
        <div className="text-center">
          <div className="mb-2 text-4xl">🏗️</div>
          <div className="text-sm font-medium text-gray-600">야드 레이아웃이 설정되지 않았습니다</div>
          <div className="mt-1 text-xs text-gray-400">대시보드 편집에서 레이아웃을 선택하세요</div>
+          <div className="mt-2 text-xs text-red-500">
+            디버그: config={JSON.stringify(config)}
+          </div>
        </div>
      </div>
    );