From 821be53b19ea6e64da0cc8002278173ffc0dd52a Mon Sep 17 00:00:00 2001 From: dohyeons Date: Mon, 20 Oct 2025 12:07:07 +0900 Subject: [PATCH 1/5] =?UTF-8?q?=EC=95=BC=EB=93=9C3D=20=EC=9A=94=EC=86=8C?= =?UTF-8?q?=20=EC=82=AD=EC=A0=9C=20=EC=8B=9C=20Dialog=EB=A5=BC=20=EC=82=AC?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../dashboard/widgets/yard-3d/YardEditor.tsx | 45 +++++++++++++++++-- 1 file changed, 41 insertions(+), 4 deletions(-) diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/YardEditor.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/YardEditor.tsx index 346d59f5..473ae3b8 100644 --- a/frontend/components/admin/dashboard/widgets/yard-3d/YardEditor.tsx +++ b/frontend/components/admin/dashboard/widgets/yard-3d/YardEditor.tsx @@ -45,6 +45,10 @@ 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 }); // 배치 목록 로드 useEffect(() => { @@ -110,11 +114,15 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) { setShowConfigPanel(true); }; - // 요소 삭제 (로컬 상태에서만 삭제, 저장 시 서버에 반영) + // 요소 삭제 확인 Dialog 열기 const handleDeletePlacement = (placementId: number) => { - if (!confirm("이 요소를 삭제하시겠습니까?")) { - return; - } + setDeleteConfirmDialog({ open: true, placementId }); + }; + + // 요소 삭제 확정 (로컬 상태에서만 삭제, 저장 시 서버에 반영) + const confirmDeletePlacement = () => { + const { placementId } = deleteConfirmDialog; + if (placementId === null) return; setPlacements((prev) => prev.filter((p) => p.id !== placementId)); if (selectedPlacement?.id === placementId) { @@ -122,6 +130,7 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) { setShowConfigPanel(false); } setHasUnsavedChanges(true); + setDeleteConfirmDialog({ open: false, placementId: null }); }; // 자재 드래그 (3D 캔버스에서, 로컬 상태에만 반영) @@ -442,6 +451,34 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) { + + {/* 삭제 확인 Dialog */} + !open && setDeleteConfirmDialog({ open: false, placementId: null })} + > + e.stopPropagation()}> + + + + 요소 삭제 확인 + + + 이 요소를 삭제하시겠습니까? +
+ 저장 버튼을 눌러야 최종적으로 삭제됩니다. + + +
+ + +
+ + ); } -- 2.43.0 From f16f75c0830af39dff4dd0144ea15dd564a50fc8 Mon Sep 17 00:00:00 2001 From: dohyeons Date: Mon, 20 Oct 2025 12:29:47 +0900 Subject: [PATCH 2/5] =?UTF-8?q?=EC=95=BC=EB=93=9C=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=20=EC=9D=B4=EB=A6=84=20=EB=B3=80=EA=B2=BD=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../dashboard/widgets/yard-3d/YardEditor.tsx | 79 ++++++++++++++++++- 1 file changed, 75 insertions(+), 4 deletions(-) diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/YardEditor.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/YardEditor.tsx index 473ae3b8..41c68af5 100644 --- a/frontend/components/admin/dashboard/widgets/yard-3d/YardEditor.tsx +++ b/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, @@ -49,6 +51,10 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) { open: boolean; placementId: number | null; }>({ open: false, placementId: null }); + const [editLayoutDialog, setEditLayoutDialog] = useState<{ + open: boolean; + name: string; + }>({ open: false, name: "" }); // 배치 목록 로드 useEffect(() => { @@ -266,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 (
{/* 상단 툴바 */} @@ -275,9 +307,14 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) { 목록으로 -
-

{layout.name}

- {layout.description &&

{layout.description}

} +
+
+

{layout.name}

+ {layout.description &&

{layout.description}

} +
+
@@ -479,6 +516,40 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) {
+ + {/* 레이아웃 편집 Dialog */} + !open && setEditLayoutDialog({ open: false, name: "" })} + > + e.stopPropagation()}> + + + + 야드 레이아웃 정보 수정 + + +
+
+ + setEditLayoutDialog((prev) => ({ ...prev, name: e.target.value }))} + placeholder="레이아웃 이름을 입력하세요" + /> +
+
+
+ + +
+ + ); } -- 2.43.0 From 84994a30e8eb5ba73468f32328660b4bd47197ed Mon Sep 17 00:00:00 2001 From: dohyeons Date: Mon, 20 Oct 2025 15:01:32 +0900 Subject: [PATCH 3/5] =?UTF-8?q?=EC=B0=A8=ED=8A=B8=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../admin/dashboard/charts/BarChart.tsx | 68 ++++++++++++------- .../dashboard/charts/HorizontalBarChart.tsx | 66 +++++++++++------- .../dashboard/charts/StackedBarChart.tsx | 63 ++++++++++++----- 3 files changed, 133 insertions(+), 64 deletions(-) diff --git a/frontend/components/admin/dashboard/charts/BarChart.tsx b/frontend/components/admin/dashboard/charts/BarChart.tsx index fd401ec3..3f619d05 100644 --- a/frontend/components/admin/dashboard/charts/BarChart.tsx +++ b/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축 스케일 (값) - const maxValue = d3.max(data.datasets.flatMap((ds) => ds.data)) || 0; + // Y축 스케일 (값) - 절대값 기준 + 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축 그리기 - g.append("g").call(d3.axisLeft(yScale)).style("font-size", "12px"); + // Y축 그리기 (값 표시 제거) + g.append("g") + .call(d3.axisLeft(yScale).tickFormat(() => "")) + .style("font-size", "12px"); - // 그리드 라인 - if (config.showGrid !== false) { - g.append("g") - .attr("class", "grid") - .call( - 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("height", (d) => chartHeight - yScale(d)); + .attr("y", (d) => yScale(Math.abs(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); } // 툴팁 diff --git a/frontend/components/admin/dashboard/charts/HorizontalBarChart.tsx b/frontend/components/admin/dashboard/charts/HorizontalBarChart.tsx index d5785bf8..60fcb666 100644 --- a/frontend/components/admin/dashboard/charts/HorizontalBarChart.tsx +++ b/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축이 값 - const maxValue = d3.max(data.datasets.flatMap((ds) => ds.data)) || 0; + // X축 스케일 (값) - 수평이므로 X축이 값, 절대값 기준 + 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); } // 툴팁 diff --git a/frontend/components/admin/dashboard/charts/StackedBarChart.tsx b/frontend/components/admin/dashboard/charts/StackedBarChart.tsx index bf1d8be7..1a18c622 100644 --- a/frontend/components/admin/dashboard/charts/StackedBarChart.tsx +++ b/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축 그리기 - const yAxis = config.stackMode === "percent" ? d3.axisLeft(yScale).tickFormat((d) => `${d}%`) : d3.axisLeft(yScale); - g.append("g").call(yAxis).style("font-size", "12px"); + // Y축 그리기 (값 표시 제거) + g.append("g") + .call(d3.axisLeft(yScale).tickFormat(() => "")) + .style("font-size", "12px"); - // 그리드 라인 - if (config.showGrid !== false) { - g.append("g") - .attr("class", "grid") - .call( - 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 -- 2.43.0 From 3eac70947861f058d7499444f4360057f8782e55 Mon Sep 17 00:00:00 2001 From: dohyeons Date: Mon, 20 Oct 2025 15:43:17 +0900 Subject: [PATCH 4/5] =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=9C=84?= =?UTF-8?q?=EC=A0=AF,=20=EC=B0=A8=ED=8A=B8,=20=EB=B7=B0=EC=96=B4=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=EC=82=AC=ED=95=AD=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../widgets/ListWidgetConfigModal.tsx | 35 +++--- .../widgets/list-widget/ColumnSelector.tsx | 101 ++++++++++++++++-- .../list-widget/ManualColumnEditor.tsx | 64 ++++++++++- .../components/dashboard/DashboardViewer.tsx | 6 +- 4 files changed, 172 insertions(+), 34 deletions(-) diff --git a/frontend/components/admin/dashboard/widgets/ListWidgetConfigModal.tsx b/frontend/components/admin/dashboard/widgets/ListWidgetConfigModal.tsx index e182f433..debe0c2e 100644 --- a/frontend/components/admin/dashboard/widgets/ListWidgetConfigModal.tsx +++ b/frontend/components/admin/dashboard/widgets/ListWidgetConfigModal.tsx @@ -95,24 +95,21 @@ export function ListWidgetConfigModal({ isOpen, element, onClose, onSave }: List }, []); // 쿼리 실행 결과 처리 - const handleQueryTest = useCallback( - (result: QueryResult) => { - setQueryResult(result); + const handleQueryTest = useCallback((result: QueryResult) => { + setQueryResult(result); - // 자동 모드이고 기존 컬럼이 없을 때만 자동 생성 - if (listConfig.columnMode === "auto" && result.columns.length > 0 && listConfig.columns.length === 0) { - const autoColumns: ListColumn[] = result.columns.map((col, idx) => ({ - id: `col_${idx}`, - label: col, - field: col, - align: "left", - visible: true, - })); - setListConfig((prev) => ({ ...prev, columns: autoColumns })); - } - }, - [listConfig.columnMode, listConfig.columns.length], - ); + // 쿼리 실행할 때마다 컬럼 초기화 후 자동 생성 + if (result.columns.length > 0) { + const autoColumns: ListColumn[] = result.columns.map((col, idx) => ({ + id: `col_${idx}`, + label: col, + field: col, + align: "left", + visible: true, + })); + setListConfig((prev) => ({ ...prev, columns: autoColumns })); + } + }, []); // 다음 단계 const handleNext = () => { @@ -176,9 +173,7 @@ export function ListWidgetConfigModal({ isOpen, element, onClose, onSave }: List {/* 참고: 리스트 위젯은 제목이 항상 표시됩니다 */} -
- 💡 리스트 위젯은 제목이 항상 표시됩니다 -
+
💡 리스트 위젯은 제목이 항상 표시됩니다
{/* 진행 상태 표시 */} diff --git a/frontend/components/admin/dashboard/widgets/list-widget/ColumnSelector.tsx b/frontend/components/admin/dashboard/widgets/list-widget/ColumnSelector.tsx index f1700dbf..37b0f157 100644 --- a/frontend/components/admin/dashboard/widgets/list-widget/ColumnSelector.tsx +++ b/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(null); + const [dragOverIndex, setDragOverIndex] = useState(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 (

컬럼 선택 및 설정

-

표시할 컬럼을 선택하고 이름을 변경하세요

+

+ 표시할 컬럼을 선택하고 이름을 변경하세요. 드래그하여 순서를 변경할 수 있습니다. +

- {availableColumns.map((field) => { - const selectedCol = selectedColumns.find((col) => col.field === field); - const isSelected = !!selectedCol; + {/* 선택된 컬럼을 먼저 순서대로 표시 */} + {selectedColumns.map((selectedCol, columnIndex) => { + 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 (
{ + 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" : "" }`} >
handleToggle(field)} className="mt-1" />
- + {field} {previewText && (예: {previewText})}
@@ -122,6 +179,36 @@ export function ColumnSelector({ availableColumns, selectedColumns, sampleData,
); })} + + {/* 선택되지 않은 컬럼들을 아래에 표시 */} + {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 ( +
+
+ handleToggle(field)} className="mt-1" /> +
+
+ + {field} + {previewText && (예: {previewText})} +
+
+
+
+ ); + })}
{selectedColumns.length === 0 && ( diff --git a/frontend/components/admin/dashboard/widgets/list-widget/ManualColumnEditor.tsx b/frontend/components/admin/dashboard/widgets/list-widget/ManualColumnEditor.tsx index 1d564816..24fe030c 100644 --- a/frontend/components/admin/dashboard/widgets/list-widget/ManualColumnEditor.tsx +++ b/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(null); + const [dragOverIndex, setDragOverIndex] = useState(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 (

수동 컬럼 편집

-

직접 컬럼을 추가하고 데이터 필드를 매핑하세요

+

+ 직접 컬럼을 추가하고 데이터 필드를 매핑하세요. 드래그하여 순서를 변경할 수 있습니다. +