From c4290f2d0e724272c9e7dfbc7bca9ceb7e56bcb6 Mon Sep 17 00:00:00 2001 From: kjs Date: Mon, 10 Nov 2025 14:41:58 +0900 Subject: [PATCH 01/33] =?UTF-8?q?refactor:=20=EA=B2=A9=EC=9E=90=20?= =?UTF-8?q?=EC=8B=9C=EC=8A=A4=ED=85=9C=EC=9D=84=2010px=20=EB=8B=A8?= =?UTF-8?q?=EC=9C=84=EB=A1=9C=20=EB=8B=A8=EC=88=9C=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 복잡한 컬럼 시스템 제거 - 웹타입별 고정 픽셀 너비 사용 (10px 단위) - 격자 설정 패널 단순화 (컬럼 수 설정 제거) - 간격/여백 조정을 10px 단위로 변경 - 더 직관적이고 예측 가능한 레이아웃 시스템 --- frontend/components/screen/ScreenDesigner.tsx | 104 ++++++------------ .../components/screen/panels/GridPanel.tsx | 81 +++----------- 2 files changed, 47 insertions(+), 138 deletions(-) diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx index 92d3f560..4d644524 100644 --- a/frontend/components/screen/ScreenDesigner.tsx +++ b/frontend/components/screen/ScreenDesigner.tsx @@ -2338,45 +2338,43 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD snapToGrid: layout.gridSettings?.snapToGrid, }); - // 웹타입별 기본 그리드 컬럼 수 계산 - const getDefaultGridColumns = (widgetType: string): number => { + // 웹타입별 기본 너비 계산 (10px 단위 고정) + const getDefaultWidth = (widgetType: string): number => { const widthMap: Record = { - // 텍스트 입력 계열 (넓게) - text: 4, // 1/3 (33%) - email: 4, // 1/3 (33%) - tel: 3, // 1/4 (25%) - url: 4, // 1/3 (33%) - textarea: 6, // 절반 (50%) + // 텍스트 입력 계열 + text: 200, + email: 200, + tel: 150, + url: 250, + textarea: 300, - // 숫자/날짜 입력 (중간) - number: 2, // 2/12 (16.67%) - decimal: 2, // 2/12 (16.67%) - date: 3, // 1/4 (25%) - datetime: 3, // 1/4 (25%) - time: 2, // 2/12 (16.67%) + // 숫자/날짜 입력 + number: 120, + decimal: 120, + date: 150, + datetime: 180, + time: 120, - // 선택 입력 (중간) - select: 3, // 1/4 (25%) - radio: 3, // 1/4 (25%) - checkbox: 2, // 2/12 (16.67%) - boolean: 2, // 2/12 (16.67%) + // 선택 입력 + select: 180, + radio: 180, + checkbox: 120, + boolean: 120, - // 코드/참조 (넓게) - code: 3, // 1/4 (25%) - entity: 4, // 1/3 (33%) + // 코드/참조 + code: 180, + entity: 200, - // 파일/이미지 (넓게) - file: 4, // 1/3 (33%) - image: 3, // 1/4 (25%) + // 파일/이미지 + file: 250, + image: 200, // 기타 - button: 2, // 2/12 (16.67%) - label: 2, // 2/12 (16.67%) + button: 100, + label: 100, }; - const defaultColumns = widthMap[widgetType] || 3; // 기본값 3 (1/4, 25%) - console.log("🎯 [ScreenDesigner] getDefaultGridColumns:", { widgetType, defaultColumns }); - return defaultColumns; + return widthMap[widgetType] || 200; // 기본값 200px }; // 웹타입별 기본 높이 계산 @@ -2544,24 +2542,12 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD const componentId = getComponentIdFromWebType(column.widgetType); // console.log(`🔄 폼 컨테이너 드롭: ${column.widgetType} → ${componentId}`); - // 웹타입별 적절한 gridColumns 계산 - const calculatedGridColumns = getDefaultGridColumns(column.widgetType); - - // gridColumns에 맞는 실제 너비 계산 - const componentWidth = - currentGridInfo && layout.gridSettings?.snapToGrid - ? calculateWidthFromColumns( - calculatedGridColumns, - currentGridInfo, - layout.gridSettings as GridUtilSettings, - ) - : defaultWidth; + // 웹타입별 기본 너비 계산 (10px 단위 고정) + const componentWidth = getDefaultWidth(column.widgetType); console.log("🎯 폼 컨테이너 컴포넌트 생성:", { widgetType: column.widgetType, - calculatedGridColumns, componentWidth, - defaultWidth, }); newComponent = { @@ -2576,7 +2562,6 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD componentType: componentId, // DynamicComponentRenderer용 컴포넌트 타입 position: { x: relativeX, y: relativeY, z: 1 } as Position, size: { width: componentWidth, height: getDefaultHeight(column.widgetType) }, - gridColumns: calculatedGridColumns, // 코드 타입인 경우 코드 카테고리 정보 추가 ...(column.widgetType === "code" && column.codeCategory && { @@ -2588,7 +2573,6 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD labelColor: "#212121", labelFontWeight: "500", labelMarginBottom: "6px", - width: `${(calculatedGridColumns / (layout.gridSettings?.columns || 12)) * 100}%`, // 퍼센트 너비 }, componentConfig: { type: componentId, // text-input, number-input 등 @@ -2611,36 +2595,14 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD const componentId = getComponentIdFromWebType(column.widgetType); // console.log(`🔄 캔버스 드롭: ${column.widgetType} → ${componentId}`); - // 웹타입별 적절한 gridColumns 계산 - const calculatedGridColumns = getDefaultGridColumns(column.widgetType); - - // gridColumns에 맞는 실제 너비 계산 - const componentWidth = - currentGridInfo && layout.gridSettings?.snapToGrid - ? calculateWidthFromColumns( - calculatedGridColumns, - currentGridInfo, - layout.gridSettings as GridUtilSettings, - ) - : defaultWidth; + // 웹타입별 기본 너비 계산 (10px 단위 고정) + const componentWidth = getDefaultWidth(column.widgetType); console.log("🎯 캔버스 컴포넌트 생성:", { widgetType: column.widgetType, - calculatedGridColumns, componentWidth, - defaultWidth, }); - // 🔍 이미지 타입 드래그앤드롭 디버깅 - // if (column.widgetType === "image") { - // console.log("🖼️ 이미지 컬럼 드래그앤드롭:", { - // columnName: column.columnName, - // widgetType: column.widgetType, - // componentId, - // column, - // }); - // } - newComponent = { id: generateComponentId(), type: "component", // ✅ 새로운 컴포넌트 시스템 사용 @@ -2652,7 +2614,6 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD componentType: componentId, // DynamicComponentRenderer용 컴포넌트 타입 position: { x, y, z: 1 } as Position, size: { width: componentWidth, height: getDefaultHeight(column.widgetType) }, - gridColumns: calculatedGridColumns, // 코드 타입인 경우 코드 카테고리 정보 추가 ...(column.widgetType === "code" && column.codeCategory && { @@ -2664,7 +2625,6 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD labelColor: "#000000", // 순수한 검정 labelFontWeight: "500", labelMarginBottom: "8px", - width: `${(calculatedGridColumns / (layout.gridSettings?.columns || 12)) * 100}%`, // 퍼센트 너비 }, componentConfig: { type: componentId, // text-input, number-input 등 diff --git a/frontend/components/screen/panels/GridPanel.tsx b/frontend/components/screen/panels/GridPanel.tsx index f33cc601..82bb4fc4 100644 --- a/frontend/components/screen/panels/GridPanel.tsx +++ b/frontend/components/screen/panels/GridPanel.tsx @@ -128,49 +128,14 @@ export const GridPanel: React.FC = ({ {/* 설정 영역 */}
- {/* 격자 구조 */} + {/* 격자 구조 - 10px 단위 */}
-

격자 구조

+

격자 크기 (10px 단위)

-
- -
- { - const value = parseInt(e.target.value, 10); - if (!isNaN(value) && value >= 1 && value <= safeMaxColumns) { - updateSetting("columns", value); - } - }} - className="h-8 text-xs" - /> - / {safeMaxColumns} -
- updateSetting("columns", value)} - className="w-full" - /> -
- 1열 - {safeMaxColumns}열 -
- {isColumnsTooSmall && ( -

- ⚠️ 컬럼 너비가 너무 작습니다 (최소 {MIN_COLUMN_WIDTH}px 권장) -

- )} +
+

+ 모든 컴포넌트는 10px 단위로 배치되고 크기가 조정됩니다. +

