diff --git a/frontend/app/(main)/dashboard/[dashboardId]/page.tsx b/frontend/app/(main)/dashboard/[dashboardId]/page.tsx index f8af0d0f..7639abc6 100644 --- a/frontend/app/(main)/dashboard/[dashboardId]/page.tsx +++ b/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(null); - // 대시보드 데이터 로딩 - useEffect(() => { - loadDashboard(); - }, [resolvedParams.dashboardId]); - - const loadDashboard = async () => { + const loadDashboard = React.useCallback(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) { @@ -159,10 +160,11 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) { */} {/* 대시보드 뷰어 */} - ); @@ -171,8 +173,33 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) { /** * 샘플 대시보드 생성 함수 */ -function generateSampleDashboard(dashboardId: string) { - const dashboards: Record = { +function generateSampleDashboard(dashboardId: string): { + 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: "📊 매출 현황 대시보드", diff --git a/frontend/components/admin/dashboard/DashboardDesigner.tsx b/frontend/components/admin/dashboard/DashboardDesigner.tsx index 3e01cff1..f3f0b17b 100644 --- a/frontend/components/admin/dashboard/DashboardDesigner.tsx +++ b/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); } // 요소들 설정 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 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 (

수동 컬럼 편집

-

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

+

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

-
-

{layout.name}

- {layout.description &&

{layout.description}

} +
+
+

{layout.name}

+ {layout.description &&

{layout.description}

} +
+
@@ -442,6 +488,68 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) {
+ + {/* 삭제 확인 Dialog */} + !open && setDeleteConfirmDialog({ open: false, placementId: null })} + > + e.stopPropagation()}> + + + + 요소 삭제 확인 + + + 이 요소를 삭제하시겠습니까? +
+ 저장 버튼을 눌러야 최종적으로 삭제됩니다. + + +
+ + +
+ + + + {/* 레이아웃 편집 Dialog */} + !open && setEditLayoutDialog({ open: false, name: "" })} + > + e.stopPropagation()}> + + + + 야드 레이아웃 정보 수정 + + +
+
+ + setEditLayoutDialog((prev) => ({ ...prev, name: e.target.value }))} + placeholder="레이아웃 이름을 입력하세요" + /> +
+
+
+ + +
+ +
); } diff --git a/frontend/components/dashboard/DashboardViewer.tsx b/frontend/components/dashboard/DashboardViewer.tsx index 287286cf..c00b2807 100644 --- a/frontend/components/dashboard/DashboardViewer.tsx +++ b/frontend/components/dashboard/DashboardViewer.tsx @@ -278,11 +278,11 @@ export function DashboardViewer({ return ( - {/* overflow-auto 제거 - 외부 페이지 스크롤 사용 */} -
+ {/* 스크롤 가능한 컨테이너 */} +
{/* 고정 크기 캔버스 (편집 화면과 동일한 레이아웃) */}