Merge pull request '대시보드 수정사항 적용' (#111) from feat/dashboard into main

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

frontend/app/(main)/dashboard/[dashboardId]/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import React, { useState, useEffect, use } from "react";
-import { useRouter } from "next/navigation";
 import { DashboardViewer } from "@/components/dashboard/DashboardViewer";
 import { DashboardElement } from "@/components/admin/dashboard/types";
 
@@ -18,7 +17,6 @@ interface DashboardViewPageProps {
  * - 전체화면 모드 지원
  */
 export default function DashboardViewPage({ params }: DashboardViewPageProps) {
-  const router = useRouter();
   const resolvedParams = use(params);
   const [dashboard, setDashboard] = useState<{
     id: string;
@@ -35,12 +33,7 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) {
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
-  // 대시보드 데이터 로딩
+  const loadDashboard = React.useCallback(async () => {
-  useEffect(() => {
-    loadDashboard();
-  }, [resolvedParams.dashboardId]);
-
-  const loadDashboard = async () => {
     setIsLoading(true);
     setError(null);
 
@@ -50,13 +43,16 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) {
 
       try {
         const dashboardData = await dashboardApi.getDashboard(resolvedParams.dashboardId);
-        setDashboard(dashboardData);
+        setDashboard({
+          ...dashboardData,
+          elements: dashboardData.elements || [],
+        });
       } catch (apiError) {
         console.warn("API 호출 실패, 로컬 스토리지 확인:", apiError);
 
         // API 실패 시 로컬 스토리지에서 찾기
         const savedDashboards = JSON.parse(localStorage.getItem("savedDashboards") || "[]");
-        const savedDashboard = savedDashboards.find((d: any) => d.id === resolvedParams.dashboardId);
+        const savedDashboard = savedDashboards.find((d: { id: string }) => d.id === resolvedParams.dashboardId);
 
         if (savedDashboard) {
           setDashboard(savedDashboard);
@@ -72,7 +68,12 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) {
     } finally {
       setIsLoading(false);
     }
-  };
+  }, [resolvedParams.dashboardId]);
+
+  // 대시보드 데이터 로딩
+  useEffect(() => {
+    loadDashboard();
+  }, [loadDashboard]);
 
   // 로딩 상태
   if (isLoading) {
@@ -163,6 +164,7 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) {
         elements={dashboard.elements}
         dashboardId={dashboard.id}
         backgroundColor={dashboard.settings?.backgroundColor}
+        resolution={dashboard.settings?.resolution}
       />
     </div>
   );
@@ -171,8 +173,33 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) {
 /**
  * 샘플 대시보드 생성 함수
  */
-function generateSampleDashboard(dashboardId: string) {
+function generateSampleDashboard(dashboardId: string): {
-  const dashboards: Record<string, any> = {
+  id: string;
+  title: string;
+  description?: string;
+  elements: DashboardElement[];
+  settings?: {
+    backgroundColor?: string;
+    resolution?: string;
+  };
+  createdAt: string;
+  updatedAt: string;
+} {
+  const dashboards: Record<
+    string,
+    {
+      id: string;
+      title: string;
+      description?: string;
+      elements: DashboardElement[];
+      settings?: {
+        backgroundColor?: string;
+        resolution?: string;
+      };
+      createdAt: string;
+      updatedAt: string;
+    }
+  > = {
     "sales-overview": {
       id: "sales-overview",
       title: "📊 매출 현황 대시보드",

frontend/components/admin/dashboard/DashboardDesigner.tsx

@@ -141,18 +141,38 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
       const { dashboardApi } = await import("@/lib/api/dashboard");
       const dashboard = await dashboardApi.getDashboard(id);
 
+      console.log("📊 대시보드 로드:", {
+        id: dashboard.id,
+        title: dashboard.title,
+        settings: dashboard.settings,
+        settingsType: typeof dashboard.settings,
+      });
+
       // 대시보드 정보 설정
       setDashboardId(dashboard.id);
       setDashboardTitle(dashboard.title);
 
       // 저장된 설정 복원
       const settings = (dashboard as { settings?: { resolution?: Resolution; backgroundColor?: string } }).settings;
+      console.log("🎨 설정 복원:", {
+        settings,
+        resolution: settings?.resolution,
+        backgroundColor: settings?.backgroundColor,
+        currentResolution: resolution,
+      });
+
       if (settings?.resolution) {
         setResolution(settings.resolution);
+        console.log("✅ Resolution 설정됨:", settings.resolution);
+      } else {
+        console.log("⚠️ Resolution 없음, 기본값 유지:", resolution);
       }
 
       if (settings?.backgroundColor) {
         setCanvasBackgroundColor(settings.backgroundColor);
+        console.log("✅ BackgroundColor 설정됨:", settings.backgroundColor);
+      } else {
+        console.log("⚠️ BackgroundColor 없음, 기본값 유지:", canvasBackgroundColor);
       }
 
       // 요소들 설정

frontend/components/admin/dashboard/charts/BarChart.tsx

@@ -32,11 +32,12 @@ export function BarChart({ data, config, width = 600, height = 400 }: BarChartPr
     // X축 스케일 (카테고리)
     const xScale = d3.scaleBand().domain(data.labels).range([0, chartWidth]).padding(0.2);
 
-    // Y축 스케일 (값)
+    // Y축 스케일 (값) - 절대값 기준
-    const maxValue = d3.max(data.datasets.flatMap((ds) => ds.data)) || 0;
+    const allValues = data.datasets.flatMap((ds) => ds.data);
+    const maxAbsValue = d3.max(allValues.map((v) => Math.abs(v))) || 0;
     const yScale = d3
       .scaleLinear()
-      .domain([0, maxValue * 1.1])
+      .domain([0, maxAbsValue * 1.1])
       .range([chartHeight, 0])
       .nice();
 
@@ -49,23 +50,12 @@ export function BarChart({ data, config, width = 600, height = 400 }: BarChartPr
       .style("text-anchor", "end")
       .style("font-size", "12px");
 
-    // Y축 그리기
+    // Y축 그리기 (값 표시 제거)
-    g.append("g").call(d3.axisLeft(yScale)).style("font-size", "12px");
-
-    // 그리드 라인
-    if (config.showGrid !== false) {
     g.append("g")
-        .attr("class", "grid")
+      .call(d3.axisLeft(yScale).tickFormat(() => ""))
-        .call(
+      .style("font-size", "12px");
-          d3
+
-            .axisLeft(yScale)
+    // 그리드 라인 제거됨
-            .tickSize(-chartWidth)
-            .tickFormat(() => ""),
-        )
-        .style("stroke-dasharray", "3,3")
-        .style("stroke", "#e0e0e0")
-        .style("opacity", 0.5);
-    }
 
     // 색상 팔레트
     const colors = config.colors || ["#3B82F6", "#EF4444", "#10B981", "#F59E0B"];
@@ -84,18 +74,48 @@ export function BarChart({ data, config, width = 600, height = 400 }: BarChartPr
         .attr("y", chartHeight)
         .attr("width", barWidth)
         .attr("height", 0)
-        .attr("fill", dataset.color || colors[i % colors.length])
+        .attr("fill", (d) => {
+          // 음수면 빨간색 계열, 양수면 원래 색상
+          if (d < 0) {
+            return "#EF4444";
+          }
+          return dataset.color || colors[i % colors.length];
+        })
         .attr("rx", 4);
 
-      // 애니메이션
+      // 애니메이션 - 절대값 기준으로 위쪽으로만 렌더링
       if (config.enableAnimation !== false) {
         bars
           .transition()
           .duration(config.animationDuration || 750)
-          .attr("y", (d) => yScale(d))
+          .attr("y", (d) => yScale(Math.abs(d)))
-          .attr("height", (d) => chartHeight - yScale(d));
+          .attr("height", (d) => chartHeight - yScale(Math.abs(d)));
       } else {
-        bars.attr("y", (d) => yScale(d)).attr("height", (d) => chartHeight - yScale(d));
+        bars.attr("y", (d) => yScale(Math.abs(d))).attr("height", (d) => chartHeight - yScale(Math.abs(d)));
+      }
+
+      // 막대 위에 값 표시 (음수는 - 부호 포함)
+      const labels = g
+        .selectAll(`.label-${i}`)
+        .data(dataset.data)
+        .enter()
+        .append("text")
+        .attr("class", `label-${i}`)
+        .attr("x", (_, j) => (xScale(data.labels[j]) || 0) + barWidth * i + barWidth / 2)
+        .attr("y", (d) => yScale(Math.abs(d)) - 5)
+        .attr("text-anchor", "middle")
+        .style("font-size", "11px")
+        .style("font-weight", "500")
+        .style("fill", (d) => (d < 0 ? "#EF4444" : "#333"))
+        .text((d) => (d < 0 ? "-" : "") + Math.abs(d).toLocaleString());
+
+      // 애니메이션 (라벨)
+      if (config.enableAnimation !== false) {
+        labels
+          .style("opacity", 0)
+          .transition()
+          .duration(config.animationDuration || 750)
+          .style("opacity", 1);
       }
 
       // 툴팁

frontend/components/admin/dashboard/charts/HorizontalBarChart.tsx

@@ -32,37 +32,25 @@ export function HorizontalBarChart({ data, config, width = 600, height = 400 }:
     // Y축 스케일 (카테고리) - 수평이므로 Y축이 카테고리
     const yScale = d3.scaleBand().domain(data.labels).range([0, chartHeight]).padding(0.2);
 
-    // X축 스케일 (값) - 수평이므로 X축이 값
+    // X축 스케일 (값) - 수평이므로 X축이 값, 절대값 기준
-    const maxValue = d3.max(data.datasets.flatMap((ds) => ds.data)) || 0;
+    const allValues = data.datasets.flatMap((ds) => ds.data);
+    const maxAbsValue = d3.max(allValues.map((v) => Math.abs(v))) || 0;
     const xScale = d3
       .scaleLinear()
-      .domain([0, maxValue * 1.1])
+      .domain([0, maxAbsValue * 1.1])
       .range([0, chartWidth])
       .nice();
 
     // Y축 그리기 (카테고리)
     g.append("g").call(d3.axisLeft(yScale)).style("font-size", "12px").selectAll("text").style("text-anchor", "end");
 
-    // X축 그리기 (값)
+    // X축 그리기 (값 표시 제거)
     g.append("g")
       .attr("transform", `translate(0,${chartHeight})`)
-      .call(d3.axisBottom(xScale))
+      .call(d3.axisBottom(xScale).tickFormat(() => ""))
       .style("font-size", "12px");
 
-    // 그리드 라인
+    // 그리드 라인 제거됨
-    if (config.showGrid !== false) {
-      g.append("g")
-        .attr("class", "grid")
-        .call(
-          d3
-            .axisBottom(xScale)
-            .tickSize(chartHeight)
-            .tickFormat(() => ""),
-        )
-        .style("stroke-dasharray", "3,3")
-        .style("stroke", "#e0e0e0")
-        .style("opacity", 0.5);
-    }
 
     // 색상 팔레트
     const colors = config.colors || ["#3B82F6", "#EF4444", "#10B981", "#F59E0B"];
@@ -81,17 +69,49 @@ export function HorizontalBarChart({ data, config, width = 600, height = 400 }:
         .attr("y", (_, j) => (yScale(data.labels[j]) || 0) + barHeight * i)
         .attr("width", 0)
         .attr("height", barHeight)
-        .attr("fill", dataset.color || colors[i % colors.length])
+        .attr("fill", (d) => {
+          // 음수면 빨간색 계열, 양수면 원래 색상
+          if (d < 0) {
+            return "#EF4444";
+          }
+          return dataset.color || colors[i % colors.length];
+        })
         .attr("ry", 4);
 
-      // 애니메이션
+      // 애니메이션 - 절대값 기준으로 오른쪽으로만 렌더링
       if (config.enableAnimation !== false) {
         bars
           .transition()
           .duration(config.animationDuration || 750)
-          .attr("width", (d) => xScale(d));
+          .attr("x", 0)
+          .attr("width", (d) => xScale(Math.abs(d)));
       } else {
-        bars.attr("width", (d) => xScale(d));
+        bars.attr("x", 0).attr("width", (d) => xScale(Math.abs(d)));
+      }
+
+      // 막대 끝에 값 표시 (음수는 - 부호 포함)
+      const labels = g
+        .selectAll(`.label-${i}`)
+        .data(dataset.data)
+        .enter()
+        .append("text")
+        .attr("class", `label-${i}`)
+        .attr("x", (d) => xScale(Math.abs(d)) + 5)
+        .attr("y", (_, j) => (yScale(data.labels[j]) || 0) + barHeight * i + barHeight / 2)
+        .attr("text-anchor", "start")
+        .attr("dominant-baseline", "middle")
+        .style("font-size", "11px")
+        .style("font-weight", "500")
+        .style("fill", (d) => (d < 0 ? "#EF4444" : "#333"))
+        .text((d) => (d < 0 ? "-" : "") + Math.abs(d).toLocaleString());
+
+      // 애니메이션 (라벨)
+      if (config.enableAnimation !== false) {
+        labels
+          .style("opacity", 0)
+          .transition()
+          .duration(config.animationDuration || 750)
+          .style("opacity", 1);
       }
 
       // 툴팁

frontend/components/admin/dashboard/charts/StackedBarChart.tsx

@@ -66,24 +66,12 @@ export function StackedBarChart({ data, config, width = 600, height = 400 }: Sta
       .style("text-anchor", "end")
       .style("font-size", "12px");
 
-    // Y축 그리기
+    // Y축 그리기 (값 표시 제거)
-    const yAxis = config.stackMode === "percent" ? d3.axisLeft(yScale).tickFormat((d) => `${d}%`) : d3.axisLeft(yScale);
-    g.append("g").call(yAxis).style("font-size", "12px");
-
-    // 그리드 라인
-    if (config.showGrid !== false) {
     g.append("g")
-        .attr("class", "grid")
+      .call(d3.axisLeft(yScale).tickFormat(() => ""))
-        .call(
+      .style("font-size", "12px");
-          d3
+
-            .axisLeft(yScale)
+    // 그리드 라인 제거됨
-            .tickSize(-chartWidth)
-            .tickFormat(() => ""),
-        )
-        .style("stroke-dasharray", "3,3")
-        .style("stroke", "#e0e0e0")
-        .style("opacity", 0.5);
-    }
 
     // 색상 팔레트
     const colors = config.colors || ["#3B82F6", "#EF4444", "#10B981", "#F59E0B"];
@@ -131,6 +119,47 @@ export function StackedBarChart({ data, config, width = 600, height = 400 }: Sta
         .attr("height", (d) => yScale(d[0] as number) - yScale(d[1] as number));
     }
 
+    // 각 세그먼트에 값 표시
+    layers.each(function (layerData, layerIndex) {
+      d3.select(this)
+        .selectAll("text")
+        .data(layerData)
+        .enter()
+        .append("text")
+        .attr("x", (d) => (xScale((d.data as any).label) || 0) + xScale.bandwidth() / 2)
+        .attr("y", (d) => {
+          const segmentHeight = yScale(d[0] as number) - yScale(d[1] as number);
+          const segmentMiddle = yScale(d[1] as number) + segmentHeight / 2;
+          return segmentMiddle;
+        })
+        .attr("text-anchor", "middle")
+        .attr("dominant-baseline", "middle")
+        .style("font-size", "11px")
+        .style("font-weight", "500")
+        .style("fill", "white")
+        .style("pointer-events", "none")
+        .text((d) => {
+          const value = (d[1] as number) - (d[0] as number);
+          if (config.stackMode === "percent") {
+            return value > 5 ? `${value.toFixed(0)}%` : "";
+          }
+          return value > 0 ? value.toLocaleString() : "";
+        })
+        .style("opacity", 0);
+
+      // 애니메이션 (라벨)
+      if (config.enableAnimation !== false) {
+        d3.select(this)
+          .selectAll("text")
+          .transition()
+          .delay(config.animationDuration || 750)
+          .duration(300)
+          .style("opacity", 1);
+      } else {
+        d3.select(this).selectAll("text").style("opacity", 1);
+      }
+    });
+
     // 툴팁
     if (config.showTooltip !== false) {
       bars

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

@@ -95,12 +95,11 @@ export function ListWidgetConfigModal({ isOpen, element, onClose, onSave }: List
   }, []);
 
   // 쿼리 실행 결과 처리
-  const handleQueryTest = useCallback(
+  const handleQueryTest = useCallback((result: QueryResult) => {
-    (result: QueryResult) => {
     setQueryResult(result);
 
-      // 자동 모드이고 기존 컬럼이 없을 때만 자동 생성
+    // 쿼리 실행할 때마다 컬럼 초기화 후 자동 생성
-      if (listConfig.columnMode === "auto" && result.columns.length > 0 && listConfig.columns.length === 0) {
+    if (result.columns.length > 0) {
       const autoColumns: ListColumn[] = result.columns.map((col, idx) => ({
         id: `col_${idx}`,
         label: col,
@@ -110,9 +109,7 @@ export function ListWidgetConfigModal({ isOpen, element, onClose, onSave }: List
       }));
       setListConfig((prev) => ({ ...prev, columns: autoColumns }));
     }
-    },
+  }, []);
-    [listConfig.columnMode, listConfig.columns.length],
-  );
 
   // 다음 단계
   const handleNext = () => {
@@ -176,9 +173,7 @@ export function ListWidgetConfigModal({ isOpen, element, onClose, onSave }: List
           </div>
 
           {/* 참고: 리스트 위젯은 제목이 항상 표시됩니다 */}
-          <div className="rounded bg-blue-50 p-2 text-xs text-blue-700">
+          <div className="rounded bg-blue-50 p-2 text-xs text-blue-700">💡 리스트 위젯은 제목이 항상 표시됩니다</div>
-            💡 리스트 위젯은 제목이 항상 표시됩니다
-          </div>
         </div>
 
         {/* 진행 상태 표시 */}

frontend/components/admin/dashboard/widgets/list-widget/ColumnSelector.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useState } from "react";
 import { ListColumn } from "../../types";
 import { Card } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
@@ -21,8 +21,12 @@ interface ColumnSelectorProps {
  * - 쿼리 결과에서 컬럼 선택
  * - 컬럼명 변경
  * - 정렬, 너비, 정렬 방향 설정
+ * - 드래그 앤 드롭으로 순서 변경
  */
 export function ColumnSelector({ availableColumns, selectedColumns, sampleData, onChange }: ColumnSelectorProps) {
+  const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
+  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
+
   // 컬럼 선택/해제
   const handleToggle = (field: string) => {
     const exists = selectedColumns.find((col) => col.field === field);
@@ -50,17 +54,53 @@ export function ColumnSelector({ availableColumns, selectedColumns, sampleData,
     onChange(selectedColumns.map((col) => (col.field === field ? { ...col, align } : col)));
   };
 
+  // 드래그 시작
+  const handleDragStart = (index: number) => {
+    setDraggedIndex(index);
+  };
+
+  // 드래그 오버 - 실시간으로 순서 변경하여 UI 업데이트
+  const handleDragOver = (e: React.DragEvent, hoverIndex: number) => {
+    e.preventDefault();
+    if (draggedIndex === null || draggedIndex === hoverIndex) return;
+
+    setDragOverIndex(hoverIndex);
+
+    const newColumns = [...selectedColumns];
+    const draggedItem = newColumns[draggedIndex];
+    newColumns.splice(draggedIndex, 1);
+    newColumns.splice(hoverIndex, 0, draggedItem);
+
+    setDraggedIndex(hoverIndex);
+    onChange(newColumns);
+  };
+
+  // 드롭
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setDraggedIndex(null);
+    setDragOverIndex(null);
+  };
+
+  // 드래그 종료
+  const handleDragEnd = () => {
+    setDraggedIndex(null);
+    setDragOverIndex(null);
+  };
+
   return (
     <Card className="p-4">
       <div className="mb-4">
         <h3 className="text-lg font-semibold text-gray-800">컬럼 선택 및 설정</h3>
-        <p className="text-sm text-gray-600">표시할 컬럼을 선택하고 이름을 변경하세요</p>
+        <p className="text-sm text-gray-600">
+          표시할 컬럼을 선택하고 이름을 변경하세요. 드래그하여 순서를 변경할 수 있습니다.
+        </p>
       </div>
 
       <div className="space-y-3">
-        {availableColumns.map((field) => {
+        {/* 선택된 컬럼을 먼저 순서대로 표시 */}
-          const selectedCol = selectedColumns.find((col) => col.field === field);
+        {selectedColumns.map((selectedCol, columnIndex) => {
-          const isSelected = !!selectedCol;
+          const field = selectedCol.field;
           const preview = sampleData[field];
           const previewText =
             preview !== undefined && preview !== null
@@ -68,19 +108,36 @@ export function ColumnSelector({ availableColumns, selectedColumns, sampleData,
                 ? JSON.stringify(preview).substring(0, 30)
                 : String(preview).substring(0, 30)
               : "";
+          const isSelected = true;
+          const isDraggable = true;
 
           return (
             <div
               key={field}
-              className={`rounded-lg border p-4 transition-colors ${
+              draggable={isDraggable}
+              onDragStart={(e) => {
+                if (isDraggable) {
+                  handleDragStart(columnIndex);
+                  e.currentTarget.style.cursor = "grabbing";
+                }
+              }}
+              onDragOver={(e) => isDraggable && handleDragOver(e, columnIndex)}
+              onDrop={handleDrop}
+              onDragEnd={(e) => {
+                handleDragEnd();
+                e.currentTarget.style.cursor = "grab";
+              }}
+              className={`rounded-lg border p-4 transition-all ${
                 isSelected ? "border-blue-300 bg-blue-50" : "border-gray-200"
+              } ${isDraggable ? "cursor-grab active:cursor-grabbing" : ""} ${
+                draggedIndex === columnIndex ? "opacity-50" : ""
               }`}
             >
               <div className="mb-3 flex items-start gap-3">
                 <Checkbox checked={isSelected} onCheckedChange={() => handleToggle(field)} className="mt-1" />
                 <div className="flex-1">
                   <div className="flex items-center gap-2">
-                    <GripVertical className="h-4 w-4 text-gray-400" />
+                    <GripVertical className={`h-4 w-4 ${isDraggable ? "text-blue-500" : "text-gray-400"}`} />
                     <span className="font-medium text-gray-700">{field}</span>
                     {previewText && <span className="text-xs text-gray-500">(예: {previewText})</span>}
                   </div>
@@ -122,6 +179,36 @@ export function ColumnSelector({ availableColumns, selectedColumns, sampleData,
             </div>
           );
         })}
+
+        {/* 선택되지 않은 컬럼들을 아래에 표시 */}
+        {availableColumns
+          .filter((field) => !selectedColumns.find((col) => col.field === field))
+          .map((field) => {
+            const preview = sampleData[field];
+            const previewText =
+              preview !== undefined && preview !== null
+                ? typeof preview === "object"
+                  ? JSON.stringify(preview).substring(0, 30)
+                  : String(preview).substring(0, 30)
+                : "";
+            const isSelected = false;
+            const isDraggable = false;
+
+            return (
+              <div key={field} className={`rounded-lg border border-gray-200 p-4 transition-all`}>
+                <div className="mb-3 flex items-start gap-3">
+                  <Checkbox checked={false} onCheckedChange={() => handleToggle(field)} className="mt-1" />
+                  <div className="flex-1">
+                    <div className="flex items-center gap-2">
+                      <GripVertical className="h-4 w-4 text-gray-400" />
+                      <span className="font-medium text-gray-700">{field}</span>
+                      {previewText && <span className="text-xs text-gray-500">(예: {previewText})</span>}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
       </div>
 
       {selectedColumns.length === 0 && (

frontend/components/admin/dashboard/widgets/list-widget/ManualColumnEditor.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useState } from "react";
 import { ListColumn } from "../../types";
 import { Card } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
@@ -19,8 +19,12 @@ interface ManualColumnEditorProps {
  * 수동 컬럼 편집 컴포넌트
  * - 사용자가 직접 컬럼 추가/삭제
  * - 컬럼명과 데이터 필드 직접 매핑
+ * - 드래그 앤 드롭으로 순서 변경
  */
 export function ManualColumnEditor({ availableFields, columns, onChange }: ManualColumnEditorProps) {
+  const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
+  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
+
   // 새 컬럼 추가
   const handleAddColumn = () => {
     const newCol: ListColumn = {
@@ -43,12 +47,48 @@ export function ManualColumnEditor({ availableFields, columns, onChange }: Manua
     onChange(columns.map((col) => (col.id === id ? { ...col, ...updates } : col)));
   };
 
+  // 드래그 시작
+  const handleDragStart = (index: number) => {
+    setDraggedIndex(index);
+  };
+
+  // 드래그 오버 - 실시간으로 순서 변경하여 UI 업데이트
+  const handleDragOver = (e: React.DragEvent, hoverIndex: number) => {
+    e.preventDefault();
+    if (draggedIndex === null || draggedIndex === hoverIndex) return;
+
+    setDragOverIndex(hoverIndex);
+
+    const newColumns = [...columns];
+    const draggedItem = newColumns[draggedIndex];
+    newColumns.splice(draggedIndex, 1);
+    newColumns.splice(hoverIndex, 0, draggedItem);
+
+    setDraggedIndex(hoverIndex);
+    onChange(newColumns);
+  };
+
+  // 드롭
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setDraggedIndex(null);
+    setDragOverIndex(null);
+  };
+
+  // 드래그 종료
+  const handleDragEnd = () => {
+    setDraggedIndex(null);
+    setDragOverIndex(null);
+  };
+
   return (
     <Card className="p-4">
       <div className="mb-4 flex items-center justify-between">
         <div>
           <h3 className="text-lg font-semibold text-gray-800">수동 컬럼 편집</h3>
-          <p className="text-sm text-gray-600">직접 컬럼을 추가하고 데이터 필드를 매핑하세요</p>
+          <p className="text-sm text-gray-600">
+            직접 컬럼을 추가하고 데이터 필드를 매핑하세요. 드래그하여 순서를 변경할 수 있습니다.
+          </p>
         </div>
         <Button onClick={handleAddColumn} size="sm" className="gap-2">
           <Plus className="h-4 w-4" />
@@ -58,9 +98,25 @@ export function ManualColumnEditor({ availableFields, columns, onChange }: Manua
 
       <div className="space-y-3">
         {columns.map((col, index) => (
-          <div key={col.id} className="rounded-lg border border-gray-200 bg-gray-50 p-4">
+          <div
+            key={col.id}
+            draggable
+            onDragStart={(e) => {
+              handleDragStart(index);
+              e.currentTarget.style.cursor = "grabbing";
+            }}
+            onDragOver={(e) => handleDragOver(e, index)}
+            onDrop={handleDrop}
+            onDragEnd={(e) => {
+              handleDragEnd();
+              e.currentTarget.style.cursor = "grab";
+            }}
+            className={`cursor-grab rounded-lg border border-gray-200 bg-gray-50 p-4 transition-all active:cursor-grabbing ${
+              draggedIndex === index ? "opacity-50" : ""
+            }`}
+          >
             <div className="mb-3 flex items-center gap-2">
-              <GripVertical className="h-4 w-4 text-gray-400" />
+              <GripVertical className="h-4 w-4 text-blue-500" />
               <span className="font-medium text-gray-700">컬럼 {index + 1}</span>
               <Button
                 onClick={() => handleRemove(col.id)}

frontend/components/admin/dashboard/widgets/yard-3d/YardEditor.tsx

@@ -2,13 +2,15 @@
 
 import { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
-import { ArrowLeft, Save, Loader2, Plus, Settings, Trash2 } from "lucide-react";
+import { ArrowLeft, Save, Loader2, Plus, Settings, Trash2, Edit2 } from "lucide-react";
 import { yardLayoutApi } from "@/lib/api/yardLayoutApi";
 import dynamic from "next/dynamic";
 import { YardLayout, YardPlacement } from "./types";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { AlertCircle, CheckCircle } from "lucide-react";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 
 const Yard3DCanvas = dynamic(() => import("./Yard3DCanvas"), {
   ssr: false,
@@ -45,6 +47,14 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) {
     success: boolean;
     message: string;
   }>({ open: false, success: false, message: "" });
+  const [deleteConfirmDialog, setDeleteConfirmDialog] = useState<{
+    open: boolean;
+    placementId: number | null;
+  }>({ open: false, placementId: null });
+  const [editLayoutDialog, setEditLayoutDialog] = useState<{
+    open: boolean;
+    name: string;
+  }>({ open: false, name: "" });
 
   // 배치 목록 로드
   useEffect(() => {
@@ -110,11 +120,15 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) {
     setShowConfigPanel(true);
   };
 
-  // 요소 삭제 (로컬 상태에서만 삭제, 저장 시 서버에 반영)
+  // 요소 삭제 확인 Dialog 열기
   const handleDeletePlacement = (placementId: number) => {
-    if (!confirm("이 요소를 삭제하시겠습니까?")) {
+    setDeleteConfirmDialog({ open: true, placementId });
-      return;
+  };
-    }
+
+  // 요소 삭제 확정 (로컬 상태에서만 삭제, 저장 시 서버에 반영)
+  const confirmDeletePlacement = () => {
+    const { placementId } = deleteConfirmDialog;
+    if (placementId === null) return;
 
     setPlacements((prev) => prev.filter((p) => p.id !== placementId));
     if (selectedPlacement?.id === placementId) {
@@ -122,6 +136,7 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) {
       setShowConfigPanel(false);
     }
     setHasUnsavedChanges(true);
+    setDeleteConfirmDialog({ open: false, placementId: null });
   };
 
   // 자재 드래그 (3D 캔버스에서, 로컬 상태에만 반영)
@@ -257,6 +272,32 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) {
     return !!(placement.material_name && placement.quantity && placement.unit);
   };
 
+  // 레이아웃 편집 Dialog 열기
+  const handleEditLayout = () => {
+    setEditLayoutDialog({
+      open: true,
+      name: layout.name,
+    });
+  };
+
+  // 레이아웃 정보 저장
+  const handleSaveLayoutInfo = async () => {
+    try {
+      const response = await yardLayoutApi.updateLayout(layout.id, {
+        name: editLayoutDialog.name,
+      });
+
+      if (response.success) {
+        // 레이아웃 정보 업데이트
+        layout.name = editLayoutDialog.name;
+        setEditLayoutDialog({ open: false, name: "" });
+      }
+    } catch (error) {
+      console.error("레이아웃 정보 수정 실패:", error);
+      setError("레이아웃 정보 수정에 실패했습니다.");
+    }
+  };
+
   return (
     <div className="flex h-full flex-col bg-white">
       {/* 상단 툴바 */}
@@ -266,10 +307,15 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) {
             <ArrowLeft className="mr-2 h-4 w-4" />
             목록으로
           </Button>
+          <div className="flex items-center gap-2">
             <div>
               <h2 className="text-lg font-semibold">{layout.name}</h2>
               {layout.description && <p className="text-sm text-gray-500">{layout.description}</p>}
             </div>
+            <Button variant="ghost" size="sm" onClick={handleEditLayout} className="h-8 w-8 p-0">
+              <Edit2 className="h-4 w-4 text-gray-500" />
+            </Button>
+          </div>
         </div>
 
         <div className="flex items-center gap-2">
@@ -442,6 +488,68 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) {
           </div>
         </DialogContent>
       </Dialog>
+
+      {/* 삭제 확인 Dialog */}
+      <Dialog
+        open={deleteConfirmDialog.open}
+        onOpenChange={(open) => !open && setDeleteConfirmDialog({ open: false, placementId: null })}
+      >
+        <DialogContent onPointerDown={(e) => e.stopPropagation()}>
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <AlertCircle className="h-5 w-5 text-orange-600" />
+              요소 삭제 확인
+            </DialogTitle>
+            <DialogDescription className="pt-2">
+              이 요소를 삭제하시겠습니까?
+              <br />
+              <span className="font-semibold text-orange-600">저장 버튼을 눌러야 최종적으로 삭제됩니다.</span>
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex justify-end gap-2">
+            <Button variant="outline" onClick={() => setDeleteConfirmDialog({ open: false, placementId: null })}>
+              취소
+            </Button>
+            <Button onClick={confirmDeletePlacement} className="bg-red-600 hover:bg-red-700">
+              삭제
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* 레이아웃 편집 Dialog */}
+      <Dialog
+        open={editLayoutDialog.open}
+        onOpenChange={(open) => !open && setEditLayoutDialog({ open: false, name: "" })}
+      >
+        <DialogContent onPointerDown={(e) => e.stopPropagation()}>
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <Edit2 className="h-5 w-5 text-blue-600" />
+              야드 레이아웃 정보 수정
+            </DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label htmlFor="layout-name">레이아웃 이름</Label>
+              <Input
+                id="layout-name"
+                value={editLayoutDialog.name}
+                onChange={(e) => setEditLayoutDialog((prev) => ({ ...prev, name: e.target.value }))}
+                placeholder="레이아웃 이름을 입력하세요"
+              />
+            </div>
+          </div>
+          <div className="flex justify-end gap-2">
+            <Button variant="outline" onClick={() => setEditLayoutDialog({ open: false, name: "" })}>
+              취소
+            </Button>
+            <Button onClick={handleSaveLayoutInfo} disabled={!editLayoutDialog.name.trim()}>
+              저장
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }

frontend/components/dashboard/DashboardViewer.tsx

@@ -278,11 +278,11 @@ export function DashboardViewer({
 
   return (
     <DashboardProvider>
-      {/* overflow-auto 제거 - 외부 페이지 스크롤 사용 */}
+      {/* 스크롤 가능한 컨테이너 */}
-      <div className="flex h-full items-start justify-center bg-gray-100 p-8">
+      <div className="flex min-h-screen items-start justify-center bg-gray-100 p-8">
         {/* 고정 크기 캔버스 (편집 화면과 동일한 레이아웃) */}
         <div
-          className="relative overflow-hidden rounded-lg"
+          className="relative rounded-lg"
           style={{
             width: `${canvasConfig.width}px`,
             minHeight: `${canvasConfig.height}px`,