kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

컴포넌트가 화면 벗어나는 문제 수정

This commit is contained in:
kjs 2025-10-23 15:14:45 +09:00
parent 70d2c96c80
commit 3172f772ba
2 changed files with 21 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/components/screen/RealtimePreviewDynamic.tsx
View File

@ -183,7 +183,7 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
const selectionStyle = isSelected
? {
outline: "2px solid rgb(59, 130, 246)",
outlineOffset: "2px",
outlineOffset: "0px", // 스크롤 방지를 위해 0으로 설정
zIndex: 20,
}
: {};

23
frontend/components/screen/ScreenDesigner.tsx
View File

@ -2906,9 +2906,18 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
const relativeMouseX = event.clientX - rect.left;
const relativeMouseY = event.clientY - rect.top;
// 컴포넌트 크기 가져오기
const draggedComp = layout.components.find((c) => c.id === dragState.draggedComponent.id);
const componentWidth = draggedComp?.size?.width || 100;
const componentHeight = draggedComp?.size?.height || 40;
// 경계 제한 적용
const rawX = relativeMouseX - dragState.grabOffset.x;
const rawY = relativeMouseY - dragState.grabOffset.y;
const newPosition = {
x: relativeMouseX - dragState.grabOffset.x,
y: relativeMouseY - dragState.grabOffset.y,
x: Math.max(0, Math.min(rawX, screenResolution.width - componentWidth)),
y: Math.max(0, Math.min(rawY, screenResolution.height - componentHeight)),
z: (dragState.draggedComponent.position as Position).z || 1,
};
@ -3002,6 +3011,14 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
z: originalComponent.position.z || 1,
};
// 캔버스 경계 제한 (컴포넌트가 화면 밖으로 나가지 않도록)
const componentWidth = comp.size?.width || 100;
const componentHeight = comp.size?.height || 40;
// 최소 위치: 0, 최대 위치: 캔버스 크기 - 컴포넌트 크기
newPosition.x = Math.max(0, Math.min(newPosition.x, screenResolution.width - componentWidth));
newPosition.y = Math.max(0, Math.min(newPosition.y, screenResolution.height - componentHeight));
// 그룹 내부 컴포넌트인 경우 패딩을 고려한 격자 스냅 적용
if (comp.parentId && layout.gridSettings?.snapToGrid && gridInfo) {
const { columnWidth } = gridInfo;
@ -4090,7 +4107,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
>
<div
ref={canvasRef}
className="bg-background relative h-full w-full overflow-auto"
className="bg-background relative h-full w-full overflow-visible"
onClick={(e) => {
if (e.target === e.currentTarget && !selectionDrag.wasSelecting && !isPanMode) {
setSelectedComponent(null);