frontend/components/screen/RealtimePreviewDynamic.tsx

@@ -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,
       }
     : {};

frontend/components/screen/ScreenDesigner.tsx

@@ -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);