From 8c0572e0ac1b9a72efe9ceb223d43f7f3d02174e Mon Sep 17 00:00:00 2001 From: kjs Date: Thu, 22 Jan 2026 10:54:46 +0900 Subject: [PATCH] =?UTF-8?q?=EB=94=94=EB=B2=84=EA=B7=B8=20=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=20=EC=A0=9C=EA=B1=B0=20=EB=B0=8F=20=EB=B2=84=ED=8A=BC?= =?UTF-8?q?=20=EA=B5=AC=EC=84=B1=20=ED=8C=A8=EB=84=90=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - ScreenDesigner 컴포넌트에서 불필요한 디버그 로그를 제거하여 코드 가독성을 향상시켰습니다. - ButtonConfigPanel에서 actionType을 로컬 상태로 관리하도록 개선하여, 버튼 액션 설정의 일관성을 높였습니다. - RepeatContainerComponent에서 섹션별 폼 데이터 관리 기능을 추가하여, 각 반복 아이템의 독립적인 폼 데이터 처리가 가능해졌습니다. 이로 인해 코드의 효율성과 유지보수성이 향상되었습니다. --- frontend/components/screen/ScreenDesigner.tsx | 74 ---------- .../config-panels/ButtonConfigPanel.tsx | 50 +++---- .../screen/panels/UnifiedPropertiesPanel.tsx | 10 +- .../RepeatContainerComponent.tsx | 131 +++++++++++++++++- 4 files changed, 149 insertions(+), 116 deletions(-) diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx index 410ed46e..c10e9bff 100644 --- a/frontend/components/screen/ScreenDesigner.tsx +++ b/frontend/components/screen/ScreenDesigner.tsx @@ -3329,14 +3329,6 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD }); } - if (newComponent.type === "group") { - console.log("🔓 그룹 컴포넌트는 격자 스냅 제외:", { - type: newComponent.type, - position: newComponent.position, - size: newComponent.size, - }); - } - const newLayout = { ...layout, components: [...layout.components, newComponent], @@ -3508,27 +3500,6 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD componentsToMove = [...componentsToMove, ...additionalComponents]; } - // console.log("드래그 시작:", component.id, "이동할 컴포넌트 수:", componentsToMove.length); - console.log("마우스 위치 (줌 보정):", { - zoomLevel, - clientX: event.clientX, - clientY: event.clientY, - rectLeft: rect.left, - rectTop: rect.top, - mouseRaw: { x: event.clientX - rect.left, y: event.clientY - rect.top }, - mouseZoomCorrected: { x: relativeMouseX, y: relativeMouseY }, - componentX: component.position.x, - componentY: component.position.y, - grabOffsetX: relativeMouseX - component.position.x, - grabOffsetY: relativeMouseY - component.position.y, - }); - - console.log("🚀 드래그 시작:", { - componentId: component.id, - componentType: component.type, - initialPosition: { x: component.position.x, y: component.position.y }, - }); - setDragState({ isDragging: true, draggedComponent: component, // 주 드래그 컴포넌트 (마우스 위치 기준) @@ -3581,27 +3552,11 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD }; // 드래그 상태 업데이트 - console.log("🔥 ScreenDesigner updateDragPosition (줌 보정):", { - zoomLevel, - draggedComponentId: dragState.draggedComponent.id, - mouseRaw: { x: event.clientX - rect.left, y: event.clientY - rect.top }, - mouseZoomCorrected: { x: relativeMouseX, y: relativeMouseY }, - oldPosition: dragState.currentPosition, - newPosition: newPosition, - }); - setDragState((prev) => { const newState = { ...prev, currentPosition: { ...newPosition }, // 새로운 객체 생성 }; - console.log("🔄 ScreenDesigner dragState 업데이트:", { - prevPosition: prev.currentPosition, - newPosition: newState.currentPosition, - stateChanged: - prev.currentPosition.x !== newState.currentPosition.x || - prev.currentPosition.y !== newState.currentPosition.y, - }); return newState; }); @@ -3646,13 +3601,6 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD }, ); - console.log("🎯 격자 스냅 적용됨:", { - componentType: draggedComponent?.type, - resolution: `${screenResolution.width}x${screenResolution.height}`, - originalPosition: dragState.currentPosition, - snappedPosition: finalPosition, - columnWidth: currentGridInfo.columnWidth, - }); } // 스냅으로 인한 추가 이동 거리 계산 @@ -3717,28 +3665,6 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD height: snappedHeight, }; - console.log("🎯 드래그 종료 시 그룹 내부 컴포넌트 격자 스냅 (패딩 고려):", { - componentId: comp.id, - parentId: comp.parentId, - beforeSnap: { - x: originalComponent.position.x + totalDeltaX, - y: originalComponent.position.y + totalDeltaY, - }, - calculation: { - effectiveX, - effectiveY, - columnIndex, - rowIndex, - columnWidth, - fullColumnWidth, - widthInColumns, - gap: gap || 16, - padding, - }, - afterSnap: newPosition, - afterSizeSnap: newSize, - }); - return { ...comp, position: newPosition as Position, diff --git a/frontend/components/screen/config-panels/ButtonConfigPanel.tsx b/frontend/components/screen/config-panels/ButtonConfigPanel.tsx index fd35428a..85d59391 100644 --- a/frontend/components/screen/config-panels/ButtonConfigPanel.tsx +++ b/frontend/components/screen/config-panels/ButtonConfigPanel.tsx @@ -65,6 +65,7 @@ export const ButtonConfigPanel: React.FC = ({ // 로컬 상태 관리 (실시간 입력 반영) const [localInputs, setLocalInputs] = useState({ text: config.text !== undefined ? config.text : "버튼", + actionType: String(config.action?.type || "save"), modalTitle: String(config.action?.modalTitle || ""), modalDescription: String(config.action?.modalDescription || ""), editModalTitle: String(config.action?.editModalTitle || ""), @@ -135,13 +136,8 @@ export const ButtonConfigPanel: React.FC = ({ // "flow-widget" 체크 const isFlow = compType === "flow-widget" || compType?.toLowerCase().includes("flow"); - - if (isFlow) { - console.log("✅ 플로우 위젯 발견!", { id: comp.id, componentType: comp.componentType }); - } return isFlow; }); - console.log("🎯 플로우 위젯 존재 여부:", found); return found; }, [allComponents]); @@ -152,6 +148,7 @@ export const ButtonConfigPanel: React.FC = ({ setLocalInputs({ text: latestConfig.text !== undefined ? latestConfig.text : "버튼", + actionType: String(latestAction.type || "save"), modalTitle: String(latestAction.modalTitle || ""), modalDescription: String(latestAction.modalDescription || ""), editModalTitle: String(latestAction.editModalTitle || ""), @@ -168,7 +165,7 @@ export const ButtonConfigPanel: React.FC = ({ setTitleBlocks([]); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [component.id]); + }, [component.id, component.componentConfig?.action?.type]); // 🆕 제목 블록 핸들러 const addTextBlock = () => { @@ -251,7 +248,6 @@ export const ButtonConfigPanel: React.FC = ({ label: table.displayName || table.tableName, })); setAvailableTables(tables); - console.log("✅ 전체 테이블 목록 로드 성공:", tables.length); } } catch (error) { console.error("테이블 목록 로드 실패:", error); @@ -777,14 +773,6 @@ export const ButtonConfigPanel: React.FC = ({ ); }; - // console.log("🔧 config-panels/ButtonConfigPanel 렌더링:", { - // component, - // config, - // action: config.action, - // actionType: config.action?.type, - // screensCount: screens.length, - // }); - return (
@@ -804,9 +792,11 @@ export const ButtonConfigPanel: React.FC = ({