오류난것들 해결 완료

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"), {
@@ -116,6 +116,7 @@ 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 +134,7 @@ export function CanvasElement({
   element,
   isSelected,
   cellSize,
+  subGridSize,
   canvasWidth = 1560,
   onUpdate,
   onRemove,
@@ -233,7 +235,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 +292,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 +336,7 @@ export function CanvasElement({
       element.subtype,
       canvasWidth,
       cellSize,
+      subGridSize,
     ],
   );
 
@@ -726,6 +727,7 @@ export function CanvasElement({
               isEditMode={true}
               config={element.yardConfig}
               onConfigChange={(newConfig) => {
+                console.log("🏗️ 야드 설정 업데이트:", { elementId: element.id, newConfig });
                 onUpdate(element.id, { yardConfig: newConfig });
               }}
             />

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 + GRID_CONFIG.GAP; // GAP 포함한 실제 그리드 크기
-          const gridSize = cellSize + 5; // 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(rgba(59, 130, 246, 0.05) 1px, transparent 1px),
-            linear-gradient(90deg, rgba(59, 130, 246, 0.08) 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",
+              width: "1px",
-              zIndex: 1,
+              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}

frontend/components/admin/dashboard/DashboardDesigner.tsx

@@ -332,21 +332,31 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
       try {
         const { dashboardApi } = await import("@/lib/api/dashboard");
 
-        const elementsData = elements.map((el) => ({
+        const elementsData = elements.map((el) => {
-          id: el.id,
+          // 야드 위젯인 경우 설정 로그 출력
-          type: el.type,
+          if (el.subtype === "yard-management-3d") {
-          subtype: el.subtype,
+            console.log("💾 야드 위젯 저장:", {
-          position: el.position,
+              id: el.id,
-          size: el.size,
+              yardConfig: el.yardConfig,
-          title: el.title,
+              hasLayoutId: !!el.yardConfig?.layoutId,
-          customTitle: el.customTitle,
+            });
-          showHeader: el.showHeader,
+          }
-          content: el.content,
+          return {
-          dataSource: el.dataSource,
+            id: el.id,
-          chartConfig: el.chartConfig,
+            type: el.type,
-          listConfig: el.listConfig,
+            subtype: el.subtype,
-          yardConfig: el.yardConfig,
+            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;
 

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" || // 커스텀 상태 카드
@@ -46,6 +51,12 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
     element.subtype === "cargo-list" ||
     element.subtype === "customer-issues" ||
     element.subtype === "driver-management";
+  
+  // 자체 기능 위젯 (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 +70,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 +147,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 +170,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 +204,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 +356,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 +374,4 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
     </div>
   );
 }
+

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>
     );

frontend/components/dashboard/DashboardViewer.tsx

@@ -82,6 +82,14 @@ function renderWidget(element: DashboardElement) {
       return <ListWidget element={element} />;
 
     case "yard-management-3d":
+      console.log("🏗️ 야드관리 위젯 렌더링:", {
+        elementId: element.id,
+        yardConfig: element.yardConfig,
+        yardConfigType: typeof element.yardConfig,
+        hasLayoutId: !!element.yardConfig?.layoutId,
+        layoutId: element.yardConfig?.layoutId,
+        layoutName: element.yardConfig?.layoutName,
+      });
       return <YardManagement3DWidget isEditMode={false} config={element.yardConfig} />;
 
     // === 차량 관련 (추가 위젯) ===