디버그 로그 제거 및 버튼 구성 패널 개선

- ScreenDesigner 컴포넌트에서 불필요한 디버그 로그를 제거하여 코드 가독성을 향상시켰습니다.
- ButtonConfigPanel에서 actionType을 로컬 상태로 관리하도록 개선하여, 버튼 액션 설정의 일관성을 높였습니다.
- RepeatContainerComponent에서 섹션별 폼 데이터 관리 기능을 추가하여, 각 반복 아이템의 독립적인 폼 데이터 처리가 가능해졌습니다.

이로 인해 코드의 효율성과 유지보수성이 향상되었습니다.
This commit is contained in:
kjs
2026-01-22 10:54:46 +09:00
parent 8344486e56
commit 8c0572e0ac
4 changed files with 149 additions and 116 deletions
@@ -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,