@@ -181,7 +146,7 @@ export const GridPanel: React.FC = ({ id="gap" min={0} max={40} - step={2} + step={10} value={[gridSettings.gap]} onValueChange={([value]) => updateSetting("gap", value)} className="w-full" @@ -200,7 +165,7 @@ export const GridPanel: React.FC = ({ id="padding" min={0} max={60} - step={4} + step={10} value={[gridSettings.padding]} onValueChange={([value]) => updateSetting("padding", value)} className="w-full" @@ -288,14 +253,14 @@ export const GridPanel: React.FC = ({
💡 격자 설정은 실시간으로 캔버스에 반영됩니다
- {/* 해상도 및 격자 정보 */} - {screenResolution && actualGridInfo && ( + {/* 해상도 정보 */} + {screenResolution && ( <> -
-

격자 정보

+
+

화면 정보

-
+
해상도: @@ -304,25 +269,9 @@ export const GridPanel: React.FC = ({
- 컬럼 너비: - - {actualGridInfo.columnWidth.toFixed(1)}px - {isColumnsTooSmall && " (너무 작음)"} - + 격자 단위: + 10px
- -
- 사용 가능 너비: - - {(screenResolution.width - gridSettings.padding * 2).toLocaleString()}px - -
- - {isColumnsTooSmall && ( -
- 💡 컬럼이 너무 작습니다. 컬럼 수를 줄이거나 간격을 줄여보세요. -
- )}
From 554cdbdea55ced129bd67581cf9fb3c7eb07f838 Mon Sep 17 00:00:00 2001 From: kjs Date: Mon, 10 Nov 2025 14:43:09 +0900 Subject: [PATCH 02/33] =?UTF-8?q?wip:=20=EA=B2=A9=EC=9E=90=20=EC=8B=9C?= =?UTF-8?q?=EC=8A=A4=ED=85=9C=20=EC=A0=9C=EA=B1=B0=20=EC=8B=9C=EC=9E=91=20?= =?UTF-8?q?-=2010px=20=EC=8A=A4=EB=83=85=20=ED=95=A8=EC=88=98=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/components/screen/ScreenDesigner.tsx | 34 +++++++++++-------- 1 file changed, 20 insertions(+), 14 deletions(-) diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx index 4d644524..bb62f17e 100644 --- a/frontend/components/screen/ScreenDesigner.tsx +++ b/frontend/components/screen/ScreenDesigner.tsx @@ -24,19 +24,26 @@ import { calculateRelativePositions, restoreAbsolutePositions, } from "@/lib/utils/groupingUtils"; -import { - calculateGridInfo, - snapToGrid, - snapSizeToGrid, - generateGridLines, - updateSizeFromGridColumns, - adjustGridColumnsFromSize, - alignGroupChildrenToGrid, - calculateOptimalGroupSize, - normalizeGroupChildPositions, - calculateWidthFromColumns, - GridSettings as GridUtilSettings, -} from "@/lib/utils/gridUtils"; + +// 10px 단위 스냅 함수 +const snapTo10px = (value: number): number => { + return Math.round(value / 10) * 10; +}; + +const snapPositionTo10px = (position: Position): Position => { + return { + x: snapTo10px(position.x), + y: snapTo10px(position.y), + z: position.z, + }; +}; + +const snapSizeTo10px = (size: { width: number; height: number }): { width: number; height: number } => { + return { + width: snapTo10px(size.width), + height: snapTo10px(size.height), + }; +}; import { GroupingToolbar } from "./GroupingToolbar"; import { screenApi, tableTypeApi } from "@/lib/api/screen"; import { tableManagementApi } from "@/lib/api/tableManagement"; @@ -57,7 +64,6 @@ import { TemplatesPanel, TemplateComponent } from "./panels/TemplatesPanel"; import { ComponentsPanel } from "./panels/ComponentsPanel"; import PropertiesPanel from "./panels/PropertiesPanel"; import DetailSettingsPanel from "./panels/DetailSettingsPanel"; -import GridPanel from "./panels/GridPanel"; import ResolutionPanel from "./panels/ResolutionPanel"; import { usePanelState, PanelConfig } from "@/hooks/usePanelState"; import { FlowButtonGroup } from "./widgets/FlowButtonGroup"; From d8bba7cfc1474b0713bdf78d31ac579ac67e62c1 Mon Sep 17 00:00:00 2001 From: kjs Date: Mon, 10 Nov 2025 14:45:19 +0900 Subject: [PATCH 03/33] =?UTF-8?q?wip:=20=EA=B2=A9=EC=9E=90=20=ED=95=A8?= =?UTF-8?q?=EC=88=98=20=ED=98=B8=EC=B6=9C=EC=9D=84=2010px=20=EC=8A=A4?= =?UTF-8?q?=EB=83=85=EC=9C=BC=EB=A1=9C=20=EC=9D=BC=EA=B4=84=20=EA=B5=90?= =?UTF-8?q?=EC=B2=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - snapToGrid -> snapPositionTo10px - snapSizeToGrid -> snapSizeTo10px - 격자 라인을 10px 단위로 변경 - gridInfo 의존성 제거 (진행중) --- frontend/components/screen/ScreenDesigner.tsx | 85 ++++++------------- 1 file changed, 27 insertions(+), 58 deletions(-) diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx index bb62f17e..981cb66d 100644 --- a/frontend/components/screen/ScreenDesigner.tsx +++ b/frontend/components/screen/ScreenDesigner.tsx @@ -287,55 +287,24 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD const canvasRef = useRef(null); - // 격자 정보 계산 - const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 }); - - const gridInfo = useMemo(() => { - if (!layout.gridSettings) return null; - - // 캔버스 크기 계산 (해상도 설정 우선) - let width = screenResolution.width; - let height = screenResolution.height; - - // 해상도가 설정되지 않은 경우 기본값 사용 - if (!width || !height) { - width = canvasSize.width || window.innerWidth - 100; - height = canvasSize.height || window.innerHeight - 200; - } - - const newGridInfo = calculateGridInfo(width, height, { - columns: layout.gridSettings.columns, - gap: layout.gridSettings.gap, - padding: layout.gridSettings.padding, - snapToGrid: layout.gridSettings.snapToGrid || false, - }); - - return newGridInfo; - }, [layout.gridSettings, screenResolution]); - - // 격자 라인 생성 + // 10px 격자 라인 생성 (시각적 가이드용) const gridLines = useMemo(() => { - if (!gridInfo || !layout.gridSettings?.showGrid) return []; + if (!layout.gridSettings?.showGrid) return []; - // 캔버스 크기는 해상도 크기 사용 const width = screenResolution.width; const height = screenResolution.height; + const lines: Array<{ type: "vertical" | "horizontal"; position: number }> = []; - const lines = generateGridLines(width, height, { - columns: layout.gridSettings.columns, - gap: layout.gridSettings.gap, - padding: layout.gridSettings.padding, - snapToGrid: layout.gridSettings.snapToGrid || false, - }); + // 10px 단위로 격자 라인 생성 + for (let x = 0; x <= width; x += 10) { + lines.push({ type: "vertical", position: x }); + } + for (let y = 0; y <= height; y += 10) { + lines.push({ type: "horizontal", position: y }); + } - // 수직선과 수평선을 하나의 배열로 합치기 - const allLines = [ - ...lines.verticalLines.map((pos) => ({ type: "vertical" as const, position: pos })), - ...lines.horizontalLines.map((pos) => ({ type: "horizontal" as const, position: pos })), - ]; - - return allLines; - }, [gridInfo, layout.gridSettings, screenResolution]); + return lines; + }, [layout.gridSettings?.showGrid, screenResolution.width, screenResolution.height]); // 필터된 테이블 목록 const filteredTables = useMemo(() => { @@ -553,7 +522,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD padding: prevLayout.gridSettings.padding, snapToGrid: prevLayout.gridSettings.snapToGrid || false, }); - const snappedSize = snapSizeToGrid( + const snappedSize = snapSizeTo10px( newComp.size, currentGridInfo, prevLayout.gridSettings as GridUtilSettings, @@ -640,7 +609,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD }; } else if (newComp.type !== "group") { // 그룹이 아닌 일반 컴포넌트만 격자 스냅 적용 - const snappedPosition = snapToGrid( + const snappedPosition = snapPositionTo10px( newComp.position, currentGridInfo, layout.gridSettings as GridUtilSettings, @@ -1103,8 +1072,8 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD }; const adjustedComponents = layout.components.map((comp) => { - const snappedPosition = snapToGrid(comp.position, newGridInfo, gridUtilSettings); - const snappedSize = snapSizeToGrid(comp.size, newGridInfo, gridUtilSettings); + const snappedPosition = snapPositionTo10px(comp.position, newGridInfo, gridUtilSettings); + const snappedSize = snapSizeTo10px(comp.size, newGridInfo, gridUtilSettings); // gridColumns가 없거나 범위를 벗어나면 자동 조정 let adjustedGridColumns = comp.gridColumns; @@ -1218,8 +1187,8 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD }; finalComponents = scaledComponents.map((comp) => { - const snappedPosition = snapToGrid(comp.position, newGridInfo, gridUtilSettings); - const snappedSize = snapSizeToGrid(comp.size, newGridInfo, gridUtilSettings); + const snappedPosition = snapPositionTo10px(comp.position, newGridInfo, gridUtilSettings); + const snappedSize = snapSizeTo10px(comp.size, newGridInfo, gridUtilSettings); // gridColumns 재계산 const adjustedGridColumns = adjustGridColumnsFromSize({ size: snappedSize }, newGridInfo, gridUtilSettings); @@ -1288,8 +1257,8 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD }; const adjustedComponents = layout.components.map((comp) => { - const snappedPosition = snapToGrid(comp.position, currentGridInfo, gridUtilSettings); - const snappedSize = snapSizeToGrid(comp.size, currentGridInfo, gridUtilSettings); + const snappedPosition = snapPositionTo10px(comp.position, currentGridInfo, gridUtilSettings); + const snappedSize = snapSizeTo10px(comp.size, currentGridInfo, gridUtilSettings); // gridColumns가 없거나 범위를 벗어나면 자동 조정 let adjustedGridColumns = comp.gridColumns; @@ -1424,7 +1393,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD // 격자 스냅 적용 const snappedPosition = layout.gridSettings?.snapToGrid && currentGridInfo - ? snapToGrid({ x: dropX, y: dropY, z: 1 }, currentGridInfo, layout.gridSettings as GridUtilSettings) + ? snapPositionTo10px({ x: dropX, y: dropY, z: 1 }, currentGridInfo, layout.gridSettings as GridUtilSettings) : { x: dropX, y: dropY, z: 1 }; console.log("🎨 템플릿 드롭:", { @@ -1456,7 +1425,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD // 격자 스냅 적용 const finalPosition = layout.gridSettings?.snapToGrid && currentGridInfo - ? snapToGrid({ x: absoluteX, y: absoluteY, z: 1 }, currentGridInfo, layout.gridSettings as GridUtilSettings) + ? snapPositionTo10px({ x: absoluteX, y: absoluteY, z: 1 }, currentGridInfo, layout.gridSettings as GridUtilSettings) : { x: absoluteX, y: absoluteY, z: 1 }; if (templateComp.type === "container") { @@ -1839,7 +1808,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD // 격자 스냅 적용 const snappedPosition = layout.gridSettings?.snapToGrid && currentGridInfo - ? snapToGrid({ x: dropX, y: dropY, z: 1 }, currentGridInfo, layout.gridSettings as GridUtilSettings) + ? snapPositionTo10px({ x: dropX, y: dropY, z: 1 }, currentGridInfo, layout.gridSettings as GridUtilSettings) : { x: dropX, y: dropY, z: 1 }; console.log("🏗️ 레이아웃 드롭 (줌 보정):", { @@ -2028,7 +1997,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD // 격자 스냅 적용 const snappedPosition = layout.gridSettings?.snapToGrid && currentGridInfo - ? snapToGrid({ x: boundedX, y: boundedY, z: 1 }, currentGridInfo, layout.gridSettings as GridUtilSettings) + ? snapPositionTo10px({ x: boundedX, y: boundedY, z: 1 }, currentGridInfo, layout.gridSettings as GridUtilSettings) : { x: boundedX, y: boundedY, z: 1 }; console.log("🧩 컴포넌트 드롭:", { @@ -2666,8 +2635,8 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD padding: layout.gridSettings.padding, snapToGrid: layout.gridSettings.snapToGrid || false, }; - newComponent.position = snapToGrid(newComponent.position, currentGridInfo, gridUtilSettings); - newComponent.size = snapSizeToGrid(newComponent.size, currentGridInfo, gridUtilSettings); + newComponent.position = snapPositionTo10px(newComponent.position, currentGridInfo, gridUtilSettings); + newComponent.size = snapSizeTo10px(newComponent.size, currentGridInfo, gridUtilSettings); console.log("🧲 새 컴포넌트 격자 스냅 적용:", { type: newComponent.type, @@ -2980,7 +2949,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD // 일반 컴포넌트 및 플로우 버튼 그룹에 격자 스냅 적용 (일반 그룹 제외) if (draggedComponent?.type !== "group" && layout.gridSettings?.snapToGrid && currentGridInfo) { - finalPosition = snapToGrid( + finalPosition = snapPositionTo10px( { x: dragState.currentPosition.x, y: dragState.currentPosition.y, From 0474937e57600464e247150ef5600cddc0ca3b6c Mon Sep 17 00:00:00 2001 From: kjs Date: Mon, 10 Nov 2025 14:46:30 +0900 Subject: [PATCH 04/33] =?UTF-8?q?wip:=20gridInfo=20=EC=9D=98=EC=A1=B4?= =?UTF-8?q?=EC=84=B1=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/components/screen/ScreenDesigner.tsx | 30 ++++++++++++------- 1 file changed, 19 insertions(+), 11 deletions(-) diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx index 981cb66d..980f31f7 100644 --- a/frontend/components/screen/ScreenDesigner.tsx +++ b/frontend/components/screen/ScreenDesigner.tsx @@ -504,7 +504,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD // gridColumns 변경 시 크기 자동 업데이트 if (path === "gridColumns" && gridInfo) { - const updatedSize = updateSizeFromGridColumns(newComp, gridInfo, layout.gridSettings as GridUtilSettings); + const updatedSize = updateSizeFromGridColumns(newComp, layout.gridSettings as GridUtilSettings); newComp.size = updatedSize; } @@ -659,7 +659,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD return newLayout; }); }, - [gridInfo, saveToHistory], // 🔧 layout, selectedComponent 제거! + [saveToHistory], ); // 컴포넌트 시스템 초기화 @@ -1425,7 +1425,11 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD // 격자 스냅 적용 const finalPosition = layout.gridSettings?.snapToGrid && currentGridInfo - ? snapPositionTo10px({ x: absoluteX, y: absoluteY, z: 1 }, currentGridInfo, layout.gridSettings as GridUtilSettings) + ? snapPositionTo10px( + { x: absoluteX, y: absoluteY, z: 1 }, + currentGridInfo, + layout.gridSettings as GridUtilSettings, + ) : { x: absoluteX, y: absoluteY, z: 1 }; if (templateComp.type === "container") { @@ -1782,7 +1786,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD toast.success(`${template.name} 템플릿이 추가되었습니다.`); }, - [layout, gridInfo, selectedScreen, snapToGrid, saveToHistory], + [layout, selectedScreen, snapToGrid, saveToHistory], ); // 레이아웃 드래그 처리 @@ -1852,7 +1856,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD toast.success(`${layoutData.label} 레이아웃이 추가되었습니다.`); }, - [layout, gridInfo, screenResolution, snapToGrid, saveToHistory, zoomLevel], + [layout, screenResolution, snapToGrid, saveToHistory, zoomLevel], ); // handleZoneComponentDrop은 handleComponentDrop으로 대체됨 @@ -1997,7 +2001,11 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD // 격자 스냅 적용 const snappedPosition = layout.gridSettings?.snapToGrid && currentGridInfo - ? snapPositionTo10px({ x: boundedX, y: boundedY, z: 1 }, currentGridInfo, layout.gridSettings as GridUtilSettings) + ? snapPositionTo10px( + { x: boundedX, y: boundedY, z: 1 }, + currentGridInfo, + layout.gridSettings as GridUtilSettings, + ) : { x: boundedX, y: boundedY, z: 1 }; console.log("🧩 컴포넌트 드롭:", { @@ -2111,7 +2119,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD // gridColumns에 맞는 정확한 너비 계산 const calculatedWidth = calculateWidthFromColumns( gridColumns, - gridInfo, + layout.gridSettings as GridUtilSettings, ); @@ -2209,7 +2217,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD toast.success(`${component.name} 컴포넌트가 추가되었습니다.`); }, - [layout, gridInfo, selectedScreen, snapToGrid, saveToHistory], + [layout, selectedScreen, snapToGrid, saveToHistory], ); // 드래그 앤 드롭 처리 @@ -2670,7 +2678,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD // console.error("드롭 처리 실패:", error); } }, - [layout, gridInfo, saveToHistory], + [layout, saveToHistory], ); // 파일 컴포넌트 업데이트 처리 @@ -3109,7 +3117,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD justFinishedDrag: false, })); }, 100); - }, [dragState, layout, gridInfo, saveToHistory]); + }, [dragState, layout, saveToHistory]); // 드래그 선택 시작 const startSelectionDrag = useCallback( @@ -3774,7 +3782,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD toast.success(`그룹이 생성되었습니다 (${finalChildren.length}개 컴포넌트)`); }, - [layout, saveToHistory, gridInfo], + [layout, saveToHistory], ); // 그룹 생성 함수 (다이얼로그 표시) From 7f68a70b0f08273e398a2ee126700a2dab1770c7 Mon Sep 17 00:00:00 2001 From: kjs Date: Mon, 10 Nov 2025 14:47:59 +0900 Subject: [PATCH 05/33] =?UTF-8?q?wip:=20snapToGrid=20=EC=9D=98=EC=A1=B4?= =?UTF-8?q?=EC=84=B1=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/components/screen/ScreenDesigner.tsx | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx index 980f31f7..67310cff 100644 --- a/frontend/components/screen/ScreenDesigner.tsx +++ b/frontend/components/screen/ScreenDesigner.tsx @@ -1068,7 +1068,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD columns: newGridSettings.columns, gap: newGridSettings.gap, padding: newGridSettings.padding, - snapToGrid: newGridSettings.snapToGrid, + snapToGrid: newGridSettings. }; const adjustedComponents = layout.components.map((comp) => { @@ -1183,7 +1183,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD columns: layout.gridSettings.columns, gap: layout.gridSettings.gap, padding: layout.gridSettings.padding, - snapToGrid: layout.gridSettings.snapToGrid, + snapToGrid: layout.gridSettings. }; finalComponents = scaledComponents.map((comp) => { @@ -1253,7 +1253,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD columns: layout.gridSettings.columns, gap: layout.gridSettings.gap, padding: layout.gridSettings.padding, - snapToGrid: layout.gridSettings.snapToGrid, + snapToGrid: layout.gridSettings. }; const adjustedComponents = layout.components.map((comp) => { @@ -1495,7 +1495,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD templateSize: templateComp.size, calculatedSize, hasGridInfo: !!currentGridInfo, - hasGridSettings: !!layout.gridSettings?.snapToGrid, + hasGridSettings: !!layout.gridSettings?. }); return { @@ -1786,7 +1786,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD toast.success(`${template.name} 템플릿이 추가되었습니다.`); }, - [layout, selectedScreen, snapToGrid, saveToHistory], + [layout, selectedScreen, saveToHistory], ); // 레이아웃 드래그 처리 @@ -1856,7 +1856,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD toast.success(`${layoutData.label} 레이아웃이 추가되었습니다.`); }, - [layout, screenResolution, snapToGrid, saveToHistory, zoomLevel], + [layout, screenResolution, saveToHistory, zoomLevel], ); // handleZoneComponentDrop은 handleComponentDrop으로 대체됨 @@ -2119,7 +2119,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD // gridColumns에 맞는 정확한 너비 계산 const calculatedWidth = calculateWidthFromColumns( gridColumns, - + layout.gridSettings as GridUtilSettings, ); @@ -2217,7 +2217,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD toast.success(`${component.name} 컴포넌트가 추가되었습니다.`); }, - [layout, selectedScreen, snapToGrid, saveToHistory], + [layout, selectedScreen, saveToHistory], ); // 드래그 앤 드롭 처리 @@ -2318,7 +2318,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD } : null, defaultWidth: defaultWidth.toFixed(2), - snapToGrid: layout.gridSettings?.snapToGrid, + snapToGrid: layout.gridSettings?. }); // 웹타입별 기본 너비 계산 (10px 단위 고정) @@ -3612,7 +3612,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD console.log("🔧 그룹 생성 시작:", { selectedCount: selectedComponents.length, - snapToGrid: layout.gridSettings?.snapToGrid, + snapToGrid: layout.gridSettings?. gridInfo: currentGridInfo, }); @@ -3777,7 +3777,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD size: optimizedGroupSize, gridColumns: groupComponent.gridColumns, componentsScaled: !!scaledComponents.length, - gridAligned: layout.gridSettings?.snapToGrid, + gridAligned: layout.gridSettings?. }); toast.success(`그룹이 생성되었습니다 (${finalChildren.length}개 컴포넌트)`); From 4cd9629a1ddef8f5f75f5cb9adc5b4977f472c03 Mon Sep 17 00:00:00 2001 From: kjs Date: Mon, 10 Nov 2025 14:48:53 +0900 Subject: [PATCH 06/33] =?UTF-8?q?fix:=20snapToGrid=20=EB=AC=B8=EB=B2=95=20?= =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95=20-=20=ED=95=AD?= =?UTF-8?q?=EC=83=81=20true=EB=A1=9C=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/components/screen/ScreenDesigner.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx index 67310cff..1aa82bef 100644 --- a/frontend/components/screen/ScreenDesigner.tsx +++ b/frontend/components/screen/ScreenDesigner.tsx @@ -1068,7 +1068,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD columns: newGridSettings.columns, gap: newGridSettings.gap, padding: newGridSettings.padding, - snapToGrid: newGridSettings. + snapToGrid: true, // 항상 10px 스냅 활성화 }; const adjustedComponents = layout.components.map((comp) => { From 8f41cf79199e06cd8c21edf574ae5adc66422d25 Mon Sep 17 00:00:00 2001 From: kjs Date: Mon, 10 Nov 2025 14:50:24 +0900 Subject: [PATCH 07/33] =?UTF-8?q?fix:=20=EB=AA=A8=EB=93=A0=20snapToGrid=20?= =?UTF-8?q?=EB=AC=B8=EB=B2=95=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/components/screen/ScreenDesigner.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx index 1aa82bef..c21460f0 100644 --- a/frontend/components/screen/ScreenDesigner.tsx +++ b/frontend/components/screen/ScreenDesigner.tsx @@ -1183,7 +1183,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD columns: layout.gridSettings.columns, gap: layout.gridSettings.gap, padding: layout.gridSettings.padding, - snapToGrid: layout.gridSettings. + snapToGrid: true, }; finalComponents = scaledComponents.map((comp) => { @@ -1253,7 +1253,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD columns: layout.gridSettings.columns, gap: layout.gridSettings.gap, padding: layout.gridSettings.padding, - snapToGrid: layout.gridSettings. + snapToGrid: true, }; const adjustedComponents = layout.components.map((comp) => { From e7cbbe39a6da9910b8f2d645f3c0676613d5f6cb Mon Sep 17 00:00:00 2001 From: kjs Date: Mon, 10 Nov 2025 14:51:01 +0900 Subject: [PATCH 08/33] =?UTF-8?q?fix:=20=EB=A7=88=EC=A7=80=EB=A7=89=20snap?= =?UTF-8?q?ToGrid=20=EB=AC=B8=EB=B2=95=20=EC=98=A4=EB=A5=98=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/components/screen/ScreenDesigner.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx index c21460f0..5ea150ad 100644 --- a/frontend/components/screen/ScreenDesigner.tsx +++ b/frontend/components/screen/ScreenDesigner.tsx @@ -2318,7 +2318,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD } : null, defaultWidth: defaultWidth.toFixed(2), - snapToGrid: layout.gridSettings?. + snapToGrid: true, }); // 웹타입별 기본 너비 계산 (10px 단위 고정) From eb8e5da3291d058369964da1e517fe3dcc13d7f7 Mon Sep 17 00:00:00 2001 From: kjs Date: Mon, 10 Nov 2025 14:51:36 +0900 Subject: [PATCH 09/33] =?UTF-8?q?fix:=20console.log=20=EB=82=B4=20snapToGr?= =?UTF-8?q?id=20=EB=AC=B8=EB=B2=95=20=EC=98=A4=EB=A5=98=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/components/screen/ScreenDesigner.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx index 5ea150ad..0e30135f 100644 --- a/frontend/components/screen/ScreenDesigner.tsx +++ b/frontend/components/screen/ScreenDesigner.tsx @@ -3612,8 +3612,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD console.log("🔧 그룹 생성 시작:", { selectedCount: selectedComponents.length, - snapToGrid: layout.gridSettings?. - gridInfo: currentGridInfo, + snapToGrid: true, }); // 컴포넌트 크기 조정 기반 그룹 크기 계산 From d0ddc702acdac32341acfd5d599c69dee91ddcea Mon Sep 17 00:00:00 2001 From: kjs Date: Mon, 10 Nov 2025 14:52:20 +0900 Subject: [PATCH 10/33] =?UTF-8?q?fix:=20=EB=AA=A8=EB=93=A0=20snapToGrid=20?= =?UTF-8?q?=EB=AC=B8=EB=B2=95=20=EC=98=A4=EB=A5=98=20=EC=B5=9C=EC=A2=85=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/components/screen/ScreenDesigner.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx index 0e30135f..8fcb7d51 100644 --- a/frontend/components/screen/ScreenDesigner.tsx +++ b/frontend/components/screen/ScreenDesigner.tsx @@ -3776,7 +3776,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD size: optimizedGroupSize, gridColumns: groupComponent.gridColumns, componentsScaled: !!scaledComponents.length, - gridAligned: layout.gridSettings?. + gridAligned: true, }); toast.success(`그룹이 생성되었습니다 (${finalChildren.length}개 컴포넌트)`); From ed351f70441d359e7a04e7eb9897aee5713757dd Mon Sep 17 00:00:00 2001 From: kjs Date: Mon, 10 Nov 2025 14:54:53 +0900 Subject: [PATCH 11/33] =?UTF-8?q?fix:=20layout.gridSettings=20=EB=AC=B8?= =?UTF-8?q?=EB=B2=95=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/components/screen/ScreenDesigner.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx index 8fcb7d51..5ab96b97 100644 --- a/frontend/components/screen/ScreenDesigner.tsx +++ b/frontend/components/screen/ScreenDesigner.tsx @@ -1495,7 +1495,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD templateSize: templateComp.size, calculatedSize, hasGridInfo: !!currentGridInfo, - hasGridSettings: !!layout.gridSettings?. + hasGridSettings: !!layout.gridSettings, }); return { From 0af0b53638e3546ab64b3b1a04033f3a3a8dad1b Mon Sep 17 00:00:00 2001 From: kjs Date: Mon, 10 Nov 2025 15:05:34 +0900 Subject: [PATCH 12/33] =?UTF-8?q?fix:=20=EC=BB=AC=EB=9F=BC=20=EC=88=98,=20?= =?UTF-8?q?=EA=B0=84=EA=B2=A9,=20=EC=97=AC=EB=B0=B1=20=EC=84=A4=EC=A0=95?= =?UTF-8?q?=20=EC=99=84=EC=A0=84=20=EC=A0=9C=EA=B1=B0=20(10px=20=EA=B3=A0?= =?UTF-8?q?=EC=A0=95)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/screen/panels/GridPanel.tsx | 152 ++++-------------- 1 file changed, 32 insertions(+), 120 deletions(-) diff --git a/frontend/components/screen/panels/GridPanel.tsx b/frontend/components/screen/panels/GridPanel.tsx index 82bb4fc4..8ae19728 100644 --- a/frontend/components/screen/panels/GridPanel.tsx +++ b/frontend/components/screen/panels/GridPanel.tsx @@ -7,23 +7,20 @@ import { Checkbox } from "@/components/ui/checkbox"; import { Button } from "@/components/ui/button"; import { Separator } from "@/components/ui/separator"; import { Slider } from "@/components/ui/slider"; -import { Grid3X3, RotateCcw, Eye, EyeOff, Zap, RefreshCw } from "lucide-react"; +import { Grid3X3, RotateCcw, Eye, EyeOff, Zap } from "lucide-react"; import { GridSettings, ScreenResolution } from "@/types/screen"; -import { calculateGridInfo } from "@/lib/utils/gridUtils"; interface GridPanelProps { gridSettings: GridSettings; onGridSettingsChange: (settings: GridSettings) => void; onResetGrid: () => void; - onForceGridUpdate?: () => void; // 강제 격자 재조정 추가 - screenResolution?: ScreenResolution; // 해상도 정보 추가 + screenResolution?: ScreenResolution; } export const GridPanel: React.FC = ({ gridSettings, onGridSettingsChange, onResetGrid, - onForceGridUpdate, screenResolution, }) => { const updateSetting = (key: keyof GridSettings, value: any) => { @@ -33,32 +30,6 @@ export const GridPanel: React.FC = ({ }); }; - // 최대 컬럼 수 계산 (최소 컬럼 너비 30px 기준) - const MIN_COLUMN_WIDTH = 30; - const maxColumns = screenResolution - ? Math.floor((screenResolution.width - gridSettings.padding * 2 + gridSettings.gap) / (MIN_COLUMN_WIDTH + gridSettings.gap)) - : 24; - const safeMaxColumns = Math.max(1, Math.min(maxColumns, 100)); // 최대 100개로 제한 - - // 실제 격자 정보 계산 - const actualGridInfo = screenResolution - ? calculateGridInfo(screenResolution.width, screenResolution.height, { - columns: gridSettings.columns, - gap: gridSettings.gap, - padding: gridSettings.padding, - snapToGrid: gridSettings.snapToGrid || false, - }) - : null; - - // 실제 표시되는 컬럼 수 계산 (항상 설정된 개수를 표시하되, 너비가 너무 작으면 경고) - const actualColumns = gridSettings.columns; - - // 컬럼이 너무 작은지 확인 - const isColumnsTooSmall = - screenResolution && actualGridInfo - ? actualGridInfo.columnWidth < MIN_COLUMN_WIDTH - : false; - return (
{/* 헤더 */} @@ -69,25 +40,10 @@ export const GridPanel: React.FC = ({

격자 설정

-
- {onForceGridUpdate && ( - - )} - - -
+
{/* 주요 토글들 */} @@ -128,63 +84,25 @@ export const GridPanel: React.FC = ({ {/* 설정 영역 */}
- {/* 격자 구조 - 10px 단위 */} + {/* 10px 단위 스냅 안내 */}
-

격자 크기 (10px 단위)

+

격자 시스템

- 모든 컴포넌트는 10px 단위로 배치되고 크기가 조정됩니다. + 모든 컴포넌트는 10px 단위로 자동 배치됩니다.

- -
- - updateSetting("gap", value)} - className="w-full" - /> -
- 0px - 40px -
-
- -
- - updateSetting("padding", value)} - className="w-full" - /> -
- 0px - 60px -
-
{/* 격자 스타일 */}
-

격자 스타일

+

격자 스타일

-
-
)} - {/* Grid Columns + Z-Index (같은 행) */} + {/* Width + Z-Index (같은 행) */}
- {(selectedComponent as any).gridColumns !== undefined && ( -
- -
- { - const value = parseInt(e.target.value, 10); - const maxColumns = gridSettings?.columns || 12; - if (!isNaN(value) && value >= 1 && value <= maxColumns) { - handleUpdate("gridColumns", value); - - // width를 퍼센트로 계산하여 업데이트 - const widthPercent = (value / maxColumns) * 100; - handleUpdate("style.width", `${widthPercent}%`); - } - }} - className="h-6 w-full px-2 py-0 text-xs" - style={{ fontSize: "12px" }} - /> - - /{gridSettings?.columns || 12} - -
+
+ +
+ { + const value = parseInt(e.target.value, 10); + if (!isNaN(value) && value >= 10) { + // 10px 단위로 스냅 + const snappedValue = Math.round(value / 10) * 10; + handleUpdate("size.width", snappedValue); + } + }} + className="h-6 w-full px-2 py-0 text-xs" + style={{ fontSize: "12px" }} + />
- )} +
Date: Mon, 10 Nov 2025 15:36:18 +0900 Subject: [PATCH 17/33] =?UTF-8?q?fix:=20=ED=99=94=EB=A9=B4=20=ED=8E=B8?= =?UTF-8?q?=EC=A7=91=EA=B8=B0=EC=97=90=EC=84=9C=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=84=A0=ED=83=9D=20?= =?UTF-8?q?=EA=B0=80=EB=8A=A5=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 문제: 버튼 컴포넌트 클릭 시 버튼 동작이 실행되어 선택되지 않음 - 해결: 1. ButtonPrimaryComponent에서 디자인 모드일 때 + {isDesignMode ? ( + // 디자인 모드: div로 렌더링하여 선택 가능하게 함 +
+ {buttonContent} +
+ ) : ( + // 일반 모드: button으로 렌더링 + + )}
{/* 확인 다이얼로그 - EditModal보다 위에 표시하도록 z-index 최상위로 설정 */} From 5f11b5083f74b9dcd94823f85ddd49a6e86d2032 Mon Sep 17 00:00:00 2001 From: kjs Date: Mon, 10 Nov 2025 15:42:35 +0900 Subject: [PATCH 18/33] =?UTF-8?q?fix:=20gridInfo=20=EB=AF=B8=EC=A0=95?= =?UTF-8?q?=EC=9D=98=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 문제: updateComponentProperty 함수 내에서 정의되지 않은 gridInfo 변수 참조 - 해결: gridInfo 조건을 prevLayout.gridSettings 체크로 변경 - 영향: 컴포넌트 속성 업데이트 시 런타임 오류 해결 --- frontend/components/screen/ScreenDesigner.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx index 665ab16f..7479c9c9 100644 --- a/frontend/components/screen/ScreenDesigner.tsx +++ b/frontend/components/screen/ScreenDesigner.tsx @@ -515,8 +515,8 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD current[finalKey] = value; // gridColumns 변경 시 크기 자동 업데이트 - if (path === "gridColumns" && gridInfo) { - const updatedSize = updateSizeFromGridColumns(newComp, layout.gridSettings as GridUtilSettings); + if (path === "gridColumns" && prevLayout.gridSettings) { + const updatedSize = updateSizeFromGridColumns(newComp, prevLayout.gridSettings as GridUtilSettings); newComp.size = updatedSize; } @@ -524,7 +524,6 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD if ( (path === "size.width" || path === "size.height") && prevLayout.gridSettings?.snapToGrid && - gridInfo && newComp.type !== "group" ) { // 현재 해상도에 맞는 격자 정보로 스냅 적용 From 99deab05d8eb013d0bb9bfd166c6c4bc3a4ab23d Mon Sep 17 00:00:00 2001 From: kjs Date: Mon, 10 Nov 2025 15:45:51 +0900 Subject: [PATCH 19/33] =?UTF-8?q?fix:=20gridUtils=20=ED=95=A8=EC=88=98?= =?UTF-8?q?=EB=93=A4=20import=20=EB=88=84=EB=9D=BD=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 문제: adjustGridColumnsFromSize 등 gridUtils 함수들이 import되지 않아 런타임 오류 발생 - 해결: 1. gridUtils에서 필요한 함수들 import 추가 2. 3개 파라미터를 받는 snap 함수 호출을 올바른 함수로 변경 - snapSizeTo10px -> snapSizeToGrid - snapPositionTo10px -> snapToGrid - 영향: 컴포넌트 크기/위치 조정 시 격자 스냅 기능 정상 작동 --- frontend/components/screen/ScreenDesigner.tsx | 25 ++++++++++++------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx index 7479c9c9..3ea717d3 100644 --- a/frontend/components/screen/ScreenDesigner.tsx +++ b/frontend/components/screen/ScreenDesigner.tsx @@ -24,6 +24,13 @@ import { calculateRelativePositions, restoreAbsolutePositions, } from "@/lib/utils/groupingUtils"; +import { + adjustGridColumnsFromSize, + updateSizeFromGridColumns, + calculateWidthFromColumns, + snapSizeToGrid, + snapToGrid, +} from "@/lib/utils/gridUtils"; // 10px 단위 스냅 함수 const snapTo10px = (value: number): number => { @@ -533,7 +540,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD padding: prevLayout.gridSettings.padding, snapToGrid: prevLayout.gridSettings.snapToGrid || false, }); - const snappedSize = snapSizeTo10px( + const snappedSize = snapSizeToGrid( newComp.size, currentGridInfo, prevLayout.gridSettings as GridUtilSettings, @@ -1083,8 +1090,8 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD }; const adjustedComponents = layout.components.map((comp) => { - const snappedPosition = snapPositionTo10px(comp.position, newGridInfo, gridUtilSettings); - const snappedSize = snapSizeTo10px(comp.size, newGridInfo, gridUtilSettings); + const snappedPosition = snapToGrid(comp.position, newGridInfo, gridUtilSettings); + const snappedSize = snapSizeToGrid(comp.size, newGridInfo, gridUtilSettings); // gridColumns가 없거나 범위를 벗어나면 자동 조정 let adjustedGridColumns = comp.gridColumns; @@ -1198,8 +1205,8 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD }; finalComponents = scaledComponents.map((comp) => { - const snappedPosition = snapPositionTo10px(comp.position, newGridInfo, gridUtilSettings); - const snappedSize = snapSizeTo10px(comp.size, newGridInfo, gridUtilSettings); + const snappedPosition = snapToGrid(comp.position, newGridInfo, gridUtilSettings); + const snappedSize = snapSizeToGrid(comp.size, newGridInfo, gridUtilSettings); // gridColumns 재계산 const adjustedGridColumns = adjustGridColumnsFromSize({ size: snappedSize }, newGridInfo, gridUtilSettings); @@ -1268,8 +1275,8 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD }; const adjustedComponents = layout.components.map((comp) => { - const snappedPosition = snapPositionTo10px(comp.position, currentGridInfo, gridUtilSettings); - const snappedSize = snapSizeTo10px(comp.size, currentGridInfo, gridUtilSettings); + const snappedPosition = snapToGrid(comp.position, currentGridInfo, gridUtilSettings); + const snappedSize = snapSizeToGrid(comp.size, currentGridInfo, gridUtilSettings); // gridColumns가 없거나 범위를 벗어나면 자동 조정 let adjustedGridColumns = comp.gridColumns; @@ -1404,7 +1411,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD // 격자 스냅 적용 const snappedPosition = layout.gridSettings?.snapToGrid && currentGridInfo - ? snapPositionTo10px({ x: dropX, y: dropY, z: 1 }, currentGridInfo, layout.gridSettings as GridUtilSettings) + ? snapToGrid({ x: dropX, y: dropY, z: 1 }, currentGridInfo, layout.gridSettings as GridUtilSettings) : { x: dropX, y: dropY, z: 1 }; console.log("🎨 템플릿 드롭:", { @@ -1823,7 +1830,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD // 격자 스냅 적용 const snappedPosition = layout.gridSettings?.snapToGrid && currentGridInfo - ? snapPositionTo10px({ x: dropX, y: dropY, z: 1 }, currentGridInfo, layout.gridSettings as GridUtilSettings) + ? snapToGrid({ x: dropX, y: dropY, z: 1 }, currentGridInfo, layout.gridSettings as GridUtilSettings) : { x: dropX, y: dropY, z: 1 }; console.log("🏗️ 레이아웃 드롭 (줌 보정):", { From 99468ca2503af79d17b2613ac667b339e5acebdd Mon Sep 17 00:00:00 2001 From: kjs Date: Mon, 10 Nov 2025 15:49:48 +0900 Subject: [PATCH 20/33] =?UTF-8?q?fix:=20=EC=86=8D=EC=84=B1=20=ED=8C=A8?= =?UTF-8?q?=EB=84=90=EC=97=90=EC=84=9C=20=EB=84=88=EB=B9=84/=EB=86=92?= =?UTF-8?q?=EC=9D=B4=20=EC=A7=81=EC=A0=91=20=EC=9E=85=EB=A0=A5=20=EC=8B=9C?= =?UTF-8?q?=20=EA=B2=A9=EC=9E=90=20=EC=8A=A4=EB=83=85=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 문제: 속성 패널에서 너비/높이 입력 시 격자 시스템이 자동으로 값을 변경 - 원인: updateComponentProperty에서 size.width/height 변경 시 무조건 격자 스냅 적용 - 해결: 직접 입력 시에는 격자 스냅을 적용하지 않도록 로직 주석 처리 - 영향: - 속성 패널에서 원하는 크기로 자유롭게 설정 가능 - 드래그/리사이즈 시에는 별도 로직에서 격자 스냅 처리 - 디버깅 로그 제거 --- frontend/components/screen/ScreenDesigner.tsx | 59 +++++++++---------- frontend/lib/utils/gridUtils.ts | 6 +- 2 files changed, 32 insertions(+), 33 deletions(-) diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx index 3ea717d3..ac8a8db1 100644 --- a/frontend/components/screen/ScreenDesigner.tsx +++ b/frontend/components/screen/ScreenDesigner.tsx @@ -527,36 +527,35 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD newComp.size = updatedSize; } - // 크기 변경 시 격자 스냅 적용 (그룹 컴포넌트 제외) - if ( - (path === "size.width" || path === "size.height") && - prevLayout.gridSettings?.snapToGrid && - newComp.type !== "group" - ) { - // 현재 해상도에 맞는 격자 정보로 스냅 적용 - const currentGridInfo = calculateGridInfo(screenResolution.width, screenResolution.height, { - columns: prevLayout.gridSettings.columns, - gap: prevLayout.gridSettings.gap, - padding: prevLayout.gridSettings.padding, - snapToGrid: prevLayout.gridSettings.snapToGrid || false, - }); - const snappedSize = snapSizeToGrid( - newComp.size, - currentGridInfo, - prevLayout.gridSettings as GridUtilSettings, - ); - newComp.size = snappedSize; - - // 크기 변경 시 gridColumns도 자동 조정 - const adjustedColumns = adjustGridColumnsFromSize( - newComp, - currentGridInfo, - prevLayout.gridSettings as GridUtilSettings, - ); - if (newComp.gridColumns !== adjustedColumns) { - newComp.gridColumns = adjustedColumns; - } - } + // 크기 변경 시 격자 스냅 적용 제거 (직접 입력 시 불필요) + // 드래그/리사이즈 시에는 별도 로직에서 처리됨 + // if ( + // (path === "size.width" || path === "size.height") && + // prevLayout.gridSettings?.snapToGrid && + // newComp.type !== "group" + // ) { + // const currentGridInfo = calculateGridInfo(screenResolution.width, screenResolution.height, { + // columns: prevLayout.gridSettings.columns, + // gap: prevLayout.gridSettings.gap, + // padding: prevLayout.gridSettings.padding, + // snapToGrid: prevLayout.gridSettings.snapToGrid || false, + // }); + // const snappedSize = snapSizeToGrid( + // newComp.size, + // currentGridInfo, + // prevLayout.gridSettings as GridUtilSettings, + // ); + // newComp.size = snappedSize; + // + // const adjustedColumns = adjustGridColumnsFromSize( + // newComp, + // currentGridInfo, + // prevLayout.gridSettings as GridUtilSettings, + // ); + // if (newComp.gridColumns !== adjustedColumns) { + // newComp.gridColumns = adjustedColumns; + // } + // } // gridColumns 변경 시 크기를 격자에 맞게 자동 조정 if (path === "gridColumns" && prevLayout.gridSettings?.snapToGrid && newComp.type !== "group") { diff --git a/frontend/lib/utils/gridUtils.ts b/frontend/lib/utils/gridUtils.ts index 7ea3f6b4..cb4d2652 100644 --- a/frontend/lib/utils/gridUtils.ts +++ b/frontend/lib/utils/gridUtils.ts @@ -107,9 +107,9 @@ export function snapSizeToGrid(size: Size, gridInfo: GridInfo, gridSettings: Gri const rowHeight = 10; const snappedHeight = Math.max(10, Math.round(size.height / rowHeight) * rowHeight); - console.log( - `📏 크기 스냅: ${size.width}px → ${snappedWidth}px (${gridColumns}컬럼, 컬럼너비:${columnWidth}px, 간격:${gap}px)`, - ); + // console.log( + // `📏 크기 스냅: ${size.width}px → ${snappedWidth}px (${gridColumns}컬럼, 컬럼너비:${columnWidth}px, 간격:${gap}px)`, + // ); return { width: Math.max(columnWidth, snappedWidth), From 5d374f902a6d3d488660cc761db9f97f8619ea28 Mon Sep 17 00:00:00 2001 From: kjs Date: Mon, 10 Nov 2025 15:51:37 +0900 Subject: [PATCH 21/33] =?UTF-8?q?fix:=20=EB=84=88=EB=B9=84/=EB=86=92?= =?UTF-8?q?=EC=9D=B4=20=EC=9E=85=EB=A0=A5=20=EC=8B=9C=20=EC=9E=90=EC=9C=A0?= =?UTF-8?q?=20=EC=9E=85=EB=A0=A5=20=EA=B0=80=EB=8A=A5=ED=95=98=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=ED=8F=AC=EC=BB=A4?= =?UTF-8?q?=EC=8A=A4=20=EC=95=84=EC=9B=83=20=EC=8B=9C=2010px=20=EB=8B=A8?= =?UTF-8?q?=EC=9C=84=20=EC=8A=A4=EB=83=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 문제: 너비/높이 입력 시 즉시 10px 단위로 스냅되어 자유 입력 불가 - 해결: 1. 너비: onChange에서는 입력값 그대로 반영, onBlur에서 10px 단위로 스냅 2. 높이: 로컬 상태로 자유 입력 허용, onBlur/Enter 시 10px 단위로 스냅 3. step을 10에서 1로 변경하여 자유 입력 가능 - 영향: - 입력 중에는 원하는 값 입력 가능 - 입력 완료 시(포커스 아웃 또는 Enter) 자동으로 10px 단위로 정렬 --- .../screen/panels/UnifiedPropertiesPanel.tsx | 28 +++++++++++++------ 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx b/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx index d790dfaa..838842f8 100644 --- a/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx +++ b/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx @@ -328,22 +328,26 @@ export const UnifiedPropertiesPanel: React.FC = ({ type="number" value={localHeight} onChange={(e) => { - // 입력 중에는 로컬 상태만 업데이트 (격자 스냅 방지) + // 입력 중에는 로컬 상태만 업데이트 (자유 입력) setLocalHeight(e.target.value); }} onBlur={(e) => { - // 포커스를 잃을 때만 실제로 업데이트 + // 포커스를 잃을 때 10px 단위로 스냅 const value = parseInt(e.target.value) || 0; - if (value >= 1) { - handleUpdate("size.height", value); + if (value >= 10) { + const snappedValue = Math.round(value / 10) * 10; + handleUpdate("size.height", snappedValue); + setLocalHeight(String(snappedValue)); } }} onKeyDown={(e) => { - // Enter 키를 누르면 즉시 적용 + // Enter 키를 누르면 즉시 적용 (10px 단위로 스냅) if (e.key === "Enter") { const value = parseInt(e.currentTarget.value) || 0; - if (value >= 1) { - handleUpdate("size.height", value); + if (value >= 10) { + const snappedValue = Math.round(value / 10) * 10; + handleUpdate("size.height", snappedValue); + setLocalHeight(String(snappedValue)); } e.currentTarget.blur(); // 포커스 제거 } @@ -410,12 +414,18 @@ export const UnifiedPropertiesPanel: React.FC = ({ type="number" min={10} max={3840} - step="10" + step="1" value={selectedComponent.size?.width || 100} onChange={(e) => { const value = parseInt(e.target.value, 10); if (!isNaN(value) && value >= 10) { - // 10px 단위로 스냅 + handleUpdate("size.width", value); + } + }} + onBlur={(e) => { + const value = parseInt(e.target.value, 10); + if (!isNaN(value) && value >= 10) { + // 포커스 아웃 시 10px 단위로 스냅 const snappedValue = Math.round(value / 10) * 10; handleUpdate("size.width", snappedValue); } From 2148e8e019ca6b71b4b1d35a8fdcf8723962e8df Mon Sep 17 00:00:00 2001 From: kjs Date: Mon, 10 Nov 2025 15:54:07 +0900 Subject: [PATCH 22/33] =?UTF-8?q?fix:=20=EB=84=88=EB=B9=84=20=EC=9E=85?= =?UTF-8?q?=EB=A0=A5=20=EC=8B=9C=20=EC=99=84=EC=A0=84=20=EC=9E=90=EC=9C=A0?= =?UTF-8?q?=20=EC=9E=85=EB=A0=A5=20=ED=97=88=EC=9A=A9=20(=EB=A1=9C?= =?UTF-8?q?=EC=BB=AC=20=EC=83=81=ED=83=9C=20=EC=82=AC=EC=9A=A9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 문제: 너비 입력 시 onChange에서 즉시 업데이트되어 30에서 3을 지우기 어려움 - 해결: 1. localWidth 상태 추가 2. onChange: 로컬 상태만 업데이트 (완전 자유 입력) 3. onBlur/Enter: 실제 업데이트 + 10px 단위 스냅 4. useEffect로 컴포넌트 변경 시 localWidth 동기화 - 영향: - 30 입력 시 3, 0 모두 자유롭게 지우고 입력 가능 - 포커스 아웃 시에만 10px 단위로 정렬 --- .../screen/panels/UnifiedPropertiesPanel.tsx | 33 +++++++++++++++---- 1 file changed, 26 insertions(+), 7 deletions(-) diff --git a/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx b/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx index 838842f8..84297aa7 100644 --- a/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx +++ b/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx @@ -105,8 +105,9 @@ export const UnifiedPropertiesPanel: React.FC = ({ const { webTypes } = useWebTypes({ active: "Y" }); const [localComponentDetailType, setLocalComponentDetailType] = useState(""); - // 높이 입력 로컬 상태 (격자 스냅 방지) + // 높이/너비 입력 로컬 상태 (자유 입력 허용) const [localHeight, setLocalHeight] = useState(""); + const [localWidth, setLocalWidth] = useState(""); // 새로운 컴포넌트 시스템의 webType 동기화 useEffect(() => { @@ -125,6 +126,13 @@ export const UnifiedPropertiesPanel: React.FC = ({ } }, [selectedComponent?.size?.height, selectedComponent?.id]); + // 너비 값 동기화 + useEffect(() => { + if (selectedComponent?.size?.width !== undefined) { + setLocalWidth(String(selectedComponent.size.width)); + } + }, [selectedComponent?.size?.width, selectedComponent?.id]); + // 격자 설정 업데이트 함수 (early return 이전에 정의) const updateGridSetting = (key: string, value: any) => { if (onGridSettingsChange && gridSettings) { @@ -415,19 +423,30 @@ export const UnifiedPropertiesPanel: React.FC = ({ min={10} max={3840} step="1" - value={selectedComponent.size?.width || 100} + value={localWidth} onChange={(e) => { - const value = parseInt(e.target.value, 10); - if (!isNaN(value) && value >= 10) { - handleUpdate("size.width", value); - } + // 입력 중에는 로컬 상태만 업데이트 (자유 입력) + setLocalWidth(e.target.value); }} onBlur={(e) => { + // 포커스를 잃을 때 10px 단위로 스냅 const value = parseInt(e.target.value, 10); if (!isNaN(value) && value >= 10) { - // 포커스 아웃 시 10px 단위로 스냅 const snappedValue = Math.round(value / 10) * 10; handleUpdate("size.width", snappedValue); + setLocalWidth(String(snappedValue)); + } + }} + onKeyDown={(e) => { + // Enter 키를 누르면 즉시 적용 (10px 단위로 스냅) + if (e.key === "Enter") { + const value = parseInt(e.currentTarget.value, 10); + if (!isNaN(value) && value >= 10) { + const snappedValue = Math.round(value / 10) * 10; + handleUpdate("size.width", snappedValue); + setLocalWidth(String(snappedValue)); + } + e.currentTarget.blur(); // 포커스 제거 } }} className="h-6 w-full px-2 py-0 text-xs" From 8e74429a8303ecb0b5f9f029b27328c01bf90e44 Mon Sep 17 00:00:00 2001 From: kjs Date: Mon, 10 Nov 2025 15:58:56 +0900 Subject: [PATCH 23/33] =?UTF-8?q?fix:=20updateComponentProperty=EC=97=90?= =?UTF-8?q?=EC=84=9C=20gridColumns=20=EA=B4=80=EB=A0=A8=20=EC=9E=90?= =?UTF-8?q?=EB=8F=99=20=ED=81=AC=EA=B8=B0=20=EC=A1=B0=EC=A0=95=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 문제: 속성 패널에서 너비를 입력해도 화면에 반영되지 않음 - 원인: updateComponentProperty에서 gridColumns 변경 시 자동으로 너비를 재계산 - 해결: 1. gridColumns 변경 시 updateSizeFromGridColumns 호출 제거 2. gridColumns 변경 시 calculateWidthFromColumns 호출 제거 - 영향: - 속성 패널에서 입력한 너비가 화면에 즉시 반영됨 - gridColumns는 더 이상 너비를 자동으로 조정하지 않음 --- frontend/components/screen/ScreenDesigner.tsx | 49 +++++++++---------- 1 file changed, 24 insertions(+), 25 deletions(-) diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx index ac8a8db1..54f26a8d 100644 --- a/frontend/components/screen/ScreenDesigner.tsx +++ b/frontend/components/screen/ScreenDesigner.tsx @@ -521,11 +521,11 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD const finalKey = pathParts[pathParts.length - 1]; current[finalKey] = value; - // gridColumns 변경 시 크기 자동 업데이트 - if (path === "gridColumns" && prevLayout.gridSettings) { - const updatedSize = updateSizeFromGridColumns(newComp, prevLayout.gridSettings as GridUtilSettings); - newComp.size = updatedSize; - } + // gridColumns 변경 시 크기 자동 업데이트 제거 (격자 시스템 제거됨) + // if (path === "gridColumns" && prevLayout.gridSettings) { + // const updatedSize = updateSizeFromGridColumns(newComp, prevLayout.gridSettings as GridUtilSettings); + // newComp.size = updatedSize; + // } // 크기 변경 시 격자 스냅 적용 제거 (직접 입력 시 불필요) // 드래그/리사이즈 시에는 별도 로직에서 처리됨 @@ -557,26 +557,25 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD // } // } - // gridColumns 변경 시 크기를 격자에 맞게 자동 조정 - if (path === "gridColumns" && prevLayout.gridSettings?.snapToGrid && newComp.type !== "group") { - const currentGridInfo = calculateGridInfo(screenResolution.width, screenResolution.height, { - columns: prevLayout.gridSettings.columns, - gap: prevLayout.gridSettings.gap, - padding: prevLayout.gridSettings.padding, - snapToGrid: prevLayout.gridSettings.snapToGrid || false, - }); - - // gridColumns에 맞는 정확한 너비 계산 - const newWidth = calculateWidthFromColumns( - newComp.gridColumns, - currentGridInfo, - prevLayout.gridSettings as GridUtilSettings, - ); - newComp.size = { - ...newComp.size, - width: newWidth, - }; - } + // gridColumns 변경 시 크기를 격자에 맞게 자동 조정 제거 (격자 시스템 제거됨) + // if (path === "gridColumns" && prevLayout.gridSettings?.snapToGrid && newComp.type !== "group") { + // const currentGridInfo = calculateGridInfo(screenResolution.width, screenResolution.height, { + // columns: prevLayout.gridSettings.columns, + // gap: prevLayout.gridSettings.gap, + // padding: prevLayout.gridSettings.padding, + // snapToGrid: prevLayout.gridSettings.snapToGrid || false, + // }); + // + // const newWidth = calculateWidthFromColumns( + // newComp.gridColumns, + // currentGridInfo, + // prevLayout.gridSettings as GridUtilSettings, + // ); + // newComp.size = { + // ...newComp.size, + // width: newWidth, + // }; + // } // 위치 변경 시 격자 스냅 적용 (그룹 내부 컴포넌트 포함) if ( From 0e95f8ed66c9a824c1a074916f8e81cd7b43164e Mon Sep 17 00:00:00 2001 From: kjs Date: Mon, 10 Nov 2025 16:09:38 +0900 Subject: [PATCH 24/33] =?UTF-8?q?fix:=20RealtimePreviewDynamic=EC=97=90?= =?UTF-8?q?=EC=84=9C=20component.style=EC=9D=98=20width/height=EA=B0=80=20?= =?UTF-8?q?size=EB=A5=BC=20=EB=8D=AE=EC=96=B4=EC=93=B0=EB=8A=94=20?= =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 문제: 속성 패널에서 너비 입력 시 size.width는 변경되지만 화면에 반영되지 않음 - 원인: RealtimePreviewDynamic의 baseStyle에서 componentStyle을 getWidth() 이후에 스프레드하여 size.width를 덮어씀 - 해결: 1. componentStyle에서 width, height 제거 2. 나머지 스타일만 먼저 적용 3. getWidth(), getHeight()로 size 기반 크기를 마지막에 설정 - 영향: - 속성 패널에서 입력한 너비/높이가 화면에 즉시 반영됨 - component.style의 width/height는 무시되고 size.width/height만 사용됨 - 디버깅 로그 제거 --- frontend/components/screen/RealtimePreviewDynamic.tsx | 9 ++++++--- frontend/components/screen/ScreenDesigner.tsx | 6 ++++++ 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/frontend/components/screen/RealtimePreviewDynamic.tsx b/frontend/components/screen/RealtimePreviewDynamic.tsx index 679ed5a8..fa5dc755 100644 --- a/frontend/components/screen/RealtimePreviewDynamic.tsx +++ b/frontend/components/screen/RealtimePreviewDynamic.tsx @@ -257,13 +257,16 @@ export const RealtimePreviewDynamic: React.FC = ({ } : component; + // componentStyle에서 width, height 제거 (size.width, size.height만 사용) + const { width: _styleWidth, height: _styleHeight, ...restComponentStyle } = componentStyle || {}; + const baseStyle = { left: `${position.x}px`, top: `${position.y}px`, - width: getWidth(), // getWidth()가 모든 우선순위를 처리 - height: getHeight(), + ...restComponentStyle, // width/height 제외한 스타일 먼저 적용 + width: getWidth(), // size.width로 덮어쓰기 + height: getHeight(), // size.height로 덮어쓰기 zIndex: component.type === "layout" ? 1 : position.z || 2, - ...componentStyle, right: undefined, }; diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx index 54f26a8d..0f3cc9b4 100644 --- a/frontend/components/screen/ScreenDesigner.tsx +++ b/frontend/components/screen/ScreenDesigner.tsx @@ -634,9 +634,15 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD } } + console.log("🔍 최종 newComp:", { id: newComp.id, size: newComp.size, path }); return newComp; }); + console.log( + "🔍 updatedComponents:", + updatedComponents.map((c) => ({ id: c.id, size: c.size })), + ); + // 🔥 새로운 layout 생성 const newLayout = { ...prevLayout, components: updatedComponents }; From ccbb6924c86aa2dd39c5cef219efc3fbdbc3f0b5 Mon Sep 17 00:00:00 2001 From: kjs Date: Mon, 10 Nov 2025 16:32:00 +0900 Subject: [PATCH 25/33] =?UTF-8?q?feat:=20writer=20=EC=BB=AC=EB=9F=BC=20?= =?UTF-8?q?=EC=9E=90=EB=8F=99=20user=5Fname=20=EB=B3=80=ED=99=98=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 문제: 테이블 리스트에서 writer 컬럼이 user_id로 표시됨 - 해결: 1. 백엔드: entityJoinService에서 writer 컬럼 자동 감지 2. writer 컬럼 발견 시 user_info 테이블과 자동 조인 3. writer_name 별칭으로 user_name 반환 4. 프론트엔드: writer 컬럼일 때 writer_name 우선 표시 - 영향: - writer 컬럼이 있는 모든 테이블에서 자동으로 작성자명 표시 - 기존 entity 조인 설정과 충돌 없이 작동 - column_labels 설정 불필요 --- .../src/services/entityJoinService.ts | 33 +++++++++++++++++++ frontend/components/screen/ScreenDesigner.tsx | 6 ---- .../table-list/TableListComponent.tsx | 5 +++ 3 files changed, 38 insertions(+), 6 deletions(-) diff --git a/backend-node/src/services/entityJoinService.ts b/backend-node/src/services/entityJoinService.ts index df2823c8..d2db8c9e 100644 --- a/backend-node/src/services/entityJoinService.ts +++ b/backend-node/src/services/entityJoinService.ts @@ -49,6 +49,39 @@ export class EntityJoinService { const joinConfigs: EntityJoinConfig[] = []; + // 🎯 writer 컬럼 자동 감지 및 조인 설정 추가 + const tableColumns = await query<{ column_name: string }>( + `SELECT column_name + FROM information_schema.columns + WHERE table_name = $1 + AND table_schema = 'public' + AND column_name = 'writer'`, + [tableName] + ); + + if (tableColumns.length > 0) { + logger.info(`✅ writer 컬럼 발견: ${tableName}.writer -> user_info.user_id`); + + const writerJoinConfig: EntityJoinConfig = { + sourceTable: tableName, + sourceColumn: "writer", + referenceTable: "user_info", + referenceColumn: "user_id", + displayColumns: ["user_name"], + displayColumn: "user_name", + aliasColumn: "writer_name", + separator: " - ", + }; + + // 조인 설정 유효성 검증 + if (await this.validateJoinConfig(writerJoinConfig)) { + joinConfigs.push(writerJoinConfig); + logger.info(`✅ writer 컬럼 조인 설정 추가됨: writer_name`); + } else { + logger.warn(`❌ writer 컬럼 조인 설정 검증 실패`); + } + } + for (const column of entityColumns) { logger.info(`🔍 Entity 컬럼 상세 정보:`, { column_name: column.column_name, diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx index 0f3cc9b4..54f26a8d 100644 --- a/frontend/components/screen/ScreenDesigner.tsx +++ b/frontend/components/screen/ScreenDesigner.tsx @@ -634,15 +634,9 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD } } - console.log("🔍 최종 newComp:", { id: newComp.id, size: newComp.size, path }); return newComp; }); - console.log( - "🔍 updatedComponents:", - updatedComponents.map((c) => ({ id: c.id, size: c.size })), - ); - // 🔥 새로운 layout 생성 const newLayout = { ...prevLayout, components: updatedComponents }; diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx index 30756d09..f6a99536 100644 --- a/frontend/lib/registry/components/table-list/TableListComponent.tsx +++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx @@ -1062,6 +1062,11 @@ export const TableListComponent: React.FC = ({ (value: any, column: ColumnConfig, rowData?: Record) => { if (value === null || value === undefined) return "-"; + // 🎯 writer 컬럼 자동 변환: user_id -> user_name + if (column.columnName === "writer" && rowData && rowData.writer_name) { + return rowData.writer_name; + } + // 🎯 엔티티 컬럼 표시 설정이 있는 경우 if (column.entityDisplayConfig && rowData) { // displayColumns 또는 selectedColumns 둘 다 체크 From 2e0ccaac16b6795c49b32f9822800920eaace712 Mon Sep 17 00:00:00 2001 From: kjs Date: Mon, 10 Nov 2025 16:33:15 +0900 Subject: [PATCH 26/33] =?UTF-8?q?fix:=20=EB=AA=A8=EB=93=A0=20=ED=85=8C?= =?UTF-8?q?=EC=9D=B4=EB=B8=94=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=A1=B0?= =?UTF-8?q?=ED=9A=8C=20=EC=8B=9C=20entityJoinApi=20=EC=82=AC=EC=9A=A9?= =?UTF-8?q?=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 문제: writer 컬럼이 user_name으로 변환되지 않음 - 원인: entityJoinColumns가 없을 때 tableTypeApi 사용 (entity 조인 미지원) - 해결: 항상 entityJoinApi.getTableDataWithJoins 사용 - 영향: - writer 컬럼이 있는 모든 테이블에서 자동으로 writer_name 조인 - 기존 additionalJoinColumns도 정상 작동 - 백엔드의 자동 writer 조인 기능 활성화 --- .../table-list/TableListComponent.tsx | 32 ++++++------------- 1 file changed, 10 insertions(+), 22 deletions(-) diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx index f6a99536..838361d5 100644 --- a/frontend/lib/registry/components/table-list/TableListComponent.tsx +++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx @@ -624,28 +624,16 @@ export const TableListComponent: React.FC = ({ referenceTable: col.additionalJoinInfo!.referenceTable, })); - const hasEntityJoins = entityJoinColumns.length > 0; - - let response; - if (hasEntityJoins) { - response = await entityJoinApi.getTableDataWithJoins(tableConfig.selectedTable, { - page, - size: pageSize, - sortBy, - sortOrder, - search: filters, - enableEntityJoin: true, - additionalJoinColumns: entityJoinColumns, - }); - } else { - response = await tableTypeApi.getTableData(tableConfig.selectedTable, { - page, - size: pageSize, - sortBy, - sortOrder, - search: filters, - }); - } + // 🎯 항상 entityJoinApi 사용 (writer 컬럼 자동 조인 지원) + const response = await entityJoinApi.getTableDataWithJoins(tableConfig.selectedTable, { + page, + size: pageSize, + sortBy, + sortOrder, + search: filters, + enableEntityJoin: true, + additionalJoinColumns: entityJoinColumns.length > 0 ? entityJoinColumns : undefined, + }); setData(response.data || []); setTotalPages(response.totalPages || 0); From 605fbc438396f017749011441ceea472147d8971 Mon Sep 17 00:00:00 2001 From: kjs Date: Mon, 10 Nov 2025 16:36:54 +0900 Subject: [PATCH 27/33] =?UTF-8?q?debug:=20writer=20=EC=BB=AC=EB=9F=BC=20?= =?UTF-8?q?=EC=A1=B0=EC=9D=B8=20=EB=94=94=EB=B2=84=EA=B9=85=20=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 프론트엔드: formatCellValue에서 writer 컬럼 데이터 로깅 - 백엔드: writer 조인 설정 및 검증 상세 로깅 - 목적: writer_name이 빈값으로 표시되는 문제 원인 파악 --- backend-node/src/services/entityJoinService.ts | 9 ++++++++- .../components/table-list/TableListComponent.tsx | 11 +++++++++-- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/backend-node/src/services/entityJoinService.ts b/backend-node/src/services/entityJoinService.ts index d2db8c9e..c0667ac9 100644 --- a/backend-node/src/services/entityJoinService.ts +++ b/backend-node/src/services/entityJoinService.ts @@ -73,13 +73,20 @@ export class EntityJoinService { separator: " - ", }; + logger.info(`🔍 writer 조인 설정:`, JSON.stringify(writerJoinConfig, null, 2)); + // 조인 설정 유효성 검증 - if (await this.validateJoinConfig(writerJoinConfig)) { + const isValid = await this.validateJoinConfig(writerJoinConfig); + logger.info(`🔍 writer 조인 검증 결과: ${isValid}`); + + if (isValid) { joinConfigs.push(writerJoinConfig); logger.info(`✅ writer 컬럼 조인 설정 추가됨: writer_name`); } else { logger.warn(`❌ writer 컬럼 조인 설정 검증 실패`); } + } else { + logger.info(`ℹ️ writer 컬럼 없음: ${tableName}`); } for (const column of entityColumns) { diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx index 838361d5..37b7cddf 100644 --- a/frontend/lib/registry/components/table-list/TableListComponent.tsx +++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx @@ -1051,8 +1051,15 @@ export const TableListComponent: React.FC = ({ if (value === null || value === undefined) return "-"; // 🎯 writer 컬럼 자동 변환: user_id -> user_name - if (column.columnName === "writer" && rowData && rowData.writer_name) { - return rowData.writer_name; + if (column.columnName === "writer") { + console.log("🔍 writer 컬럼 데이터:", { + value, + writer_name: rowData?.writer_name, + rowData + }); + if (rowData && rowData.writer_name) { + return rowData.writer_name; + } } // 🎯 엔티티 컬럼 표시 설정이 있는 경우 From 49f779e0e4e3d077884093654bebf1d8912c6d3e Mon Sep 17 00:00:00 2001 From: kjs Date: Mon, 10 Nov 2025 16:38:16 +0900 Subject: [PATCH 28/33] =?UTF-8?q?feat:=20writer=20=EC=BB=AC=EB=9F=BC=20?= =?UTF-8?q?=EC=9E=90=EB=8F=99=20user=5Fname=20=EB=B3=80=ED=99=98=20?= =?UTF-8?q?=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - writer 컬럼이 있는 테이블에서 자동으로 user_name 표시 - 백엔드: entityJoinService에서 writer 컬럼 감지 및 user_info 조인 - 프론트엔드: entityJoinApi 항상 사용 및 writer_name 자동 표시 - 디버깅 로그 제거 --- backend-node/src/services/entityJoinService.ts | 15 +-------------- .../components/table-list/TableListComponent.tsx | 11 ++--------- 2 files changed, 3 insertions(+), 23 deletions(-) diff --git a/backend-node/src/services/entityJoinService.ts b/backend-node/src/services/entityJoinService.ts index c0667ac9..6877fedd 100644 --- a/backend-node/src/services/entityJoinService.ts +++ b/backend-node/src/services/entityJoinService.ts @@ -60,8 +60,6 @@ export class EntityJoinService { ); if (tableColumns.length > 0) { - logger.info(`✅ writer 컬럼 발견: ${tableName}.writer -> user_info.user_id`); - const writerJoinConfig: EntityJoinConfig = { sourceTable: tableName, sourceColumn: "writer", @@ -73,20 +71,9 @@ export class EntityJoinService { separator: " - ", }; - logger.info(`🔍 writer 조인 설정:`, JSON.stringify(writerJoinConfig, null, 2)); - - // 조인 설정 유효성 검증 - const isValid = await this.validateJoinConfig(writerJoinConfig); - logger.info(`🔍 writer 조인 검증 결과: ${isValid}`); - - if (isValid) { + if (await this.validateJoinConfig(writerJoinConfig)) { joinConfigs.push(writerJoinConfig); - logger.info(`✅ writer 컬럼 조인 설정 추가됨: writer_name`); - } else { - logger.warn(`❌ writer 컬럼 조인 설정 검증 실패`); } - } else { - logger.info(`ℹ️ writer 컬럼 없음: ${tableName}`); } for (const column of entityColumns) { diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx index 37b7cddf..838361d5 100644 --- a/frontend/lib/registry/components/table-list/TableListComponent.tsx +++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx @@ -1051,15 +1051,8 @@ export const TableListComponent: React.FC = ({ if (value === null || value === undefined) return "-"; // 🎯 writer 컬럼 자동 변환: user_id -> user_name - if (column.columnName === "writer") { - console.log("🔍 writer 컬럼 데이터:", { - value, - writer_name: rowData?.writer_name, - rowData - }); - if (rowData && rowData.writer_name) { - return rowData.writer_name; - } + if (column.columnName === "writer" && rowData && rowData.writer_name) { + return rowData.writer_name; } // 🎯 엔티티 컬럼 표시 설정이 있는 경우 From dad7e9edab6e89d3655d38bd6fe7b7d93b6492fc Mon Sep 17 00:00:00 2001 From: kjs Date: Mon, 10 Nov 2025 18:12:09 +0900 Subject: [PATCH 29/33] =?UTF-8?q?feat:=20=EC=97=91=EC=85=80=20=EB=8B=A4?= =?UTF-8?q?=EC=9A=B4=EB=A1=9C=EB=93=9C=20=EA=B8=B0=EB=8A=A5=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 화면 편집기 컬럼 설정 기반 다운로드 (visible 컬럼만) - 필터 조건 적용 (필터링된 데이터만 다운로드) - 한글 라벨명 표시 (column_labels 테이블 조회) - Entity 조인 값 표시 (writer → writer_name 등) - 카테고리 타입 라벨 변환 (코드 → 라벨) - 멀티테넌시 보안 강화 (autoFilter: true) - 디버깅 로그 정리 변경된 파일: - frontend/lib/utils/buttonActions.ts - frontend/lib/registry/components/table-list/TableListComponent.tsx 관련 이슈: #엑셀다운로드개선 --- docs/엑셀_다운로드_개선_계획.md | 656 ++++++++++++++++++ docs/엑셀_다운로드_개선_계획_v2.md | 275 ++++++++ .../table-list/TableListComponent.tsx | 56 +- frontend/lib/utils/buttonActions.ts | 420 ++++++----- frontend/stores/tableDisplayStore.ts | 41 +- 5 files changed, 1243 insertions(+), 205 deletions(-) create mode 100644 docs/엑셀_다운로드_개선_계획.md create mode 100644 docs/엑셀_다운로드_개선_계획_v2.md diff --git a/docs/엑셀_다운로드_개선_계획.md b/docs/엑셀_다운로드_개선_계획.md new file mode 100644 index 00000000..f15db82d --- /dev/null +++ b/docs/엑셀_다운로드_개선_계획.md @@ -0,0 +1,656 @@ +# 엑셀 다운로드 기능 개선 계획서 + +## 📋 문서 정보 + +- **작성일**: 2025-01-10 +- **작성자**: AI Developer +- **상태**: 계획 단계 +- **우선순위**: 🔴 높음 (보안 취약점 포함) + +--- + +## 🚨 현재 문제점 + +### 1. 보안 취약점 (Critical) + +- ❌ **멀티테넌시 규칙 위반**: 모든 회사의 데이터를 가져옴 +- ❌ **회사 필터링 없음**: `dynamicFormApi.getTableData` 호출 시 `autoFilter` 미적용 +- ❌ **데이터 유출 위험**: 회사 A 사용자가 회사 B, C, D의 데이터를 다운로드 가능 +- ❌ **규정 위반**: GDPR, 개인정보보호법 등 법적 문제 + +**관련 코드**: + +```typescript +// frontend/lib/utils/buttonActions.ts (2043-2048 라인) +const response = await dynamicFormApi.getTableData(context.tableName, { + page: 1, + pageSize: 10000, // 최대 10,000개 행 + sortBy: context.sortBy || "id", + sortOrder: context.sortOrder || "asc", + // ❌ autoFilter 없음 - company_code 필터링 안됨 + // ❌ search 없음 - 사용자 필터 조건 무시 +}); +``` + +### 2. 기능 문제 + +- ❌ **모든 컬럼 포함**: 화면에 표시되지 않는 컬럼도 다운로드됨 +- ❌ **필터 조건 무시**: 사용자가 설정한 검색/필터가 적용되지 않음 +- ❌ **DB 컬럼명 사용**: 사용자 친화적이지 않음 (예: `user_id` 대신 `사용자 ID`) +- ❌ **컬럼 순서 불일치**: 화면 표시 순서와 다름 + +### 3. 우선순위 문제 + +현재 다운로드 데이터 우선순위: + +1. ✅ 선택된 행 데이터 (`context.selectedRowsData`) +2. ✅ 화면 표시 데이터 (`context.tableDisplayData`) +3. ✅ 전역 저장소 데이터 (`tableDisplayStore`) +4. ❌ **테이블 전체 데이터** (API 호출) ← **보안 위험!** + +--- + +## 🎯 개선 목표 + +### 1. 보안 강화 + +- ✅ **멀티테넌시 준수**: 현재 사용자의 회사 데이터만 다운로드 +- ✅ **필터 조건 적용**: 사용자가 설정한 검색/필터 조건 반영 +- ✅ **권한 검증**: 데이터 접근 권한 확인 +- ✅ **감사 로그**: 다운로드 이력 기록 + +### 2. 사용자 경험 개선 + +- ✅ **화면 표시 컬럼만**: 사용자가 선택한 컬럼만 다운로드 +- ✅ **컬럼 순서 유지**: 화면 표시 순서와 동일 +- ✅ **라벨명 사용**: 한글 컬럼명 (예: `사용자 ID`, `부서명`) +- ✅ **정렬 유지**: 화면 정렬 상태 반영 + +### 3. 데이터 정확성 + +- ✅ **필터링된 데이터**: 화면에 보이는 조건과 동일한 데이터 +- ✅ **선택 우선**: 사용자가 행을 선택했으면 선택된 행만 +- ✅ **데이터 일관성**: 화면 ↔ 엑셀 데이터 일치 + +--- + +## 📐 개선 계획 + +### Phase 1: 데이터 소스 우선순위 재정의 + +#### 새로운 우선순위 + +``` +1. 선택된 행 데이터 (가장 높은 우선순위) + - 출처: context.selectedRowsData + - 설명: 사용자가 체크박스로 선택한 행 + - 특징: 필터/정렬 이미 적용됨, 가장 명확한 의도 + - 처리: 그대로 사용 + +2. 화면 표시 데이터 (두 번째 우선순위) + - 출처: tableDisplayStore.getTableData(tableName) + - 설명: 현재 화면에 표시 중인 데이터 + - 특징: 필터/정렬/페이징 적용됨, 가장 안전 + - 처리: + - 현재 페이지 데이터만 (기본) + - 또는 전체 페이지 데이터 (옵션) + +3. API 호출 - 필터 조건 포함 (최후 수단) + - 출처: entityJoinApi.getTableDataWithJoins() + - 설명: 위의 데이터가 없을 때만 + - 특징: + - ✅ company_code 자동 필터링 (autoFilter: true) + - ✅ 검색/필터 조건 전달 + - ✅ 정렬 조건 전달 + - 제한: 최대 10,000개 행 + +4. ❌ 테이블 전체 데이터 (제거) + - 보안상 위험하므로 완전 제거 + - 대신 경고 메시지 표시 +``` + +### Phase 2: ButtonActionContext 확장 + +#### 현재 구조 + +```typescript +interface ButtonActionContext { + tableName?: string; + formData?: Record; + selectedRowsData?: any[]; + tableDisplayData?: any[]; + columnOrder?: string[]; + sortBy?: string; + sortOrder?: "asc" | "desc"; +} +``` + +#### 추가 필드 + +```typescript +interface ButtonActionContext { + // ... 기존 필드 + + // 🆕 필터 및 검색 조건 + filterConditions?: Record; // 필터 조건 (예: { status: "active", dept: "dev" }) + searchTerm?: string; // 검색어 + searchColumn?: string; // 검색 대상 컬럼 + + // 🆕 컬럼 정보 + visibleColumns?: string[]; // 화면에 표시 중인 컬럼 목록 (순서 포함) + columnLabels?: Record; // 컬럼명 → 라벨명 매핑 + + // 🆕 페이징 정보 + currentPage?: number; // 현재 페이지 + pageSize?: number; // 페이지 크기 + totalItems?: number; // 전체 항목 수 + + // 🆕 엑셀 옵션 + excelScope?: "selected" | "current-page" | "all-filtered"; // 다운로드 범위 +} +``` + +### Phase 3: TableListComponent 수정 + +#### 위치 + +`frontend/lib/registry/components/table-list/TableListComponent.tsx` + +#### 변경 사항 + +```typescript +// 버튼 클릭 시 context 생성 +const buttonContext: ButtonActionContext = { + tableName: tableConfig.selectedTable, + + // 기존 + selectedRowsData: selectedRows, + tableDisplayData: data, // 현재 페이지 데이터 + columnOrder: visibleColumns.map((col) => col.columnName), + sortBy: sortColumn, + sortOrder: sortDirection, + + // 🆕 추가 + filterConditions: searchValues, // 필터 조건 + searchTerm: searchTerm, // 검색어 + visibleColumns: visibleColumns.map((col) => col.columnName), // 표시 컬럼 + columnLabels: columnLabels, // 컬럼 라벨 (한글) + currentPage: currentPage, // 현재 페이지 + pageSize: localPageSize, // 페이지 크기 + totalItems: totalItems, // 전체 항목 수 + excelScope: selectedRows.length > 0 ? "selected" : "current-page", // 기본: 현재 페이지 +}; +``` + +### Phase 4: handleExcelDownload 수정 + +#### 4-1. 데이터 소스 선택 로직 + +```typescript +private static async handleExcelDownload( + config: ButtonActionConfig, + context: ButtonActionContext +): Promise { + try { + let dataToExport: any[] = []; + let dataSource: string = "unknown"; + + // 1순위: 선택된 행 데이터 + if (context.selectedRowsData && context.selectedRowsData.length > 0) { + dataToExport = context.selectedRowsData; + dataSource = "selected"; + console.log("✅ 선택된 행 사용:", dataToExport.length); + } + // 2순위: 화면 표시 데이터 + else if (context.tableDisplayData && context.tableDisplayData.length > 0) { + dataToExport = context.tableDisplayData; + dataSource = "current-page"; + console.log("✅ 현재 페이지 데이터 사용:", dataToExport.length); + } + // 3순위: 전역 저장소 데이터 + else if (context.tableName) { + const { tableDisplayStore } = await import("@/stores/tableDisplayStore"); + const storedData = tableDisplayStore.getTableData(context.tableName); + + if (storedData && storedData.data.length > 0) { + dataToExport = storedData.data; + dataSource = "store"; + console.log("✅ 저장소 데이터 사용:", dataToExport.length); + } + } + + // 4순위: API 호출 (필터 조건 포함) - 최후 수단 + if (dataToExport.length === 0 && context.tableName) { + console.log("⚠️ 화면 데이터 없음 - API 호출 필요"); + + // 사용자 확인 (선택사항) + const confirmed = await this.confirmLargeDownload(context.totalItems || 0); + if (!confirmed) { + return false; + } + + dataToExport = await this.fetchFilteredData(context); + dataSource = "api"; + } + + // 데이터 없음 + if (dataToExport.length === 0) { + toast.error("다운로드할 데이터가 없습니다."); + return false; + } + + // ... 계속 + } +} +``` + +#### 4-2. API 호출 메서드 (필터 조건 포함) + +```typescript +private static async fetchFilteredData( + context: ButtonActionContext +): Promise { + try { + console.log("🔄 필터된 데이터 조회 중...", { + tableName: context.tableName, + filterConditions: context.filterConditions, + searchTerm: context.searchTerm, + sortBy: context.sortBy, + sortOrder: context.sortOrder, + }); + + const { entityJoinApi } = await import("@/lib/api/entityJoin"); + + // 🔒 멀티테넌시 준수: autoFilter로 company_code 자동 적용 + const response = await entityJoinApi.getTableDataWithJoins( + context.tableName!, + { + page: 1, + size: 10000, // 최대 10,000개 + sortBy: context.sortBy || "id", + sortOrder: context.sortOrder || "asc", + search: context.filterConditions, // ✅ 필터 조건 + enableEntityJoin: true, // ✅ Entity 조인 + autoFilter: true, // ✅ company_code 자동 필터링 + } + ); + + if (response.success && response.data) { + console.log("✅ API 데이터 조회 완료:", { + count: response.data.length, + total: response.total, + }); + return response.data; + } else { + console.error("❌ API 응답 실패:", response); + return []; + } + } catch (error) { + console.error("❌ API 호출 오류:", error); + toast.error("데이터를 가져오는데 실패했습니다."); + return []; + } +} +``` + +#### 4-3. 컬럼 필터링 및 라벨 적용 + +```typescript +private static applyColumnFiltering( + data: any[], + context: ButtonActionContext +): any[] { + // 표시 컬럼이 지정되지 않았으면 모든 컬럼 사용 + const visibleColumns = context.visibleColumns || Object.keys(data[0] || {}); + const columnLabels = context.columnLabels || {}; + + console.log("🔧 컬럼 필터링 및 라벨 적용:", { + totalColumns: Object.keys(data[0] || {}).length, + visibleColumns: visibleColumns.length, + hasLabels: Object.keys(columnLabels).length > 0, + }); + + return data.map(row => { + const filteredRow: Record = {}; + + visibleColumns.forEach(columnName => { + // 라벨 우선 사용, 없으면 컬럼명 사용 + const label = columnLabels[columnName] || columnName; + filteredRow[label] = row[columnName]; + }); + + return filteredRow; + }); +} +``` + +#### 4-4. 대용량 다운로드 확인 + +```typescript +private static async confirmLargeDownload(totalItems: number): Promise { + if (totalItems === 0) { + return true; // 데이터 없으면 확인 불필요 + } + + if (totalItems > 1000) { + const confirmed = window.confirm( + `총 ${totalItems.toLocaleString()}개의 데이터를 다운로드합니다.\n` + + `(최대 10,000개까지만 다운로드됩니다)\n\n` + + `계속하시겠습니까?` + ); + return confirmed; + } + + return true; // 1000개 이하는 자동 진행 +} +``` + +#### 4-5. 전체 흐름 + +```typescript +private static async handleExcelDownload( + config: ButtonActionConfig, + context: ButtonActionContext +): Promise { + try { + // 1. 데이터 소스 선택 + let dataToExport = await this.selectDataSource(context); + + if (dataToExport.length === 0) { + toast.error("다운로드할 데이터가 없습니다."); + return false; + } + + // 2. 최대 행 수 제한 + const MAX_ROWS = 10000; + if (dataToExport.length > MAX_ROWS) { + toast.warning(`최대 ${MAX_ROWS.toLocaleString()}개 행까지만 다운로드됩니다.`); + dataToExport = dataToExport.slice(0, MAX_ROWS); + } + + // 3. 컬럼 필터링 및 라벨 적용 + dataToExport = this.applyColumnFiltering(dataToExport, context); + + // 4. 정렬 적용 (필요 시) + if (context.sortBy) { + dataToExport = this.applySorting(dataToExport, context.sortBy, context.sortOrder); + } + + // 5. 엑셀 파일 생성 + const { exportToExcel } = await import("@/lib/utils/excelExport"); + + const fileName = config.excelFileName || + `${context.tableName}_${new Date().toISOString().split("T")[0]}.xlsx`; + const sheetName = config.excelSheetName || "Sheet1"; + const includeHeaders = config.excelIncludeHeaders !== false; + + await exportToExcel(dataToExport, fileName, sheetName, includeHeaders); + + toast.success(`${dataToExport.length}개 행이 다운로드되었습니다.`); + + // 6. 감사 로그 (선택사항) + this.logExcelDownload(context, dataToExport.length); + + return true; + } catch (error) { + console.error("❌ 엑셀 다운로드 실패:", error); + toast.error("엑셀 다운로드에 실패했습니다."); + return false; + } +} +``` + +--- + +## 🔧 구현 단계 + +### Step 1: 타입 정의 업데이트 + +**파일**: `frontend/lib/utils/buttonActions.ts` + +- [ ] `ButtonActionContext` 인터페이스에 새 필드 추가 +- [ ] `ExcelDownloadScope` 타입 정의 추가 +- [ ] JSDoc 주석 추가 + +**예상 작업 시간**: 10분 + +--- + +### Step 2: TableListComponent 수정 + +**파일**: `frontend/lib/registry/components/table-list/TableListComponent.tsx` + +- [ ] 버튼 context 생성 시 필터/컬럼/라벨 정보 추가 +- [ ] `columnLabels` 생성 로직 추가 +- [ ] `visibleColumns` 목록 생성 + +**예상 작업 시간**: 20분 + +--- + +### Step 3: handleExcelDownload 리팩토링 + +**파일**: `frontend/lib/utils/buttonActions.ts` + +- [ ] 데이터 소스 선택 로직 분리 (`selectDataSource`) +- [ ] API 호출 메서드 추가 (`fetchFilteredData`) +- [ ] 컬럼 필터링 메서드 추가 (`applyColumnFiltering`) +- [ ] 대용량 확인 메서드 추가 (`confirmLargeDownload`) +- [ ] 정렬 메서드 개선 (`applySorting`) +- [ ] 기존 코드 정리 (불필요한 로그 제거) + +**예상 작업 시간**: 40분 + +--- + +### Step 4: 테스트 + +**테스트 시나리오**: + +1. **선택된 행 다운로드** + + - 체크박스로 여러 행 선택 + - 엑셀 다운로드 버튼 클릭 + - 예상: 선택된 행만 다운로드 + - 확인: 라벨명, 컬럼 순서, 데이터 정확성 + +2. **현재 페이지 다운로드** + + - 행 선택 없이 엑셀 다운로드 + - 예상: 현재 페이지 데이터만 + - 확인: 페이지 크기만큼 다운로드 + +3. **필터 적용 다운로드** + + - 검색어 입력 또는 필터 설정 + - 엑셀 다운로드 + - 예상: 필터된 결과만 + - 확인: 화면 데이터와 일치 + +4. **멀티테넌시 테스트** + + - 회사 A로 로그인 + - 엑셀 다운로드 + - 확인: 회사 A 데이터만 + - 회사 B로 로그인 + - 엑셀 다운로드 + - 확인: 회사 B 데이터만 + +5. **대용량 데이터 테스트** + + - 10,000개 이상 데이터 조회 + - 엑셀 다운로드 + - 예상: 10,000개까지만 + 경고 메시지 + +6. **컬럼 라벨 테스트** + - 엑셀 파일 열기 + - 확인: DB 컬럼명이 아닌 한글 라벨명 + +**예상 작업 시간**: 30분 + +--- + +### Step 5: 문서화 및 커밋 + +- [ ] 코드 주석 추가 +- [ ] README 업데이트 (있다면) +- [ ] 커밋 메시지 작성 + +**예상 작업 시간**: 10분 + +--- + +## ⏱️ 총 예상 시간 + +**약 2시간** (코딩 + 테스트) + +--- + +## ⚠️ 주의사항 + +### 1. 하위 호환성 + +- 기존 `context.tableDisplayData`를 사용하는 코드가 있을 수 있음 +- 새 필드는 모두 선택사항(`?`)으로 정의 +- 기존 동작은 유지하면서 점진적으로 개선 + +### 2. 성능 + +- API 호출 시 최대 10,000개 제한 +- 대용량 데이터는 페이징 권장 +- 브라우저 메모리 제한 고려 + +### 3. 보안 + +- **절대 `autoFilter: false` 사용 금지** +- 모든 API 호출에 `autoFilter: true` 필수 +- 감사 로그 기록 권장 + +### 4. 사용자 경험 + +- 다운로드 중 로딩 표시 +- 완료/실패 토스트 메시지 +- 대용량 다운로드 시 확인 창 + +--- + +## 📊 예상 결과 + +### Before (현재) + +``` +엑셀 다운로드: +❌ 모든 회사의 데이터 (보안 위험!) +❌ 모든 컬럼 포함 (불필요한 정보) +❌ 필터 조건 무시 +❌ DB 컬럼명 (user_id, dept_code) +❌ 정렬 상태 무시 +``` + +### After (개선) + +``` +엑셀 다운로드: +✅ 현재 회사 데이터만 (멀티테넌시 준수) +✅ 화면 표시 컬럼만 (사용자 선택) +✅ 필터 조건 적용 (검색/필터 반영) +✅ 한글 라벨명 (사용자 ID, 부서명) +✅ 정렬 상태 유지 (화면과 동일) +✅ 컬럼 순서 유지 (화면과 동일) +``` + +--- + +## 🔗 관련 파일 + +### 수정 대상 + +1. `frontend/lib/utils/buttonActions.ts` + + - `ButtonActionContext` 인터페이스 + - `handleExcelDownload` 메서드 + +2. `frontend/lib/registry/components/table-list/TableListComponent.tsx` + - 버튼 context 생성 로직 + +### 참고 파일 + +1. `frontend/lib/api/entityJoin.ts` + + - `getTableDataWithJoins` API + +2. `frontend/lib/utils/excelExport.ts` + + - `exportToExcel` 함수 + +3. `.cursor/rules/multi-tenancy-guide.mdc` + - 멀티테넌시 규칙 + +--- + +## 📝 후속 작업 (선택사항) + +### 1. 엑셀 다운로드 옵션 UI + +사용자가 다운로드 범위를 선택할 수 있는 모달: + +``` +[ ] 선택된 행만 (N개) +[x] 현재 페이지 (20개) +[ ] 필터된 전체 데이터 (최대 10,000개) +``` + +### 2. 엑셀 스타일링 + +- 헤더 배경색 +- 자동 너비 조정 +- 필터 버튼 추가 + +### 3. CSV 내보내기 + +- 대용량 데이터에 적합 +- 가벼운 파일 크기 + +### 4. 감사 로그 + +- 누가, 언제, 어떤 데이터를 다운로드했는지 기록 +- 보안 감사 추적 + +--- + +## ✅ 체크리스트 + +### 계획 단계 + +- [x] 계획서 작성 완료 +- [x] 사용자 검토 및 승인 +- [x] 수정 사항 반영 + +### 구현 단계 + +- [x] Step 1: 타입 정의 업데이트 +- [x] Step 2: TableListComponent 수정 +- [x] Step 3: handleExcelDownload 리팩토링 +- [ ] Step 4: 테스트 완료 (사용자 테스트 필요) +- [ ] Step 5: 문서화 및 커밋 (대기 중) + +### 배포 단계 + +- [ ] 코드 리뷰 +- [ ] QA 테스트 +- [ ] 프로덕션 배포 +- [ ] 모니터링 + +--- + +## 🤝 승인 + +- [ ] 개발팀 리뷰 +- [ ] 보안팀 검토 +- [ ] 사용자 승인 +- [ ] 최종 승인 + +--- + +**작성 완료**: 2025-01-10 +**다음 업데이트**: 구현 완료 후 diff --git a/docs/엑셀_다운로드_개선_계획_v2.md b/docs/엑셀_다운로드_개선_계획_v2.md new file mode 100644 index 00000000..17139109 --- /dev/null +++ b/docs/엑셀_다운로드_개선_계획_v2.md @@ -0,0 +1,275 @@ +# 엑셀 다운로드 개선 계획 v2 (수정) + +## 📋 문서 정보 + +- **작성일**: 2025-01-10 +- **작성자**: AI Developer +- **버전**: 2.0 (사용자 피드백 반영) +- **상태**: 구현 대기 + +--- + +## 🎯 변경된 요구사항 (사용자 피드백) + +### 사용자가 원하는 동작 + +1. ❌ **선택된 행만 다운로드 기능 제거** (불필요) +2. ✅ **항상 필터링된 전체 데이터 다운로드** (현재 화면 기준) +3. ✅ **화면에 표시된 컬럼만** 다운로드 +4. ✅ **컬럼 라벨(한글) 우선** 사용 +5. ✅ **멀티테넌시 준수** (company_code 필터링) + +### 현재 문제 + +1. 🐛 **행 선택 안 했을 때**: "다운로드할 데이터가 없습니다" 에러 +2. ❌ **선택된 행만 다운로드**: 사용자가 원하지 않는 동작 +3. ❌ **모든 컬럼 포함**: 화면에 표시되지 않는 컬럼도 다운로드됨 +4. ❌ **필터 조건 무시**: 사용자가 설정한 검색/필터가 적용되지 않음 +5. ❌ **멀티테넌시 위반**: 모든 회사의 데이터를 가져올 가능성 + +--- + +## 🔄 수정된 다운로드 동작 흐름 + +### Before (현재 - 잘못된 동작) + +``` +엑셀 다운로드 버튼 클릭 +↓ +1. 선택된 행이 있는가? + ├─ Yes → 선택된 행만 다운로드 ❌ (사용자가 원하지 않음) + └─ No → 현재 페이지 데이터만 (10개 등) ❌ (전체가 아님) +``` + +### After (수정 - 올바른 동작) + +``` +엑셀 다운로드 버튼 클릭 +↓ +🔒 멀티테넌시: company_code 자동 필터링 +↓ +🔍 필터 조건: 사용자가 설정한 검색/필터 적용 +↓ +📊 데이터 조회: 전체 필터링된 데이터 (최대 10,000개) +↓ +🎨 컬럼 필터링: 화면에 표시된 컬럼만 +↓ +🏷️ 라벨 적용: 컬럼명 → 한글 라벨명 +↓ +💾 엑셀 다운로드 +``` + +--- + +## 🎯 수정된 데이터 우선순위 + +### ❌ 제거: 선택된 행 다운로드 + +```typescript +// ❌ 삭제할 코드 +if (context.selectedRowsData && context.selectedRowsData.length > 0) { + dataToExport = context.selectedRowsData; // 불필요! +} +``` + +### ✅ 새로운 우선순위 + +```typescript +// ✅ 항상 API 호출로 전체 필터링된 데이터 가져오기 +const response = await entityJoinApi.getTableDataWithJoins(context.tableName, { + page: 1, + size: 10000, // 최대 10,000개 + sortBy: context.sortBy || "id", + sortOrder: (context.sortOrder || "asc") as "asc" | "desc", + search: context.filterConditions, // ✅ 필터 조건 + searchTerm: context.searchTerm, // ✅ 검색어 + autoFilter: true, // ✅ company_code 자동 필터링 (멀티테넌시) + enableEntityJoin: true, // ✅ Entity 조인 (writer_name 등) +}); + +dataToExport = response.data; // 필터링된 전체 데이터 +``` + +--- + +## 📝 수정 사항 + +### 1. `buttonActions.ts` - handleExcelDownload 리팩토링 + +**파일**: `frontend/lib/utils/buttonActions.ts` + +#### 변경 전 + +```typescript +// ❌ 잘못된 우선순위 +if (context.selectedRowsData && context.selectedRowsData.length > 0) { + dataToExport = context.selectedRowsData; // 선택된 행만 +} +else if (context.tableDisplayData && context.tableDisplayData.length > 0) { + dataToExport = context.tableDisplayData; // 현재 페이지만 +} +``` + +#### 변경 후 + +```typescript +private static async handleExcelDownload( + config: ButtonActionConfig, + context: ButtonActionContext +): Promise { + try { + let dataToExport: any[] = []; + + // ✅ 항상 API 호출로 필터링된 전체 데이터 가져오기 + if (context.tableName) { + const { entityJoinApi } = await import("@/lib/api/entityJoin"); + + // 🔒 멀티테넌시 준수: autoFilter로 company_code 자동 적용 + const response = await entityJoinApi.getTableDataWithJoins(context.tableName, { + page: 1, + size: 10000, // 최대 10,000개 + sortBy: context.sortBy || "id", + sortOrder: (context.sortOrder || "asc") as "asc" | "desc", + search: context.filterConditions, // ✅ 필터 조건 + searchTerm: context.searchTerm, // ✅ 검색어 + autoFilter: true, // ✅ company_code 자동 필터링 (멀티테넌시) + enableEntityJoin: true, // ✅ Entity 조인 + }); + + if (response.success && response.data) { + dataToExport = response.data; + } else { + toast.error("데이터를 가져오는데 실패했습니다."); + return false; + } + } else { + toast.error("테이블 정보가 없습니다."); + return false; + } + + // 데이터가 없으면 종료 + if (dataToExport.length === 0) { + toast.error("다운로드할 데이터가 없습니다."); + return false; + } + + // 🎨 컬럼 필터링 및 라벨 적용 + if (context.visibleColumns && context.visibleColumns.length > 0) { + const visibleColumns = context.visibleColumns; + const columnLabels = context.columnLabels || {}; + + dataToExport = dataToExport.map((row) => { + const filteredRow: Record = {}; + + visibleColumns.forEach((columnName) => { + // 라벨 우선 사용, 없으면 컬럼명 사용 + const label = columnLabels[columnName] || columnName; + filteredRow[label] = row[columnName]; + }); + + return filteredRow; + }); + } + + // 💾 엑셀 파일 생성 + const { exportToExcel } = await import("@/lib/utils/excelExport"); + + const fileName = + config.excelFileName || `${context.tableName}_${new Date().toISOString().split("T")[0]}.xlsx`; + const sheetName = config.excelSheetName || "Sheet1"; + + await exportToExcel(dataToExport, fileName, { + sheetName, + includeHeaders: config.excelIncludeHeaders !== false, + }); + + toast.success(`${dataToExport.length}개 행이 다운로드되었습니다.`); + + return true; + } catch (error) { + console.error("엑셀 다운로드 오류:", error); + toast.error("엑셀 다운로드 중 오류가 발생했습니다."); + return false; + } +} +``` + +--- + +## 🔒 보안 강화 (멀티테넌시) + +### Before (위험) + +```typescript +// ❌ 모든 회사 데이터 노출 +await dynamicFormApi.getTableData(tableName, { + pageSize: 10000, // 필터 없음! +}); +``` + +### After (안전) + +```typescript +// ✅ 멀티테넌시 준수 +await entityJoinApi.getTableDataWithJoins(tableName, { + size: 10000, + search: filterConditions, // 필터 조건 + searchTerm: searchTerm, // 검색어 + autoFilter: true, // company_code 자동 필터링 ✅ + enableEntityJoin: true, // Entity 조인 ✅ +}); +``` + +--- + +## ✅ 구현 체크리스트 + +### Step 1: handleExcelDownload 단순화 + +- [ ] 선택된 행 다운로드 로직 제거 (`context.selectedRowsData` 체크 삭제) +- [ ] 화면 표시 데이터 로직 제거 (`context.tableDisplayData` 체크 삭제) +- [ ] 항상 API 호출로 변경 (entityJoinApi.getTableDataWithJoins) +- [ ] 멀티테넌시 필수 적용 (`autoFilter: true`) +- [ ] 필터 조건 전달 (`search`, `searchTerm`) + +### Step 2: 컬럼 필터링 및 라벨 적용 + +- [ ] `context.visibleColumns`로 필터링 +- [ ] `context.columnLabels`로 라벨 변환 +- [ ] 라벨 우선, 없으면 컬럼명 사용 + +### Step 3: 테스트 + +- [ ] 필터 없이 다운로드 → 전체 데이터 (company_code 필터링) +- [ ] 검색어 입력 후 다운로드 → 검색된 데이터만 +- [ ] 필터 설정 후 다운로드 → 필터링된 데이터만 +- [ ] 컬럼 숨기기 후 다운로드 → 표시된 컬럼만 +- [ ] 멀티테넌시 테스트 → 다른 회사 데이터 안 보임 +- [ ] 10,000개 제한 확인 + +### Step 4: 문서화 + +- [ ] 주석 추가 +- [ ] 계획서 업데이트 +- [ ] 커밋 메시지 작성 + +--- + +## 🚀 예상 효과 + +1. **보안 강화**: 멀티테넌시 100% 준수 +2. **사용자 경험 개선**: 필터링된 전체 데이터 다운로드 +3. **직관적인 동작**: 화면에 보이는 대로 다운로드 +4. **한글 지원**: 컬럼 라벨명으로 엑셀 생성 + +--- + +## 🤝 승인 + +**사용자 승인**: ⬜ 대기 중 + +--- + +**작성 완료**: 2025-01-10 +**다음 업데이트**: 구현 완료 후 + diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx index 838361d5..97819a94 100644 --- a/frontend/lib/registry/components/table-list/TableListComponent.tsx +++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx @@ -323,16 +323,29 @@ export const TableListComponent: React.FC = ({ return reordered; }); - console.log("📊 초기 화면 표시 데이터 전달:", { count: initialData.length, firstRow: initialData[0] }); - // 전역 저장소에 데이터 저장 if (tableConfig.selectedTable) { + // 컬럼 라벨 매핑 생성 + const labels: Record = {}; + visibleColumns.forEach((col) => { + labels[col.columnName] = columnLabels[col.columnName] || col.columnName; + }); + tableDisplayStore.setTableData( tableConfig.selectedTable, initialData, parsedOrder.filter((col) => col !== "__checkbox__"), sortColumn, sortDirection, + { + filterConditions: Object.keys(searchValues).length > 0 ? searchValues : undefined, + searchTerm: searchTerm || undefined, + visibleColumns: visibleColumns.map((col) => col.columnName), + columnLabels: labels, + currentPage: currentPage, + pageSize: localPageSize, + totalItems: totalItems, + }, ); } @@ -639,6 +652,29 @@ export const TableListComponent: React.FC = ({ setTotalPages(response.totalPages || 0); setTotalItems(response.total || 0); setError(null); + + // 🎯 Store에 필터 조건 저장 (엑셀 다운로드용) + const labels: Record = {}; + visibleColumns.forEach((col) => { + labels[col.columnName] = columnLabels[col.columnName] || col.columnName; + }); + + tableDisplayStore.setTableData( + tableConfig.selectedTable, + response.data || [], + visibleColumns.map((col) => col.columnName), + sortBy, + sortOrder, + { + filterConditions: filters, + searchTerm: search, + visibleColumns: visibleColumns.map((col) => col.columnName), + columnLabels: labels, + currentPage: page, + pageSize: pageSize, + totalItems: response.total || 0, + } + ); } catch (err: any) { console.error("데이터 가져오기 실패:", err); setData([]); @@ -776,12 +812,28 @@ export const TableListComponent: React.FC = ({ const cleanColumnOrder = ( columnOrder.length > 0 ? columnOrder : visibleColumns.map((c) => c.columnName) ).filter((col) => col !== "__checkbox__"); + + // 컬럼 라벨 정보도 함께 저장 + const labels: Record = {}; + visibleColumns.forEach((col) => { + labels[col.columnName] = columnLabels[col.columnName] || col.columnName; + }); + tableDisplayStore.setTableData( tableConfig.selectedTable, reorderedData, cleanColumnOrder, newSortColumn, newSortDirection, + { + filterConditions: Object.keys(searchValues).length > 0 ? searchValues : undefined, + searchTerm: searchTerm || undefined, + visibleColumns: visibleColumns.map((col) => col.columnName), + columnLabels: labels, + currentPage: currentPage, + pageSize: localPageSize, + totalItems: totalItems, + }, ); } } else { diff --git a/frontend/lib/utils/buttonActions.ts b/frontend/lib/utils/buttonActions.ts index 4ee47277..6f6a8f4d 100644 --- a/frontend/lib/utils/buttonActions.ts +++ b/frontend/lib/utils/buttonActions.ts @@ -113,6 +113,16 @@ export interface ButtonActionContext { sortOrder?: "asc" | "desc"; // 정렬 방향 columnOrder?: string[]; // 컬럼 순서 (사용자가 드래그앤드롭으로 변경한 순서) tableDisplayData?: any[]; // 화면에 표시된 데이터 (정렬 및 컬럼 순서 적용됨) + + // 🆕 엑셀 다운로드 개선을 위한 추가 필드 + filterConditions?: Record; // 필터 조건 (예: { status: "active", dept: "dev" }) + searchTerm?: string; // 검색어 + searchColumn?: string; // 검색 대상 컬럼 + visibleColumns?: string[]; // 화면에 표시 중인 컬럼 목록 (순서 포함) + columnLabels?: Record; // 컬럼명 → 라벨명 매핑 (한글) + currentPage?: number; // 현재 페이지 + pageSize?: number; // 페이지 크기 + totalItems?: number; // 전체 항목 수 } /** @@ -1936,162 +1946,74 @@ export class ButtonActionExecutor { */ private static async handleExcelDownload(config: ButtonActionConfig, context: ButtonActionContext): Promise { try { - console.log("📥 엑셀 다운로드 시작:", { config, context }); - console.log("🔍 context.columnOrder 확인:", { - hasColumnOrder: !!context.columnOrder, - columnOrderLength: context.columnOrder?.length, - columnOrder: context.columnOrder, - }); - console.log("🔍 context.tableDisplayData 확인:", { - hasTableDisplayData: !!context.tableDisplayData, - tableDisplayDataLength: context.tableDisplayData?.length, - tableDisplayDataFirstRow: context.tableDisplayData?.[0], - tableDisplayDataColumns: context.tableDisplayData?.[0] ? Object.keys(context.tableDisplayData[0]) : [], - }); - // 동적 import로 엑셀 유틸리티 로드 const { exportToExcel } = await import("@/lib/utils/excelExport"); let dataToExport: any[] = []; - // 1순위: 선택된 행 데이터 - if (context.selectedRowsData && context.selectedRowsData.length > 0) { - dataToExport = context.selectedRowsData; - console.log("✅ 선택된 행 데이터 사용:", dataToExport.length); - - // 선택된 행도 정렬 적용 - if (context.sortBy) { - console.log("🔄 선택된 행 데이터 정렬 적용:", { - sortBy: context.sortBy, - sortOrder: context.sortOrder, - }); - - dataToExport = [...dataToExport].sort((a, b) => { - const aVal = a[context.sortBy!]; - const bVal = b[context.sortBy!]; - - // null/undefined 처리 - if (aVal == null && bVal == null) return 0; - if (aVal == null) return 1; - if (bVal == null) return -1; - - // 숫자 비교 (문자열이어도 숫자로 변환 가능하면 숫자로 비교) - const aNum = Number(aVal); - const bNum = Number(bVal); - - // 둘 다 유효한 숫자이고, 원본 값이 빈 문자열이 아닌 경우 - if (!isNaN(aNum) && !isNaN(bNum) && aVal !== "" && bVal !== "") { - return context.sortOrder === "desc" ? bNum - aNum : aNum - bNum; - } - - // 문자열 비교 (대소문자 구분 없이, 숫자 포함 문자열도 자연스럽게 정렬) - const aStr = String(aVal).toLowerCase(); - const bStr = String(bVal).toLowerCase(); - - // 자연스러운 정렬 (숫자 포함 문자열) - const comparison = aStr.localeCompare(bStr, undefined, { numeric: true, sensitivity: 'base' }); - return context.sortOrder === "desc" ? -comparison : comparison; - }); - - console.log("✅ 정렬 완료:", { - firstRow: dataToExport[0], - lastRow: dataToExport[dataToExport.length - 1], - firstSortValue: dataToExport[0]?.[context.sortBy], - lastSortValue: dataToExport[dataToExport.length - 1]?.[context.sortBy], - }); - } - } - // 2순위: 화면 표시 데이터 (컬럼 순서 포함, 정렬 적용됨) - else if (context.tableDisplayData && context.tableDisplayData.length > 0) { - dataToExport = context.tableDisplayData; - console.log("✅ 화면 표시 데이터 사용 (context):", { - count: dataToExport.length, - firstRow: dataToExport[0], - columns: Object.keys(dataToExport[0] || {}), - }); - } - // 2.5순위: 전역 저장소에서 화면 표시 데이터 조회 - else if (context.tableName) { + // ✅ 항상 API 호출로 필터링된 전체 데이터 가져오기 + if (context.tableName) { const { tableDisplayStore } = await import("@/stores/tableDisplayStore"); const storedData = tableDisplayStore.getTableData(context.tableName); - if (storedData && storedData.data.length > 0) { - dataToExport = storedData.data; - console.log("✅ 화면 표시 데이터 사용 (전역 저장소):", { - tableName: context.tableName, - count: dataToExport.length, - firstRow: dataToExport[0], - lastRow: dataToExport[dataToExport.length - 1], - columns: Object.keys(dataToExport[0] || {}), - columnOrder: storedData.columnOrder, - sortBy: storedData.sortBy, - sortOrder: storedData.sortOrder, - // 정렬 컬럼의 첫/마지막 값 확인 - firstSortValue: storedData.sortBy ? dataToExport[0]?.[storedData.sortBy] : undefined, - lastSortValue: storedData.sortBy ? dataToExport[dataToExport.length - 1]?.[storedData.sortBy] : undefined, - }); - } - // 3순위: 테이블 전체 데이터 (API 호출) - else { - console.log("🔄 테이블 전체 데이터 조회 중...", context.tableName); - console.log("📊 정렬 정보:", { - sortBy: context.sortBy, - sortOrder: context.sortOrder, - }); + // 필터 조건은 저장소 또는 context에서 가져오기 + const filterConditions = storedData?.filterConditions || context.filterConditions; + const searchTerm = storedData?.searchTerm || context.searchTerm; + try { - const { dynamicFormApi } = await import("@/lib/api/dynamicForm"); - const response = await dynamicFormApi.getTableData(context.tableName, { + const { entityJoinApi } = await import("@/lib/api/entityJoin"); + + const apiParams = { page: 1, - pageSize: 10000, // 최대 10,000개 행 - sortBy: context.sortBy || "id", // 화면 정렬 또는 기본 정렬 - sortOrder: context.sortOrder || "asc", // 화면 정렬 방향 또는 오름차순 - }); + size: 10000, // 최대 10,000개 + sortBy: context.sortBy || storedData?.sortBy || "id", + sortOrder: (context.sortOrder || storedData?.sortOrder || "asc") as "asc" | "desc", + search: filterConditions, // ✅ 필터 조건 + enableEntityJoin: true, // ✅ Entity 조인 + autoFilter: true, // ✅ company_code 자동 필터링 (멀티테넌시) + }; - console.log("📦 API 응답 구조:", { - response, - responseSuccess: response.success, - responseData: response.data, - responseDataType: typeof response.data, - responseDataIsArray: Array.isArray(response.data), - responseDataLength: Array.isArray(response.data) ? response.data.length : "N/A", - }); - - if (response.success && response.data) { + // 🔒 멀티테넌시 준수: autoFilter로 company_code 자동 적용 + const response = await entityJoinApi.getTableDataWithJoins(context.tableName, apiParams); + + // 🔒 멀티테넌시 확인 + const allData = Array.isArray(response) ? response : response?.data || []; + const companyCodesInData = [...new Set(allData.map((row: any) => row.company_code))]; + + if (companyCodesInData.length > 1) { + console.error("❌ 멀티테넌시 위반! 여러 회사의 데이터가 섞여있습니다:", companyCodesInData); + } + + // entityJoinApi는 EntityJoinResponse 또는 data 배열을 반환 + if (Array.isArray(response)) { + // 배열로 직접 반환된 경우 + dataToExport = response; + } else if (response && 'data' in response) { + // EntityJoinResponse 객체인 경우 dataToExport = response.data; - console.log("✅ 테이블 전체 데이터 조회 완료:", { - count: dataToExport.length, - firstRow: dataToExport[0], - }); } else { - console.error("❌ API 응답에 데이터가 없습니다:", response); + console.error("❌ 예상치 못한 응답 형식:", response); + toast.error("데이터를 가져오는데 실패했습니다."); + return false; } } catch (error) { - console.error("❌ 테이블 데이터 조회 실패:", error); - } + console.error("엑셀 다운로드: 데이터 조회 실패:", error); + toast.error("데이터를 가져오는데 실패했습니다."); + return false; } } - // 4순위: 폼 데이터 + // 폴백: 폼 데이터 else if (context.formData && Object.keys(context.formData).length > 0) { dataToExport = [context.formData]; - console.log("✅ 폼 데이터 사용:", dataToExport); } - - console.log("📊 최종 다운로드 데이터:", { - selectedRowsData: context.selectedRowsData, - selectedRowsLength: context.selectedRowsData?.length, - formData: context.formData, - tableName: context.tableName, - dataToExport, - dataToExportType: typeof dataToExport, - dataToExportIsArray: Array.isArray(dataToExport), - dataToExportLength: Array.isArray(dataToExport) ? dataToExport.length : "N/A", - }); + // 테이블명도 없고 폼 데이터도 없으면 에러 + else { + toast.error("다운로드할 데이터 소스가 없습니다."); + return false; + } // 배열이 아니면 배열로 변환 if (!Array.isArray(dataToExport)) { - console.warn("⚠️ dataToExport가 배열이 아닙니다. 변환 시도:", dataToExport); - - // 객체인 경우 배열로 감싸기 if (typeof dataToExport === "object" && dataToExport !== null) { dataToExport = [dataToExport]; } else { @@ -2110,66 +2032,196 @@ export class ButtonActionExecutor { const sheetName = config.excelSheetName || "Sheet1"; const includeHeaders = config.excelIncludeHeaders !== false; - // 🆕 컬럼 순서 재정렬 (화면에 표시된 순서대로) - let columnOrder: string[] | undefined = context.columnOrder; - - // columnOrder가 없으면 tableDisplayData에서 추출 시도 - if (!columnOrder && context.tableDisplayData && context.tableDisplayData.length > 0) { - columnOrder = Object.keys(context.tableDisplayData[0]); - console.log("📊 tableDisplayData에서 컬럼 순서 추출:", columnOrder); - } - - if (columnOrder && columnOrder.length > 0 && dataToExport.length > 0) { - console.log("🔄 컬럼 순서 재정렬 시작:", { - columnOrder, - originalColumns: Object.keys(dataToExport[0] || {}), - }); - - dataToExport = dataToExport.map((row: any) => { - const reorderedRow: any = {}; - - // 1. columnOrder에 있는 컬럼들을 순서대로 추가 - columnOrder!.forEach((colName: string) => { - if (colName in row) { - reorderedRow[colName] = row[colName]; + // 🎨 화면 레이아웃에서 테이블 리스트 컴포넌트의 컬럼 설정 가져오기 + let visibleColumns: string[] | undefined = undefined; + let columnLabels: Record | undefined = undefined; + + try { + // 화면 레이아웃 데이터 가져오기 (별도 API 사용) + const { apiClient } = await import("@/lib/api/client"); + const layoutResponse = await apiClient.get(`/screen-management/screens/${context.screenId}/layout`); + + if (layoutResponse.data?.success && layoutResponse.data?.data) { + let layoutData = layoutResponse.data.data; + + // components가 문자열이면 파싱 + if (typeof layoutData.components === 'string') { + layoutData.components = JSON.parse(layoutData.components); + } + + // 테이블 리스트 컴포넌트 찾기 + const findTableListComponent = (components: any[]): any => { + if (!Array.isArray(components)) return null; + + for (const comp of components) { + // componentType이 'table-list'인지 확인 + const isTableList = comp.componentType === 'table-list'; + + // componentConfig 안에서 테이블명 확인 + const matchesTable = + comp.componentConfig?.selectedTable === context.tableName || + comp.componentConfig?.tableName === context.tableName; + + if (isTableList && matchesTable) { + return comp; + } + if (comp.children && comp.children.length > 0) { + const found = findTableListComponent(comp.children); + if (found) return found; + } + } + return null; + }; + + const tableListComponent = findTableListComponent(layoutData.components || []); + + if (tableListComponent && tableListComponent.componentConfig?.columns) { + const columns = tableListComponent.componentConfig.columns; + + // visible이 true인 컬럼만 추출 + visibleColumns = columns + .filter((col: any) => col.visible !== false) + .map((col: any) => col.columnName); + + // 🎯 column_labels 테이블에서 실제 라벨 가져오기 + try { + const columnsResponse = await apiClient.get(`/table-management/tables/${context.tableName}/columns`, { + params: { page: 1, size: 9999 } + }); + + if (columnsResponse.data?.success && columnsResponse.data?.data) { + let columnData = columnsResponse.data.data; + + // data가 객체이고 columns 필드가 있으면 추출 + if (columnData.columns && Array.isArray(columnData.columns)) { + columnData = columnData.columns; + } + + if (Array.isArray(columnData)) { + columnLabels = {}; + + // API에서 가져온 라벨로 매핑 + columnData.forEach((colData: any) => { + const colName = colData.column_name || colData.columnName; + // 우선순위: column_label > label > displayName > columnName + const labelValue = colData.column_label || colData.label || colData.displayName || colName; + if (colName && labelValue) { + columnLabels![colName] = labelValue; + } + }); + } + } + } catch (error) { + // 실패 시 컴포넌트 설정의 displayName 사용 + columnLabels = {}; + columns.forEach((col: any) => { + if (col.columnName) { + columnLabels![col.columnName] = col.displayName || col.label || col.columnName; + } + }); + } + } else { + console.warn("⚠️ 화면 레이아웃에서 테이블 리스트 컴포넌트를 찾을 수 없습니다."); + } + } + } catch (error) { + console.error("❌ 화면 레이아웃 조회 실패:", error); } - }); + + + // 🎨 카테고리 값들 조회 (한 번만) + const categoryMap: Record> = {}; + let categoryColumns: string[] = []; + + // 백엔드에서 카테고리 컬럼 정보 가져오기 + if (context.tableName) { + try { + const { getCategoryColumns, getCategoryValues } = await import("@/lib/api/tableCategoryValue"); - // 2. columnOrder에 없는 나머지 컬럼들 추가 (끝에 배치) - Object.keys(row).forEach((key) => { - if (!(key in reorderedRow)) { - reorderedRow[key] = row[key]; + const categoryColumnsResponse = await getCategoryColumns(context.tableName); + + if (categoryColumnsResponse.success && categoryColumnsResponse.data) { + // 백엔드에서 정의된 카테고리 컬럼들 + categoryColumns = categoryColumnsResponse.data.map((col: any) => + col.column_name || col.columnName || col.name + ).filter(Boolean); // undefined 제거 + + // 각 카테고리 컬럼의 값들 조회 + for (const columnName of categoryColumns) { + try { + const valuesResponse = await getCategoryValues(context.tableName, columnName, false); + + if (valuesResponse.success && valuesResponse.data) { + // valueCode → valueLabel 매핑 + categoryMap[columnName] = {}; + valuesResponse.data.forEach((catValue: any) => { + const code = catValue.valueCode || catValue.category_value_id; + const label = catValue.valueLabel || catValue.label || code; + if (code) { + categoryMap[columnName][code] = label; + } + }); + + } + } catch (error) { + console.error(`❌ 카테고리 "${columnName}" 조회 실패:`, error); + } } - }); - - return reorderedRow; - }); - - console.log("✅ 컬럼 순서 재정렬 완료:", { - reorderedColumns: Object.keys(dataToExport[0] || {}), - }); - } else { - console.log("⏭️ 컬럼 순서 재정렬 스킵:", { - hasColumnOrder: !!columnOrder, - columnOrderLength: columnOrder?.length, - hasTableDisplayData: !!context.tableDisplayData, - dataToExportLength: dataToExport.length, - }); + } + } catch (error) { + console.error("❌ 카테고리 정보 조회 실패:", error); + } } - console.log("📥 엑셀 다운로드 실행:", { - fileName, - sheetName, - includeHeaders, - dataCount: dataToExport.length, - firstRow: dataToExport[0], - columnOrder: context.columnOrder, - }); + // 🎨 컬럼 필터링 및 라벨 적용 (항상 실행) + if (visibleColumns && visibleColumns.length > 0 && dataToExport.length > 0) { + dataToExport = dataToExport.map((row: any) => { + const filteredRow: Record = {}; + + visibleColumns.forEach((columnName: string) => { + // __checkbox__ 컬럼은 제외 + if (columnName === "__checkbox__") return; + + if (columnName in row) { + // 라벨 우선 사용, 없으면 컬럼명 사용 + const label = columnLabels?.[columnName] || columnName; + + // 🎯 Entity 조인된 값 우선 사용 + let value = row[columnName]; + + // writer → writer_name 사용 + if (columnName === 'writer' && row['writer_name']) { + value = row['writer_name']; + } + // 다른 엔티티 필드들도 _name 우선 사용 + else if (row[`${columnName}_name`]) { + value = row[`${columnName}_name`]; + } + // 카테고리 타입 필드는 라벨로 변환 (백엔드에서 정의된 컬럼만) + else if (categoryMap[columnName] && typeof value === 'string' && categoryMap[columnName][value]) { + value = categoryMap[columnName][value]; + } + + filteredRow[label] = value; + } + }); + + return filteredRow; + }); + + } + + // 최대 행 수 제한 + const MAX_ROWS = 10000; + if (dataToExport.length > MAX_ROWS) { + toast.warning(`최대 ${MAX_ROWS.toLocaleString()}개 행까지만 다운로드됩니다.`); + dataToExport = dataToExport.slice(0, MAX_ROWS); + } // 엑셀 다운로드 실행 await exportToExcel(dataToExport, fileName, sheetName, includeHeaders); - toast.success(config.successMessage || "엑셀 파일이 다운로드되었습니다."); + toast.success(`${dataToExport.length}개 행이 다운로드되었습니다.`); return true; } catch (error) { console.error("❌ 엑셀 다운로드 실패:", error); diff --git a/frontend/stores/tableDisplayStore.ts b/frontend/stores/tableDisplayStore.ts index 570f41f0..38ea7c6b 100644 --- a/frontend/stores/tableDisplayStore.ts +++ b/frontend/stores/tableDisplayStore.ts @@ -9,6 +9,15 @@ interface TableDisplayState { sortBy: string | null; sortOrder: "asc" | "desc"; tableName: string; + + // 🆕 엑셀 다운로드 개선을 위한 추가 필드 + filterConditions?: Record; // 필터 조건 + searchTerm?: string; // 검색어 + visibleColumns?: string[]; // 화면 표시 컬럼 + columnLabels?: Record; // 컬럼 라벨 + currentPage?: number; // 현재 페이지 + pageSize?: number; // 페이지 크기 + totalItems?: number; // 전체 항목 수 } class TableDisplayStore { @@ -22,13 +31,23 @@ class TableDisplayStore { * @param columnOrder 컬럼 순서 * @param sortBy 정렬 컬럼 * @param sortOrder 정렬 방향 + * @param options 추가 옵션 (필터, 페이징 등) */ setTableData( tableName: string, data: any[], columnOrder: string[], sortBy: string | null, - sortOrder: "asc" | "desc" + sortOrder: "asc" | "desc", + options?: { + filterConditions?: Record; + searchTerm?: string; + visibleColumns?: string[]; + columnLabels?: Record; + currentPage?: number; + pageSize?: number; + totalItems?: number; + } ) { this.state.set(tableName, { data, @@ -36,15 +55,7 @@ class TableDisplayStore { sortBy, sortOrder, tableName, - }); - - console.log("📦 [TableDisplayStore] 데이터 저장:", { - tableName, - dataCount: data.length, - columnOrderLength: columnOrder.length, - sortBy, - sortOrder, - firstRow: data[0], + ...options, }); this.notifyListeners(); @@ -55,15 +66,7 @@ class TableDisplayStore { * @param tableName 테이블명 */ getTableData(tableName: string): TableDisplayState | undefined { - const state = this.state.get(tableName); - - console.log("📤 [TableDisplayStore] 데이터 조회:", { - tableName, - found: !!state, - dataCount: state?.data.length, - }); - - return state; + return this.state.get(tableName); } /** From 2722ebb2180090fdef845e0609766c6e50d5b6f0 Mon Sep 17 00:00:00 2001 From: kjs Date: Mon, 10 Nov 2025 18:15:06 +0900 Subject: [PATCH 30/33] =?UTF-8?q?feat:=20=ED=85=8C=EC=9D=B4=EB=B8=94=20?= =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EB=82=A0=EC=A7=9C=20=ED=98=95?= =?UTF-8?q?=EC=8B=9D=EC=9D=84=20yyyy-mm-dd=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - inputType이 date/datetime인 컬럼 yyyy-mm-dd 형식으로 표시 - format이 'date'인 경우도 동일한 형식 적용 - 생성일, 수정일 등 날짜 컬럼 가독성 개선 변경된 파일: - frontend/lib/registry/components/table-list/TableListComponent.tsx --- .../table-list/TableListComponent.tsx | 21 ++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx index 97819a94..c645cde4 100644 --- a/frontend/lib/registry/components/table-list/TableListComponent.tsx +++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx @@ -1200,6 +1200,22 @@ export const TableListComponent: React.FC = ({ return String(value); } + // 날짜 타입 포맷팅 (yyyy-mm-dd) + if (inputType === "date" || inputType === "datetime") { + if (value) { + try { + const date = new Date(value); + const year = date.getFullYear(); + const month = String(date.getMonth() + 1).padStart(2, '0'); + const day = String(date.getDate()).padStart(2, '0'); + return `${year}-${month}-${day}`; + } catch { + return String(value); + } + } + return "-"; + } + // 숫자 타입 포맷팅 if (inputType === "number" || inputType === "decimal") { if (value !== null && value !== undefined && value !== "") { @@ -1224,7 +1240,10 @@ export const TableListComponent: React.FC = ({ if (value) { try { const date = new Date(value); - return date.toLocaleDateString("ko-KR"); + const year = date.getFullYear(); + const month = String(date.getMonth() + 1).padStart(2, '0'); + const day = String(date.getDate()).padStart(2, '0'); + return `${year}-${month}-${day}`; } catch { return value; } From 59fa54b812e84b015cc6a2fa03631772df46d296 Mon Sep 17 00:00:00 2001 From: kjs Date: Mon, 10 Nov 2025 18:24:51 +0900 Subject: [PATCH 31/33] =?UTF-8?q?style:=20=ED=85=8C=EC=9D=B4=EB=B8=94=20?= =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=ED=8F=B0=ED=8A=B8=20=EB=B0=8F=20?= =?UTF-8?q?=EC=97=AC=EB=B0=B1=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 데이터 행에 font-normal 적용하여 bold 제거 - 헤더는 font-bold 유지 - 데이터 행 상하 여백 축소 (py-2 → py-1.5) - 행 고정 높이 제거하여 컨텐츠에 따라 자동 조정 변경된 파일: - frontend/lib/registry/components/table-list/TableListComponent.tsx --- .../components/table-list/TableListComponent.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx index c645cde4..6e03a9d0 100644 --- a/frontend/lib/registry/components/table-list/TableListComponent.tsx +++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx @@ -2208,7 +2208,7 @@ export const TableListComponent: React.FC = ({ handleRowClick(row, index, e)} > @@ -2237,8 +2237,8 @@ export const TableListComponent: React.FC = ({ = ({ handleRowClick(row, index, e)} > @@ -2303,8 +2303,8 @@ export const TableListComponent: React.FC = ({ Date: Tue, 11 Nov 2025 17:35:24 +0900 Subject: [PATCH 32/33] =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/components/admin/SqlQueryModal.tsx | 77 +++++++++++-------- .../admin/dashboard/DashboardDesigner.tsx | 32 +++++--- 2 files changed, 63 insertions(+), 46 deletions(-) diff --git a/frontend/components/admin/SqlQueryModal.tsx b/frontend/components/admin/SqlQueryModal.tsx index a578afd5..4c01f472 100644 --- a/frontend/components/admin/SqlQueryModal.tsx +++ b/frontend/components/admin/SqlQueryModal.tsx @@ -2,7 +2,13 @@ import { useState, useEffect, ChangeEvent } from "react"; import { Button } from "@/components/ui/button"; -import { ResizableDialog, ResizableDialogContent, ResizableDialogHeader, DialogDescription } from "@/components/ui/resizable-dialog"; +import { + ResizableDialog, + ResizableDialogContent, + ResizableDialogHeader, + ResizableDialogTitle, + ResizableDialogDescription, +} from "@/components/ui/resizable-dialog"; import { Textarea } from "@/components/ui/textarea"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; @@ -119,21 +125,20 @@ export const SqlQueryModal: React.FC = ({ isOpen, onClose, c // SELECT 쿼리만 허용하는 검증 const trimmedQuery = query.trim().toUpperCase(); - if (!trimmedQuery.startsWith('SELECT')) { + if (!trimmedQuery.startsWith("SELECT")) { toast({ title: "보안 오류", - description: "외부 데이터베이스에서는 SELECT 쿼리만 실행할 수 있습니다. INSERT, UPDATE, DELETE는 허용되지 않습니다.", + description: + "외부 데이터베이스에서는 SELECT 쿼리만 실행할 수 있습니다. INSERT, UPDATE, DELETE는 허용되지 않습니다.", variant: "destructive", }); return; } // 위험한 키워드 검사 - const dangerousKeywords = ['INSERT', 'UPDATE', 'DELETE', 'DROP', 'CREATE', 'ALTER', 'TRUNCATE', 'EXEC', 'EXECUTE']; - const hasDangerousKeyword = dangerousKeywords.some(keyword => - trimmedQuery.includes(keyword) - ); - + const dangerousKeywords = ["INSERT", "UPDATE", "DELETE", "DROP", "CREATE", "ALTER", "TRUNCATE", "EXEC", "EXECUTE"]; + const hasDangerousKeyword = dangerousKeywords.some((keyword) => trimmedQuery.includes(keyword)); + if (hasDangerousKeyword) { toast({ title: "보안 오류", @@ -161,13 +166,13 @@ export const SqlQueryModal: React.FC = ({ isOpen, onClose, c variant: "destructive", }); } - } catch (error) { - console.error("쿼리 실행 오류:", error); - toast({ - title: "오류", - description: error instanceof Error ? error.message : "쿼리 실행 중 오류가 발생했습니다.", - variant: "destructive", - }); + } catch (error) { + console.error("쿼리 실행 오류:", error); + toast({ + title: "오류", + description: error instanceof Error ? error.message : "쿼리 실행 중 오류가 발생했습니다.", + variant: "destructive", + }); } finally { setLoading(false); } @@ -182,7 +187,7 @@ export const SqlQueryModal: React.FC = ({ isOpen, onClose, c 데이터베이스에 대해 SQL SELECT 쿼리를 실행하고 결과를 확인할 수 있습니다. - + {/* 쿼리 입력 영역 */}
@@ -220,18 +225,18 @@ export const SqlQueryModal: React.FC = ({ isOpen, onClose, c
{/* 테이블 정보 */} -
+
-

사용 가능한 테이블

+

사용 가능한 테이블

{tables.map((table) => ( -
+
-

{table.table_name}

-
{table.description && ( -

{table.description}

+

{table.description}

)}
))} @@ -254,12 +259,12 @@ export const SqlQueryModal: React.FC = ({ isOpen, onClose, c {/* 선택된 테이블의 컬럼 정보 */} {selectedTable && (
-

테이블 컬럼 정보: {selectedTable}

+

테이블 컬럼 정보: {selectedTable}

{loadingColumns ? ( -
컬럼 정보 로딩 중...
+
컬럼 정보 로딩 중...
) : selectedTableColumns.length > 0 ? (
-
+
@@ -275,7 +280,7 @@ export const SqlQueryModal: React.FC = ({ isOpen, onClose, c {column.column_name} {column.data_type} {column.is_nullable} - {column.column_default || '-'} + {column.column_default || "-"} ))} @@ -283,7 +288,7 @@ export const SqlQueryModal: React.FC = ({ isOpen, onClose, c ) : ( -
컬럼 정보를 불러올 수 없습니다.
+
컬럼 정보를 불러올 수 없습니다.
)} )} @@ -316,20 +321,24 @@ export const SqlQueryModal: React.FC = ({ isOpen, onClose, c {/* 결과 섹션 */}
-
- {loading ? "쿼리 실행 중..." : results.length > 0 ? `${results.length}개의 결과가 있습니다.` : "실행된 쿼리가 없습니다."} +
+ {loading + ? "쿼리 실행 중..." + : results.length > 0 + ? `${results.length}개의 결과가 있습니다.` + : "실행된 쿼리가 없습니다."}
- + {/* 결과 그리드 */} -
+
{results.length > 0 ? ( <> - + {Object.keys(results[0]).map((key) => ( diff --git a/frontend/components/admin/dashboard/DashboardDesigner.tsx b/frontend/components/admin/dashboard/DashboardDesigner.tsx index a9f86027..5560f1cb 100644 --- a/frontend/components/admin/dashboard/DashboardDesigner.tsx +++ b/frontend/components/admin/dashboard/DashboardDesigner.tsx @@ -12,15 +12,21 @@ import { Resolution, RESOLUTIONS, detectScreenResolution } from "./ResolutionSel import { DashboardProvider } from "@/contexts/DashboardContext"; import { useMenu } from "@/contexts/MenuContext"; import { useKeyboardShortcuts } from "./hooks/useKeyboardShortcuts"; -import { ResizableDialog, ResizableDialogContent, ResizableDialogDescription, ResizableDialogHeader, DialogTitle } from "@/components/ui/dialog"; +import { + ResizableDialog, + ResizableDialogContent, + ResizableDialogDescription, + ResizableDialogHeader, + ResizableDialogTitle, +} from "@/components/ui/resizable-dialog"; import { AlertDialog, AlertDialogAction, AlertDialogCancel, - AlertResizableDialogContent, - AlertResizableDialogDescription, + AlertDialogContent, + AlertDialogDescription, AlertDialogFooter, - AlertResizableDialogHeader, + AlertDialogHeader, AlertDialogTitle, } from "@/components/ui/alert-dialog"; import { Button } from "@/components/ui/button"; @@ -610,21 +616,23 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D /> {/* 저장 성공 모달 */} - { setSuccessModalOpen(false); router.push("/admin/dashboard"); }} > - - + +
- 저장 완료 - 대시보드가 성공적으로 저장되었습니다. - + 저장 완료 + + 대시보드가 성공적으로 저장되었습니다. + +
- - + + {/* 초기화 확인 모달 */} From aeef1dc215af85523a53f7fa8de02a149bed3974 Mon Sep 17 00:00:00 2001 From: dohyeons Date: Tue, 11 Nov 2025 17:42:22 +0900 Subject: [PATCH 33/33] =?UTF-8?q?=ED=9A=8C=EC=9B=90=EA=B4=80=EB=A0=A8=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/app/(auth)/register/page.tsx | 51 ----- frontend/components/auth/LoginFooter.tsx | 20 +- frontend/components/auth/RegisterForm.tsx | 259 --------------------- frontend/hooks/useRegister.ts | 262 ---------------------- frontend/lib/api/auth.ts | 28 --- frontend/types/auth.ts | 19 -- 6 files changed, 1 insertion(+), 638 deletions(-) delete mode 100644 frontend/app/(auth)/register/page.tsx delete mode 100644 frontend/components/auth/RegisterForm.tsx delete mode 100644 frontend/hooks/useRegister.ts delete mode 100644 frontend/lib/api/auth.ts diff --git a/frontend/app/(auth)/register/page.tsx b/frontend/app/(auth)/register/page.tsx deleted file mode 100644 index bd098543..00000000 --- a/frontend/app/(auth)/register/page.tsx +++ /dev/null @@ -1,51 +0,0 @@ -"use client"; - -import { useRegister } from "@/hooks/useRegister"; -import { LoginHeader } from "@/components/auth/LoginHeader"; -import { RegisterForm } from "@/components/auth/RegisterForm"; -import { LoginFooter } from "@/components/auth/LoginFooter"; - -/** - * 회원가입 페이지 컴포넌트 - * 비즈니스 로직은 useRegister 훅에서 처리하고, UI 컴포넌트들을 조합하여 구성 - */ -export default function RegisterPage() { - const { - formData, - isLoading, - error, - validationErrors, - showPassword, - showPasswordConfirm, - isFormValid, - handleInputChange, - handleRegister, - togglePasswordVisibility, - togglePasswordConfirmVisibility, - } = useRegister(); - - return ( -
-
- - - - - -
-
- ); -} - diff --git a/frontend/components/auth/LoginFooter.tsx b/frontend/components/auth/LoginFooter.tsx index 42edf9e2..99b5da16 100644 --- a/frontend/components/auth/LoginFooter.tsx +++ b/frontend/components/auth/LoginFooter.tsx @@ -1,29 +1,11 @@ import { UI_CONFIG } from "@/constants/auth"; -import Link from "next/link"; - -interface LoginFooterProps { - showRegisterLink?: boolean; -} /** * 로그인 페이지 푸터 컴포넌트 */ -export function LoginFooter({ showRegisterLink = true }: LoginFooterProps) { +export function LoginFooter() { return (
- {showRegisterLink && ( -
-

- 계정이 없으신가요?{" "} - - 회원가입 - -

-
- )}

{UI_CONFIG.COPYRIGHT}

{UI_CONFIG.POWERED_BY}

diff --git a/frontend/components/auth/RegisterForm.tsx b/frontend/components/auth/RegisterForm.tsx deleted file mode 100644 index 2fd26432..00000000 --- a/frontend/components/auth/RegisterForm.tsx +++ /dev/null @@ -1,259 +0,0 @@ -import { Button } from "@/components/ui/button"; -import { Input } from "@/components/ui/input"; -import { Label } from "@/components/ui/label"; -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; -import { Eye, EyeOff, Loader2, ArrowLeft } from "lucide-react"; -import { RegisterFormData } from "@/types/auth"; -import { ErrorMessage } from "./ErrorMessage"; -import Link from "next/link"; - -interface RegisterFormProps { - formData: RegisterFormData; - isLoading: boolean; - error: string; - validationErrors: Record; - showPassword: boolean; - showPasswordConfirm: boolean; - isFormValid: boolean; - onInputChange: (e: React.ChangeEvent) => void; - onSubmit: (e: React.FormEvent) => void; - onTogglePassword: () => void; - onTogglePasswordConfirm: () => void; -} - -/** - * 회원가입 폼 컴포넌트 - */ -export function RegisterForm({ - formData, - isLoading, - error, - validationErrors, - showPassword, - showPasswordConfirm, - isFormValid, - onInputChange, - onSubmit, - onTogglePassword, - onTogglePasswordConfirm, -}: RegisterFormProps) { - return ( - - - 회원가입 - 새로운 계정을 생성합니다 - - - - -
- {/* 사용자 ID */} -
- - - {validationErrors.userId && ( -

{validationErrors.userId}

- )} -
- - {/* 비밀번호 */} -
- -
- - -
- {validationErrors.password && ( -

{validationErrors.password}

- )} -
- - {/* 비밀번호 확인 */} -
- -
- - -
- {validationErrors.passwordConfirm && ( -

{validationErrors.passwordConfirm}

- )} -
- - {/* 이름 */} -
- - - {validationErrors.userName && ( -

{validationErrors.userName}

- )} -
- - {/* 면허번호 */} -
- - - {validationErrors.licenseNumber && ( -

{validationErrors.licenseNumber}

- )} -

- 운전면허번호를 하이픈(-)을 포함하여 입력해주세요 -

-
- - {/* 차량 번호 */} -
- - - {validationErrors.vehicleNumber && ( -

{validationErrors.vehicleNumber}

- )} -

- 한국 차량 번호 형식으로 입력해주세요 -

-
- - {/* 휴대폰 번호 */} -
- - - {validationErrors.phoneNumber && ( -

{validationErrors.phoneNumber}

- )} -

- 하이픈(-)을 포함하여 입력해주세요 -

-
- - {/* 버튼 그룹 */} -
- - - - -
- - - - ); -} - diff --git a/frontend/hooks/useRegister.ts b/frontend/hooks/useRegister.ts deleted file mode 100644 index 09ec46ad..00000000 --- a/frontend/hooks/useRegister.ts +++ /dev/null @@ -1,262 +0,0 @@ -import { useState, useEffect } from "react"; -import { useRouter } from "next/navigation"; -import { RegisterFormData } from "@/types/auth"; -import { authApi } from "@/lib/api/auth"; -import { useToast } from "@/hooks/use-toast"; - -/** - * 회원가입 비즈니스 로직 훅 - */ -export function useRegister() { - const router = useRouter(); - const { toast } = useToast(); - const [formData, setFormData] = useState({ - userId: "", - password: "", - passwordConfirm: "", - userName: "", - licenseNumber: "", - vehicleNumber: "", - phoneNumber: "", - }); - const [isLoading, setIsLoading] = useState(false); - const [error, setError] = useState(""); - const [validationErrors, setValidationErrors] = useState>({}); - const [showPassword, setShowPassword] = useState(false); - const [showPasswordConfirm, setShowPasswordConfirm] = useState(false); - const [isFormValid, setIsFormValid] = useState(false); - - /** - * 실시간 폼 유효성 검사 및 에러 메시지 업데이트 - */ - useEffect(() => { - const checkFormValidity = () => { - const errors: Record = {}; - - // 사용자 ID 검사 (입력이 있을 때만) - if (formData.userId.length > 0 && formData.userId.length < 2) { - errors.userId = "사용자 ID는 최소 2자 이상이어야 합니다"; - } - - // 비밀번호 검사 (입력이 있을 때만) - if (formData.password.length > 0 && formData.password.length < 6) { - errors.password = "비밀번호는 최소 6자 이상이어야 합니다"; - } - - // 비밀번호 확인 검사 (입력이 있을 때만) - if (formData.passwordConfirm.length > 0 && formData.password !== formData.passwordConfirm) { - errors.passwordConfirm = "비밀번호가 일치하지 않습니다"; - } - - // 이름 검사 (입력이 있을 때만) - if (formData.userName.length > 0 && formData.userName.trim().length < 2) { - errors.userName = "이름은 최소 2자 이상이어야 합니다"; - } - - // 면허번호 검사 (입력이 있을 때만) - if (formData.licenseNumber.length > 0 && !validateLicenseNumber(formData.licenseNumber)) { - errors.licenseNumber = "올바른 면허번호 형식이 아닙니다 (예: 12-34-567890-12)"; - } - - // 차량 번호 검사 (입력이 있을 때만) - if (formData.vehicleNumber.length > 0 && !validateVehicleNumber(formData.vehicleNumber)) { - errors.vehicleNumber = "올바른 차량 번호 형식이 아닙니다 (예: 12가3456, 123가4567)"; - } - - // 휴대폰 번호 검사 (입력이 있을 때만) - if (formData.phoneNumber.length > 0 && !validatePhoneNumber(formData.phoneNumber)) { - errors.phoneNumber = "올바른 휴대폰 번호 형식이 아닙니다 (예: 010-1234-5678)"; - } - - setValidationErrors(errors); - - // 모든 필드가 채워져 있고 에러가 없는지 확인 - const allFieldsFilled = - formData.userId.trim().length >= 2 && - formData.password.length >= 6 && - formData.passwordConfirm.length > 0 && - formData.userName.trim().length >= 2 && - formData.licenseNumber.length > 0 && - formData.vehicleNumber.length > 0 && - formData.phoneNumber.length > 0; - - const isValid = allFieldsFilled && Object.keys(errors).length === 0; - setIsFormValid(isValid); - }; - - checkFormValidity(); - }, [formData]); - - /** - * 입력값 변경 핸들러 - */ - const handleInputChange = (e: React.ChangeEvent) => { - const { name, value } = e.target; - setFormData((prev) => ({ ...prev, [name]: value })); - - // 전역 에러 초기화 - if (error) setError(""); - }; - - /** - * 비밀번호 표시/숨김 토글 - */ - const togglePasswordVisibility = () => { - setShowPassword((prev) => !prev); - }; - - /** - * 비밀번호 확인 표시/숨김 토글 - */ - const togglePasswordConfirmVisibility = () => { - setShowPasswordConfirm((prev) => !prev); - }; - - /** - * 면허번호 유효성 검사 - * 한국 운전면허 형식: 12-34-567890-12 (지역번호-발급년도-일련번호-체크) - */ - const validateLicenseNumber = (licenseNumber: string): boolean => { - // 하이픈 포함 형식: 12-34-567890-12 - const pattern = /^\d{2}-\d{2}-\d{6}-\d{2}$/; - return pattern.test(licenseNumber); - }; - - /** - * 차량 번호 유효성 검사 - * 한국 차량 번호 형식: 12가3456, 123가4567, 서울12가3456 등 - */ - const validateVehicleNumber = (vehicleNumber: string): boolean => { - // 공백 제거 - const cleanNumber = vehicleNumber.replace(/\s/g, ""); - - // 한국 차량 번호 패턴 - // 1. 구형: 12가3456 (2자리 숫자 + 한글 1자 + 4자리 숫자) - // 2. 신형: 123가4567 (3자리 숫자 + 한글 1자 + 4자리 숫자) - // 3. 지역명 포함: 서울12가3456, 서울123가4567 - const patterns = [ - /^\d{2}[가-힣]{1}\d{4}$/, // 12가3456 - /^\d{3}[가-힣]{1}\d{4}$/, // 123가4567 - /^[가-힣]{2}\d{2}[가-힣]{1}\d{4}$/, // 서울12가3456 - /^[가-힣]{2}\d{3}[가-힣]{1}\d{4}$/, // 서울123가4567 - ]; - - return patterns.some(pattern => pattern.test(cleanNumber)); - }; - - /** - * 휴대폰 번호 유효성 검사 - * 형식: 010-1234-5678, 011-123-4567 등 - */ - const validatePhoneNumber = (phoneNumber: string): boolean => { - // 하이픈 포함 형식: 010-1234-5678, 011-123-4567 - const pattern = /^01[016789]-\d{3,4}-\d{4}$/; - return pattern.test(phoneNumber); - }; - - /** - * 폼 유효성 검사 - */ - const validateForm = (): boolean => { - const errors: Record = {}; - - // 사용자 ID 검사 - if (formData.userId.length < 2) { - errors.userId = "사용자 ID는 최소 2자 이상이어야 합니다"; - } - - // 비밀번호 검사 - if (formData.password.length < 6) { - errors.password = "비밀번호는 최소 6자 이상이어야 합니다"; - } - - // 비밀번호 확인 검사 - if (formData.password !== formData.passwordConfirm) { - errors.passwordConfirm = "비밀번호가 일치하지 않습니다"; - } - - // 이름 검사 - if (formData.userName.trim().length < 2) { - errors.userName = "이름은 최소 2자 이상이어야 합니다"; - } - - // 면허번호 검사 - if (!validateLicenseNumber(formData.licenseNumber)) { - errors.licenseNumber = "올바른 면허번호 형식이 아닙니다 (예: 12-34-567890-12)"; - } - - // 차량 번호 검사 - if (!validateVehicleNumber(formData.vehicleNumber)) { - errors.vehicleNumber = "올바른 차량 번호 형식이 아닙니다 (예: 12가3456, 123가4567)"; - } - - // 휴대폰 번호 검사 - if (!validatePhoneNumber(formData.phoneNumber)) { - errors.phoneNumber = "올바른 휴대폰 번호 형식이 아닙니다 (예: 010-1234-5678)"; - } - - setValidationErrors(errors); - return Object.keys(errors).length === 0; - }; - - /** - * 회원가입 핸들러 - */ - const handleRegister = async (e: React.FormEvent) => { - e.preventDefault(); - - // 유효성 검사 - if (!validateForm()) { - return; - } - - setIsLoading(true); - setError(""); - - try { - const response = await authApi.register({ - userId: formData.userId, - password: formData.password, - userName: formData.userName, - licenseNumber: formData.licenseNumber, - vehicleNumber: formData.vehicleNumber.replace(/\s/g, ""), // 공백 제거 - phoneNumber: formData.phoneNumber, - }); - - if (response.success) { - // 회원가입 성공 - toast 알림 표시 - toast({ - title: "회원가입 완료", - description: "회원가입이 성공적으로 완료되었습니다. 로그인 페이지로 이동합니다.", - }); - - // 로그인 페이지로 이동 - setTimeout(() => { - router.push("/login"); - }, 1500); - } else { - setError(response.message || "회원가입에 실패했습니다"); - } - } catch (err: any) { - console.error("회원가입 오류:", err); - setError(err.message || "회원가입 중 오류가 발생했습니다"); - } finally { - setIsLoading(false); - } - }; - - return { - formData, - isLoading, - error, - validationErrors, - showPassword, - showPasswordConfirm, - isFormValid, - handleInputChange, - handleRegister, - togglePasswordVisibility, - togglePasswordConfirmVisibility, - }; -} - diff --git a/frontend/lib/api/auth.ts b/frontend/lib/api/auth.ts deleted file mode 100644 index 119514bc..00000000 --- a/frontend/lib/api/auth.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { RegisterFormData, RegisterResponse } from "@/types/auth"; - -/** - * 인증 관련 API (임시 mock) - */ -export const authApi = { - /** - * 회원가입 (임시 구현) - */ - async register(data: Omit): Promise { - // TODO: 백엔드 API 연동 필요 - console.log("회원가입 요청:", data); - - // 임시로 성공 응답 반환 - return new Promise((resolve) => { - setTimeout(() => { - resolve({ - success: true, - message: "회원가입이 완료되었습니다", - data: { - userId: data.userId, - }, - }); - }, 1000); - }); - }, -}; - diff --git a/frontend/types/auth.ts b/frontend/types/auth.ts index bc7f4af1..cd8e65b6 100644 --- a/frontend/types/auth.ts +++ b/frontend/types/auth.ts @@ -22,22 +22,3 @@ export interface AuthStatus { isLoggedIn: boolean; isAdmin?: boolean; } - -export interface RegisterFormData { - userId: string; - password: string; - passwordConfirm: string; - userName: string; - licenseNumber: string; - vehicleNumber: string; - phoneNumber: string; -} - -export interface RegisterResponse { - success: boolean; - message?: string; - data?: { - userId: string; - }; - errorCode?: string; -}