feat(pop-designer): 반응형 그리드 시스템 고도화

- 브레이크포인트 재설계: 실제 기기 CSS 뷰포트 기반 (479/767/1023px) - 자동 줄바꿈 시스템: col > maxCol 컴포넌트 자동 재배치, 검토 필요 알림 - Gap 프리셋: 좁게/보통/넓게 3단계 간격 조절 - 셀 크기 강제 고정: gridTemplateRows + overflow-hidden - 세로 자동 확장: 동적 캔버스 높이 계산 (최소 600px) - 뷰어 모드 일관성: detectGridMode() 직접 사용 - 컴포넌트 ID 충돌 방지: 로드 시 idCounter 자동 설정 - popdocs 문서 정비: ADR 2건, 레거시 문서 archive 이동 Co-authored-by: Cursor <cursoragent@cursor.com>
feat(pop-designer): 반응형 레이아웃 시스템 구현
2026-02-06 15:30:57 +09:00 · 2026-02-05 19:16:23 +09:00
29 changed files with 3620 additions and 593 deletions
--- a/backend-node/src/controllers/screenGroupController.ts
+++ b/backend-node/src/controllers/screenGroupController.ts
@ -2701,4 +2701,3 @@ export const ensurePopRootGroup = async (req: AuthenticatedRequest, res: Respons
    res.status(500).json({ success: false, message: "POP 루트 그룹 확보에 실패했습니다.", error: error.message });
  }
 };
-
--- a/frontend/app/(pop)/pop/screens/[screenId]/page.tsx
+++ b/frontend/app/(pop)/pop/screens/[screenId]/page.tsx
@ -20,6 +20,9 @@ import {
  GridMode,
  isV5Layout,
  createEmptyPopLayoutV5,
+  GAP_PRESETS,
+  GRID_BREAKPOINTS,
+  detectGridMode,
 } from "@/components/pop/designer/types/pop-layout";
 import PopRenderer from "@/components/pop/designer/renderers/PopRenderer";
 import { 
@ -27,15 +30,15 @@ import {
  type DeviceType,
 } from "@/hooks/useDeviceOrientation";

-// 디바이스별 크기 (프리뷰 모드용)
-const DEVICE_SIZES: Record<DeviceType, Record<"landscape" | "portrait", { width: number; height: number; label: string }>> = {
+// 디바이스별 크기 (너비만, 높이는 콘텐츠 기반)
+const DEVICE_SIZES: Record<DeviceType, Record<"landscape" | "portrait", { width: number; label: string }>> = {
  mobile: {
-    landscape: { width: 667, height: 375, label: "모바일 가로" },
-    portrait: { width: 375, height: 667, label: "모바일 세로" },
+    landscape: { width: 600, label: "모바일 가로" },
+    portrait: { width: 375, label: "모바일 세로" },
  },
  tablet: {
-    landscape: { width: 1024, height: 768, label: "태블릿 가로" },
-    portrait: { width: 768, height: 1024, label: "태블릿 세로" },
+    landscape: { width: 1024, label: "태블릿 가로" },
+    portrait: { width: 820, label: "태블릿 세로" },
  },
 };

@ -69,7 +72,6 @@ function PopScreenViewPage() {
  // 현재 모드 정보
  const deviceType = mode.device;
  const isLandscape = mode.isLandscape;
-  const currentModeKey = getModeKey(deviceType, isLandscape);

  const { user } = useAuth();

@ -81,6 +83,13 @@ function PopScreenViewPage() {
  // 뷰포트 너비 (클라이언트 사이드에서만 계산, 최대 1366px)
  const [viewportWidth, setViewportWidth] = useState(1024); // 기본값: 태블릿 가로
  
+  // 모드 결정: 
+  // - 프리뷰 모드: 수동 선택한 device/orientation 사용
+  // - 일반 모드: 화면 너비 기준으로 자동 결정 (GRID_BREAKPOINTS와 일치)
+  const currentModeKey = isPreviewMode 
+    ? getModeKey(deviceType, isLandscape)
+    : detectGridMode(viewportWidth);
+  
  useEffect(() => {
    const updateViewportWidth = () => {
      setViewportWidth(Math.min(window.innerWidth, 1366));
@ -261,25 +270,38 @@ function PopScreenViewPage() {
              )}

              <div
-                className={`bg-white transition-all duration-300 ${isPreviewMode ? "shadow-2xl rounded-3xl overflow-hidden border-8 border-gray-800" : "w-full h-full"}`}
+                className={`bg-white transition-all duration-300 ${isPreviewMode ? "shadow-2xl rounded-3xl overflow-auto border-8 border-gray-800" : "w-full"}`}
                style={isPreviewMode ? {
                  width: currentDevice.width,
-                  height: currentDevice.height,
+                  maxHeight: "80vh",
                  flexShrink: 0,
                } : undefined}
              >
                {/* v5 그리드 렌더러 */}
                {hasComponents ? (
                  <div 
-                    className="mx-auto h-full"
+                    className="mx-auto min-h-full"
                    style={{ maxWidth: 1366 }}
                  >
-                    <PopRenderer
-                      layout={layout}
-                      viewportWidth={isPreviewMode ? currentDevice.width : viewportWidth}
-                      currentMode={currentModeKey}
-                      isDesignMode={false}
-                    />
+                    {(() => {
+                      // Gap 프리셋 계산
+                      const currentGapPreset = layout.settings.gapPreset || "medium";
+                      const gapMultiplier = GAP_PRESETS[currentGapPreset]?.multiplier || 1.0;
+                      const breakpoint = GRID_BREAKPOINTS[currentModeKey];
+                      const adjustedGap = Math.round(breakpoint.gap * gapMultiplier);
+                      const adjustedPadding = Math.max(8, Math.round(breakpoint.padding * gapMultiplier));
+                      
+                      return (
+                        <PopRenderer
+                          layout={layout}
+                          viewportWidth={isPreviewMode ? currentDevice.width : viewportWidth}
+                          currentMode={currentModeKey}
+                          isDesignMode={false}
+                          overrideGap={adjustedGap}
+                          overridePadding={adjustedPadding}
+                        />
+                      );
+                    })()}
                  </div>
                ) : (
                  // 빈 화면
--- a/frontend/components/pop/designer/PopCanvas.tsx
+++ b/frontend/components/pop/designer/PopCanvas.tsx
@ -9,32 +9,78 @@ import {
  PopComponentType,
  PopGridPosition,
  GridMode,
+  GapPreset,
+  GAP_PRESETS,
  GRID_BREAKPOINTS,
  DEFAULT_COMPONENT_GRID_SIZE,
 } from "./types/pop-layout";
-import { ZoomIn, ZoomOut, Maximize2, Smartphone, Tablet } from "lucide-react";
+import { ZoomIn, ZoomOut, Maximize2, Smartphone, Tablet, Lock, RotateCcw, AlertTriangle, EyeOff } from "lucide-react";
+import { useDrag } from "react-dnd";
 import { Button } from "@/components/ui/button";
+import { 
+  Select, 
+  SelectContent, 
+  SelectItem, 
+  SelectTrigger, 
+  SelectValue 
+} from "@/components/ui/select";
+import { toast } from "sonner";
 import PopRenderer from "./renderers/PopRenderer";
-import { mouseToGridPosition, findNextEmptyPosition } from "./utils/gridUtils";
+import { findNextEmptyPosition, isOverlapping, getAllEffectivePositions, needsReview } from "./utils/gridUtils";
+import { DND_ITEM_TYPES } from "./constants";

-// DnD 타입 상수 (인라인)
-const DND_ITEM_TYPES = {
-  COMPONENT: "component",
-} as const;
+/**
+ * 캔버스 내 상대 좌표 → 그리드 좌표 변환
+ * @param relX 캔버스 내 X 좌표 (패딩 포함)
+ * @param relY 캔버스 내 Y 좌표 (패딩 포함)
+ */
+function calcGridPosition(
+  relX: number,
+  relY: number,
+  canvasWidth: number,
+  columns: number,
+  rowHeight: number,
+  gap: number,
+  padding: number
+): { col: number; row: number } {
+  // 패딩 제외한 좌표
+  const x = relX - padding;
+  const y = relY - padding;
+  
+  // 사용 가능한 너비 (패딩과 gap 제외)
+  const availableWidth = canvasWidth - padding * 2 - gap * (columns - 1);
+  const colWidth = availableWidth / columns;
+  
+  // 셀+gap 단위로 계산
+  const cellStride = colWidth + gap;
+  const rowStride = rowHeight + gap;
+  
+  // 그리드 좌표 (1부터 시작)
+  const col = Math.max(1, Math.min(columns, Math.floor(x / cellStride) + 1));
+  const row = Math.max(1, Math.floor(y / rowStride) + 1);
+  
+  return { col, row };
+}

+// 드래그 아이템 타입 정의
 interface DragItemComponent {
  type: typeof DND_ITEM_TYPES.COMPONENT;
  componentType: PopComponentType;
 }

+interface DragItemMoveComponent {
+  componentId: string;
+  originalPosition: PopGridPosition;
+}
+
 // ========================================
-// 프리셋 해상도 (4개 모드)
+// 프리셋 해상도 (4개 모드) - 너비만 정의
 // ========================================
 const VIEWPORT_PRESETS = [
-  { id: "mobile_portrait", label: "모바일 세로", shortLabel: "모바일↕ (4칸)", width: 375, height: 667, icon: Smartphone },
-  { id: "mobile_landscape", label: "모바일 가로", shortLabel: "모바일↔ (6칸)", width: 667, height: 375, icon: Smartphone },
-  { id: "tablet_portrait", label: "태블릿 세로", shortLabel: "태블릿↕ (8칸)", width: 768, height: 1024, icon: Tablet },
-  { id: "tablet_landscape", label: "태블릿 가로", shortLabel: "태블릿↔ (12칸)", width: 1024, height: 768, icon: Tablet },
+  { id: "mobile_portrait", label: "모바일 세로", shortLabel: "모바일↕ (4칸)", width: 375, icon: Smartphone },
+  { id: "mobile_landscape", label: "모바일 가로", shortLabel: "모바일↔ (6칸)", width: 600, icon: Smartphone },
+  { id: "tablet_portrait", label: "태블릿 세로", shortLabel: "태블릿↕ (8칸)", width: 820, icon: Tablet },
+  { id: "tablet_landscape", label: "태블릿 가로", shortLabel: "태블릿↔ (12칸)", width: 1024, icon: Tablet },
 ] as const;

 type ViewportPreset = GridMode;
@ -42,6 +88,10 @@ type ViewportPreset = GridMode;
 // 기본 프리셋 (태블릿 가로)
 const DEFAULT_PRESET: ViewportPreset = "tablet_landscape";

+// 캔버스 세로 자동 확장 설정
+const MIN_CANVAS_HEIGHT = 600; // 최소 캔버스 높이 (px)
+const CANVAS_EXTRA_ROWS = 3;   // 여유 행 수
+
 // ========================================
 // Props
 // ========================================
@ -56,6 +106,12 @@ interface PopCanvasProps {
  onDeleteComponent: (componentId: string) => void;
  onMoveComponent?: (componentId: string, newPosition: PopGridPosition) => void;
  onResizeComponent?: (componentId: string, newPosition: PopGridPosition) => void;
+  onResizeEnd?: (componentId: string) => void;
+  onHideComponent?: (componentId: string) => void;
+  onUnhideComponent?: (componentId: string) => void;
+  onLockLayout?: () => void;
+  onResetOverride?: (mode: GridMode) => void;
+  onChangeGapPreset?: (preset: GapPreset) => void;
 }

 // ========================================
@ -73,13 +129,18 @@ export default function PopCanvas({
  onDeleteComponent,
  onMoveComponent,
  onResizeComponent,
+  onResizeEnd,
+  onHideComponent,
+  onUnhideComponent,
+  onLockLayout,
+  onResetOverride,
+  onChangeGapPreset,
 }: PopCanvasProps) {
  // 줌 상태
  const [canvasScale, setCanvasScale] = useState(0.8);
  
-  // 커스텀 뷰포트 크기
+  // 커스텀 뷰포트 너비
  const [customWidth, setCustomWidth] = useState(1024);
-  const [customHeight, setCustomHeight] = useState(768);
  
  // 그리드 가이드 표시 여부
  const [showGridGuide, setShowGridGuide] = useState(true);
@ -90,23 +151,53 @@ export default function PopCanvas({
  const [isSpacePressed, setIsSpacePressed] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);
  const canvasRef = useRef<HTMLDivElement>(null);
-  
-  // 드래그 상태
-  const [isDraggingComponent, setIsDraggingComponent] = useState(false);
-  const [draggedComponentId, setDraggedComponentId] = useState<string | null>(null);
-  const [dragStartPos, setDragStartPos] = useState<{ x: number; y: number } | null>(null);
-  const [dragPreviewPos, setDragPreviewPos] = useState<PopGridPosition | null>(null);

  // 현재 뷰포트 해상도
  const currentPreset = VIEWPORT_PRESETS.find((p) => p.id === currentMode)!;
  const breakpoint = GRID_BREAKPOINTS[currentMode];
  
-  // 그리드 라벨 계산
+  // Gap 프리셋 적용
+  const currentGapPreset = layout.settings.gapPreset || "medium";
+  const gapMultiplier = GAP_PRESETS[currentGapPreset]?.multiplier || 1.0;
+  const adjustedGap = Math.round(breakpoint.gap * gapMultiplier);
+  const adjustedPadding = Math.max(8, Math.round(breakpoint.padding * gapMultiplier));
+  
+  // 숨김 컴포넌트 ID 목록
+  const hiddenComponentIds = layout.overrides?.[currentMode]?.hidden || [];
+  
+  // 동적 캔버스 높이 계산 (컴포넌트 배치 기반)
+  const dynamicCanvasHeight = useMemo(() => {
+    const visibleComps = Object.values(layout.components).filter(
+      comp => !hiddenComponentIds.includes(comp.id)
+    );
+    
+    if (visibleComps.length === 0) return MIN_CANVAS_HEIGHT;
+    
+    // 최대 row + rowSpan 찾기
+    const maxRowEnd = visibleComps.reduce((max, comp) => {
+      const overridePos = layout.overrides?.[currentMode]?.positions?.[comp.id];
+      const pos = overridePos ? { ...comp.position, ...overridePos } : comp.position;
+      const rowEnd = pos.row + pos.rowSpan;
+      return Math.max(max, rowEnd);
+    }, 1);
+    
+    // 높이 계산: (행 수 + 여유) * (행높이 + gap) + padding
+    const totalRows = maxRowEnd + CANVAS_EXTRA_ROWS;
+    const height = totalRows * (breakpoint.rowHeight + adjustedGap) + adjustedPadding * 2;
+    
+    return Math.max(MIN_CANVAS_HEIGHT, height);
+  }, [layout.components, layout.overrides, currentMode, hiddenComponentIds, breakpoint.rowHeight, adjustedGap, adjustedPadding]);
+  
+  // 그리드 라벨 계산 (동적 행 수)
  const gridLabels = useMemo(() => {
    const columnLabels = Array.from({ length: breakpoint.columns }, (_, i) => i + 1);
-    const rowLabels = Array.from({ length: 20 }, (_, i) => i + 1);
+    
+    // 동적 행 수 계산
+    const rowCount = Math.ceil(dynamicCanvasHeight / (breakpoint.rowHeight + adjustedGap));
+    const rowLabels = Array.from({ length: rowCount }, (_, i) => i + 1);
+    
    return { columnLabels, rowLabels };
-  }, [breakpoint.columns]);
+  }, [breakpoint.columns, breakpoint.rowHeight, dynamicCanvasHeight, adjustedGap]);

  // 줌 컨트롤
  const handleZoomIn = () => setCanvasScale((prev) => Math.min(1.5, prev + 0.1));
@ -118,7 +209,7 @@ export default function PopCanvas({
    onModeChange(mode);
    const presetData = VIEWPORT_PRESETS.find((p) => p.id === mode)!;
    setCustomWidth(presetData.width);
-    setCustomHeight(presetData.height);
+    // customHeight는 dynamicCanvasHeight로 자동 계산됨
  };

  // 패닝
@ -167,56 +258,184 @@ export default function PopCanvas({
    };
  }, [isSpacePressed]);

-  // 컴포넌트 드롭 (팔레트에서)
+  // 통합 드롭 핸들러 (팔레트에서 추가 + 컴포넌트 이동)
  const [{ isOver, canDrop }, drop] = useDrop(
    () => ({
-      accept: DND_ITEM_TYPES.COMPONENT,
-      drop: (item: DragItemComponent, monitor) => {
+      accept: [DND_ITEM_TYPES.COMPONENT, DND_ITEM_TYPES.MOVE_COMPONENT],
+      drop: (item: DragItemComponent | DragItemMoveComponent, monitor) => {
        if (!canvasRef.current) return;
        
-        const offset = monitor.getClientOffset();
-        if (!offset) return;
-        
        const canvasRect = canvasRef.current.getBoundingClientRect();
+        const itemType = monitor.getItemType();
        
-        // 마우스 위치 → 그리드 좌표 변환
-        const gridPos = mouseToGridPosition(
-          offset.x,
-          offset.y,
-          canvasRect,
-          breakpoint.columns,
-          breakpoint.rowHeight,
-          breakpoint.gap,
-          breakpoint.padding
-        );
+        // 팔레트에서 새 컴포넌트 추가 - 마우스 위치 기준
+        if (itemType === DND_ITEM_TYPES.COMPONENT) {
+          const offset = monitor.getClientOffset();
+          if (!offset) return;
+          
+          // 캔버스 내 상대 좌표 (스케일 보정)
+          // canvasRect는 scale 적용된 크기이므로, 상대 좌표를 scale로 나눠야 실제 좌표
+          const relX = (offset.x - canvasRect.left) / canvasScale;
+          const relY = (offset.y - canvasRect.top) / canvasScale;
+          
+          // 그리드 좌표 계산
+          const gridPos = calcGridPosition(
+            relX,
+            relY,
+            customWidth,
+            breakpoint.columns,
+            breakpoint.rowHeight,
+            adjustedGap,
+            adjustedPadding
+          );
+          
+          const dragItem = item as DragItemComponent;
+          const defaultSize = DEFAULT_COMPONENT_GRID_SIZE[dragItem.componentType];
+          
+          const candidatePosition: PopGridPosition = {
+            col: gridPos.col,
+            row: gridPos.row,
+            colSpan: defaultSize.colSpan,
+            rowSpan: defaultSize.rowSpan,
+          };
+          
+          // 현재 모드에서의 유효 위치들로 중첩 검사
+          const effectivePositions = getAllEffectivePositions(layout, currentMode);
+          const existingPositions = Array.from(effectivePositions.values());
+          
+          const hasOverlap = existingPositions.some(pos => 
+            isOverlapping(candidatePosition, pos)
+          );
+          
+          let finalPosition: PopGridPosition;
+          
+          if (hasOverlap) {
+            finalPosition = findNextEmptyPosition(
+              existingPositions,
+              defaultSize.colSpan,
+              defaultSize.rowSpan,
+              breakpoint.columns
+            );
+            toast.info("겹치는 위치입니다. 빈 위치로 자동 배치됩니다.");
+          } else {
+            finalPosition = candidatePosition;
+          }
+          
+          onDropComponent(dragItem.componentType, finalPosition);
+        }
        
-        // 컴포넌트 기본 크기
-        const defaultSize = DEFAULT_COMPONENT_GRID_SIZE[item.componentType];
-        
-        // 다음 빈 위치 찾기
-        const existingPositions = Object.values(layout.components).map(c => c.position);
-        const position = findNextEmptyPosition(
-          existingPositions,
-          defaultSize.colSpan,
-          defaultSize.rowSpan,
-          breakpoint.columns
-        );
-        
-        // 컴포넌트 추가
-        onDropComponent(item.componentType, position);
+        // 기존 컴포넌트 이동 - 마우스 위치 기준
+        if (itemType === DND_ITEM_TYPES.MOVE_COMPONENT) {
+          const offset = monitor.getClientOffset();
+          if (!offset) return;
+          
+          // 캔버스 내 상대 좌표 (스케일 보정)
+          const relX = (offset.x - canvasRect.left) / canvasScale;
+          const relY = (offset.y - canvasRect.top) / canvasScale;
+          
+          const gridPos = calcGridPosition(
+            relX,
+            relY,
+            customWidth,
+            breakpoint.columns,
+            breakpoint.rowHeight,
+            adjustedGap,
+            adjustedPadding
+          );
+          
+          const dragItem = item as DragItemMoveComponent & { fromHidden?: boolean };
+          
+          // 현재 모드에서의 유효 위치들 가져오기
+          const effectivePositions = getAllEffectivePositions(layout, currentMode);
+          
+          // 이동 중인 컴포넌트의 현재 유효 위치에서 colSpan/rowSpan 가져오기
+          // 검토 필요(ReviewPanel에서 클릭)나 숨김 컴포넌트는 effectivePositions에 없으므로 원본 사용
+          const currentEffectivePos = effectivePositions.get(dragItem.componentId);
+          const componentData = layout.components[dragItem.componentId];
+          
+          if (!currentEffectivePos && !componentData) return;
+          
+          const sourcePosition = currentEffectivePos || componentData.position;
+          
+          // colSpan이 현재 모드의 columns를 초과하면 제한
+          const adjustedColSpan = Math.min(sourcePosition.colSpan, breakpoint.columns);
+          
+          // 드롭 위치 + 크기가 범위를 초과하면 드롭 위치를 자동 조정
+          let adjustedCol = gridPos.col;
+          if (adjustedCol + adjustedColSpan - 1 > breakpoint.columns) {
+            adjustedCol = Math.max(1, breakpoint.columns - adjustedColSpan + 1);
+          }
+          
+          const newPosition: PopGridPosition = {
+            col: adjustedCol,
+            row: gridPos.row,
+            colSpan: adjustedColSpan,
+            rowSpan: sourcePosition.rowSpan,
+          };
+          
+          // 자기 자신 제외한 다른 컴포넌트들의 유효 위치와 겹침 체크
+          const hasOverlap = Array.from(effectivePositions.entries()).some(([id, pos]) => {
+            if (id === dragItem.componentId) return false; // 자기 자신 제외
+            return isOverlapping(newPosition, pos);
+          });
+          
+          if (hasOverlap) {
+            toast.error("이 위치로 이동할 수 없습니다 (다른 컴포넌트와 겹침)");
+            return;
+          }
+          
+          // 이동 처리 (숨김 컴포넌트의 경우 handleMoveComponent에서 숨김 해제도 함께 처리됨)
+          onMoveComponent?.(dragItem.componentId, newPosition);
+          
+          // 숨김 패널에서 드래그한 경우 안내 메시지
+          if (dragItem.fromHidden) {
+            toast.info("컴포넌트가 다시 표시됩니다");
+          }
+        }
      },
      collect: (monitor) => ({
        isOver: monitor.isOver(),
        canDrop: monitor.canDrop(),
      }),
    }),
-    [onDropComponent, breakpoint, layout.components]
+    [onDropComponent, onMoveComponent, onUnhideComponent, breakpoint, layout, currentMode, canvasScale, customWidth, adjustedGap, adjustedPadding]
  );

  drop(canvasRef);

  // 빈 상태 체크
  const isEmpty = Object.keys(layout.components).length === 0;
+  
+  // 숨김 처리된 컴포넌트 객체 목록 (hiddenComponentIds는 라인 166에서 정의됨)
+  const hiddenComponents = useMemo(() => {
+    return hiddenComponentIds
+      .map(id => layout.components[id])
+      .filter(Boolean);
+  }, [hiddenComponentIds, layout.components]);
+  
+  // 표시되는 컴포넌트 목록 (숨김 제외)
+  const visibleComponents = useMemo(() => {
+    return Object.values(layout.components).filter(
+      comp => !hiddenComponentIds.includes(comp.id)
+    );
+  }, [layout.components, hiddenComponentIds]);
+  
+  // 검토 필요 컴포넌트 목록
+  const reviewComponents = useMemo(() => {
+    return visibleComponents.filter(comp => {
+      const hasOverride = !!layout.overrides?.[currentMode]?.positions?.[comp.id];
+      return needsReview(currentMode, hasOverride);
+    });
+  }, [visibleComponents, layout.overrides, currentMode]);
+  
+  // 검토 패널 표시 여부 (12칸 모드가 아니고, 검토 필요 컴포넌트가 있을 때)
+  const showReviewPanel = currentMode !== "tablet_landscape" && reviewComponents.length > 0;
+  
+  // 12칸 모드가 아닐 때만 패널 표시
+  // 숨김 패널: 숨김 컴포넌트가 있거나, 그리드에 컴포넌트가 있을 때 드롭 영역으로 표시
+  const hasGridComponents = Object.keys(layout.components).length > 0;
+  const showHiddenPanel = currentMode !== "tablet_landscape" && (hiddenComponents.length > 0 || hasGridComponents);
+  const showRightPanel = showReviewPanel || showHiddenPanel;

  return (
    <div className="flex h-full flex-col bg-gray-50">
@ -250,9 +469,60 @@ export default function PopCanvas({

        <div className="h-4 w-px bg-gray-300" />

+        {/* 고정/되돌리기 버튼 (기본 모드 아닐 때만 표시) */}
+        {currentMode !== DEFAULT_PRESET && (
+          <>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onLockLayout}
+              className="h-8 gap-1 text-xs"
+            >
+              <Lock className="h-3 w-3" />
+              고정
+            </Button>
+            
+            {layout.overrides?.[currentMode] && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => onResetOverride?.(currentMode)}
+                className="h-8 gap-1 text-xs"
+              >
+                <RotateCcw className="h-3 w-3" />
+                자동으로 되돌리기
+              </Button>
+            )}
+          </>
+        )}
+
+        <div className="h-4 w-px bg-gray-300" />
+
        {/* 해상도 표시 */}
        <div className="text-xs text-muted-foreground">
-          {customWidth} × {customHeight}
+          {customWidth} × {Math.round(dynamicCanvasHeight)}
+        </div>
+        
+        <div className="h-4 w-px bg-gray-300" />
+        
+        {/* Gap 프리셋 선택 */}
+        <div className="flex items-center gap-2">
+          <span className="text-xs text-muted-foreground">간격:</span>
+          <Select
+            value={currentGapPreset}
+            onValueChange={(value) => onChangeGapPreset?.(value as GapPreset)}
+          >
+            <SelectTrigger className="h-8 w-20 text-xs">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {(Object.keys(GAP_PRESETS) as GapPreset[]).map((preset) => (
+                <SelectItem key={preset} value={preset} className="text-xs">
+                  {GAP_PRESETS[preset].label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
        </div>

        <div className="flex-1" />
@ -318,102 +588,139 @@ export default function PopCanvas({
        onWheel={handleWheel}
      >
        <div
-          className="relative mx-auto my-8 origin-top"
+          className="relative mx-auto my-8 origin-top overflow-visible flex gap-4"
          style={{
-            width: `${customWidth + 32}px`, // 라벨 공간 추가
-            minHeight: `${customHeight + 32}px`,
+            width: showRightPanel 
+              ? `${customWidth + 32 + 220}px`  // 오른쪽 패널 공간 추가
+              : `${customWidth + 32}px`,
+            minHeight: `${dynamicCanvasHeight + 32}px`,
            transform: `scale(${canvasScale})`,
          }}
        >
-          {/* 그리드 라벨 영역 */}
-          {showGridGuide && (
-            <>
-              {/* 열 라벨 (상단) */}
-              <div 
-                className="flex absolute top-0 left-8"
-                style={{
-                  gap: `${breakpoint.gap}px`,
-                  paddingLeft: `${breakpoint.padding}px`,
-                }}
-              >
-                {gridLabels.columnLabels.map((num) => (
-                  <div
-                    key={`col-${num}`}
-                    className="flex items-center justify-center text-xs font-semibold text-blue-500"
-                    style={{
-                      width: `calc((${customWidth}px - ${breakpoint.padding * 2}px - ${breakpoint.gap * (breakpoint.columns - 1)}px) / ${breakpoint.columns})`,
-                      height: "24px",
-                    }}
-                  >
-                    {num}
-                  </div>
-                ))}
-              </div>
-              
-              {/* 행 라벨 (좌측) */}
-              <div 
-                className="flex flex-col absolute top-8 left-0"
-                style={{
-                  gap: `${breakpoint.gap}px`,
-                  paddingTop: `${breakpoint.padding}px`,
-                }}
-              >
-                {gridLabels.rowLabels.map((num) => (
-                  <div
-                    key={`row-${num}`}
-                    className="flex items-center justify-center text-xs font-semibold text-blue-500"
-                    style={{
-                      width: "24px",
-                      height: `${breakpoint.rowHeight}px`,
-                    }}
-                  >
-                    {num}
-                  </div>
-                ))}
-              </div>
-            </>
-          )}
-          
-          {/* 디바이스 스크린 */}
-          <div
-            ref={canvasRef}
-            className={cn(
-              "relative rounded-lg border-2 bg-white shadow-xl overflow-hidden",
-              canDrop && isOver && "ring-4 ring-primary/20"
+          {/* 그리드 + 라벨 영역 */}
+          <div className="relative">
+            {/* 그리드 라벨 영역 */}
+            {showGridGuide && (
+              <>
+                {/* 열 라벨 (상단) */}
+                <div 
+                  className="flex absolute top-0 left-8"
+                  style={{
+                    gap: `${adjustedGap}px`,
+                    paddingLeft: `${adjustedPadding}px`,
+                  }}
+                >
+                  {gridLabels.columnLabels.map((num) => (
+                    <div
+                      key={`col-${num}`}
+                      className="flex items-center justify-center text-xs font-semibold text-blue-500"
+                      style={{
+                        width: `calc((${customWidth}px - ${adjustedPadding * 2}px - ${adjustedGap * (breakpoint.columns - 1)}px) / ${breakpoint.columns})`,
+                        height: "24px",
+                      }}
+                    >
+                      {num}
+                    </div>
+                  ))}
+                </div>
+                
+                {/* 행 라벨 (좌측) */}
+                <div 
+                  className="flex flex-col absolute top-8 left-0"
+                  style={{
+                    gap: `${adjustedGap}px`,
+                    paddingTop: `${adjustedPadding}px`,
+                  }}
+                >
+                  {gridLabels.rowLabels.map((num) => (
+                    <div
+                      key={`row-${num}`}
+                      className="flex items-center justify-center text-xs font-semibold text-blue-500"
+                      style={{
+                        width: "24px",
+                        height: `${breakpoint.rowHeight}px`,
+                      }}
+                    >
+                      {num}
+                    </div>
+                  ))}
+                </div>
+              </>
            )}
-            style={{
-              width: `${customWidth}px`,
-              minHeight: `${customHeight}px`,
-              marginLeft: "32px",
-              marginTop: "32px",
-            }}
-          >
-            {isEmpty ? (
-              // 빈 상태
-              <div className="flex h-full items-center justify-center p-8">
-                <div className="text-center">
-                  <div className="mb-2 text-sm font-medium text-gray-500">
-                    컴포넌트를 드래그하여 배치하세요
-                  </div>
-                  <div className="text-xs text-gray-400">
-                    {breakpoint.label} - {breakpoint.columns}칸 그리드
+            
+            {/* 디바이스 스크린 */}
+            <div
+              ref={canvasRef}
+              className={cn(
+                "relative rounded-lg border-2 bg-white shadow-xl overflow-visible",
+                canDrop && isOver && "ring-4 ring-primary/20"
+              )}
+              style={{
+                width: `${customWidth}px`,
+                minHeight: `${dynamicCanvasHeight}px`,
+                marginLeft: "32px",
+                marginTop: "32px",
+              }}
+            >
+              {isEmpty ? (
+                // 빈 상태
+                <div className="flex h-full items-center justify-center p-8">
+                  <div className="text-center">
+                    <div className="mb-2 text-sm font-medium text-gray-500">
+                      컴포넌트를 드래그하여 배치하세요
+                    </div>
+                    <div className="text-xs text-gray-400">
+                      {breakpoint.label} - {breakpoint.columns}칸 그리드
+                    </div>
                  </div>
                </div>
-              </div>
-            ) : (
-              // 그리드 렌더러
-              <PopRenderer
-                layout={layout}
-                viewportWidth={customWidth}
-                currentMode={currentMode}
-                isDesignMode={true}
-                showGridGuide={showGridGuide}
-                selectedComponentId={selectedComponentId}
-                onComponentClick={onSelectComponent}
-                onBackgroundClick={() => onSelectComponent(null)}
-              />
-            )}
+              ) : (
+                // 그리드 렌더러
+                <PopRenderer
+                  layout={layout}
+                  viewportWidth={customWidth}
+                  currentMode={currentMode}
+                  isDesignMode={true}
+                  showGridGuide={showGridGuide}
+                  selectedComponentId={selectedComponentId}
+                  onComponentClick={onSelectComponent}
+                  onBackgroundClick={() => onSelectComponent(null)}
+                  onComponentMove={onMoveComponent}
+                  onComponentResize={onResizeComponent}
+                  onComponentResizeEnd={onResizeEnd}
+                  overrideGap={adjustedGap}
+                  overridePadding={adjustedPadding}
+                />
+              )}
+            </div>
          </div>
+          
+          {/* 오른쪽 패널 영역 (초과 컴포넌트 + 숨김 컴포넌트) */}
+          {showRightPanel && (
+            <div
+              className="flex flex-col gap-3"
+              style={{ marginTop: "32px" }}
+            >
+              {/* 검토 필요 패널 */}
+              {showReviewPanel && (
+                <ReviewPanel
+                  components={reviewComponents}
+                  selectedComponentId={selectedComponentId}
+                  onSelectComponent={onSelectComponent}
+                />
+              )}
+              
+              {/* 숨김 컴포넌트 패널 */}
+              {showHiddenPanel && (
+                <HiddenPanel
+                  components={hiddenComponents}
+                  selectedComponentId={selectedComponentId}
+                  onSelectComponent={onSelectComponent}
+                  onHideComponent={onHideComponent}
+                />
+              )}
+            </div>
+          )}
        </div>
      </div>

@ -429,3 +736,236 @@ export default function PopCanvas({
    </div>
  );
 }
+
+// ========================================
+// 검토 필요 영역 (오른쪽 패널)
+// ========================================
+
+interface ReviewPanelProps {
+  components: PopComponentDefinitionV5[];
+  selectedComponentId: string | null;
+  onSelectComponent: (id: string | null) => void;
+}
+
+function ReviewPanel({
+  components,
+  selectedComponentId,
+  onSelectComponent,
+}: ReviewPanelProps) {
+  return (
+    <div 
+      className="flex flex-col rounded-lg border-2 border-dashed border-blue-300 bg-blue-50/50"
+      style={{
+        width: "200px",
+        maxHeight: "300px",
+      }}
+    >
+      {/* 헤더 */}
+      <div className="flex items-center gap-2 border-b border-blue-200 bg-blue-100/50 px-3 py-2 rounded-t-lg">
+        <AlertTriangle className="h-4 w-4 text-blue-600" />
+        <span className="text-xs font-semibold text-blue-700">
+          검토 필요 ({components.length}개)
+        </span>
+      </div>
+      
+      {/* 컴포넌트 목록 */}
+      <div className="flex-1 overflow-auto p-2 space-y-2">
+        {components.map((comp) => (
+          <ReviewItem
+            key={comp.id}
+            component={comp}
+            isSelected={selectedComponentId === comp.id}
+            onSelect={() => onSelectComponent(comp.id)}
+          />
+        ))}
+      </div>
+      
+      {/* 안내 문구 */}
+      <div className="border-t border-blue-200 px-3 py-2 bg-blue-50/80 rounded-b-lg">
+        <p className="text-[10px] text-blue-600 leading-tight">
+          자동 배치됨. 클릭하여 확인 후 편집 가능
+        </p>
+      </div>
+    </div>
+  );
+}
+
+// ========================================
+// 검토 필요 아이템 (ReviewPanel 내부)
+// ========================================
+
+interface ReviewItemProps {
+  component: PopComponentDefinitionV5;
+  isSelected: boolean;
+  onSelect: () => void;
+}
+
+function ReviewItem({
+  component,
+  isSelected,
+  onSelect,
+}: ReviewItemProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-1 rounded-md border-2 p-2 cursor-pointer transition-all",
+        isSelected
+          ? "border-blue-500 bg-blue-100 shadow-sm"
+          : "border-blue-200 bg-white hover:border-blue-400 hover:bg-blue-50"
+      )}
+      onClick={(e) => {
+        e.stopPropagation();
+        onSelect();
+      }}
+    >
+      <span className="text-xs font-medium text-blue-800 line-clamp-1">
+        {component.label || component.id}
+      </span>
+      <span className="text-[10px] text-blue-600 bg-blue-50 rounded px-1.5 py-0.5 self-start">
+        자동 배치됨
+      </span>
+    </div>
+  );
+}
+
+// ========================================
+// 숨김 컴포넌트 영역 (오른쪽 패널)
+// ========================================
+
+interface HiddenPanelProps {
+  components: PopComponentDefinitionV5[];
+  selectedComponentId: string | null;
+  onSelectComponent: (id: string | null) => void;
+  onHideComponent?: (componentId: string) => void;
+}
+
+function HiddenPanel({
+  components,
+  selectedComponentId,
+  onSelectComponent,
+  onHideComponent,
+}: HiddenPanelProps) {
+  // 그리드에서 컴포넌트를 드래그하여 이 패널에 드롭하면 숨김 처리
+  const [{ isOver, canDrop }, drop] = useDrop(
+    () => ({
+      accept: DND_ITEM_TYPES.MOVE_COMPONENT,
+      drop: (item: { componentId: string; fromHidden?: boolean }) => {
+        // 이미 숨김 패널에서 온 아이템은 무시
+        if (item.fromHidden) return;
+        
+        // 숨김 처리
+        onHideComponent?.(item.componentId);
+        toast.info("컴포넌트가 숨김 처리되었습니다");
+      },
+      canDrop: (item: { componentId: string; fromHidden?: boolean }) => {
+        // 숨김 패널에서 온 아이템은 드롭 불가
+        return !item.fromHidden;
+      },
+      collect: (monitor) => ({
+        isOver: monitor.isOver(),
+        canDrop: monitor.canDrop(),
+      }),
+    }),
+    [onHideComponent]
+  );
+
+  return (
+    <div 
+      ref={drop}
+      className={cn(
+        "flex flex-col rounded-lg border-2 border-dashed bg-gray-100/50 transition-colors",
+        isOver && canDrop
+          ? "border-gray-600 bg-gray-200/70"
+          : "border-gray-400"
+      )}
+      style={{
+        width: "200px",
+        maxHeight: "300px",
+      }}
+    >
+      {/* 헤더 */}
+      <div className="flex items-center gap-2 border-b border-gray-300 bg-gray-200/50 px-3 py-2 rounded-t-lg">
+        <EyeOff className="h-4 w-4 text-gray-600" />
+        <span className="text-xs font-semibold text-gray-700">
+          숨김 ({components.length}개)
+        </span>
+      </div>
+      
+      {/* 컴포넌트 목록 */}
+      <div className="flex-1 overflow-auto p-2 space-y-2">
+        {components.map((comp) => (
+          <HiddenItem
+            key={comp.id}
+            component={comp}
+            isSelected={selectedComponentId === comp.id}
+            onSelect={() => onSelectComponent(comp.id)}
+          />
+        ))}
+      </div>
+      
+      {/* 안내 문구 */}
+      <div className="border-t border-gray-300 px-3 py-2 bg-gray-100/80 rounded-b-lg">
+        <p className="text-[10px] text-gray-600 leading-tight">
+          그리드로 드래그하여 다시 표시
+        </p>
+      </div>
+    </div>
+  );
+}
+
+
+// ========================================
+// 숨김 컴포넌트 아이템 (드래그 가능)
+// ========================================
+
+interface HiddenItemProps {
+  component: PopComponentDefinitionV5;
+  isSelected: boolean;
+  onSelect: () => void;
+}
+
+function HiddenItem({
+  component,
+  isSelected,
+  onSelect,
+}: HiddenItemProps) {
+  const [{ isDragging }, drag] = useDrag(
+    () => ({
+      type: DND_ITEM_TYPES.MOVE_COMPONENT,
+      item: { 
+        componentId: component.id, 
+        originalPosition: component.position,
+        fromHidden: true, // 숨김 패널에서 왔음을 표시
+      },
+      collect: (monitor) => ({
+        isDragging: monitor.isDragging(),
+      }),
+    }),
+    [component.id, component.position]
+  );
+
+  return (
+    <div
+      ref={drag}
+      className={cn(
+        "rounded-md border-2 bg-white p-2 cursor-move transition-all opacity-60",
+        isSelected
+          ? "border-primary ring-2 ring-primary/30"
+          : "border-gray-400 hover:border-gray-500",
+        isDragging && "opacity-30"
+      )}
+      onClick={onSelect}
+    >
+      {/* 컴포넌트 이름 */}
+      <div className="flex items-center gap-1 text-xs font-medium text-gray-600 truncate">
+        <EyeOff className="h-3 w-3" />
+        {component.label || component.type}
+      </div>
+      
+      {/* 원본 위치 정보 */}
+      <div className="text-[10px] text-gray-500 mt-1">
+        원본: {component.position.col}열, {component.position.row}행
+      </div>
+    </div>
+  );
+}
--- a/frontend/components/pop/designer/PopDesigner.tsx
+++ b/frontend/components/pop/designer/PopDesigner.tsx
@ -21,10 +21,13 @@ import {
  PopComponentDefinitionV5,
  PopGridPosition,
  GridMode,
+  GapPreset,
  createEmptyPopLayoutV5,
  isV5Layout,
  addComponentToV5Layout,
+  GRID_BREAKPOINTS,
 } from "./types/pop-layout";
+import { getAllEffectivePositions } from "./utils/gridUtils";
 import { screenApi } from "@/lib/api/screen";
 import { ScreenDefinition } from "@/types/screen";

@ -130,10 +133,27 @@ export default function PopDesigner({
        
        if (loadedLayout && isV5Layout(loadedLayout) && Object.keys(loadedLayout.components).length > 0) {
          // v5 레이아웃 로드
+          // 기존 레이아웃 호환성: gapPreset이 없으면 기본값 추가
+          if (!loadedLayout.settings.gapPreset) {
+            loadedLayout.settings.gapPreset = "medium";
+          }
          setLayout(loadedLayout);
          setHistory([loadedLayout]);
          setHistoryIndex(0);
-          console.log(`POP 레이아웃 로드: ${Object.keys(loadedLayout.components).length}개 컴포넌트`);
+          
+          // 기존 컴포넌트 ID에서 최대 숫자 추출하여 idCounter 설정 (중복 방지)
+          const existingIds = Object.keys(loadedLayout.components);
+          const maxId = existingIds.reduce((max, id) => {
+            const match = id.match(/comp_(\d+)/);
+            if (match) {
+              const num = parseInt(match[1], 10);
+              return num > max ? num : max;
+            }
+            return max;
+          }, 0);
+          setIdCounter(maxId + 1);
+          
+          console.log(`POP 레이아웃 로드: ${existingIds.length}개 컴포넌트, idCounter: ${maxId + 1}`);
        } else {
          // 새 화면 또는 빈 레이아웃
          const emptyLayout = createEmptyPopLayoutV5();
@ -231,6 +251,223 @@ export default function PopDesigner({
    [layout, saveToHistory]
  );

+  const handleMoveComponent = useCallback(
+    (componentId: string, newPosition: PopGridPosition) => {
+      const component = layout.components[componentId];
+      if (!component) return;
+      
+      // 기본 모드(tablet_landscape, 12칸)인 경우: 원본 position 직접 수정
+      if (currentMode === "tablet_landscape") {
+        const newLayout = {
+          ...layout,
+          components: {
+            ...layout.components,
+            [componentId]: {
+              ...component,
+              position: newPosition,
+            },
+          },
+        };
+        setLayout(newLayout);
+        saveToHistory(newLayout);
+        setHasChanges(true);
+      } else {
+        // 다른 모드인 경우: 오버라이드에 저장
+        // 숨김 상태였던 컴포넌트를 이동하면 숨김 해제도 함께 처리
+        const currentHidden = layout.overrides?.[currentMode]?.hidden || [];
+        const isHidden = currentHidden.includes(componentId);
+        const newHidden = isHidden 
+          ? currentHidden.filter(id => id !== componentId)
+          : currentHidden;
+        
+        const newLayout = {
+          ...layout,
+          overrides: {
+            ...layout.overrides,
+            [currentMode]: {
+              ...layout.overrides?.[currentMode],
+              positions: {
+                ...layout.overrides?.[currentMode]?.positions,
+                [componentId]: newPosition,
+              },
+              // 숨김 배열 업데이트 (빈 배열이면 undefined로)
+              hidden: newHidden.length > 0 ? newHidden : undefined,
+            },
+          },
+        };
+        setLayout(newLayout);
+        saveToHistory(newLayout);
+        setHasChanges(true);
+      }
+    },
+    [layout, saveToHistory, currentMode]
+  );
+
+  const handleResizeComponent = useCallback(
+    (componentId: string, newPosition: PopGridPosition) => {
+      const component = layout.components[componentId];
+      if (!component) return;
+      
+      // 기본 모드(tablet_landscape, 12칸)인 경우: 원본 position 직접 수정
+      if (currentMode === "tablet_landscape") {
+        const newLayout = {
+          ...layout,
+          components: {
+            ...layout.components,
+            [componentId]: {
+              ...component,
+              position: newPosition,
+            },
+          },
+        };
+        setLayout(newLayout);
+        // 리사이즈는 드래그 중 계속 호출되므로 히스토리는 마우스업 시에만 저장
+        // 현재는 간단히 매번 저장 (최적화 가능)
+        setHasChanges(true);
+      } else {
+        // 다른 모드인 경우: 오버라이드에 저장
+        const newLayout = {
+          ...layout,
+          overrides: {
+            ...layout.overrides,
+            [currentMode]: {
+              ...layout.overrides?.[currentMode],
+              positions: {
+                ...layout.overrides?.[currentMode]?.positions,
+                [componentId]: newPosition,
+              },
+            },
+          },
+        };
+        setLayout(newLayout);
+        setHasChanges(true);
+      }
+    },
+    [layout, currentMode]
+  );
+
+  const handleResizeEnd = useCallback(
+    (componentId: string) => {
+      // 리사이즈 완료 시 현재 레이아웃을 히스토리에 저장
+      saveToHistory(layout);
+    },
+    [layout, saveToHistory]
+  );
+
+  // ========================================
+  // Gap 프리셋 관리
+  // ========================================
+  
+  const handleChangeGapPreset = useCallback((preset: GapPreset) => {
+    const newLayout = {
+      ...layout,
+      settings: {
+        ...layout.settings,
+        gapPreset: preset,
+      },
+    };
+    setLayout(newLayout);
+    saveToHistory(newLayout);
+    setHasChanges(true);
+  }, [layout, saveToHistory]);
+
+  // ========================================
+  // 모드별 오버라이드 관리
+  // ========================================
+  
+  const handleLockLayout = useCallback(() => {
+    // 현재 화면에 보이는 유효 위치들을 저장 (오버라이드 또는 자동 재배치 위치)
+    const effectivePositions = getAllEffectivePositions(layout, currentMode);
+    
+    const positionsToSave: Record<string, PopGridPosition> = {};
+    effectivePositions.forEach((position, componentId) => {
+      positionsToSave[componentId] = position;
+    });
+    
+    const newLayout = {
+      ...layout,
+      overrides: {
+        ...layout.overrides,
+        [currentMode]: {
+          ...layout.overrides?.[currentMode],
+          positions: positionsToSave,
+        },
+      },
+    };
+    setLayout(newLayout);
+    saveToHistory(newLayout);
+    setHasChanges(true);
+    toast.success("현재 배치가 고정되었습니다");
+  }, [layout, currentMode, saveToHistory]);
+
+  const handleResetOverride = useCallback((mode: GridMode) => {
+    const newOverrides = { ...layout.overrides };
+    delete newOverrides[mode];
+    
+    const newLayout = {
+      ...layout,
+      overrides: Object.keys(newOverrides).length > 0 ? newOverrides : undefined,
+    };
+    setLayout(newLayout);
+    saveToHistory(newLayout);
+    setHasChanges(true);
+    toast.success("자동 배치로 되돌렸습니다");
+  }, [layout, saveToHistory]);
+
+  // ========================================
+  // 숨김 관리
+  // ========================================
+  
+  const handleHideComponent = useCallback((componentId: string) => {
+    // 12칸 모드에서는 숨기기 불가
+    if (currentMode === "tablet_landscape") return;
+    
+    const currentHidden = layout.overrides?.[currentMode]?.hidden || [];
+    
+    // 이미 숨겨져 있으면 무시
+    if (currentHidden.includes(componentId)) return;
+    
+    const newHidden = [...currentHidden, componentId];
+    
+    const newLayout = {
+      ...layout,
+      overrides: {
+        ...layout.overrides,
+        [currentMode]: {
+          ...layout.overrides?.[currentMode],
+          hidden: newHidden,
+        },
+      },
+    };
+    setLayout(newLayout);
+    saveToHistory(newLayout);
+    setHasChanges(true);
+    setSelectedComponentId(null);
+  }, [layout, currentMode, saveToHistory]);
+
+  const handleUnhideComponent = useCallback((componentId: string) => {
+    const currentHidden = layout.overrides?.[currentMode]?.hidden || [];
+    
+    // 숨겨져 있지 않으면 무시
+    if (!currentHidden.includes(componentId)) return;
+    
+    const newHidden = currentHidden.filter(id => id !== componentId);
+    
+    const newLayout = {
+      ...layout,
+      overrides: {
+        ...layout.overrides,
+        [currentMode]: {
+          ...layout.overrides?.[currentMode],
+          hidden: newHidden.length > 0 ? newHidden : undefined,
+        },
+      },
+    };
+    setLayout(newLayout);
+    saveToHistory(newLayout);
+    setHasChanges(true);
+  }, [layout, currentMode, saveToHistory]);
+
  // ========================================
  // 뒤로가기
  // ========================================
@ -285,11 +522,18 @@ export default function PopDesigner({
        handleSave();
        return;
      }
+      
+      // H키: 선택된 컴포넌트 숨김 (12칸 모드가 아닐 때만)
+      if (key === "h" && !isCtrlOrCmd && selectedComponentId) {
+        e.preventDefault();
+        handleHideComponent(selectedComponentId);
+        return;
+      }
    };

    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [selectedComponentId, handleDeleteComponent, canUndo, canRedo, undo, redo, handleSave]);
+  }, [selectedComponentId, handleDeleteComponent, handleHideComponent, canUndo, canRedo, undo, redo, handleSave]);

  // ========================================
  // 로딩
@ -382,6 +626,14 @@ export default function PopDesigner({
              onDropComponent={handleDropComponent}
              onUpdateComponent={handleUpdateComponent}
              onDeleteComponent={handleDeleteComponent}
+              onMoveComponent={handleMoveComponent}
+              onResizeComponent={handleResizeComponent}
+              onResizeEnd={handleResizeEnd}
+              onHideComponent={handleHideComponent}
+              onUnhideComponent={handleUnhideComponent}
+              onLockLayout={handleLockLayout}
+              onResetOverride={handleResetOverride}
+              onChangeGapPreset={handleChangeGapPreset}
            />
          </ResizablePanel>

--- a/frontend/components/pop/designer/constants/dnd.ts
+++ b/frontend/components/pop/designer/constants/dnd.ts
@ -0,0 +1,14 @@
+/**
+ * DnD(Drag and Drop) 관련 상수
+ */
+
+// DnD 아이템 타입
+export const DND_ITEM_TYPES = {
+  /** 팔레트에서 새 컴포넌트 드래그 */
+  COMPONENT: "POP_COMPONENT",
+  /** 캔버스 내 기존 컴포넌트 이동 */
+  MOVE_COMPONENT: "POP_MOVE_COMPONENT",
+} as const;
+
+// 타입 추출
+export type DndItemType = typeof DND_ITEM_TYPES[keyof typeof DND_ITEM_TYPES];
--- a/frontend/components/pop/designer/constants/index.ts
+++ b/frontend/components/pop/designer/constants/index.ts
@ -0,0 +1 @@
+export * from "./dnd";
--- a/frontend/components/pop/designer/panels/ComponentEditorPanel.tsx
+++ b/frontend/components/pop/designer/panels/ComponentEditorPanel.tsx
@ -66,7 +66,7 @@ export default function ComponentEditorPanel({
  // 선택된 컴포넌트 없음
  if (!component) {
    return (
-      <div className={cn("flex h-full flex-col", className)}>
+      <div className={cn("flex h-full flex-col bg-white", className)}>
        <div className="border-b px-4 py-3">
          <h3 className="text-sm font-medium">속성</h3>
        </div>
--- a/frontend/components/pop/designer/panels/ComponentPalette.tsx
+++ b/frontend/components/pop/designer/panels/ComponentPalette.tsx
@ -4,11 +4,7 @@ import { useDrag } from "react-dnd";
 import { cn } from "@/lib/utils";
 import { PopComponentType } from "../types/pop-layout";
 import { Square } from "lucide-react";
-
-// DnD 타입 상수
-const DND_ITEM_TYPES = {
-  COMPONENT: "component",
-} as const;
+import { DND_ITEM_TYPES } from "../constants";

 // 컴포넌트 정의
 interface PaletteItem {
--- a/frontend/components/pop/designer/renderers/PopRenderer.tsx
+++ b/frontend/components/pop/designer/renderers/PopRenderer.tsx
@ -1,16 +1,24 @@
 "use client";

 import React, { useMemo } from "react";
+import { useDrag } from "react-dnd";
 import { cn } from "@/lib/utils";
+import { DND_ITEM_TYPES } from "../constants";
 import {
  PopLayoutDataV5,
  PopComponentDefinitionV5,
  PopGridPosition,
  GridMode,
  GRID_BREAKPOINTS,
+  GridBreakpoint,
  detectGridMode,
  PopComponentType,
 } from "../types/pop-layout";
+import { 
+  convertAndResolvePositions,
+  isOverlapping,
+  getAllEffectivePositions,
+} from "../utils/gridUtils";

 // ========================================
 // Props
@ -33,6 +41,16 @@ interface PopRendererProps {
  onComponentClick?: (componentId: string) => void;
  /** 배경 클릭 */
  onBackgroundClick?: () => void;
+  /** 컴포넌트 이동 */
+  onComponentMove?: (componentId: string, newPosition: PopGridPosition) => void;
+  /** 컴포넌트 크기 조정 */
+  onComponentResize?: (componentId: string, newPosition: PopGridPosition) => void;
+  /** 컴포넌트 크기 조정 완료 (히스토리 저장용) */
+  onComponentResizeEnd?: (componentId: string) => void;
+  /** Gap 오버라이드 (Gap 프리셋 적용된 값) */
+  overrideGap?: number;
+  /** Padding 오버라이드 (Gap 프리셋 적용된 값) */
+  overridePadding?: number;
  /** 추가 className */
  className?: string;
 }
@ -58,6 +76,11 @@ export default function PopRenderer({
  selectedComponentId,
  onComponentClick,
  onBackgroundClick,
+  onComponentMove,
+  onComponentResize,
+  onComponentResizeEnd,
+  overrideGap,
+  overridePadding,
  className,
 }: PopRendererProps) {
  const { gridConfig, components, overrides } = layout;
@ -66,26 +89,45 @@ export default function PopRenderer({
  const mode = currentMode || detectGridMode(viewportWidth);
  const breakpoint = GRID_BREAKPOINTS[mode];
  
-  // CSS Grid 스타일
+  // Gap/Padding: 오버라이드 우선, 없으면 기본값 사용
+  const finalGap = overrideGap !== undefined ? overrideGap : breakpoint.gap;
+  const finalPadding = overridePadding !== undefined ? overridePadding : breakpoint.padding;
+  
+  // 숨김 컴포넌트 ID 목록
+  const hiddenIds = overrides?.[mode]?.hidden || [];
+  
+  // 동적 행 수 계산 (가이드 셀 + Grid 스타일 공유, 숨김 컴포넌트 제외)
+  const dynamicRowCount = useMemo(() => {
+    const visibleComps = Object.values(components).filter(
+      comp => !hiddenIds.includes(comp.id)
+    );
+    const maxRowEnd = visibleComps.reduce((max, comp) => {
+      const override = overrides?.[mode]?.positions?.[comp.id];
+      const pos = override ? { ...comp.position, ...override } : comp.position;
+      return Math.max(max, pos.row + pos.rowSpan);
+    }, 1);
+    return Math.max(10, maxRowEnd + 3);
+  }, [components, overrides, mode, hiddenIds]);
+  
+  // CSS Grid 스타일 (행 높이 강제 고정: 셀 크기 = 컴포넌트 크기의 기준)
  const gridStyle = useMemo((): React.CSSProperties => ({
    display: "grid",
    gridTemplateColumns: `repeat(${breakpoint.columns}, 1fr)`,
+    gridTemplateRows: `repeat(${dynamicRowCount}, ${breakpoint.rowHeight}px)`,
    gridAutoRows: `${breakpoint.rowHeight}px`,
-    gap: `${breakpoint.gap}px`,
-    padding: `${breakpoint.padding}px`,
+    gap: `${finalGap}px`,
+    padding: `${finalPadding}px`,
    minHeight: "100%",
    backgroundColor: "#ffffff",
    position: "relative",
-  }), [breakpoint]);
+  }), [breakpoint, finalGap, finalPadding, dynamicRowCount]);
  
-  // 그리드 가이드 셀 생성
+  // 그리드 가이드 셀 생성 (동적 행 수)
  const gridCells = useMemo(() => {
    if (!isDesignMode || !showGridGuide) return [];
    
    const cells = [];
-    const rowCount = 20; // 충분한 행 수
-    
-    for (let row = 1; row <= rowCount; row++) {
+    for (let row = 1; row <= dynamicRowCount; row++) {
      for (let col = 1; col <= breakpoint.columns; col++) {
        cells.push({ 
          id: `cell-${col}-${row}`, 
@ -95,7 +137,7 @@ export default function PopRenderer({
      }
    }
    return cells;
-  }, [isDesignMode, showGridGuide, breakpoint.columns]);
+  }, [isDesignMode, showGridGuide, breakpoint.columns, dynamicRowCount]);
  
  // visibility 체크
  const isVisible = (comp: PopComponentDefinitionV5): boolean => {
@ -104,46 +146,39 @@ export default function PopRenderer({
    return modeVisibility !== false;
  };
  
+  // 자동 재배치된 위치 계산 (오버라이드 없을 때)
+  const autoResolvedPositions = useMemo(() => {
+    const componentsArray = Object.entries(components).map(([id, comp]) => ({
+      id,
+      position: comp.position,
+    }));
+    
+    return convertAndResolvePositions(componentsArray, mode);
+  }, [components, mode]);
+  
  // 위치 변환 (12칸 기준 → 현재 모드 칸 수)
  const convertPosition = (position: PopGridPosition): React.CSSProperties => {
-    const sourceColumns = 12;  // 항상 12칸 기준으로 저장
-    const targetColumns = breakpoint.columns;
-    
-    // 같은 칸 수면 그대로 사용
-    if (sourceColumns === targetColumns) {
-      return {
-        gridColumn: `${position.col} / span ${position.colSpan}`,
-        gridRow: `${position.row} / span ${position.rowSpan}`,
-      };
-    }
-    
-    // 비율 계산 (12칸 → 4칸, 6칸, 8칸)
-    const ratio = targetColumns / sourceColumns;
-    
-    // 열 위치 변환
-    let newCol = Math.max(1, Math.ceil((position.col - 1) * ratio) + 1);
-    let newColSpan = Math.max(1, Math.round(position.colSpan * ratio));
-    
-    // 범위 초과 방지
-    if (newCol > targetColumns) {
-      newCol = 1;
-    }
-    if (newCol + newColSpan - 1 > targetColumns) {
-      newColSpan = targetColumns - newCol + 1;
-    }
-    
    return {
-      gridColumn: `${newCol} / span ${Math.max(1, newColSpan)}`,
+      gridColumn: `${position.col} / span ${position.colSpan}`,
      gridRow: `${position.row} / span ${position.rowSpan}`,
    };
  };
  
-  // 오버라이드 적용
+  // 오버라이드 적용 또는 자동 재배치
  const getEffectivePosition = (comp: PopComponentDefinitionV5): PopGridPosition => {
+    // 1순위: 오버라이드가 있으면 사용
    const override = overrides?.[mode]?.positions?.[comp.id];
    if (override) {
      return { ...comp.position, ...override };
    }
+    
+    // 2순위: 자동 재배치된 위치 사용
+    const autoResolved = autoResolvedPositions.find(p => p.id === comp.id);
+    if (autoResolved) {
+      return autoResolved.position;
+    }
+    
+    // 3순위: 원본 위치 (12칸 모드)
    return comp.position;
  };
  
@ -152,6 +187,12 @@ export default function PopRenderer({
    return overrides?.[mode]?.hidden?.includes(comp.id) ?? false;
  };
  
+  // 모든 컴포넌트의 유효 위치 계산 (리사이즈 겹침 검사용)
+  const effectivePositionsMap = useMemo(() => 
+    getAllEffectivePositions(layout, mode),
+    [layout, mode]
+  );
+  
  return (
    <div
      className={cn("relative min-h-full w-full", className)}
@ -175,6 +216,7 @@ export default function PopRenderer({
      ))}
      
      {/* 컴포넌트 렌더링 (z-index로 위에 표시) */}
+      {/* v5.1: 자동 줄바꿈으로 모든 컴포넌트가 그리드 안에 배치됨 */}
      {Object.values(components).map((comp) => {
        // visibility 체크
        if (!isVisible(comp)) return null;
@ -186,26 +228,41 @@ export default function PopRenderer({
        const positionStyle = convertPosition(position);
        const isSelected = selectedComponentId === comp.id;
        
+        // 디자인 모드에서는 드래그 가능한 컴포넌트, 뷰어 모드에서는 일반 컴포넌트
+        if (isDesignMode) {
+          return (
+            <DraggableComponent
+              key={comp.id}
+              component={comp}
+              position={position}
+              positionStyle={positionStyle}
+              isSelected={isSelected}
+              isDesignMode={isDesignMode}
+              breakpoint={breakpoint}
+              viewportWidth={viewportWidth}
+              allEffectivePositions={effectivePositionsMap}
+              effectiveGap={finalGap}
+              effectivePadding={finalPadding}
+              onComponentClick={onComponentClick}
+              onComponentMove={onComponentMove}
+              onComponentResize={onComponentResize}
+              onComponentResizeEnd={onComponentResizeEnd}
+            />
+          );
+        }
+        
+        // 뷰어 모드: 드래그 없는 일반 렌더링
        return (
          <div
            key={comp.id}
-            className={cn(
-              "relative rounded-lg border-2 bg-white transition-all overflow-hidden z-10",
-              isSelected
-                ? "border-primary ring-2 ring-primary/30"
-                : "border-gray-200",
-              isDesignMode && "cursor-pointer hover:border-gray-300 hover:shadow-sm"
-            )}
+            className="relative rounded-lg border-2 border-gray-200 bg-white transition-all overflow-hidden z-10"
            style={positionStyle}
-            onClick={(e) => {
-              e.stopPropagation();
-              onComponentClick?.(comp.id);
-            }}
          >
            <ComponentContent 
-              component={comp} 
-              isDesignMode={isDesignMode}
-              isSelected={isSelected}
+              component={comp}
+              effectivePosition={position}
+              isDesignMode={false}
+              isSelected={false}
            />
          </div>
        );
@ -214,17 +271,233 @@ export default function PopRenderer({
  );
 }

+// ========================================
+// 드래그 가능한 컴포넌트 래퍼
+// ========================================
+
+interface DraggableComponentProps {
+  component: PopComponentDefinitionV5;
+  position: PopGridPosition;
+  positionStyle: React.CSSProperties;
+  isSelected: boolean;
+  isDesignMode: boolean;
+  breakpoint: GridBreakpoint;
+  viewportWidth: number;
+  allEffectivePositions: Map<string, PopGridPosition>;
+  effectiveGap: number;
+  effectivePadding: number;
+  onComponentClick?: (componentId: string) => void;
+  onComponentMove?: (componentId: string, newPosition: PopGridPosition) => void;
+  onComponentResize?: (componentId: string, newPosition: PopGridPosition) => void;
+  onComponentResizeEnd?: (componentId: string) => void;
+}
+
+function DraggableComponent({
+  component,
+  position,
+  positionStyle,
+  isSelected,
+  isDesignMode,
+  breakpoint,
+  viewportWidth,
+  allEffectivePositions,
+  effectiveGap,
+  effectivePadding,
+  onComponentClick,
+  onComponentMove,
+  onComponentResize,
+  onComponentResizeEnd,
+}: DraggableComponentProps) {
+  const [{ isDragging }, drag] = useDrag(
+    () => ({
+      type: DND_ITEM_TYPES.MOVE_COMPONENT,
+      item: { 
+        componentId: component.id, 
+        originalPosition: position 
+      },
+      canDrag: isDesignMode,
+      collect: (monitor) => ({
+        isDragging: monitor.isDragging(),
+      }),
+    }),
+    [component.id, position, isDesignMode]
+  );
+  
+  return (
+    <div
+      ref={isDesignMode ? drag : null}
+      className={cn(
+        "relative rounded-lg border-2 transition-all overflow-hidden z-10 bg-white",
+        isSelected
+          ? "border-primary ring-2 ring-primary/30"
+          : "border-gray-200",
+        isDesignMode && "cursor-move hover:border-gray-300 hover:shadow-sm",
+        isDragging && "opacity-50"
+      )}
+      style={positionStyle}
+      onClick={(e) => {
+        e.stopPropagation();
+        onComponentClick?.(component.id);
+      }}
+    >
+      <ComponentContent 
+        component={component}
+        effectivePosition={position}
+        isDesignMode={isDesignMode}
+        isSelected={isSelected}
+      />
+      
+      {/* 리사이즈 핸들 (선택된 컴포넌트만) */}
+      {isDesignMode && isSelected && onComponentResize && (
+        <ResizeHandles
+          component={component}
+          position={position}
+          breakpoint={breakpoint}
+          viewportWidth={viewportWidth}
+          allEffectivePositions={allEffectivePositions}
+          effectiveGap={effectiveGap}
+          effectivePadding={effectivePadding}
+          onResize={onComponentResize}
+          onResizeEnd={onComponentResizeEnd}
+        />
+      )}
+    </div>
+  );
+}
+
+// ========================================
+// 리사이즈 핸들
+// ========================================
+
+interface ResizeHandlesProps {
+  component: PopComponentDefinitionV5;
+  position: PopGridPosition;
+  breakpoint: GridBreakpoint;
+  viewportWidth: number;
+  allEffectivePositions: Map<string, PopGridPosition>;
+  effectiveGap: number;
+  effectivePadding: number;
+  onResize: (componentId: string, newPosition: PopGridPosition) => void;
+  onResizeEnd?: (componentId: string) => void;
+}
+
+function ResizeHandles({
+  component,
+  position,
+  breakpoint,
+  viewportWidth,
+  allEffectivePositions,
+  effectiveGap,
+  effectivePadding,
+  onResize,
+  onResizeEnd,
+}: ResizeHandlesProps) {
+  const handleMouseDown = (direction: 'right' | 'bottom' | 'corner') => (e: React.MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+    
+    const startX = e.clientX;
+    const startY = e.clientY;
+    const startColSpan = position.colSpan;
+    const startRowSpan = position.rowSpan;
+    
+    // 그리드 셀 크기 동적 계산 (Gap 프리셋 적용된 값 사용)
+    // 사용 가능한 너비 = 뷰포트 너비 - 양쪽 패딩 - gap*(칸수-1)
+    const availableWidth = viewportWidth - effectivePadding * 2 - effectiveGap * (breakpoint.columns - 1);
+    const cellWidth = availableWidth / breakpoint.columns + effectiveGap; // 셀 너비 + gap 단위
+    const cellHeight = breakpoint.rowHeight + effectiveGap;
+    
+    const handleMouseMove = (e: MouseEvent) => {
+      const deltaX = e.clientX - startX;
+      const deltaY = e.clientY - startY;
+      
+      let newColSpan = startColSpan;
+      let newRowSpan = startRowSpan;
+      
+      if (direction === 'right' || direction === 'corner') {
+        const colDelta = Math.round(deltaX / cellWidth);
+        newColSpan = Math.max(1, startColSpan + colDelta);
+        // 최대 칸 수 제한
+        newColSpan = Math.min(newColSpan, breakpoint.columns - position.col + 1);
+      }
+      
+      if (direction === 'bottom' || direction === 'corner') {
+        const rowDelta = Math.round(deltaY / cellHeight);
+        newRowSpan = Math.max(1, startRowSpan + rowDelta);
+      }
+      
+      // 변경사항이 있으면 업데이트
+      if (newColSpan !== position.colSpan || newRowSpan !== position.rowSpan) {
+        const newPosition: PopGridPosition = {
+          ...position,
+          colSpan: newColSpan,
+          rowSpan: newRowSpan,
+        };
+        
+        // 유효 위치 기반 겹침 검사 (다른 컴포넌트와)
+        const hasOverlap = Array.from(allEffectivePositions.entries()).some(
+          ([id, pos]) => {
+            if (id === component.id) return false;  // 자기 자신 제외
+            return isOverlapping(newPosition, pos);
+          }
+        );
+        
+        // 겹치지 않을 때만 리사이즈 적용
+        if (!hasOverlap) {
+          onResize(component.id, newPosition);
+        }
+      }
+    };
+    
+    const handleMouseUp = () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+      // 리사이즈 완료 알림 (히스토리 저장용)
+      onResizeEnd?.(component.id);
+    };
+    
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  };
+  
+  return (
+    <>
+      {/* 오른쪽 핸들 (가로 크기) */}
+      <div
+        className="absolute top-0 bottom-0 w-2 cursor-ew-resize bg-primary/20 hover:bg-primary/50 transition-colors"
+        onMouseDown={handleMouseDown('right')}
+        style={{ right: '-4px' }}
+      />
+      
+      {/* 아래쪽 핸들 (세로 크기) */}
+      <div
+        className="absolute left-0 right-0 h-2 cursor-ns-resize bg-primary/20 hover:bg-primary/50 transition-colors"
+        onMouseDown={handleMouseDown('bottom')}
+        style={{ bottom: '-4px' }}
+      />
+      
+      {/* 오른쪽 아래 모서리 (가로+세로) */}
+      <div
+        className="absolute h-3 w-3 cursor-nwse-resize bg-primary hover:bg-primary/80 transition-colors rounded-sm"
+        onMouseDown={handleMouseDown('corner')}
+        style={{ right: '-6px', bottom: '-6px' }}
+      />
+    </>
+  );
+}
+
 // ========================================
 // 컴포넌트 내용 렌더링
 // ========================================

 interface ComponentContentProps {
  component: PopComponentDefinitionV5;
+  effectivePosition: PopGridPosition;
  isDesignMode: boolean;
  isSelected: boolean;
 }

-function ComponentContent({ component, isDesignMode, isSelected }: ComponentContentProps) {
+function ComponentContent({ component, effectivePosition, isDesignMode, isSelected }: ComponentContentProps) {
  const typeLabel = COMPONENT_TYPE_LABELS[component.type] || component.type;
  
  // 디자인 모드: 플레이스홀더 표시
@ -248,13 +521,15 @@ function ComponentContent({ component, isDesignMode, isSelected }: ComponentCont
        
        {/* 내용 */}
        <div className="flex flex-1 items-center justify-center p-2">
-          <span className="text-xs text-gray-400">{typeLabel}</span>
+          <span className="text-xs text-gray-400">
+            {typeLabel}
+          </span>
        </div>
        
-        {/* 위치 정보 표시 */}
+        {/* 위치 정보 표시 (유효 위치 사용) */}
        <div className="absolute bottom-1 right-1 text-[9px] text-gray-400 bg-white/80 px-1 rounded">
-          {component.position.col},{component.position.row} 
-          ({component.position.colSpan}×{component.position.rowSpan})
+          {effectivePosition.col},{effectivePosition.row} 
+          ({effectivePosition.colSpan}×{effectivePosition.rowSpan})
        </div>
      </div>
    );
--- a/frontend/components/pop/designer/types/pop-layout.ts
+++ b/frontend/components/pop/designer/types/pop-layout.ts
@ -119,11 +119,12 @@ export interface GridBreakpoint {

 /**
 * 브레이크포인트 상수
+ * 업계 표준 (768px, 1024px) + 실제 기기 커버리지 기반
 */
 export const GRID_BREAKPOINTS: Record<GridMode, GridBreakpoint> = {
-  // 4~6인치 모바일 세로
+  // 스마트폰 세로 (iPhone SE ~ Galaxy S25 Ultra)
  mobile_portrait: {
-    maxWidth: 599,
+    maxWidth: 479,
    columns: 4,
    rowHeight: 40,
    gap: 8,
@ -131,10 +132,10 @@ export const GRID_BREAKPOINTS: Record<GridMode, GridBreakpoint> = {
    label: "모바일 세로 (4칸)",
  },
  
-  // 6~8인치 모바일 가로 / 작은 태블릿
+  // 스마트폰 가로 + 소형 태블릿
  mobile_landscape: {
-    minWidth: 600,
-    maxWidth: 839,
+    minWidth: 480,
+    maxWidth: 767,
    columns: 6,
    rowHeight: 44,
    gap: 8,
@ -142,9 +143,9 @@ export const GRID_BREAKPOINTS: Record<GridMode, GridBreakpoint> = {
    label: "모바일 가로 (6칸)",
  },
  
-  // 8~10인치 태블릿 세로
+  // 태블릿 세로 (iPad Mini ~ iPad Pro)
  tablet_portrait: {
-    minWidth: 840,
+    minWidth: 768,
    maxWidth: 1023,
    columns: 8,
    rowHeight: 48,
@ -153,7 +154,7 @@ export const GRID_BREAKPOINTS: Record<GridMode, GridBreakpoint> = {
    label: "태블릿 세로 (8칸)",
  },
  
-  // 10~14인치 태블릿 가로 (기본)
+  // 태블릿 가로 + 데스크톱 (기본)
  tablet_landscape: {
    minWidth: 1024,
    columns: 12,
@ -171,10 +172,11 @@ export const DEFAULT_GRID_MODE: GridMode = "tablet_landscape";

 /**
 * 뷰포트 너비로 모드 감지
+ * GRID_BREAKPOINTS와 일치하는 브레이크포인트 사용
 */
 export function detectGridMode(viewportWidth: number): GridMode {
-  if (viewportWidth < 600) return "mobile_portrait";
-  if (viewportWidth < 840) return "mobile_landscape";
+  if (viewportWidth < 480) return "mobile_portrait";
+  if (viewportWidth < 768) return "mobile_landscape";
  if (viewportWidth < 1024) return "tablet_portrait";
  return "tablet_landscape";
 }
@ -257,6 +259,28 @@ export interface PopComponentDefinitionV5 {
  config?: PopComponentConfig;
 }

+/**
+ * Gap 프리셋 타입
+ */
+export type GapPreset = "narrow" | "medium" | "wide";
+
+/**
+ * Gap 프리셋 설정
+ */
+export interface GapPresetConfig {
+  multiplier: number;
+  label: string;
+}
+
+/**
+ * Gap 프리셋 상수
+ */
+export const GAP_PRESETS: Record<GapPreset, GapPresetConfig> = {
+  narrow: { multiplier: 0.5, label: "좁게" },
+  medium: { multiplier: 1.0, label: "보통" },
+  wide: { multiplier: 1.5, label: "넓게" },
+};
+
 /**
 * v5 전역 설정
 */
@ -266,6 +290,9 @@ export interface PopGlobalSettingsV5 {
  
  // 모드
  mode: "normal" | "industrial";
+  
+  // Gap 프리셋
+  gapPreset: GapPreset;  // 기본 "medium"
 }

 /**
@ -298,6 +325,7 @@ export const createEmptyPopLayoutV5 = (): PopLayoutDataV5 => ({
  settings: {
    touchTargetMin: 48,
    mode: "normal",
+    gapPreset: "medium",
  },
 });

--- a/frontend/components/pop/designer/utils/gridUtils.ts
+++ b/frontend/components/pop/designer/utils/gridUtils.ts
@ -1,9 +1,38 @@
 import { 
  PopGridPosition, 
  GridMode, 
-  GRID_BREAKPOINTS 
+  GRID_BREAKPOINTS,
+  GridBreakpoint,
+  GapPreset,
+  GAP_PRESETS,
+  PopLayoutDataV5,
+  PopComponentDefinitionV5, 
 } from "../types/pop-layout";

+// ========================================
+// Gap/Padding 조정
+// ========================================
+
+/**
+ * Gap 프리셋에 따라 breakpoint의 gap/padding 조정
+ * 
+ * @param base 기본 breakpoint 설정
+ * @param preset Gap 프리셋 ("narrow" | "medium" | "wide")
+ * @returns 조정된 breakpoint (gap, padding 계산됨)
+ */
+export function getAdjustedBreakpoint(
+  base: GridBreakpoint,
+  preset: GapPreset
+): GridBreakpoint {
+  const multiplier = GAP_PRESETS[preset]?.multiplier || 1.0;
+  
+  return {
+    ...base,
+    gap: Math.round(base.gap * multiplier),
+    padding: Math.max(8, Math.round(base.padding * multiplier)), // 최소 8px
+  };
+}
+
 // ========================================
 // 그리드 위치 변환
 // ========================================
@ -45,6 +74,130 @@ export function convertPositionToMode(
  };
 }

+/**
+ * 여러 컴포넌트를 모드별로 변환하고 겹침 해결
+ * 
+ * v5.1 자동 줄바꿈:
+ * - 원본 col > targetColumns인 컴포넌트는 자동으로 맨 아래에 배치
+ * - 정보 손실 방지: 모든 컴포넌트가 그리드 안에 배치됨
+ */
+export function convertAndResolvePositions(
+  components: Array<{ id: string; position: PopGridPosition }>,
+  targetMode: GridMode
+): Array<{ id: string; position: PopGridPosition }> {
+  // 엣지 케이스: 빈 배열
+  if (components.length === 0) {
+    return [];
+  }
+  
+  const targetColumns = GRID_BREAKPOINTS[targetMode].columns;
+  
+  // 1단계: 각 컴포넌트를 비율로 변환 (원본 col 보존)
+  const converted = components.map(comp => ({
+    id: comp.id,
+    position: convertPositionToMode(comp.position, targetMode),
+    originalCol: comp.position.col, // 원본 col 보존
+  }));
+  
+  // 2단계: 정상 컴포넌트 vs 초과 컴포넌트 분리
+  const normalComponents = converted.filter(c => c.originalCol <= targetColumns);
+  const overflowComponents = converted.filter(c => c.originalCol > targetColumns);
+  
+  // 3단계: 정상 컴포넌트의 최대 row 계산
+  const maxRow = normalComponents.length > 0
+    ? Math.max(...normalComponents.map(c => c.position.row + c.position.rowSpan - 1))
+    : 0;
+  
+  // 4단계: 초과 컴포넌트들을 맨 아래에 순차 배치
+  let currentRow = maxRow + 1;
+  const wrappedComponents = overflowComponents.map(comp => {
+    const wrappedPosition: PopGridPosition = {
+      col: 1, // 왼쪽 끝부터 시작
+      row: currentRow,
+      colSpan: Math.min(comp.position.colSpan, targetColumns), // 최대 칸 수 제한
+      rowSpan: comp.position.rowSpan,
+    };
+    currentRow += comp.position.rowSpan; // 다음 행으로 이동
+    
+    return {
+      id: comp.id,
+      position: wrappedPosition,
+    };
+  });
+  
+  // 5단계: 정상 + 줄바꿈 컴포넌트 병합
+  const adjusted = [
+    ...normalComponents.map(c => ({ id: c.id, position: c.position })),
+    ...wrappedComponents,
+  ];
+  
+  // 6단계: 겹침 해결 (아래로 밀기)
+  return resolveOverlaps(adjusted, targetColumns);
+}
+
+// ========================================
+// 검토 필요 판별
+// ========================================
+
+/**
+ * 컴포넌트가 현재 모드에서 "검토 필요" 상태인지 확인
+ * 
+ * v5.1 검토 필요 기준:
+ * - 12칸 모드(기본 모드)가 아님
+ * - 해당 모드에서 오버라이드가 없음 (아직 편집 안 함)
+ * 
+ * @param currentMode 현재 그리드 모드
+ * @param hasOverride 해당 모드에서 오버라이드 존재 여부
+ * @returns true = 검토 필요, false = 검토 완료 또는 불필요
+ */
+export function needsReview(
+  currentMode: GridMode,
+  hasOverride: boolean
+): boolean {
+  const targetColumns = GRID_BREAKPOINTS[currentMode].columns;
+  
+  // 12칸 모드는 기본 모드이므로 검토 불필요
+  if (targetColumns === 12) {
+    return false;
+  }
+  
+  // 오버라이드가 있으면 이미 편집함 → 검토 완료
+  if (hasOverride) {
+    return false;
+  }
+  
+  // 오버라이드 없으면 → 검토 필요
+  return true;
+}
+
+/**
+ * @deprecated v5.1부터 needsReview() 사용 권장
+ * 
+ * 기존 isOutOfBounds는 "화면 밖" 개념이었으나,
+ * v5.1 자동 줄바꿈으로 인해 모든 컴포넌트가 그리드 안에 배치됩니다.
+ * 대신 needsReview()로 "검토 필요" 여부를 판별하세요.
+ */
+export function isOutOfBounds(
+  originalPosition: PopGridPosition,
+  currentMode: GridMode,
+  overridePosition?: PopGridPosition | null
+): boolean {
+  const targetColumns = GRID_BREAKPOINTS[currentMode].columns;
+  
+  // 12칸 모드면 초과 불가
+  if (targetColumns === 12) {
+    return false;
+  }
+  
+  // 오버라이드가 있으면 오버라이드 위치로 판단
+  if (overridePosition) {
+    return overridePosition.col > targetColumns;
+  }
+  
+  // 오버라이드 없으면 원본 col로 판단
+  return originalPosition.col > targetColumns;
+}
+
 // ========================================
 // 겹침 감지 및 해결
 // ========================================
@ -117,6 +270,11 @@ export function resolveOverlaps(

 /**
 * 마우스 좌표 → 그리드 좌표 변환
+ * 
+ * CSS Grid 계산 방식:
+ * - 사용 가능 너비 = 캔버스 너비 - 패딩*2 - gap*(columns-1)
+ * - 각 칸 너비 = 사용 가능 너비 / columns
+ * - 셀 N의 시작 X = padding + (N-1) * (칸너비 + gap)
 */
 export function mouseToGridPosition(
  mouseX: number,
@ -127,16 +285,21 @@ export function mouseToGridPosition(
  gap: number,
  padding: number
 ): { col: number; row: number } {
-  // 캔버스 내 상대 위치
+  // 캔버스 내 상대 위치 (패딩 영역 포함)
  const relX = mouseX - canvasRect.left - padding;
  const relY = mouseY - canvasRect.top - padding;
  
-  // 칸 너비 계산
-  const totalGap = gap * (columns - 1);
-  const colWidth = (canvasRect.width - padding * 2 - totalGap) / columns;
+  // CSS Grid 1fr 계산과 동일하게
+  // 사용 가능 너비 = 전체 너비 - 양쪽 패딩 - (칸 사이 gap)
+  const availableWidth = canvasRect.width - padding * 2 - gap * (columns - 1);
+  const colWidth = availableWidth / columns;
+  
+  // 각 셀의 실제 간격 (셀 너비 + gap)
+  const cellStride = colWidth + gap;
  
  // 그리드 좌표 계산 (1부터 시작)
-  const col = Math.max(1, Math.min(columns, Math.floor(relX / (colWidth + gap)) + 1));
+  // relX를 cellStride로 나누면 몇 번째 칸인지 알 수 있음
+  const col = Math.max(1, Math.min(columns, Math.floor(relX / cellStride) + 1));
  const row = Math.max(1, Math.floor(relY / (rowHeight + gap)) + 1);
  
  return { col, row };
@ -299,3 +462,101 @@ export function autoLayoutComponents(
  
  return result;
 }
+
+// ========================================
+// 유효 위치 계산 (통합 함수)
+// ========================================
+
+/**
+ * 컴포넌트의 유효 위치를 계산합니다.
+ * 우선순위: 1. 오버라이드 → 2. 자동 재배치 → 3. 원본 위치
+ * 
+ * @param componentId 컴포넌트 ID
+ * @param layout 전체 레이아웃 데이터
+ * @param mode 현재 그리드 모드
+ * @param autoResolvedPositions 미리 계산된 자동 재배치 위치 (선택적)
+ */
+export function getEffectiveComponentPosition(
+  componentId: string,
+  layout: PopLayoutDataV5,
+  mode: GridMode,
+  autoResolvedPositions?: Array<{ id: string; position: PopGridPosition }>
+): PopGridPosition | null {
+  const component = layout.components[componentId];
+  if (!component) return null;
+  
+  // 1순위: 오버라이드가 있으면 사용
+  const override = layout.overrides?.[mode]?.positions?.[componentId];
+  if (override) {
+    return { ...component.position, ...override };
+  }
+  
+  // 2순위: 자동 재배치된 위치 사용
+  if (autoResolvedPositions) {
+    const autoResolved = autoResolvedPositions.find(p => p.id === componentId);
+    if (autoResolved) {
+      return autoResolved.position;
+    }
+  } else {
+    // 자동 재배치 직접 계산
+    const componentsArray = Object.entries(layout.components).map(([id, comp]) => ({
+      id,
+      position: comp.position,
+    }));
+    const resolved = convertAndResolvePositions(componentsArray, mode);
+    const autoResolved = resolved.find(p => p.id === componentId);
+    if (autoResolved) {
+      return autoResolved.position;
+    }
+  }
+  
+  // 3순위: 원본 위치 (12칸 모드)
+  return component.position;
+}
+
+/**
+ * 모든 컴포넌트의 유효 위치를 일괄 계산합니다.
+ * 숨김 처리된 컴포넌트는 제외됩니다.
+ * 
+ * v5.1: 자동 줄바꿈 시스템으로 인해 모든 컴포넌트가 그리드 안에 배치되므로
+ * "화면 밖" 개념이 제거되었습니다.
+ */
+export function getAllEffectivePositions(
+  layout: PopLayoutDataV5,
+  mode: GridMode
+): Map<string, PopGridPosition> {
+  const result = new Map<string, PopGridPosition>();
+  
+  // 숨김 처리된 컴포넌트 ID 목록
+  const hiddenIds = layout.overrides?.[mode]?.hidden || [];
+  
+  // 자동 재배치 위치 미리 계산
+  const componentsArray = Object.entries(layout.components).map(([id, comp]) => ({
+    id,
+    position: comp.position,
+  }));
+  const autoResolvedPositions = convertAndResolvePositions(componentsArray, mode);
+  
+  // 각 컴포넌트의 유효 위치 계산
+  Object.keys(layout.components).forEach(componentId => {
+    // 숨김 처리된 컴포넌트는 제외
+    if (hiddenIds.includes(componentId)) {
+      return;
+    }
+    
+    const position = getEffectiveComponentPosition(
+      componentId, 
+      layout, 
+      mode, 
+      autoResolvedPositions
+    );
+    
+    // v5.1: 자동 줄바꿈으로 인해 모든 컴포넌트가 그리드 안에 있음
+    // 따라서 추가 필터링 불필요
+    if (position) {
+      result.set(componentId, position);
+    }
+  });
+  
+  return result;
+}
--- a/frontend/hooks/useDeviceOrientation.ts
+++ b/frontend/hooks/useDeviceOrientation.ts
@ -17,11 +17,14 @@ export interface ResponsiveMode {

 // ========================================
 // 브레이크포인트 (화면 너비 기준)
+// GRID_BREAKPOINTS와 일치해야 함!
 // ========================================
 const BREAKPOINTS = {
-  // 모바일: 0 ~ 767px
-  // 태블릿: 768px 이상
-  TABLET_MIN: 768,
+  // mobile_portrait: ~479px (4칸)
+  // mobile_landscape: 480~767px (6칸)
+  // tablet_portrait: 768~1023px (8칸)
+  // tablet_landscape: 1024px~ (12칸)
+  TABLET_MIN: 768,  // 768px 이상이면 tablet
 };

 /**
--- a/popdocs/ARCHITECTURE.md
+++ b/popdocs/ARCHITECTURE.md
@ -1,6 +1,6 @@
 # POP 화면 시스템 아키텍처

-**최종 업데이트: 2026-02-05 (v5 그리드 시스템)**
+**최종 업데이트: 2026-02-06 (v5.2 브레이크포인트 재설계 + 세로 자동 확장)**

 POP(Point of Production) 화면은 모바일/태블릿 환경에 최적화된 터치 기반 화면 시스템입니다.

@ -79,14 +79,19 @@ handleUndo() / handleRedo() // 히스토리
 // DnD 설정
 const DND_ITEM_TYPES = { COMPONENT: "component" };

-// 뷰포트 프리셋 (4개 모드)
+// 뷰포트 프리셋 (4개 모드) - height 제거됨 (세로 무한 스크롤)
 const VIEWPORT_PRESETS = [
  { id: "mobile_portrait", width: 375, columns: 4 },
-  { id: "mobile_landscape", width: 667, columns: 6 },
-  { id: "tablet_portrait", width: 768, columns: 8 },
+  { id: "mobile_landscape", width: 600, columns: 6 },
+  { id: "tablet_portrait", width: 834, columns: 8 },
  { id: "tablet_landscape", width: 1024, columns: 12 },
 ];

+// 세로 자동 확장
+const MIN_CANVAS_HEIGHT = 600;   // 최소 캔버스 높이
+const CANVAS_EXTRA_ROWS = 3;     // 항상 유지되는 여유 행 수
+const dynamicCanvasHeight = useMemo(() => { ... }, []);
+
 // 기능
 - useDrop(): 팔레트에서 컴포넌트 드롭
 - handleWheel(): 줌 (30%~150%)
@ -149,14 +154,22 @@ const convertPosition = (pos: PopGridPosition, targetMode: GridMode) => {
 // 그리드 모드
 type GridMode = "mobile_portrait" | "mobile_landscape" | "tablet_portrait" | "tablet_landscape";

-// 브레이크포인트 설정
+// 브레이크포인트 설정 (2026-02-06 재설계)
 const GRID_BREAKPOINTS = {
-  mobile_portrait: { columns: 4, rowHeight: 48, gap: 8, padding: 12 },
-  mobile_landscape: { columns: 6, rowHeight: 44, gap: 8, padding: 16 },
-  tablet_portrait: { columns: 8, rowHeight: 52, gap: 12, padding: 20 },
-  tablet_landscape: { columns: 12, rowHeight: 56, gap: 12, padding: 24 },
+  mobile_portrait:  { columns: 4,  maxWidth: 479,  gap: 8,  padding: 12 },
+  mobile_landscape: { columns: 6,  minWidth: 480, maxWidth: 767,  gap: 8,  padding: 16 },
+  tablet_portrait:  { columns: 8,  minWidth: 768, maxWidth: 1023, gap: 12, padding: 20 },
+  tablet_landscape: { columns: 12, minWidth: 1024, gap: 12, padding: 24 },
 };

+// 모드 감지 (순수 너비 기반)
+function detectGridMode(viewportWidth: number): GridMode {
+  if (viewportWidth < 480) return "mobile_portrait";
+  if (viewportWidth < 768) return "mobile_landscape";
+  if (viewportWidth < 1024) return "tablet_portrait";
+  return "tablet_landscape";
+}
+
 // 레이아웃 데이터
 interface PopLayoutDataV5 {
  version: "pop-5.0";
--- a/popdocs/CHANGELOG.md
+++ b/popdocs/CHANGELOG.md
@ -12,6 +12,541 @@

 ---

+## [2026-02-06] v5.2.1 그리드 셀 크기 강제 고정
+
+### 배경 (왜 이 작업이 필요했는가)
+
+**문제 상황**:
+- 4칸 모드에서 특정 행의 가이드 셀이 다른 행보다 작게 표시됨
+- `gridAutoRows`는 최소 높이만 보장하여, 컴포넌트 콘텐츠가 행 높이를 밀어내면 인접 빈 셀도 영향받음
+- "셀의 크기 = 컴포넌트의 크기"라는 핵심 설계 원칙이 시각적으로 깨짐
+
+### Changed
+
+- **gridAutoRows → gridTemplateRows** (PopRenderer.tsx)
+  ```typescript
+  // 변경 전: 최소 높이만 보장 (콘텐츠에 따라 늘어남)
+  gridAutoRows: `${breakpoint.rowHeight}px`
+  
+  // 변경 후: 행 높이 강제 고정
+  gridTemplateRows: `repeat(${dynamicRowCount}, ${breakpoint.rowHeight}px)`
+  gridAutoRows: `${breakpoint.rowHeight}px`  // 동적 추가행 대비 유지
+  ```
+
+- **dynamicRowCount 분리** (PopRenderer.tsx)
+  - gridCells 내부 → 독립 useMemo로 분리
+  - gridStyle과 gridCells에서 공유
+
+- **컴포넌트 overflow 변경** (PopRenderer.tsx)
+  - `overflow-visible` → `overflow-hidden`
+  - 컴포넌트 콘텐츠가 셀 경계를 벗어나지 않도록 강제
+
+### Fixed
+
+- **PopRenderer dynamicRowCount에서 숨김 컴포넌트 포함 문제**
+  - PopCanvas는 숨김 제외하여 높이 계산, PopRenderer는 포함하여 계산 → 기준 불일치
+  - PopRenderer에도 숨김 필터 추가, 여유행 +5 → +3으로 통일
+
+- **디버깅 console.log 잔존** (PopCanvas.tsx)
+  - reviewComponents useMemo 내 console.log 2개 삭제
+
+- **뷰어 viewportWidth 선언 순서** (page.tsx)
+  - currentModeKey보다 뒤에 선언되어 있던 viewportWidth를 앞으로 이동
+
+### 수정 파일
+
+| 파일 | 변경 내용 |
+|------|----------|
+| `PopRenderer.tsx` | gridTemplateRows 강제 고정, dynamicRowCount 분리, overflow-hidden, 숨김 필터 추가 |
+| `PopCanvas.tsx` | 디버깅 console.log 삭제 |
+| `page.tsx (뷰어)` | viewportWidth 선언 순서 수정 |
+
+---
+
+## [2026-02-06] v5.2 브레이크포인트 재설계 + 세로 자동 확장
+
+### 배경 (왜 이 작업이 필요했는가)
+
+**문제 상황**:
+- 뷰어에서 브라우저 수동 리사이즈 시 768~839px 구간에서 모드 불일치
+- useResponsiveMode 훅과 GRID_BREAKPOINTS 상수 간 기준 불일치
+- 기존 브레이크포인트가 실제 기기 뷰포트와 맞지 않음
+
+**사용자 요구사항**:
+- "현장 모바일 기기 8~14인치, 핸드폰은 아이폰 미니 ~ 갤럭시 울트라"
+- "세로는 신경쓸 필요 없고 무한 스크롤 가능해야 함"
+
+### Changed
+
+- **브레이크포인트 재설계** (pop-layout.ts)
+  | 모드 | 변경 전 | 변경 후 | 근거 |
+  |------|--------|--------|------|
+  | mobile_portrait | ~599px | ~479px | 스마트폰 세로 최대 440px |
+  | mobile_landscape | 600~839px | 480~767px | 스마트폰 가로 |
+  | tablet_portrait | 840~1023px | 768~1023px | iPad Mini 768px 포함 |
+  | tablet_landscape | 1024px+ | 동일 | - |
+
+- **detectGridMode() 조건 수정** (pop-layout.ts)
+  ```typescript
+  if (viewportWidth < 480) return "mobile_portrait";   // was 600
+  if (viewportWidth < 768) return "mobile_landscape";  // was 840
+  if (viewportWidth < 1024) return "tablet_portrait";
+  ```
+
+- **BREAKPOINTS.TABLET_MIN 변경** (useDeviceOrientation.ts)
+  - 768 (was 840)
+
+- **VIEWPORT_PRESETS에서 height 제거** (PopCanvas.tsx)
+  - width만 유지, 세로는 무한 스크롤
+
+### Added
+
+- **세로 자동 확장** (PopCanvas.tsx)
+  - `MIN_CANVAS_HEIGHT = 600`: 최소 캔버스 높이
+  - `CANVAS_EXTRA_ROWS = 3`: 항상 유지되는 여유 행 수
+  - `dynamicCanvasHeight`: 컴포넌트 배치 기반 동적 계산
+
+- **격자 셀 동적 계산** (PopRenderer.tsx)
+  - 고정 20행 → maxRowEnd + 5 동적 계산
+
+- **뷰어 일관성 확보** (page.tsx)
+  - 프리뷰 모드: useResponsiveModeWithOverride 유지
+  - 일반 모드: detectGridMode(viewportWidth) 직접 사용
+
+### Fixed
+
+- **뷰어 반응형 모드 불일치**
+  - 768~839px 구간에서 6칸/8칸 모드 불일치 해결
+  
+- **hiddenComponentIds 중복 정의 에러**
+  - 라인 410-412 중복 useMemo 제거
+
+### Technical Details
+
+```
+브레이크포인트 재설계 근거 (실제 기기 CSS 뷰포트):
+
+| 기기 | CSS 뷰포트 너비 |
+|------|----------------|
+| iPhone SE | 375px |
+| iPhone 16 Pro | 402px |
+| Galaxy S25 Ultra | 440px |
+| iPad Mini 7 | 768px |
+| iPad Pro 11 | 834px (세로), 1194px (가로) |
+| iPad Pro 13 | 1024px (세로), 1366px (가로) |
+
+→ 768px, 1024px가 업계 표준 (Tailwind, Bootstrap 동일)
+```
+
+```
+세로 자동 확장 로직:
+
+const dynamicCanvasHeight = useMemo(() => {
+  const maxRowEnd = visibleComps.reduce((max, comp) => {
+    return Math.max(max, comp.row + comp.rowSpan);
+  }, 1);
+  
+  const totalRows = maxRowEnd + CANVAS_EXTRA_ROWS;  // +3행 여유
+  const height = totalRows * (rowHeight + gap) + padding * 2;
+  
+  return Math.max(MIN_CANVAS_HEIGHT, height);  // 최소 600px
+}, [...]);
+```
+
+### 수정 파일
+
+| 파일 | 변경 내용 |
+|------|----------|
+| `pop-layout.ts` | GRID_BREAKPOINTS 값 수정, detectGridMode() 조건 수정 |
+| `useDeviceOrientation.ts` | BREAKPOINTS.TABLET_MIN = 768 |
+| `PopCanvas.tsx` | VIEWPORT_PRESETS height 제거, dynamicCanvasHeight 추가 |
+| `PopRenderer.tsx` | gridCells 동적 행 수 계산 |
+| `page.tsx (뷰어)` | detectGridMode() 사용 |
+
+---
+
+## [2026-02-06] v5.1 자동 줄바꿈 + 검토 필요 시스템
+
+### 배경 (왜 이 작업이 필요했는가)
+
+**문제 상황**:
+- 12칸에서 배치한 컴포넌트가 4칸 모드로 전환하면 "화면 밖" 패널로 이동하여 뷰어에서 안 보임
+- 사용자가 모든 모드를 수동으로 편집해야 하는 부담
+- "화면 밖" 개념이 실제로는 "검토 필요" 알림 역할이었음
+
+**해결 방향**:
+- 자동 줄바꿈: col > maxCol인 컴포넌트를 자동으로 맨 아래에 배치
+- 정보 손실 방지: 모든 컴포넌트가 항상 그리드 안에 표시됨
+- 검토 필요 알림: 오버라이드 없으면 "검토 필요" 표시 (자동 배치 상태)
+
+### Added
+
+- **자동 줄바꿈 로직** (gridUtils.ts)
+  - `convertAndResolvePositions()` 수정
+  - 원본 col 보존 로직 추가
+  - 정상 컴포넌트 vs 초과 컴포넌트 분리
+  - 초과 컴포넌트를 맨 아래에 순차 배치 (col=1, row=맨아래+1)
+  - colSpan 자동 축소 (targetColumns 초과 방지)
+
+- **검토 필요 판별 함수** (gridUtils.ts)
+  - `needsReview()` 신규 함수
+  - 기준: 12칸 아니고 + 오버라이드 없으면 → 검토 필요
+  - 간단한 로직: "이 모드에서 편집했냐 안 했냐"
+
+- **검토 필요 패널** (PopCanvas.tsx)
+  - `ReviewPanel`: "화면 밖" → "검토 필요"로 이름 변경
+  - `ReviewItem`: 클릭 시 해당 컴포넌트 선택 (드래그 없음)
+  - 자동 배치 뱃지 표시
+  - 파란색 테마 (경고 아닌 안내 느낌)
+
+### Changed
+
+- **isOutOfBounds() Deprecated** (gridUtils.ts)
+  - `@deprecated` 주석 추가
+  - needsReview()로 대체 권장
+  - 하위 호환을 위해 함수는 유지
+
+- **"화면 밖" 패널 역할 변경** (PopCanvas.tsx)
+  - 기존: col > maxCol → 화면 밖 (드래그로 복원)
+  - 변경: 오버라이드 없음 → 검토 필요 (클릭으로 선택)
+  - 숨김 기능과 완전히 분리 (별도 유지)
+
+### Fixed
+
+- **정보 손실 문제 해결**
+  - 모든 컴포넌트가 항상 그리드 안에 배치됨
+  - 뷰어에서도 자동 배치가 적용되어 모두 표시됨
+
+### Technical Details
+
+```
+자동 줄바꿈 로직:
+
+1. convertAndResolvePositions() 호출
+   components: [ {id: "A", position: {col:1, ...}}, {id: "B", position: {col:5, ...}} ]
+   targetMode: "mobile_portrait" (4칸)
+
+2. 비율 변환 + 원본 col 보존
+   converted: [
+     {id: "A", position: {col:1, ...}, originalCol: 1},
+     {id: "B", position: {col:2, ...}, originalCol: 5}  // col은 변환됨, 원본은 5
+   ]
+
+3. 정상 vs 초과 분리
+   normalComponents: [A]  // originalCol ≤ 4
+   overflowComponents: [B]  // originalCol > 4
+
+4. 맨 아래 배치
+   maxRow = A의 (row + rowSpan - 1) = 1
+   B: col=1, row=2 (맨 아래에 자동 배치)
+
+5. 겹침 해결
+   resolveOverlaps([A, B], 4)  // 최종 위치 확정
+
+6. 검토 필요 판별
+   needsReview("mobile_portrait", false)  // 오버라이드 없음 → true
+   → ReviewPanel에 B 표시
+```
+
+```
+검토 필요 vs 숨김:
+
+구분          | 검토 필요              | 숨김
+------------- | ---------------------- | -------------------
+역할          | 자동 배치 알림         | 의도적 숨김
+뷰어에서      | 보임 (자동 배치)       | 안 보임
+디자이너에서  | ReviewPanel 표시       | HiddenPanel 표시
+판단 기준     | 오버라이드 없음        | hidden 배열에 ID
+색상 테마     | 파란색 (안내)          | 회색 (제외)
+```
+
+### 수정 파일
+
+| 파일 | 변경 내용 |
+|------|----------|
+| `gridUtils.ts` | convertAndResolvePositions 자동 줄바꿈, needsReview 추가, isOutOfBounds deprecated |
+| `PopCanvas.tsx` | OutOfBoundsPanel → ReviewPanel 변경, needsReview 필터링 |
+| `PopRenderer.tsx` | isOutOfBounds import 제거 (사용 안 함) |
+| `README.md` | v5.1 버전 표시, 최신 기능 요약 |
+| `CHANGELOG.md` | v5.1 항목 추가 |
+
+---
+
+## [2026-02-05 심야] 반응형 레이아웃 + 숨김 기능 완성
+
+### 배경 (왜 이 작업이 필요했는가)
+
+**문제 상황**:
+- 12칸 모드에서 배치한 컴포넌트가 4칸 모드에서 초과됨
+- 모드별로 컴포넌트 위치/크기를 다르게 설정할 방법 없음
+- 특정 모드에서만 컴포넌트를 숨길 방법 없음
+
+**해결 방향**:
+- 모드별 오버라이드 시스템으로 위치/크기 개별 저장
+- 화면 밖 컴포넌트를 별도 패널에 표시하고 드래그로 재배치
+- 숨김 기능으로 특정 모드에서 컴포넌트 제외
+
+### Added
+
+- **모드별 오버라이드 시스템** (PopDesigner.tsx, pop-layout.ts)
+  - `PopModeOverrideV5.positions`: 모드별 컴포넌트 위치 저장
+  - `PopModeOverrideV5.hidden`: 모드별 숨김 컴포넌트 ID 배열
+  - `getEffectiveComponentPosition()`: 오버라이드된 위치 반환
+  - 드래그/리사이즈 시 자동으로 오버라이드 저장
+
+- **화면 밖 컴포넌트 패널** (PopCanvas.tsx)
+  - `OutOfBoundsPanel`: 현재 모드에서 초과하는 컴포넌트 표시
+  - `OutOfBoundsItem`: 드래그 가능한 회색 컴포넌트 카드
+  - `isOutOfBounds()`: 컴포넌트가 현재 모드 칸 수 초과 여부 판단
+  - 클릭하면 숨김 패널로 이동
+
+- **숨김 기능** (PopDesigner.tsx, PopCanvas.tsx)
+  - `HiddenPanel`: 숨김 처리된 컴포넌트 표시
+  - `HiddenItem`: 드래그로 숨김 해제 가능
+  - `handleHideComponent()`: 컴포넌트 숨김 처리
+  - `handleUnhideComponent()`: 숨김 해제 (handleMoveComponent에 통합)
+  - 숨김 방법 3가지:
+    1. 그리드 → 숨김패널 드래그
+    2. H키 단축키
+    3. 화면밖 컴포넌트 클릭
+
+- **리사이즈 겹침 검사** (PopRenderer.tsx)
+  - `checkResizeOverlap()`: 리사이즈 시 다른 컴포넌트와 겹침 검사
+  - 겹치면 리사이즈 취소 및 toast 알림
+
+- **원본으로 되돌리기** (PopDesigner.tsx)
+  - `handleResetToDefault()`: 현재 모드 오버라이드 삭제
+  - 자동 위치 계산으로 복원
+
+### Fixed
+
+- **숨김 컴포넌트 드래그 안됨 버그**
+  - 원인: `onUnhideComponent`와 `onMoveComponent`가 별도로 호출되어 상태 충돌
+  - 해결: `handleMoveComponent`에서 숨김 해제 로직 통합 (단일 상태 업데이트)
+
+- **그리드 범위 초과 에러**
+  - 원인: 드롭 위치 + colSpan이 칸 수 초과
+  - 해결: 드롭 시 `adjustedCol` 계산하여 자동으로 왼쪽으로 밀어서 배치
+
+- **getAllEffectivePositions에 숨김 컴포넌트 포함**
+  - 해결: 숨김 및 화면밖 컴포넌트를 결과에서 제외
+
+- **Expected drag drop context 에러 (뷰어 페이지)**
+  - 원인: `DraggableComponent`에서 `useDrag` 훅이 `DndProvider` 없이 호출됨
+  - 해결: `isDesignMode=false`일 때 `DraggableComponent` 대신 일반 `div`로 렌더링
+
+### Changed
+
+- **PopModeOverrideV5 타입 확장**
+  ```typescript
+  interface PopModeOverrideV5 {
+    positions?: Record<string, Partial<PopGridPosition>>;  // 위치 오버라이드
+    hidden?: string[];  // 숨김 컴포넌트 ID 배열
+  }
+  ```
+
+- **12칸 모드(tablet_landscape) 제한**
+  - 기본 모드이므로 숨김 기능 비활성화
+  - 화면밖 패널 표시 안함
+  - 위치 변경은 기본 position에 직접 저장
+
+- **패널 레이아웃 재구성** (PopCanvas.tsx)
+  - 오른쪽에 화면밖 패널 + 숨김 패널 세로 배치
+  - 12칸 모드에서는 패널 숨김
+
+### Technical Details
+
+```
+오버라이드 데이터 흐름:
+
+1. 컴포넌트 드래그/리사이즈
+   ↓
+2. currentMode 확인
+   ↓
+3-a. tablet_landscape → layout.components[id].position 직접 수정
+3-b. 다른 모드 → layout.overrides[mode].positions[id]에 저장
+   ↓
+4. getEffectiveComponentPosition()이 우선순위대로 반환
+   우선순위: overrides > autoResolved > 기본 position
+
+숨김 기능 흐름:
+
+1. 숨김 요청 (드래그/H키/클릭)
+   ↓
+2. layout.overrides[mode].hidden 배열에 ID 추가
+   ↓
+3. PopRenderer에서 hidden 체크 → 렌더링 제외
+   ↓
+4. HiddenPanel에서 표시
+   ↓
+5. 드래그로 그리드에 복원 → hidden 배열에서 제거 + 위치 업데이트 (단일 상태 업데이트)
+```
+
+### 수정 파일
+| 파일 | 변경 내용 |
+|------|----------|
+| `pop-layout.ts` | PopModeOverrideV5.hidden 추가 |
+| `PopDesigner.tsx` | handleHideComponent, handleUnhideComponent 통합, 오버라이드 저장 |
+| `PopCanvas.tsx` | OutOfBoundsPanel, HiddenPanel 추가, 드롭 위치 자동 조정 |
+| `PopRenderer.tsx` | 숨김 필터링, 리사이즈 겹침 검사 |
+| `gridUtils.ts` | getAllEffectivePositions에서 숨김/화면밖 제외, isOutOfBounds 함수 |
+
+---
+
+## [2026-02-05 저녁] 드래그앤드롭 완전 수정
+
+### 배경 (왜 좌표 계산이 틀렸는가)
+
+**문제 상황**:
+- 컴포넌트를 아래로 드래그해도 위로 올라감
+- Row 92 같은 비정상적인 좌표로 배치됨
+- 드래그 이동/리사이즈가 전혀 작동하지 않음
+
+**핵심 원인**: 캔버스에 `transform: scale(0.8)` 적용 시 좌표 계산 불일치
+```
+문제:
+- getBoundingClientRect() → 스케일 적용된 크기 반환 (예: 1024px → 819px)
+- getClientOffset() → 뷰포트 기준 실제 마우스 좌표
+- 이 둘을 그대로 계산하면 좌표가 완전히 틀림
+```
+
+**해결**: 단순한 상대 좌표 + 스케일 보정
+```typescript
+// 캔버스 내 상대 좌표 (스케일 보정)
+const relX = (마우스X - 캔버스left) / canvasScale;
+const relY = (마우스Y - 캔버스top) / canvasScale;
+calcGridPosition(relX, relY, customWidth, ...);  // 실제 캔버스 크기 사용
+```
+
+### Added
+- **`calcGridPosition()` 함수** (PopCanvas.tsx)
+  - 캔버스 내 상대 좌표를 그리드 좌표로 변환
+  - 패딩, gap, 셀 너비를 고려한 정확한 계산
+
+- **공통 DND 상수** (constants/dnd.ts)
+  - `DND_ITEM_TYPES.COMPONENT`: 팔레트에서 새 컴포넌트
+  - `DND_ITEM_TYPES.MOVE_COMPONENT`: 기존 컴포넌트 이동
+  - 3개 파일에서 중복 정의되던 것을 통합
+
+### Fixed
+- **스케일 보정 누락**
+  - 캔버스 줌(scale)이 적용된 상태에서 좌표 계산 오류
+  - `(offset - rect.left) / scale`로 보정
+
+- **DND 타입 상수 불일치**
+  - PopCanvas: `"component"`, `"MOVE_COMPONENT"`
+  - PopRenderer: `"MOVE_COMPONENT"` (하드코딩)
+  - ComponentPalette: `"component"` (로컬 정의)
+  - 모두 공통 상수로 통합
+
+- **컴포넌트 중첩(겹침) 문제**
+  - 원인: `toast` import 누락으로 겹침 감지 로직이 실행 안됨
+  - 해결: `sonner`에서 toast import 추가
+  - 겹침 시 `findNextEmptyPosition()`으로 자동 재배치
+
+- **리사이즈 핸들 작동 안됨**
+  - 원인: `useDrop` 훅 2개가 같은 `canvasRef`에 중복 적용
+  - 해결: 단일 `useDrop`으로 통합 (`COMPONENT` + `MOVE_COMPONENT` 모두 처리)
+
+- **불필요한 toast 메시지 제거**
+  - "컴포넌트가 이동되었습니다" 알림 삭제
+
+### Changed
+- **mouseToGridPosition 단순화**
+  - 복잡한 DOMRect 전달 대신 필요한 값만 직접 전달
+  - gridUtils.ts의 함수는 유지 (다른 곳에서 사용)
+
+### Technical Details
+```
+좌표 변환 흐름 (수정 후):
+
+1. 마우스 드롭
+   offset = monitor.getClientOffset()  // 뷰포트 기준 {x: 500, y: 300}
+
+2. 캔버스 위치
+   canvasRect = canvasRef.getBoundingClientRect()  // {left: 250, top: 100}
+
+3. 스케일 보정된 상대 좌표
+   relX = (500 - 250) / 0.8 = 312.5  // 캔버스 내 실제 X
+   relY = (300 - 100) / 0.8 = 250    // 캔버스 내 실제 Y
+
+4. 그리드 좌표 계산
+   calcGridPosition(312.5, 250, 1024, 12, 48, 16, 24)
+   → { col: 5, row: 4 }
+```
+
+### 수정 파일
+| 파일 | 변경 내용 |
+|------|----------|
+| `PopCanvas.tsx` | calcGridPosition 추가, 스케일 보정 적용 |
+| `PopDesigner.tsx` | toast 메시지 제거 |
+| `PopRenderer.tsx` | DND 상수 import |
+| `ComponentPalette.tsx` | DND 상수 import |
+| `constants/dnd.ts` | 새 파일 (DND 타입 상수) |
+| `constants/index.ts` | 새 파일 (export) |
+
+---
+
+## [2026-02-05 오후] 그리드 가이드 CSS Grid 통합
+
+### 배경 (왜 재설계했는가)
+
+**문제 상황**:
+- GridGuide.tsx(SVG 기반)와 PopRenderer.tsx(CSS Grid)가 좌표계 불일치
+- 격자선과 컴포넌트가 정렬되지 않음 ("무늬가 따로 논다")
+- 행/열 라벨이 4부터 시작하는 등 오류
+
+**핵심 원칙**:
+> "격자선은 컴포넌트와 같은 좌표계에서 태어나야 한다"
+
+**결정**: SVG 격자 삭제, CSS Grid 기반 통합
+→ 상세: [decisions/004-grid-guide-integration.md](./decisions/004-grid-guide-integration.md)
+
+### Breaking Changes
+- `GridGuide.tsx` 삭제 (SVG 기반 격자)
+
+### Added
+- **CSS Grid 기반 격자 셀** (PopRenderer.tsx)
+  - `gridCells`: 12x20 = 240개 실제 DOM 셀
+  - `border-dashed border-blue-300/40` 스타일
+  - 컴포넌트는 `z-index:10`으로 위에 표시
+  - `showGridGuide` prop으로 ON/OFF
+
+- **행/열 라벨** (PopCanvas.tsx)
+  - 열 라벨: 1~12 (캔버스 상단)
+  - 행 라벨: 1~20 (캔버스 좌측)
+  - absolute positioning으로 정확한 정렬
+  - 줌/패닝에 연동
+
+- **그리드 토글 버튼** (PopCanvas.tsx)
+  - "그리드 ON/OFF" 버튼 추가
+  - 격자 표시 상태 관리
+
+### Changed
+- **컴포넌트 타입 단순화**
+  - `PopComponentType`: `pop-sample` 1개로 단순화
+  - `DEFAULT_COMPONENT_GRID_SIZE`: `pop-sample` 전용
+  - `ComponentPalette.tsx`: 샘플 박스 1개만 표시
+  - `PopRenderer.tsx`: 샘플 박스 렌더링으로 단순화
+
+### Technical Details
+```
+역할 분담:
+- PopRenderer: 격자 셀(div) + 컴포넌트 (같은 CSS Grid 좌표계)
+- PopCanvas: 라벨 + 줌/패닝 + 토글
+- GridGuide: 삭제
+
+격자 셀 구조:
+┌───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┐
+│1,1│2,1│3,1│4,1│5,1│6,1│7,1│8,1│9,1│10│11│12 │ ← col
+├───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┤
+│1,2│...                                     │
+└───┴───────────────────────────────────────────┘
+  ↑ row
+```
+
+---
+
 ## [2026-02-05] v5 그리드 시스템 완전 통합

 ### 배경 (왜 v5로 전환했는가)
--- a/popdocs/FILES.md
+++ b/popdocs/FILES.md
@ -1,6 +1,6 @@
 # POP 파일 상세 목록

-**최종 업데이트: 2026-02-05 (v5 그리드 시스템 통합)**
+**최종 업데이트: 2026-02-06 (v5.2 브레이크포인트 재설계 + 세로 자동 확장)**

 이 문서는 POP 화면 시스템과 관련된 모든 파일을 나열하고 각 파일의 역할을 설명합니다.

@ -151,9 +151,11 @@ const [hasChanges, setHasChanges] = useState(false);

 | 항목 | 내용 |
 |------|------|
-| 역할 | v5 CSS Grid 기반 캔버스 |
+| 역할 | v5 CSS Grid 기반 캔버스 + 행/열 라벨 |
 | 렌더링 | CSS Grid (4/6/8/12칸) |
 | 모드 | 4개 (태블릿/모바일 x 가로/세로) |
+| 라벨 | 열 라벨 (1~12), 행 라벨 (1~20) |
+| 토글 | 그리드 ON/OFF 버튼 |

 **핵심 Props**:

@ -170,15 +172,20 @@ interface PopCanvasProps {
 }
 ```

-**뷰포트 프리셋**:
+**뷰포트 프리셋** (v5.2 - height 제거됨, 세로 자동 확장):

 ```typescript
 const VIEWPORT_PRESETS = [
-  { id: "mobile_portrait", label: "모바일 세로", width: 375, height: 667 },    // 4칸
-  { id: "mobile_landscape", label: "모바일 가로", width: 667, height: 375 },   // 6칸
-  { id: "tablet_portrait", label: "태블릿 세로", width: 768, height: 1024 },   // 8칸
-  { id: "tablet_landscape", label: "태블릿 가로", width: 1024, height: 768 },  // 12칸
+  { id: "mobile_portrait", label: "모바일 세로", width: 375, columns: 4 },
+  { id: "mobile_landscape", label: "모바일 가로", width: 600, columns: 6 },
+  { id: "tablet_portrait", label: "태블릿 세로", width: 834, columns: 8 },
+  { id: "tablet_landscape", label: "태블릿 가로", width: 1024, columns: 12 },
 ];
+
+// 세로 자동 확장
+const MIN_CANVAS_HEIGHT = 600;
+const CANVAS_EXTRA_ROWS = 3;
+const dynamicCanvasHeight = useMemo(() => { ... }, []);
 ```

 **제공 기능**:
@ -247,8 +254,9 @@ export { default as ComponentEditorPanel, default } from "./ComponentEditorPanel

 | 항목 | 내용 |
 |------|------|
-| 역할 | v5 레이아웃 CSS Grid 렌더러 |
-| 입력 | PopLayoutDataV5, viewportWidth, currentMode |
+| 역할 | v5 레이아웃 CSS Grid 렌더러 + 격자 셀 |
+| 입력 | PopLayoutDataV5, viewportWidth, currentMode, showGridGuide |
+| 격자 | 동적 행 수 (컴포넌트 배치에 따라 자동 계산, CSS Grid 좌표계) |

 **핵심 Props**:

@ -259,12 +267,43 @@ interface PopRendererProps {
  currentMode?: GridMode;
  isDesignMode?: boolean;
  selectedComponentId?: string | null;
+  showGridGuide?: boolean;  // 격자 표시 여부
  onComponentClick?: (componentId: string) => void;
  onBackgroundClick?: () => void;
  className?: string;
 }
 ```

+**격자 셀 렌더링**:
+
+```typescript
+// 동적 행 수 계산 (컴포넌트 배치 기반)
+const gridCells = useMemo(() => {
+  const maxRowEnd = Object.values(components).reduce((max, comp) => {
+    const pos = getEffectivePosition(comp);
+    return Math.max(max, pos.row + pos.rowSpan);
+  }, 1);
+  const rowCount = Math.max(10, maxRowEnd + 5);
+  
+  const cells = [];
+  for (let row = 1; row <= rowCount; row++) {
+    for (let col = 1; col <= breakpoint.columns; col++) {
+      cells.push({ id: `cell-${col}-${row}`, col, row });
+    }
+  }
+  return cells;
+}, [components, overrides, mode, breakpoint.columns]);
+
+// 컴포넌트와 동일한 CSS Grid 좌표계로 렌더링
+{showGridGuide && gridCells.map(cell => (
+  <div
+    key={cell.id}
+    className="border border-dashed border-blue-300/40"
+    style={{ gridColumn: cell.col, gridRow: cell.row }}
+  />
+))}
+```
+
 **CSS Grid 스타일 생성**:

 ```typescript
@ -374,6 +413,41 @@ export * from "./pop-layout";

 ---

+## 5.5. Constants 파일 (신규)
+
+### `frontend/components/pop/designer/constants/dnd.ts`
+
+| 항목 | 내용 |
+|------|------|
+| 역할 | DnD(Drag and Drop) 관련 상수 |
+| 생성일 | 2026-02-05 |
+
+**핵심 상수**:
+
+```typescript
+export const DND_ITEM_TYPES = {
+  /** 팔레트에서 새 컴포넌트 드래그 */
+  COMPONENT: "POP_COMPONENT",
+  /** 캔버스 내 기존 컴포넌트 이동 */
+  MOVE_COMPONENT: "POP_MOVE_COMPONENT",
+} as const;
+```
+
+**사용처**:
+- `PopCanvas.tsx` - useDrop accept 타입
+- `PopRenderer.tsx` - useDrag type
+- `ComponentPalette.tsx` - useDrag type
+
+---
+
+### `frontend/components/pop/designer/constants/index.ts`
+
+```typescript
+export * from "./dnd";
+```
+
+---
+
 ## 6. Utils 파일

 ### `frontend/components/pop/designer/utils/gridUtils.ts`
@ -545,12 +619,12 @@ export * from "./dashboard";
 | 폴더 | 파일 수 | 설명 |
 |------|---------|------|
 | `app/(pop)` | 4 | App Router 페이지 |
-| `components/pop/designer` | 9 | 디자이너 모듈 (v5) |
+| `components/pop/designer` | 11 | 디자이너 모듈 (v5) - constants 포함 |
 | `components/pop/management` | 5 | 관리 모듈 |
 | `components/pop/dashboard` | 12 | 대시보드 모듈 |
 | `components/pop` (루트) | 15 | 루트 컴포넌트 |
 | `lib` | 3 | 라이브러리 |
-| **총계** | **48** | |
+| **총계** | **50** | |

 ---

@ -565,6 +639,7 @@ export * from "./dashboard";
 | `ComponentEditorPanelV4.tsx` | v4 편집 패널 |
 | `PopPanel.tsx` | 레거시 팔레트 패널 |
 | `test-v4/page.tsx` | v4 테스트 페이지 |
+| `GridGuide.tsx` | SVG 기반 격자 가이드 (좌표 불일치로 삭제, CSS Grid 통합) |

 ---

--- a/popdocs/INDEX.md
+++ b/popdocs/INDEX.md
@ -10,10 +10,29 @@
 | 기능 | 파일 | 함수/컴포넌트 | 설명 |
 |------|------|--------------|------|
 | 그리드 렌더링 | PopRenderer.tsx | `PopRenderer` | CSS Grid 기반 v5 렌더링 |
+| 격자 셀 렌더링 | PopRenderer.tsx | `gridCells` (useMemo) | 12x20 = 240개 DOM 셀 |
 | 위치 변환 | gridUtils.ts | `convertPositionToMode()` | 12칸 → 4/6/8칸 변환 |
 | 모드 감지 | pop-layout.ts | `detectGridMode()` | 뷰포트 너비로 모드 판별 |
 | 컴포넌트 스타일 | PopRenderer.tsx | `convertPosition()` | 그리드 좌표 → CSS |

+## 그리드 가이드
+
+| 기능 | 파일 | 함수/컴포넌트 | 설명 |
+|------|------|--------------|------|
+| 격자 셀 | PopRenderer.tsx | `gridCells` | CSS Grid 기반 격자선 (동적 행 수) |
+| 열 라벨 | PopCanvas.tsx | `gridLabels.columns` | 1~12 표시 |
+| 행 라벨 | PopCanvas.tsx | `gridLabels.rows` | 동적 계산 (dynamicCanvasHeight 기반) |
+| 토글 | PopCanvas.tsx | `showGridGuide` 상태 | 격자 ON/OFF |
+
+## 세로 자동 확장
+
+| 기능 | 파일 | 함수/컴포넌트 | 설명 |
+|------|------|--------------|------|
+| 동적 높이 | PopCanvas.tsx | `dynamicCanvasHeight` | 컴포넌트 배치 기반 자동 계산 |
+| 최소 높이 | PopCanvas.tsx | `MIN_CANVAS_HEIGHT` | 600px 보장 |
+| 여유 행 | PopCanvas.tsx | `CANVAS_EXTRA_ROWS` | 항상 3행 추가 |
+| 격자 행 수 | PopRenderer.tsx | `gridCells` | maxRowEnd + 5 동적 계산 |
+
 ## 드래그 앤 드롭

 | 기능 | 파일 | 함수/컴포넌트 | 설명 |
@ -61,9 +80,26 @@

 | 기능 | 파일 | 함수/컴포넌트 | 설명 |
 |------|------|--------------|------|
-| 프리셋 전환 | PopCanvas.tsx | `VIEWPORT_PRESETS` | 4개 모드 |
+| 프리셋 전환 | PopCanvas.tsx | `VIEWPORT_PRESETS` | 4개 모드 (width만, height 제거) |
 | 줌 컨트롤 | PopCanvas.tsx | `canvasScale` | 30%~150% |
 | 패닝 | PopCanvas.tsx | Space + 드래그 | 캔버스 이동 |
+| 모드 감지 | pop-layout.ts | `detectGridMode()` | 너비 기반 모드 판별 |
+
+## 브레이크포인트
+
+| 기능 | 파일 | 함수/컴포넌트 | 설명 |
+|------|------|--------------|------|
+| 그리드 설정 | pop-layout.ts | `GRID_BREAKPOINTS` | 모드별 칸 수, gap, padding |
+| 모드 감지 | pop-layout.ts | `detectGridMode()` | viewportWidth → GridMode |
+| 훅 연동 | useDeviceOrientation.ts | `BREAKPOINTS.TABLET_MIN` | 768px (태블릿 경계) |
+
+## 자동 줄바꿈/검토
+
+| 기능 | 파일 | 함수/컴포넌트 | 설명 |
+|------|------|--------------|------|
+| 자동 배치 | gridUtils.ts | `convertAndResolvePositions()` | col > maxCol → 맨 아래 배치 |
+| 검토 필요 판별 | gridUtils.ts | `needsReview()` | 오버라이드 없으면 true |
+| 검토 패널 | PopCanvas.tsx | `ReviewPanel` | 검토 필요 컴포넌트 목록 |

 ---

@ -72,9 +108,10 @@
 | 파일 | 핵심 기능 |
 |------|----------|
 | PopDesigner.tsx | 레이아웃 로드/저장, 컴포넌트 CRUD, 히스토리 |
-| PopCanvas.tsx | DnD, 줌, 패닝, 모드 전환, 그리드 표시 |
-| PopRenderer.tsx | CSS Grid 렌더링, 위치 변환, 컴포넌트 표시 |
+| PopCanvas.tsx | DnD, 줌, 패닝, 모드 전환, 행/열 라벨, 격자 토글 |
+| PopRenderer.tsx | CSS Grid 렌더링, 격자 셀, 위치 변환, 컴포넌트 표시 |
 | ComponentEditorPanel.tsx | 속성 편집 (위치, 크기, 설정, 표시) |
+| ComponentPalette.tsx | 컴포넌트 팔레트 (드래그 가능한 컴포넌트 목록) |
 | pop-layout.ts | 타입 정의, 유틸리티 함수, 상수 |
 | gridUtils.ts | 좌표 계산, 겹침 감지, 자동 배치 |

--- a/popdocs/PLAN.md
+++ b/popdocs/PLAN.md
@ -2,130 +2,80 @@

 ---

-## 현재 상태 (2026-02-04)
+## 현재 상태 (2026-02-06)

-**v4 통합 설계 모드 Phase 1.6 완료 (비율 스케일링 시스템)**
-
-### 완료된 작업
-
-1. **v4 기본 구조** - 완료
-2. **v4 렌더러** - 완료 (PopFlexRenderer)
-3. **v4 디자이너 통합** - 완료
-4. **새 화면 v4 기본 적용** - 완료
-5. **Undo/Redo** - 완료 (데스크탑 모드와 동일 방식)
-6. **드래그 리사이즈** - 완료
-7. **Flexbox 가로 배치** - 완료 (업계 표준 방식)
-8. **Spacer 컴포넌트** - 완료
-9. **컴포넌트 순서 변경** - 완료 (드래그 앤 드롭)
-10. **비율 스케일링** - 완료 (업계 표준 Scale with Fixed Aspect Ratio)
-
-### 현재 UI 상태
-
-```
-┌─────────────────────────────────────────────────────────────────┐
-│ ← 목록  화면명  *변경됨    [↶][↷]   자동 레이아웃 (v4)   [저장] │
-├─────────────────────────────────────────────────────────────────┤
-│ 미리보기: [모바일↕] [모바일↔] [태블릿↕] [태블릿↔(기본)]         │
-│ 너비: [========●====] 1024 x 768                    70% [-][+]  │
-├─────────────────────────────────────────────────────────────────┤
-│          │                                    │                 │
-│  컴포넌트 │  [필드1] [필드2] [필드3] [필드4]   │    속성 패널    │
-│  팔레트   │  [필드5] [Spacer] [Spacer]        │                 │
-│   (20%)  │           (가로 배치 + 줄바꿈)     │     (20%)       │
-│          │                                    │                 │
-│ - 필드   │  디바이스 스크린 (스크롤 가능)     │                 │
-│ - 버튼   │                                    │                 │
-│ - 리스트  │                                    │                 │
-│ - 인디케이터│                                  │                 │
-│ - 스캐너  │                                    │                 │
-│ - 숫자패드 │                                   │                 │
-│ - 스페이서 │                                   │                 │
-└──────────┴────────────────────────────────────┴─────────────────┘
-```
+**v5.2 그리드 시스템 완성 (브레이크포인트 재설계 + 세로 자동 확장)**

 ---

 ## 작업 순서

 ```
-[Phase 1~3]      [Phase 4]         [Phase 5]
-v4 Flexbox    →  실제 컴포넌트  →  그리드 시스템 (v5)
-   완료           다음               계획 승인
+[Phase 1~3]      [Phase 5]           [Phase 4]
+v4 Flexbox    →  v5 CSS Grid      →  실제 컴포넌트 구현
+   완료            완료 (v5.2)         다음
 ```

-### Phase 5: 그리드 시스템 (v5) - 신규 계획
-
-```
-[Phase 5.1]       [Phase 5.2]        [Phase 5.3]        [Phase 5.4]
-그리드 타입 정의 → 그리드 렌더러   → 디자이너 UI    → 반응형 자동화
-```
-
-**상세 계획**: [GRID_SYSTEM_PLAN.md](./GRID_SYSTEM_PLAN.md)
-
 ---

-## Phase 1: 기본 구조 (완료)
+## 완료된 Phase

- [x] v3/v4 탭 제거 (자동 판별)
- [x] 새 화면 → v4로 시작
- [x] 기존 v3 화면 → v3로 로드 (하위 호환)
- [x] 4개 프리셋 버튼 (모바일↕, 모바일↔, 태블릿↕, 태블릿↔)
- [x] 슬라이더 유지 (320~1200px)
- [x] 기본 프리셋: 태블릿 가로 (1024x768)
- [x] ComponentPaletteV4 생성 (v4 전용 팔레트)
- [x] 빈 레이아웃도 v4로 시작하도록 로직 수정
+### Phase 1~3: v4 Flexbox 시스템 (완료, 레거시 삭제됨)

-## Phase 1.5: Flexbox 가로 배치 + 기본 기능 (완료)
+v4 Flexbox 기반 시스템은 v5 CSS Grid로 완전히 대체되었습니다.
+v4 관련 파일은 모두 삭제되었습니다.

- [x] Undo/Redo (Ctrl+Z / Ctrl+Shift+Z)
- [x] 드래그 리사이즈 핸들 (오른쪽, 아래, 오른쪽아래)
- [x] Flexbox 가로 배치 (`direction: horizontal`, `wrap: true`)
- [x] 컴포넌트 타입별 기본 크기 설정
- [x] Spacer 컴포넌트 (`pop-spacer`) - 정렬용 빈 공간
- [x] 컴포넌트 순서 변경 (드래그 앤 드롭)
- [x] 디바이스 스크린 스크롤 (무한 스크롤)
+- [x] v4 기본 구조, 렌더러, 디자이너 통합
+- [x] Undo/Redo, 드래그 리사이즈, Flexbox 가로 배치
+- [x] 비율 스케일링 시스템
+- [x] 오버라이드 기능 (모드별 배치 고정)
+- [x] 컴포넌트 표시/숨김, 줄바꿈

-## Phase 1.6: 비율 스케일링 시스템 (완료)
+### Phase 5: v5 CSS Grid 시스템 (완료)

- [x] 기준 너비 설정 (BASE_VIEWPORT_WIDTH = 1024px)
- [x] 최대 너비 제한 (1366px, 12인치)
- [x] 뷰포트 감지 (resize 이벤트 리스너)
- [x] 컴포넌트 크기 스케일 적용 (fixedWidth, fixedHeight)
- [x] 컨테이너 스케일 적용 (gap, padding)
- [x] 디자인 모드 분리 (scale=1, 원본 유지)
- [x] DndProvider 에러 수정 (뷰어에서 useDrag/useDrop 방지)
+#### Phase 5.1: 타입 정의 (완료)
+- [x] `PopLayoutDataV5` 인터페이스
+- [x] `PopGridConfig`, `PopGridPosition` 타입
+- [x] `GridMode`, `GRID_BREAKPOINTS` 상수
+- [x] `createEmptyPopLayoutV5()`, `isV5Layout()`, `detectGridMode()`

-## Phase 2: 오버라이드 기능 (완료) ✅
+#### Phase 5.2: 그리드 렌더러 (완료)
+- [x] `PopRenderer.tsx` - CSS Grid 기반 렌더링
+- [x] 격자 셀 렌더링 (CSS Grid 동일 좌표계)
+- [x] 위치 변환 (12칸 -> 4/6/8칸)

-### Phase 2.1: 배치 고정 (완료)
- [x] 현재 모드 추적 (PopDesigner)
- [x] 고정 버튼 UI 및 로직
- [x] 오버라이드 저장 (배치만)
- [x] 오버라이드 초기화 로직
- [x] **버그 수정**: tempLayout 도입 (root 오염 방지)
- [x] **속성 패널**: 다른 모드에서 비활성화
+#### Phase 5.3: 디자이너 UI (완료)
+- [x] `PopCanvas.tsx` - 그리드 캔버스 + 행/열 라벨
+- [x] 드래그 스냅 (칸에 맞춤)
+- [x] `ComponentEditorPanel.tsx` - 위치 편집

-### Phase 2.2: 렌더러 오버라이드 적용 (완료) ✅
- [x] PopFlexRenderer에서 오버라이드 병합 (getMergedRoot)
- [x] 컨테이너 속성 오버라이드 적용 (direction, wrap, gap, alignItems, justifyContent, padding, children)
- [x] tempLayout 우선 표시 (고정 전 미리보기)
- [x] 테스트 (모드별 다른 배치)
+#### Phase 5.4: 반응형 자동화 (완료)
+- [x] 자동 변환 알고리즘 (12칸 -> 4칸)
+- [x] 겹침 감지 및 재배치
+- [x] 모드별 오버라이드 저장

-### Phase 2.3: 편집 자동 감지 (완료) ✅
- [x] 순서 변경 시 자동 tempLayout 저장
- [x] "고정" 버튼으로 정식 오버라이드 전환
- [x] 속성 변경은 기본 모드에서만 가능 (다른 모드 차단)
+#### v5.1 추가 기능 (완료)
+- [x] 자동 줄바꿈 (col > maxCol -> 맨 아래 배치)
+- [x] "검토 필요" 알림 시스템
+- [x] Gap 프리셋 (좁게/보통/넓게)
+- [x] 숨김 기능 (모드별)

-## Phase 3: 컴포넌트 표시/숨김 + 줄바꿈 (완료) ✅
+#### v5.2 브레이크포인트 재설계 + 세로 자동 확장 (완료)
+- [x] 기기 기반 브레이크포인트 (479/767/1023px)
+- [x] 세로 자동 확장 (dynamicCanvasHeight)
+- [x] 뷰어 반응형 일관성 (detectGridMode 사용)
+- [x] VIEWPORT_PRESETS에서 height 제거

- [x] visibility 속성 추가 (모드별 true/false)
- [x] 속성 패널 "표시" 탭 추가 (체크박스 UI)
- [x] 렌더러에서 visibility 처리
- [x] pop-break 컴포넌트 추가 (강제 줄바꿈)
- [x] 컴포넌트 오버라이드 병합 로직
- [x] 삭제 시 오버라이드 정리 로직
+---

-## Phase 4: 실제 컴포넌트 구현 (다음)
+## 다음 작업
+
+### Phase 4: 실제 컴포넌트 구현
+
+현재 모든 컴포넌트는 `pop-sample` (샘플 박스)로 렌더링됩니다.
+실제 컴포넌트를 구현하여 데이터 바인딩까지 연결해야 합니다.
+
+**컴포넌트 구현 목록**:

 - [ ] pop-field: 입력/표시 필드
 - [ ] pop-button: 액션 버튼
@ -134,172 +84,37 @@ v4 Flexbox    →  실제 컴포넌트  →  그리드 시스템 (v5)
 - [ ] pop-scanner: 바코드/QR 스캔
 - [ ] pop-numpad: 숫자 입력 패드

---
+**참고 문서**: [components-spec.md](./components-spec.md)

-## Phase 5: 그리드 시스템 (v5) - 계획 승인
+### 후속 작업

-> 상세 계획: [GRID_SYSTEM_PLAN.md](./GRID_SYSTEM_PLAN.md)
-
-### 개요
-
-Flexbox 흐름 기반 → **CSS Grid 위치 지정** 방식으로 전환
-
-| 항목 | v4 (현재) | v5 (그리드) |
-|------|----------|-------------|
-| 배치 | Flexbox 흐름 | Grid 좌표 (열/행) |
-| 크기 | 픽셀 (200px) | 칸 (colSpan, rowSpan) |
-| 줄바꿈 | 자동 | 명시적 |
-
-### Phase 5.1: 그리드 타입 정의
-
- [ ] `PopLayoutDataV5` 인터페이스
- [ ] `PopGridConfig` (칸 수, 행 높이, 간격)
- [ ] `PopComponentPositionV5` (col, row, colSpan, rowSpan)
- [ ] 브레이크포인트 상수 (4칸/6칸/8칸/12칸)
-
-### Phase 5.2: 그리드 렌더러
-
- [ ] `PopGridRenderer.tsx` 생성
- [ ] CSS Grid 스타일 계산
- [ ] 브레이크포인트 감지 및 칸 수 변경
- [ ] 위치 변환 (12칸 → 4칸)
-
-### Phase 5.3: 디자이너 UI
-
- [ ] `PopCanvasV5.tsx` (그리드 캔버스)
- [ ] 바둑판 배경 표시
- [ ] 드래그 스냅 (칸에 맞춤)
- [ ] 위치 편집 패널
-
-### Phase 5.4: 반응형 자동화
-
- [ ] 자동 변환 알고리즘 (12칸 → 4칸)
- [ ] 겹침 감지 및 재배치
- [ ] 모드별 오버라이드
-
-### 브레이크포인트
-
-| 모드 | 화면 범위 | 그리드 칸 수 |
-|------|----------|-------------|
-| 모바일 세로 | ~599px (4~6인치) | 4칸 |
-| 모바일 가로 | 600~839px (6~8인치) | 6칸 |
-| 태블릿 세로 | 840~1023px (8~10인치) | 8칸 |
-| 태블릿 가로 | 1024px~ (10~14인치) | 12칸 |
+- [ ] 워크플로우 연동 (버튼 액션, 화면 전환)
+- [ ] 데이터 바인딩 연결
+- [ ] 실기기 테스트 (아이폰 SE, iPad Mini 등)

 ---

-## 완료된 기능 목록
+## 브레이크포인트 (v5.2 현재)

-### v4 타입 정의
-
- [x] `PopLayoutDataV4` - 단일 소스 레이아웃
- [x] `PopContainerV4` - 스택 컨테이너
- [x] `PopSizeConstraintV4` - 크기 규칙 (fixed/fill/hug)
- [x] `PopResponsiveRuleV4` - 반응형 규칙
- [x] `createEmptyPopLayoutV4()` - 생성 함수
- [x] `isV4Layout()` - 타입 가드
- [x] `addComponentToV4Layout()` - 컴포넌트 추가
- [x] `removeComponentFromV4Layout()` - 컴포넌트 삭제
- [x] `updateComponentInV4Layout()` - 컴포넌트 수정
- [x] `updateContainerV4()` - 컨테이너 수정
- [x] `findContainerV4()` - 컨테이너 찾기
-
-### v4 렌더러
-
- [x] `PopFlexRenderer` - Flexbox 기반 렌더링
- [x] 컨테이너 재귀 렌더링 (`ContainerRenderer`)
- [x] 반응형 규칙 적용 (`applyResponsiveRules`)
- [x] 컴포넌트 숨김 처리 (`hideBelow`)
- [x] 크기 제약 → CSS 변환 (`calculateSizeStyle`)
- [x] 드래그 리사이즈 핸들 (`ComponentRendererV4`)
- [x] 드래그 앤 드롭 순서 변경 (`DraggableComponentWrapper`)
- [x] 비율 스케일링 (`BASE_VIEWPORT_WIDTH`, scale 계산)
-
-### v4 캔버스
-
- [x] `PopCanvasV4` - v4 전용 캔버스
- [x] 뷰포트 프리셋 (4개 모드)
- [x] 너비 슬라이더 (320~1200px)
- [x] 줌 컨트롤 (30%~150%)
- [x] 패닝 (Space + 드래그)
- [x] 드래그 앤 드롭
-
-### v4 속성 패널
-
- [x] `ComponentEditorPanelV4` - 속성 편집 패널
- [x] 크기 제약 편집 (fixed/fill/hug)
- [x] 컨테이너 설정 (방향, 정렬, 간격)
-
-### 디자이너 통합
-
- [x] `PopDesigner` v3/v4 자동 판별
- [x] 새 화면 v4 기본 적용
- [x] 기존 v3 화면 하위 호환
- [x] `ComponentPaletteV4` v4 전용 팔레트 (Spacer 포함)
- [x] Undo/Redo 버튼 및 단축키
- [x] 컴포넌트 순서 변경 핸들러 (`handleReorderComponentV4`)
+| 모드 | 화면 너비 | 칸 수 | 대상 기기 |
+|------|----------|-------|----------|
+| mobile_portrait | ~479px | 4칸 | 아이폰 SE ~ 갤럭시 S |
+| mobile_landscape | 480~767px | 6칸 | 스마트폰 가로 |
+| tablet_portrait | 768~1023px | 8칸 | 8~10인치 태블릿 세로 |
+| tablet_landscape | 1024px~ | 12칸 | 10~14인치 태블릿 가로 |

 ---

-## v3 vs v4 비교
+## 관련 문서

-| 항목 | v3 (기존) | v4 (새로운) |
-|------|-----------|-------------|
-| 설계 | 4모드 각각 | 1번만 |
-| 데이터 | col, row 위치 | 규칙 (fill/fixed/hug) |
-| 렌더링 | CSS Grid | Flexbox |
-| 반응형 | 수동 | 자동 + 규칙 |
-| 새 화면 | - | 기본 적용 |
-
---
-
-## 관련 파일
-
-| 파일 | 역할 |
+| 문서 | 내용 |
 |------|------|
-| `PopDesigner.tsx` | v3/v4 통합 디자이너 |
-| `PopCanvasV4.tsx` | v4 캔버스 (4개 프리셋 + 슬라이더) |
-| `PopFlexRenderer.tsx` | v4 Flexbox 렌더러 + 비율 스케일링 |
-| `ComponentPaletteV4.tsx` | v4 컴포넌트 팔레트 |
-| `ComponentEditorPanelV4.tsx` | v4 속성 편집 패널 |
-| `pop-layout.ts` | v3/v4 타입 정의 |
-| `page.tsx` (뷰어) | v4 레이아웃 뷰어 + viewportWidth 감지 |
+| [STATUS.md](./STATUS.md) | 현재 진행 상태 |
+| [SPEC.md](./SPEC.md) | 기술 스펙 |
+| [ARCHITECTURE.md](./ARCHITECTURE.md) | 코드 구조 |
+| [components-spec.md](./components-spec.md) | 컴포넌트 상세 설계 |
+| [decisions/005](./decisions/005-breakpoint-redesign.md) | 브레이크포인트 재설계 ADR |

 ---

-## 비율 스케일링 시스템
-
-### 개념
-10인치(1024px) 기준으로 디자인하면, 8~12인치 화면에서 배치는 유지하고 크기만 비례 조정
-
-### 계산 공식
-```
-scale = viewportWidth / BASE_VIEWPORT_WIDTH (1024)
-scaledSize = originalSize * scale
-```
-
-### 적용 범위
-
-| 항목 | 스케일 적용 |
-|------|------------|
-| fixedWidth | O |
-| fixedHeight | O |
-| minWidth/maxWidth | O |
-| minHeight | O |
-| gap | O |
-| padding | O |
-| flex (fill) | X (비율 기반) |
-| hug | X (내용 기반) |
-
-### 화면별 스케일
-
-| 화면 | 너비 | 스케일 | 200px → |
-|------|------|--------|---------|
-| 8인치 | 800px | 0.78 | 156px |
-| 10인치 | 1024px | 1.00 | 200px |
-| 12인치 | 1366px | 1.33 | 266px |
-| 14인치+ | 1366px (max) | 1.33 | 266px + 여백 |
-
---
-
-*최종 업데이트: 2026-02-05 (Phase 5 그리드 시스템 계획 추가)*
+*최종 업데이트: 2026-02-06 (v5.2 완료, Phase 4 대기)*
--- a/popdocs/PROBLEMS.md
+++ b/popdocs/PROBLEMS.md
@ -11,6 +11,8 @@
 |------|------|------|--------|
 | rowSpan이 적용 안됨 | gridTemplateRows를 `1fr`로 변경 | 2026-02-02 | grid, rowSpan, CSS |
 | 컴포넌트 크기 스케일 안됨 | viewportWidth 기반 scale 계산 추가 | 2026-02-04 | scale, viewport, 반응형 |
+| **그리드 가이드 셀 크기 불균일** | gridAutoRows → gridTemplateRows로 행 높이 강제 고정 | 2026-02-06 | gridAutoRows, gridTemplateRows, 셀 크기, CSS Grid |
+| **컴포넌트 콘텐츠가 셀 경계 벗어남** | overflow-visible → overflow-hidden 변경 | 2026-02-06 | overflow, 셀 크기, 콘텐츠 |

 ## DnD (드래그앤드롭) 관련

@ -18,6 +20,12 @@
 |------|------|------|--------|
 | useDrag 에러 (뷰어에서) | isDesignMode 체크 후 early return | 2026-02-04 | DnD, useDrag, 뷰어 |
 | DndProvider 중복 에러 | 최상위에서만 Provider 사용 | 2026-02-04 | DndProvider, react-dnd |
+| **Expected drag drop context (뷰어)** | isDesignMode=false일 때 DraggableComponent 대신 일반 div 렌더링 | 2026-02-05 | DndProvider, useDrag, 뷰어, context |
+| **컴포넌트 중첩(겹침)** | toast import 누락 → `sonner`에서 import | 2026-02-05 | 겹침, overlap, toast |
+| **리사이즈 핸들 작동 안됨** | useDrop 2개 중복 → 단일 useDrop으로 통합 | 2026-02-05 | resize, 핸들, useDrop |
+| **드래그 좌표 완전 틀림 (Row 92)** | 캔버스 scale 보정 누락 → `(offset - rect.left) / scale` | 2026-02-05 | scale, 좌표, transform |
+| **DND 타입 상수 불일치** | 3개 파일에 중복 정의 → `constants/dnd.ts`로 통합 | 2026-02-05 | 상수, DND, 타입 |
+| **컴포넌트 이동 안됨** | useDrop accept 타입 불일치 → 공통 상수 사용 | 2026-02-05 | 이동, useDrop, accept |

 ## 타입 관련

@ -30,10 +38,19 @@

 | 문제 | 해결 | 날짜 | 키워드 |
 |------|------|------|--------|
+| **화면 밖 컴포넌트 정보 손실** | 자동 줄바꿈 로직 추가 (col > maxCol → col=1, row=맨아래+1) | 2026-02-06 | 자동배치, 줄바꿈, 정보손실 |
 | Flexbox 배치 예측 불가 | CSS Grid로 전환 (v5) | 2026-02-05 | Flexbox, Grid, 반응형 |
 | 4모드 각각 배치 힘듦 | 제약조건 기반 시스템 (v4) | 2026-02-03 | 모드, 반응형, 제약조건 |
 | 4모드 자동 전환 안됨 | useResponsiveMode 훅 추가 | 2026-02-01 | 모드, 훅, 반응형 |

+## 브레이크포인트/반응형 관련
+
+| 문제 | 해결 | 날짜 | 키워드 |
+|------|------|------|--------|
+| **뷰어 반응형 모드 불일치** | detectGridMode() 사용으로 일관성 확보 | 2026-02-06 | 반응형, 뷰어, 모드 |
+| **768~839px 모드 불일치** | TABLET_MIN 768로 변경, 브레이크포인트 재설계 | 2026-02-06 | 브레이크포인트, 768px |
+| **useResponsiveMode vs GRID_BREAKPOINTS 불일치** | 뷰어에서 detectGridMode(viewportWidth) 사용 | 2026-02-06 | 훅, 상수, 일관성 |
+
 ## 저장/로드 관련

 | 문제 | 해결 | 날짜 | 키워드 |
@ -50,12 +67,177 @@

 ---

-## 해결 안 된 문제 (진행 중)
+## 그리드 가이드 관련

-| 문제 | 상태 | 관련 파일 |
+| 문제 | 해결 | 날짜 | 키워드 |
+|------|------|------|--------|
+| SVG 격자와 CSS Grid 좌표 불일치 | GridGuide.tsx 삭제, PopRenderer에서 CSS Grid 셀로 격자 렌더링 | 2026-02-05 | 격자, SVG, CSS Grid, 좌표 |
+| 행/열 라벨 위치 오류 | PopCanvas에 absolute positioning 라벨 추가 | 2026-02-05 | 라벨, 행, 열, 정렬 |
+| 격자선과 컴포넌트 불일치 | 동일한 CSS Grid 좌표계 사용 | 2026-02-05 | 통합, 정렬, 일체감 |
+
+---
+
+## 해결 완료 (이번 세션)
+
+| 문제 | 상태 | 해결 방법 |
 |------|------|----------|
-| PopCanvas 타입 오류 | 미해결 | PopCanvas.tsx:76 |
-| 팔레트 UI 없음 | 미해결 | PopDesigner.tsx |
+| PopCanvas 타입 오류 | **해결** | 임시 타입 가드 추가 |
+| 팔레트 UI 없음 | **해결** | ComponentPalette.tsx 신규 추가 |
+| SVG 격자 좌표 불일치 | **해결** | CSS Grid 기반 통합 |
+| 드래그 좌표 완전 틀림 | **해결** | scale 보정 + calcGridPosition 함수 |
+| DND 타입 상수 불일치 | **해결** | constants/dnd.ts 통합 |
+| 컴포넌트 이동 안됨 | **해결** | useDrop/useDrag 타입 통일 |
+| 컴포넌트 중첩(겹침) | **해결** | toast import 추가 → 겹침 감지 로직 정상 작동 |
+| 리사이즈 핸들 작동 안됨 | **해결** | useDrop 통합 (2개 → 1개) |
+| 숨김 컴포넌트 드래그 안됨 | **해결** | handleMoveComponent에서 숨김 해제 + 위치 저장 단일 상태 업데이트 |
+| 그리드 범위 초과 에러 | **해결** | adjustedCol 계산으로 드롭 위치 자동 조정 |
+| Expected drag drop context (뷰어) | **해결** | isDesignMode=false일 때 일반 div 렌더링 |
+| hiddenComponentIds 중복 정의 | **해결** | 중복 useMemo 제거 (라인 410-412) |
+| 뷰어 반응형 모드 불일치 | **해결** | detectGridMode() 사용 |
+| 그리드 가이드 셀 크기 불균일 | **해결** | gridTemplateRows로 행 높이 강제 고정 |
+| Canvas vs Renderer 행 수 불일치 | **해결** | 숨김 필터 통일, 여유행 +3으로 통일 |
+| 디버깅 console.log 잔존 | **해결** | reviewComponents 내 console.log 삭제 |
+
+---
+
+## 드래그 좌표 버그 상세 (2026-02-05)
+
+### 증상
+- 컴포넌트를 아래로 드래그 → 위로 올라감
+- Row 92 같은 비정상 좌표
+- 드래그 이동/리사이즈 전혀 작동 안됨
+
+### 원인
+```
+캔버스: transform: scale(0.8)
+
+getBoundingClientRect() → 스케일 적용된 크기 (1024px → 819px)
+getClientOffset()       → 뷰포트 기준 실제 마우스 좌표
+
+이 둘을 그대로 계산하면 좌표 완전 틀림
+```
+
+### 해결
+```typescript
+// 스케일 보정된 상대 좌표 계산
+const relX = (offset.x - canvasRect.left) / canvasScale;
+const relY = (offset.y - canvasRect.top) / canvasScale;
+
+// 실제 캔버스 크기로 그리드 계산
+calcGridPosition(relX, relY, customWidth, ...);
+```
+
+### 교훈
+> CSS `transform: scale()` 적용된 요소에서 좌표 계산 시,
+> `getBoundingClientRect()`는 스케일 적용된 값을 반환하지만
+> 마우스 좌표는 뷰포트 기준이므로 **반드시 스케일 보정 필요**
+
+---
+
+## Expected drag drop context 에러 상세 (2026-02-05 심야)
+
+### 증상
+```
+Invariant Violation: Expected drag drop context
+at useDrag (...)
+at DraggableComponent (...)
+```
+뷰어 페이지(`/pop/viewer/[screenId]`)에서 POP 화면 조회 시 에러 발생
+
+### 원인
+```
+PopRenderer의 DraggableComponent에서 useDrag 훅을 무조건 호출
+→ 뷰어 페이지에는 DndProvider가 없음
+→ React 훅은 조건부 호출 불가 (Rules of Hooks)
+→ DndProvider 없이 useDrag 호출 시 context 에러
+```
+
+### 해결
+```typescript
+// PopRenderer.tsx - 컴포넌트 렌더링 부분
+if (isDesignMode) {
+  return (
+    <DraggableComponent ... />  // useDrag 사용
+  );
+}
+
+// 뷰어 모드: 드래그 없는 일반 렌더링
+return (
+  <div className="..." style={positionStyle}>
+    <ComponentContent ... />
+  </div>
+);
+```
+
+### 교훈
+> React DnD의 `useDrag`/`useDrop` 훅은 반드시 `DndProvider` 내부에서만 호출해야 함.
+> 디자인 모드와 뷰어 모드를 분기할 때, 훅이 포함된 컴포넌트 자체를 조건부 렌더링해야 함.
+> 훅 내부에서 `canDrag: false`로 설정해도 훅 자체는 호출되므로 context 에러 발생.
+
+### 관련 파일
+- `gridUtils.ts`: convertAndResolvePositions(), needsReview()
+- `PopCanvas.tsx`: ReviewPanel, ReviewItem
+- `PopRenderer.tsx`: 자동 배치 위치 렌더링
+
+---
+
+## 뷰어 반응형 모드 불일치 상세 (2026-02-06)
+
+### 증상
+```
+- 아이폰 SE, iPad Pro 프리셋은 정상 작동
+- 브라우저 수동 리사이즈 시 6칸 모드(mobile_landscape)가 적용 안 됨
+- 768~839px 구간에서 8칸으로 표시됨 (예상: 6칸)
+```
+
+### 원인
+```
+useResponsiveMode 훅:
+- deviceType: width/height 비율로 "mobile"/"tablet" 판정
+- isLandscape: width > height로 판정
+- BREAKPOINTS.TABLET_MIN = 840 (당시)
+
+GRID_BREAKPOINTS:
+- mobile_landscape: 600~839px (6칸)
+- tablet_portrait: 840~1023px (8칸)
+
+결과:
+- 768px 화면 → useResponsiveMode: "tablet" (768 < 840이지만 비율 판정)
+- 768px 화면 → GRID_BREAKPOINTS: "mobile_landscape" (6칸)
+- → 모드 불일치!
+```
+
+### 해결
+
+**1단계: 브레이크포인트 재설계**
+```typescript
+// 기존
+mobile_landscape: { minWidth: 600, maxWidth: 839 }
+tablet_portrait: { minWidth: 840, maxWidth: 1023 }
+
+// 변경 후
+mobile_landscape: { minWidth: 480, maxWidth: 767 }
+tablet_portrait: { minWidth: 768, maxWidth: 1023 }
+```
+
+**2단계: 훅 연동**
+```typescript
+// useDeviceOrientation.ts
+BREAKPOINTS.TABLET_MIN: 768  // was 840
+```
+
+**3단계: 뷰어 모드 감지 방식 변경**
+```typescript
+// page.tsx (뷰어)
+const currentModeKey = isPreviewMode
+  ? getModeKey(deviceType, isLandscape)  // 프리뷰: 수동 선택
+  : detectGridMode(viewportWidth);        // 일반: 너비 기반 (일관성 확보)
+```
+
+### 교훈
+> 반응형 모드 판정은 **단일 소스(GRID_BREAKPOINTS)**를 기준으로 해야 함.
+> 훅과 상수가 각각 다른 기준을 사용하면 구간별 불일치 발생.
+> 뷰어에서는 `detectGridMode(viewportWidth)` 직접 사용으로 일관성 확보.

 ---

--- a/popdocs/README.md
+++ b/popdocs/README.md
@ -9,18 +9,22 @@

 | 항목 | 값 |
 |------|-----|
-| 버전 | **v5** (CSS Grid 기반) |
-| 상태 | **기본 기능 완료** |
-| 다음 | 실제 테스트, Phase 4 (실제 컴포넌트 구현) |
+| 버전 | **v5.2** (브레이크포인트 재설계 + 세로 자동 확장) |
+| 상태 | **반응형 시스템 완성** |
+| 다음 | Phase 4 (실제 컴포넌트 구현) |

-**마지막 업데이트**: 2026-02-05
+**마지막 업데이트**: 2026-02-06

 ---

 ## 마지막 대화 요약

-> (B)(C)(D) 모두 완료. 팔레트 UI 추가, 타입 오류 수정, 문서 v5 기준 통일.
-> 다음: 실제 테스트 후 Phase 4 (실제 컴포넌트 렌더링, 데이터 바인딩) 진행.
+> **v5.2.1 그리드 셀 크기 강제 고정**:
+> - gridAutoRows → gridTemplateRows로 행 높이 강제 고정
+> - "셀의 크기 = 컴포넌트의 크기" 원칙을 코드 수준에서 강제
+> - Canvas/Renderer 간 행 수 계산 기준 통일 (숨김 필터, 여유행 +3)
+> 
+> 다음: Phase 4 (실제 컴포넌트 구현)

 ---

@ -31,6 +35,11 @@
 | 지금 뭐 해야 해? | [STATUS.md](./STATUS.md) |
 | 저장/조회 규칙 | [SAVE_RULES.md](./SAVE_RULES.md) |
 | 왜 v5로 바꿨어? | [decisions/003-v5-grid-system.md](./decisions/003-v5-grid-system.md) |
+| 그리드 가이드 설계 | [decisions/004-grid-guide-integration.md](./decisions/004-grid-guide-integration.md) |
+| 브레이크포인트 재설계 | [decisions/005-breakpoint-redesign.md](./decisions/005-breakpoint-redesign.md) |
+| 자동 줄바꿈 시스템 | [decisions/006-auto-wrap-review-system.md](./decisions/006-auto-wrap-review-system.md) |
+| 개발 계획/로드맵 | [PLAN.md](./PLAN.md) |
+| 컴포넌트 상세 설계 | [components-spec.md](./components-spec.md) |
 | 이전 문제 해결 | [PROBLEMS.md](./PROBLEMS.md) |
 | 코드 어디 있어? | [FILES.md](./FILES.md) |
 | 기능별 색인 | [INDEX.md](./INDEX.md) |
@ -43,9 +52,10 @@
 | 파일 | 역할 | 경로 |
 |------|------|------|
 | 타입 정의 | v5 레이아웃 타입 | `frontend/components/pop/designer/types/pop-layout.ts` |
-| 캔버스 | 그리드 캔버스 + DnD | `frontend/components/pop/designer/PopCanvas.tsx` |
-| 렌더러 | CSS Grid 렌더링 | `frontend/components/pop/designer/renderers/PopRenderer.tsx` |
+| 캔버스 | 그리드 캔버스 + DnD + 라벨 | `frontend/components/pop/designer/PopCanvas.tsx` |
+| 렌더러 | CSS Grid 렌더링 + 격자 셀 | `frontend/components/pop/designer/renderers/PopRenderer.tsx` |
 | 디자이너 | 메인 컴포넌트 | `frontend/components/pop/designer/PopDesigner.tsx` |
+| 팔레트 | 컴포넌트 목록 | `frontend/components/pop/designer/panels/ComponentPalette.tsx` |

 ---

@ -80,15 +90,19 @@ decisions/, sessions/, archive/

 ## v5 그리드 시스템 (현재)

-| 모드 | 화면 너비 | 칸 수 |
-|------|----------|-------|
-| mobile_portrait | ~599px | 4칸 |
-| mobile_landscape | 600~839px | 6칸 |
-| tablet_portrait | 840~1023px | 8칸 |
-| tablet_landscape | 1024px~ | 12칸 |
+| 모드 | 화면 너비 | 칸 수 | 대상 기기 |
+|------|----------|-------|----------|
+| mobile_portrait | ~479px | 4칸 | 아이폰 SE ~ 갤럭시 S |
+| mobile_landscape | 480~767px | 6칸 | 스마트폰 가로 |
+| tablet_portrait | 768~1023px | 8칸 | 8~10인치 태블릿 세로 |
+| tablet_landscape | 1024px~ | 12칸 | 10~14인치 태블릿 가로 |

 **핵심**: 컴포넌트를 칸 단위로 배치 (col, row, colSpan, rowSpan)

+**세로 무한 스크롤**: 캔버스 높이 자동 확장 (컴포넌트 배치에 따라)
+
+**그리드 가이드**: CSS Grid 기반 격자 셀 + 행/열 라벨 (ON/OFF 토글)
+
 ---

 *상세: [SPEC.md](./SPEC.md) | 히스토리: [CHANGELOG.md](./CHANGELOG.md)*
--- a/popdocs/SPEC.md
+++ b/popdocs/SPEC.md
@ -8,12 +8,14 @@

 ### 1. 그리드 시스템

-| 모드 | 화면 너비 | 칸 수 | 대상 |
-|------|----------|-------|------|
-| mobile_portrait | ~599px | 4칸 | 4~6인치 |
-| mobile_landscape | 600~839px | 6칸 | 7인치 |
-| tablet_portrait | 840~1023px | 8칸 | 8~10인치 |
-| tablet_landscape | 1024px~ | 12칸 | 10~14인치 (기본) |
+| 모드 | 화면 너비 | 칸 수 | 대상 기기 |
+|------|----------|-------|----------|
+| mobile_portrait | ~479px | 4칸 | 아이폰 SE ~ 갤럭시 S (세로) |
+| mobile_landscape | 480~767px | 6칸 | 스마트폰 가로, 작은 태블릿 |
+| tablet_portrait | 768~1023px | 8칸 | iPad Mini ~ iPad Pro (세로) |
+| tablet_landscape | 1024px~ | 12칸 | 10~14인치 태블릿 가로 (기본) |
+
+> **브레이크포인트 기준**: 실제 기기 CSS 뷰포트 너비 기반 (2026-02-06 재설계)

 ### 2. 위치 지정

@ -34,29 +36,59 @@ const GRID_BREAKPOINTS = {
    columns: 4, 
    rowHeight: 48, 
    gap: 8, 
-    padding: 12 
+    padding: 12,
+    maxWidth: 479,    // 아이폰 SE (375px) ~ 갤럭시 S (360px)
  },
  mobile_landscape: { 
    columns: 6, 
    rowHeight: 44, 
    gap: 8, 
-    padding: 16 
+    padding: 16,
+    minWidth: 480,
+    maxWidth: 767,    // 스마트폰 가로
  },
  tablet_portrait: { 
    columns: 8, 
    rowHeight: 52, 
    gap: 12, 
-    padding: 20 
+    padding: 20,
+    minWidth: 768,    // iPad Mini 세로 (768px)
+    maxWidth: 1023,
  },
  tablet_landscape: { 
    columns: 12, 
    rowHeight: 56, 
    gap: 12, 
-    padding: 24 
+    padding: 24,
+    minWidth: 1024,   // iPad Pro 11 가로 (1194px), 12.9 가로 (1366px)
  },
 };
 ```

+### 4. 세로 자동 확장
+
+```typescript
+// 캔버스 높이 동적 계산
+const MIN_CANVAS_HEIGHT = 600;  // 최소 높이 (px)
+const CANVAS_EXTRA_ROWS = 3;    // 항상 유지되는 여유 행 수
+
+const dynamicCanvasHeight = useMemo(() => {
+  // 가장 아래 컴포넌트 위치 계산
+  const maxRowEnd = visibleComps.reduce((max, comp) => {
+    const rowEnd = pos.row + pos.rowSpan;
+    return Math.max(max, rowEnd);
+  }, 1);
+
+  // 여유 행 추가하여 높이 계산
+  const totalRows = maxRowEnd + CANVAS_EXTRA_ROWS;
+  return Math.max(MIN_CANVAS_HEIGHT, totalRows * rowHeight + padding);
+}, [layout.components, ...]);
+```
+
+**특징**:
+- 디자이너: 세로 무한 확장 (컴포넌트 추가에 제한 없음)
+- 뷰어: 터치 스크롤로 아래 컴포넌트 접근 가능
+
 ---

 ## 데이터 구조
--- a/popdocs/STATUS.md
+++ b/popdocs/STATUS.md
@ -1,6 +1,6 @@
 # 현재 상태

-> **마지막 업데이트**: 2026-02-05
+> **마지막 업데이트**: 2026-02-06
 > **담당**: POP 화면 디자이너

 ---
@ -15,27 +15,68 @@
 | v5 편집 패널 | 완료 | `ComponentEditorPanel.tsx` |
 | v5 유틸리티 | 완료 | `gridUtils.ts` |
 | 레거시 삭제 | 완료 | v1~v4 코드, 데이터 |
-| 문서 정리 | **완료** | popdocs v5 기준 재정비 |
-| 컴포넌트 팔레트 | **완료** | `ComponentPalette.tsx` |
-| 타입 오류 수정 | **완료** | PopCanvas.tsx:76 |
-| 드래그앤드롭 | **완료** | 팔레트 → 캔버스 연결 |
+| 문서 정리 | 완료 | popdocs v5 기준 재정비 |
+| 컴포넌트 팔레트 | 완료 | `ComponentPalette.tsx` |
+| 드래그앤드롭 | 완료 | 스케일 보정, DND 상수 통합 |
+| 그리드 가이드 재설계 | 완료 | CSS Grid 기반 통합 |
+| 모드별 오버라이드 | 완료 | 위치/크기 모드별 저장 |
+| 화면 밖 컴포넌트 | 완료 | 오른쪽 패널 배치, 드래그로 복원 |
+| 숨김 기능 | 완료 | 모드별 숨김/숨김해제 |
+| 리사이즈 겹침 검사 | 완료 | 실시간 겹침 방지 |
+| Gap 프리셋 | 완료 | 좁게/보통/넓게 간격 조정 |
+| **자동 줄바꿈** | **완료** | col > maxCol → 맨 아래 배치 |
+| **검토 필요 시스템** | **완료** | 오버라이드 없으면 검토 알림 |
+| **브레이크포인트 재설계** | **완료** | 기기 기반 (479/767/1023px) |
+| **세로 자동 확장** | **완료** | 캔버스 높이 동적 계산 |
+| **그리드 셀 크기 강제 고정** | **완료** | gridTemplateRows로 행 높이 고정, overflow-hidden |

 ---

 ## 다음 작업 (우선순위)

-1. **실제 테스트**
-   - 디자이너 페이지에서 컴포넌트 드래그앤드롭 테스트
-   - 저장/로드 동작 확인
-
-2. **실제 컴포넌트 구현** (Phase 4)
+1. **실제 컴포넌트 구현** (Phase 4)
   - pop-label, pop-button 등 실제 렌더링
   - 데이터 바인딩 연결

-3. **추가 기능**
-   - 컴포넌트 복사/붙여넣기
-   - 다중 선택
-   - 정렬 도우미
+2. **워크플로우 연동**
+   - 버튼 액션 연결
+   - 화면 전환 로직
+
+---
+
+## 최근 주요 변경 (2026-02-06)
+
+### 브레이크포인트 재설계
+| 모드 | 변경 전 | 변경 후 | 근거 |
+|------|--------|--------|------|
+| mobile_portrait | ~599px | ~479px | 스마트폰 세로 |
+| mobile_landscape | 600~839px | 480~767px | 스마트폰 가로 |
+| tablet_portrait | 840~1023px | 768~1023px | iPad Mini 포함 |
+| tablet_landscape | 1024px+ | 동일 | - |
+
+### 세로 자동 확장
+| 기능 | 설명 |
+|------|------|
+| 동적 캔버스 높이 | 컴포넌트 배치에 따라 자동 계산 |
+| 최소 높이 | 600px 보장 |
+| 여유 행 | 항상 3행 추가 |
+| 뷰어 스크롤 | 터치 스크롤로 아래 컴포넌트 접근 |
+
+### v5.1 자동 줄바꿈 시스템
+| 기능 | 설명 |
+|------|------|
+| 자동 줄바꿈 | col > maxCol인 컴포넌트를 맨 아래에 자동 배치 |
+| 정보 손실 방지 | 모든 컴포넌트가 항상 그리드 안에 표시됨 |
+| 검토 필요 알림 | 오버라이드 없으면 "검토 필요" 패널 표시 |
+| 검토 완료 | 편집하면 오버라이드 저장, 검토 필요에서 제거 |
+
+### 기존 기능 유지 (2026-02-05 심야)
+| 기능 | 설명 |
+|------|------|
+| 모드별 재배치 | 4/6/8/12칸 모드별로 컴포넌트 위치/크기 개별 저장 |
+| 자동 레이아웃 고정 | 드래그/리사이즈 시 자동으로 오버라이드 저장 |
+| 원본으로 되돌리기 | 오버라이드 삭제하여 자동 재배치로 복원 |
+| 숨김 기능 | 특정 모드에서 컴포넌트 의도적 숨김 (검토와 별개) |

 ---

@ -44,7 +85,19 @@
 | 문제 | 상태 | 비고 |
 |------|------|------|
 | 타입 이름 불일치 | 해결됨 | V5 접미사 제거 |
-| 팔레트 없음 | 해결됨 | ComponentPalette.tsx 추가 |
+| SVG 격자 좌표 불일치 | 해결됨 | GridGuide 삭제, CSS Grid 통합 |
+| 드래그 좌표 계산 오류 | 해결됨 | 스케일 보정 적용 |
+| DND 타입 상수 불일치 | 해결됨 | constants/dnd.ts로 통합 |
+| 숨김 컴포넌트 드래그 안됨 | 해결됨 | 상태 업데이트 순서 수정 |
+| 그리드 범위 초과 에러 | 해결됨 | 드롭 위치 자동 조정 |
+| Expected drag drop context | 해결됨 | 뷰어 모드에서 일반 div 렌더링 |
+| Gap 프리셋 UI 안 보임 | 해결됨 | 그리드 라벨에 adjustedGap 적용 |
+| 화면 밖 컴포넌트 정보 손실 | 해결됨 | 자동 줄바꿈으로 항상 그리드 안에 배치 |
+| 뷰어 반응형 모드 불일치 | 해결됨 | detectGridMode() 사용으로 일관성 확보 |
+| hiddenComponentIds 중복 정의 | 해결됨 | 중복 useMemo 제거 |
+| 그리드 가이드 셀 크기 불균일 | 해결됨 | gridTemplateRows로 행 높이 강제 고정 |
+| Canvas/Renderer 행 수 불일치 | 해결됨 | 숨김 필터 통일, 여유행 +3 |
+| 디버깅 console.log 잔존 | 해결됨 | reviewComponents 내 삭제 |

 ---

@ -52,7 +105,9 @@

 | 날짜 | 요약 | 상세 |
 |------|------|------|
-| 2026-02-05 | v5 통합, 문서 재정비, 팔레트 UI 추가 | [sessions/2026-02-05.md](./sessions/2026-02-05.md) |
+| 2026-02-06 | 브레이크포인트 재설계, 세로 자동 확장, v5.1 자동 줄바꿈 | [sessions/2026-02-06.md](./sessions/2026-02-06.md) |
+| 2026-02-05 심야 | 반응형 레이아웃, 숨김 기능, 겹침 검사 | [sessions/2026-02-05.md](./sessions/2026-02-05.md) |
+| 2026-02-05 저녁 | v5 통합, 그리드 가이드 재설계 | [sessions/2026-02-05.md](./sessions/2026-02-05.md) |

 ---

@ -60,6 +115,9 @@

 | ADR | 제목 | 날짜 |
 |-----|------|------|
+| 006 | v5.1 자동 줄바꿈 + 검토 필요 시스템 | 2026-02-06 |
+| 005 | 브레이크포인트 재설계 (기기 기반) + 세로 자동 확장 | 2026-02-06 |
+| 004 | 그리드 가이드 CSS Grid 통합 | 2026-02-05 |
 | 003 | v5 CSS Grid 채택 | 2026-02-05 |
 | 001 | v4 제약조건 기반 | 2026-02-03 |

--- a/popdocs/archive/GRID_CODING_PLAN.md
+++ b/popdocs/archive/GRID_CODING_PLAN.md
--- a/popdocs/archive/GRID_SYSTEM_DESIGN.md
+++ b/popdocs/archive/GRID_SYSTEM_DESIGN.md
--- a/popdocs/archive/GRID_SYSTEM_PLAN.md
+++ b/popdocs/archive/GRID_SYSTEM_PLAN.md
--- a/popdocs/decisions/004-grid-guide-integration.md
+++ b/popdocs/decisions/004-grid-guide-integration.md
@ -0,0 +1,143 @@
+# ADR-004: 그리드 가이드 CSS Grid 통합
+
+**상태**: 승인됨
+**날짜**: 2026-02-05
+**결정자**: 개발팀
+
+---
+
+## 컨텍스트
+
+그리드 가이드는 다음 목적을 가짐:
+1. **시각적 기준**: 어디에 배치할지 눈으로 확인 가능
+2. **정렬 도움**: 칸에 맞춰 배치하기 쉬움
+3. **디자인 일관성**: 규칙적인 배치 유도
+
+기존 구현:
+- `GridGuide.tsx`: SVG `<line>` 요소로 격자선 렌더링
+- `PopRenderer.tsx`: CSS Grid로 컴포넌트 배치
+
+---
+
+## 문제
+
+### 좌표계 불일치
+```
+SVG 좌표: 픽셀 기반 (0, 0) ~ (width, height)
+CSS Grid 좌표: 칸 기반 (col 1~12, row 1~20)
+
+→ 두 좌표계를 정확히 동기화하기 어려움
+→ 격자선과 컴포넌트가 정렬되지 않음 ("무늬가 따로 논다")
+```
+
+### 구체적 증상
+1. GridGuide의 행/열 라벨이 4부터 시작 (잘못된 계산)
+2. 격자선 위치와 실제 CSS Grid 셀 위치 불일치
+3. 줌/패닝 시 두 레이어가 다르게 동작
+
+---
+
+## 결정
+
+**GridGuide.tsx를 삭제하고, PopRenderer.tsx에서 CSS Grid 기반으로 격자를 직접 렌더링한다.**
+
+핵심 원칙:
+> "격자선은 컴포넌트와 같은 좌표계에서 태어나야 한다"
+
+---
+
+## 대안 검토
+
+### Option A: SVG 계산 수정
+- **방법**: GridGuide의 좌표 계산을 정확히 수정
+- **장점**: 기존 코드 활용
+- **단점**: 근본적으로 두 좌표계가 다름, 유지보수 어려움
+- **결정**: 채택 안 함
+
+### Option B: PopRenderer에 CSS 배경 격자
+- **방법**: `background-image: linear-gradient()`로 격자 표현
+- **장점**: 구현 간단
+- **단점**: 라벨 표시 불가, 셀 단위 상호작용 불가
+- **결정**: 채택 안 함
+
+### Option C: CSS Grid 셀로 격자 렌더링 (채택)
+- **방법**: 실제 `div` 요소를 12x20 = 240개 생성, CSS Grid로 배치
+- **장점**: 
+  - 컴포넌트와 100% 동일한 좌표계
+  - 셀 단위 hover, 클릭 등 상호작용 가능
+  - 라벨은 캔버스 외부에 별도 렌더링
+- **단점**: DOM 요소 증가 (240개)
+- **결정**: 채택
+
+---
+
+## 구현 상세
+
+### 역할 분담
+
+| 컴포넌트 | 역할 | 좌표계 |
+|----------|------|--------|
+| PopRenderer | 격자 셀 + 컴포넌트 | CSS Grid |
+| PopCanvas | 라벨 + 줌/패닝 + 토글 | absolute |
+| GridGuide | (삭제) | - |
+
+### PopRenderer 변경
+
+```typescript
+// gridCells 생성 (useMemo)
+const gridCells = useMemo(() => {
+  const cells = [];
+  for (let row = 1; row <= 20; row++) {
+    for (let col = 1; col <= 12; col++) {
+      cells.push({ id: `${col}-${row}`, col, row });
+    }
+  }
+  return cells;
+}, []);
+
+// 렌더링
+{showGridGuide && gridCells.map(cell => (
+  <div
+    key={cell.id}
+    className="border border-dashed border-blue-300/40"
+    style={{
+      gridColumn: cell.col,
+      gridRow: cell.row,
+    }}
+  />
+))}
+```
+
+### PopCanvas 라벨 구조
+
+```
+    [1] [2] [3] [4] [5] [6] [7] [8] [9] [10][11][12]  ← 열 라벨 (캔버스 상단)
+    ┌───────────────────────────────────────────┐
+[1] │   │   │   │   │   │   │   │   │   │   │   │
+[2] │   │   │   │   │   │   │   │   │   │   │   │
+[3] │   │   │   │ ■ │   │   │   │   │   │   │   │  ← 5열 3행
+    └───────────────────────────────────────────┘
+ ↑ 행 라벨 (캔버스 좌측)
+```
+
+---
+
+## 결과
+
+### 기대 효과
+1. 격자선과 컴포넌트 100% 정렬
+2. 정확한 행/열 번호 표시 (1부터 시작)
+3. 줌/패닝 시 일관된 동작
+4. 향후 셀 클릭으로 빠른 배치 기능 확장 가능
+
+### 트레이드오프
+- DOM 요소 240개 추가 (성능 영향 미미)
+- GridGuide 코드 삭제 필요
+
+---
+
+## 관련 문서
+
+- 문제: [PROBLEMS.md](../PROBLEMS.md) > P004
+- 변경: [CHANGELOG.md](../CHANGELOG.md) > 2026-02-05 오후
+- 세션: [sessions/2026-02-05.md](../sessions/2026-02-05.md)
--- a/popdocs/decisions/005-breakpoint-redesign.md
+++ b/popdocs/decisions/005-breakpoint-redesign.md
@ -0,0 +1,181 @@
+# ADR 005: 브레이크포인트 재설계 (기기 기반)
+
+**날짜**: 2026-02-06  
+**상태**: 채택  
+**의사결정자**: 시스템 아키텍트  
+
+---
+
+## 상황 (Context)
+
+### 문제 1: 뷰어에서 모드 전환 불일치
+
+```
+브라우저 수동 리사이즈 시:
+- useResponsiveMode 훅: 768px 이상 → "tablet" 판정
+- GRID_BREAKPOINTS: 768~839px → "mobile_landscape" (6칸)
+
+결과: 768~839px 구간에서 모드 불일치 발생
+```
+
+### 문제 2: 기존 브레이크포인트 근거 부족
+
+```
+기존 설정:
+- mobile_portrait: ~599px
+- mobile_landscape: 600~839px  
+- tablet_portrait: 840~1023px
+
+문제: 실제 기기 뷰포트와 맞지 않음
+- iPad Mini 세로: 768px (mobile_landscape로 분류됨)
+```
+
+### 사용자 요구사항
+
+> "현장 모바일 기기가 최소 8인치 ~ 최대 14인치, 
+> 핸드폰은 아이폰 미니 ~ 갤럭시 울트라 사이즈"
+
+---
+
+## 연구 (Research)
+
+### 실제 기기 CSS 뷰포트 조사 (2026년 기준)
+
+| 기기 | 화면 크기 | CSS 뷰포트 너비 |
+|------|----------|----------------|
+| iPhone SE | 4.7" | 375px |
+| iPhone 16 Pro | 6.3" | 402px |
+| Galaxy S25 Ultra | 6.9" | 440px |
+| iPad Mini 7 | 8.3" | 768px |
+| iPad Pro 11 | 11" | 834px (세로), 1194px (가로) |
+| iPad Pro 13 | 13" | 1024px (세로), 1366px (가로) |
+
+### 업계 표준 브레이크포인트
+
+| 프레임워크 | 모바일/태블릿 경계 | 태블릿/데스크톱 경계 |
+|-----------|------------------|-------------------|
+| Tailwind CSS | 768px | 1024px |
+| Bootstrap 5 | 768px | 992px |
+| Material Design 3 | 600px | 840px |
+
+**공통점**: 768px, 1024px가 거의 표준
+
+---
+
+## 결정 (Decision)
+
+### 채택: 기기 기반 브레이크포인트
+
+| 모드 | 너비 범위 | 변경 전 | 근거 |
+|------|----------|--------|------|
+| mobile_portrait | 0~479px | 0~599px | 스마트폰 세로 최대 440px |
+| mobile_landscape | 480~767px | 600~839px | 스마트폰 가로, 767px까지 |
+| tablet_portrait | 768~1023px | 840~1023px | iPad Mini 768px 포함 |
+| tablet_landscape | 1024px+ | 동일 | 대형 태블릿 가로 |
+
+### 핵심 변경
+
+```typescript
+// pop-layout.ts - GRID_BREAKPOINTS
+mobile_portrait:  { maxWidth: 479 }   // was 599
+mobile_landscape: { minWidth: 480, maxWidth: 767 }  // was 600, 839
+tablet_portrait:  { minWidth: 768, maxWidth: 1023 } // was 840, 1023
+tablet_landscape: { minWidth: 1024 }  // 동일
+
+// pop-layout.ts - detectGridMode()
+if (viewportWidth < 480) return "mobile_portrait";   // was 600
+if (viewportWidth < 768) return "mobile_landscape";  // was 840
+if (viewportWidth < 1024) return "tablet_portrait";
+
+// useDeviceOrientation.ts - BREAKPOINTS
+TABLET_MIN: 768  // was 840
+```
+
+---
+
+## 구현 (Implementation)
+
+### 수정 파일
+
+| 파일 | 변경 내용 |
+|------|----------|
+| `pop-layout.ts` | GRID_BREAKPOINTS 값 수정, detectGridMode() 조건 수정 |
+| `useDeviceOrientation.ts` | BREAKPOINTS.TABLET_MIN = 768 |
+| `PopCanvas.tsx` | VIEWPORT_PRESETS width 값 조정 |
+| `page.tsx (뷰어)` | detectGridMode() 사용으로 일관성 확보 |
+
+### 뷰어 모드 감지 방식 변경
+
+```typescript
+// 변경 전: useResponsiveModeWithOverride만 사용
+const currentModeKey = getModeKey(deviceType, isLandscape);
+
+// 변경 후: 프리뷰 모드와 일반 모드 분리
+const currentModeKey = isPreviewMode
+  ? getModeKey(deviceType, isLandscape)  // 프리뷰: 수동 선택
+  : detectGridMode(viewportWidth);        // 일반: 너비 기반
+```
+
+---
+
+## 결과 (Consequences)
+
+### 긍정적 효과
+
+| 효과 | 설명 |
+|------|------|
+| **기기 커버리지** | 아이폰 SE ~ 갤럭시 울트라, 8~14인치 태블릿 모두 포함 |
+| **업계 표준 호환** | 768px, 1024px는 거의 모든 프레임워크 기준점 |
+| **일관성 확보** | GRID_BREAKPOINTS와 detectGridMode() 완전 일치 |
+| **직관적 매핑** | 스마트폰 세로/가로, 태블릿 세로/가로 자연스럽게 분류 |
+
+### 트레이드오프
+
+| 항목 | 설명 |
+|------|------|
+| **기존 데이터 영향** | 600~767px 구간이 6칸→6칸 (영향 없음) |
+| **768~839px 변경** | 기존 6칸→8칸 (태블릿으로 재분류) |
+
+---
+
+## 세로 자동 확장 (추가 결정)
+
+### 배경
+
+> "세로는 신경쓸 필요가 없는 것 맞지? 
+> 그렇다면 캔버스도 세로 무한 스크롤이 가능해야겠네?"
+
+### 결정
+
+1. **뷰포트 프리셋에서 height 제거** (width만 유지)
+2. **캔버스 높이 동적 계산** (컴포넌트 배치 기준)
+3. **항상 여유 행 3개 유지** (추가 배치 공간)
+4. **뷰어에서 터치 스크롤** 지원
+
+### 구현
+
+```typescript
+// PopCanvas.tsx
+const MIN_CANVAS_HEIGHT = 600;
+const CANVAS_EXTRA_ROWS = 3;
+
+const dynamicCanvasHeight = useMemo(() => {
+  const maxRowEnd = visibleComps.reduce((max, comp) => {
+    return Math.max(max, comp.row + comp.rowSpan);
+  }, 1);
+  
+  const totalRows = maxRowEnd + CANVAS_EXTRA_ROWS;
+  return Math.max(MIN_CANVAS_HEIGHT, totalRows * rowHeight);
+}, [layout.components, ...]);
+```
+
+---
+
+## 관련 문서
+
+- [003-v5-grid-system.md](./003-v5-grid-system.md) - v5 그리드 시스템 채택
+- [006-auto-wrap-review-system.md](./006-auto-wrap-review-system.md) - 자동 줄바꿈
+
+---
+
+**결론**: 실제 기기 뷰포트 기반 브레이크포인트로 일관성 확보 + 세로 무한 스크롤로 UX 개선
--- a/popdocs/decisions/006-auto-wrap-review-system.md
+++ b/popdocs/decisions/006-auto-wrap-review-system.md
@ -0,0 +1,220 @@
+# ADR 006: v5.1 자동 줄바꿈 + 검토 필요 시스템
+
+**날짜**: 2026-02-06  
+**상태**: 채택  
+**의사결정자**: 시스템 아키텍트  
+
+---
+
+## 상황 (Context)
+
+v5 반응형 레이아웃에서 "화면 밖" 개념으로 컴포넌트를 처리했으나, 다음 문제가 발생했습니다:
+
+### 문제 1: 정보 손실
+```
+12칸 모드:
+┌────┬────┬────┬────┬────┬────┬────┬────┬────┬────┬────┬────┐
+│  A   │            B (col=5, 6칸)                        │
+└────┴────┴────┴────┴────┴────┴────┴────┴────┴────┴────┴────┘
+
+4칸 모드 (기존):
+┌────┬────┬────┬────┐   화면 밖:
+│  A   │             │   - B
+└────┴────┴────┴────┘
+         ↑ A만 보임      ↑ 뷰어에서 안 보임!
+```
+
+### 문제 2: 사용자 의도 불일치
+사용자가 기대한 "화면 밖" 역할:
+- ❌ 컴포넌트 숨김 (현재 동작)
+- ✅ "이 컴포넌트 검토 필요" 알림
+
+---
+
+## 결정 (Decision)
+
+### 채택: 자동 줄바꿈 + 검토 필요 시스템
+
+```
+col > maxCol → 자동으로 맨 아래에 배치 (줄바꿈)
+오버라이드 없음 → "검토 필요" 알림
+```
+
+---
+
+## 구현 (Implementation)
+
+### 1. 자동 줄바꿈 로직
+
+**파일**: `gridUtils.ts` - `convertAndResolvePositions()`
+
+```typescript
+// 단계별 처리:
+1. 비율 변환 + 원본 col 보존
+   converted = components.map(comp => ({
+     id: comp.id,
+     position: convertPositionToMode(comp.position, targetMode),
+     originalCol: comp.position.col,  // ⭐ 원본 보존
+   }))
+
+2. 정상 vs 초과 분리
+   normalComponents = originalCol ≤ targetColumns
+   overflowComponents = originalCol > targetColumns
+
+3. 초과 컴포넌트 자동 배치
+   maxRow = normalComponents의 최대 row
+   overflowComponents → col=1, row=맨아래+1
+
+4. 겹침 해결
+   resolveOverlaps([...normalComponents, ...wrappedComponents])
+```
+
+### 2. 검토 필요 판별
+
+**파일**: `gridUtils.ts` - `needsReview()`
+
+```typescript
+function needsReview(
+  currentMode: GridMode,
+  hasOverride: boolean
+): boolean {
+  // 12칸 모드는 기본 모드이므로 검토 불필요
+  if (GRID_BREAKPOINTS[currentMode].columns === 12) return false;
+  
+  // 오버라이드가 있으면 이미 편집함 → 검토 완료
+  if (hasOverride) return false;
+  
+  // 오버라이드 없으면 → 검토 필요
+  return true;
+}
+```
+
+**판단 기준 (최종)**: "이 모드에서 편집했냐 안 했냐"
+
+### 3. 검토 필요 패널
+
+**파일**: `PopCanvas.tsx` - `ReviewPanel`
+
+```typescript
+// 필터링
+const reviewComponents = visibleComponents.filter(comp => {
+  const hasOverride = !!layout.overrides?.[currentMode]?.positions?.[comp.id];
+  return needsReview(currentMode, hasOverride);
+});
+
+// UI
+<ReviewPanel
+  components={reviewComponents}
+  onSelectComponent={onSelectComponent}  // 클릭 시 선택
+/>
+```
+
+**변경 사항**:
+- 기존: `OutOfBoundsPanel` (주황색, 드래그로 복원)
+- 변경: `ReviewPanel` (파란색, 클릭으로 선택)
+
+---
+
+## 결과 (Consequences)
+
+### 긍정적 효과
+
+| 효과 | 설명 |
+|------|------|
+| **정보 손실 방지** | 모든 컴포넌트가 항상 그리드 안에 표시됨 |
+| **사용자 부담 감소** | 자동 배치를 먼저 제공, 필요시에만 편집 |
+| **의도 명확화** | "숨김" ≠ "검토 필요" (기능 분리) |
+| **뷰어 호환** | 자동 배치가 뷰어에도 적용됨 |
+
+### 트레이드오프
+
+| 항목 | 설명 |
+|------|------|
+| **스크롤 증가** | 아래로 자동 배치되면 페이지가 길어질 수 있음 |
+| **자동 배치 품질** | 사용자가 원하지 않는 위치에 배치될 수 있음 |
+
+---
+
+## 사용자 시나리오
+
+### 시나리오 1: 수용 (자동 배치 그대로)
+```
+1. 12칸에서 컴포넌트 A, B, C 배치
+2. 4칸 모드로 전환
+3. 시스템: 자동 배치 + "검토 필요 (3개)" 알림
+4. 사용자: 확인 → "괜찮네" → 아무것도 안 함
+5. 결과: 자동 배치 유지 (오버라이드 없음)
+```
+
+### 시나리오 2: 편집 (오버라이드 저장)
+```
+1. 12칸에서 컴포넌트 A, B, C 배치
+2. 4칸 모드로 전환
+3. 시스템: 자동 배치 + "검토 필요 (3개)" 알림
+4. 사용자: A 클릭 → 드래그/리사이즈
+5. 결과: A 오버라이드 저장 → A 검토 완료
+6. "검토 필요 (2개)" (B, C만 남음)
+```
+
+### 시나리오 3: 보류 (나중에)
+```
+1. 12칸에서 컴포넌트 A, B, C 배치
+2. 4칸 모드로 전환
+3. 시스템: 자동 배치 + "검토 필요 (3개)" 알림
+4. 사용자: 다른 모드로 전환 또는 저장
+5. 결과: 자동 배치 유지, 나중에도 "검토 필요" 표시
+```
+
+---
+
+## 기능 비교
+
+| 구분 | 역할 | 뷰어에서 | 판단 기준 |
+|------|------|---------|----------|
+| **검토 필요** | 자동 배치 알림 | **보임** | 오버라이드 없음 |
+| **숨김** | 의도적 숨김 | **안 보임** | hidden 배열에 ID |
+
+---
+
+## 대안 (Alternatives Considered)
+
+### A안: 완전 자동 (채택 ✅)
+- 모든 초과 컴포넌트 자동 배치
+- "검토 필요" 알림으로 확인 유도
+- 업계 표준 (Webflow, Retool)
+
+### B안: 선택적 자동 (미채택)
+- 첫 전환 시만 자동 배치
+- 사용자가 원하면 "화면 밖"으로 드래그
+- 복잡성 증가
+
+### C안: 수동 배치 유지 (미채택)
+- 기존 "화면 밖" 패널 유지
+- 사용자가 모든 모드 수동 편집
+- 사용자 부담 과다
+
+---
+
+## 참고 자료
+
+### 업계 표준 (2026년 기준)
+- **Grafana, Tableau**: Masonry Layout (조적식)
+- **Retool, PowerApps**: Vertical Stacking (수직 스택)
+- **Webflow, Framer**: CSS Grid Auto-Placement
+
+**공통점**: "Fluid Reflow (유동적 재배치)" - 정보 손실 방지
+
+---
+
+## 관련 파일
+
+| 파일 | 변경 내용 |
+|------|----------|
+| `gridUtils.ts` | convertAndResolvePositions, needsReview 추가 |
+| `PopCanvas.tsx` | ReviewPanel로 변경 |
+| `PopRenderer.tsx` | isOutOfBounds import 제거 |
+| `pop-layout.ts` | 타입 변경 없음 (기존 구조 유지) |
+
+---
+
+**결론**: 자동 줄바꿈 + 검토 필요 시스템으로 정보 손실 방지 및 사용자 부담 최소화
--- a/popdocs/sessions/2026-02-05.md
+++ b/popdocs/sessions/2026-02-05.md
@ -1,12 +1,21 @@
 # 2026-02-05 작업 기록

 ## 요약
-v5 그리드 시스템 통합 완료, popdocs 문서 구조 재정비
+v5 그리드 시스템 통합 완료, 그리드 가이드 재설계, **드래그앤드롭 좌표 버그 수정**, popdocs 문서 구조 재정비

 ---

 ## 완료

+### 드래그앤드롭 완전 수정 (저녁)
+- [x] 스케일 보정 누락 문제 해결
+- [x] calcGridPosition 함수 추가
+- [x] DND 타입 상수 통합 (constants/dnd.ts)
+- [x] 불필요한 toast 메시지 제거
+- [x] 컴포넌트 이동/리사이즈 정상 작동 확인
+- [x] **컴포넌트 중첩(겹침) 문제 해결** - toast import 누락 수정
+- [x] **리사이즈 핸들 작동 문제 해결** - useDrop 훅 통합
+
 ### v5 통합 작업
 - [x] 레거시 파일 삭제 (PopCanvasV4, PopFlexRenderer, PopLayoutRenderer 등)
 - [x] 파일명 정규화 (V5 접미사 제거)
@ -22,31 +31,64 @@ v5 그리드 시스템 통합 완료, popdocs 문서 구조 재정비
 - [x] INDEX.md 생성 (기능별 색인)
 - [x] sessions/ 폴더 구조 도입

+### 디자이너 완성 작업
+- [x] 컴포넌트 팔레트 UI 추가 (ComponentPalette.tsx)
+- [x] PopCanvas.tsx 타입 오류 수정
+- [x] 드래그앤드롭 연결
+
+### 그리드 가이드 재설계
+- [x] GridGuide.tsx 삭제 (SVG 기반 → 좌표 불일치 문제)
+- [x] PopRenderer.tsx 격자 셀 렌더링 (CSS Grid 기반, 동일 좌표계)
+- [x] PopCanvas.tsx 행/열 라벨 추가 (캔버스 바깥)
+- [x] 컴포넌트 타입 단순화 (pop-sample 1개)
+
+### 기반 정리 작업
+- [x] pop-layout.ts: PopComponentType을 pop-sample 1개로 단순화
+- [x] ComponentPalette.tsx: 샘플 박스 1개만 표시
+- [x] PopRenderer.tsx: 샘플 박스 렌더링으로 단순화
+
 ---

 ## 미완료

- [ ] 컴포넌트 팔레트 UI 추가 (PopDesigner.tsx 좌측)
- [ ] PopCanvas.tsx 타입 오류 수정 (line 76)
- [ ] ARCHITECTURE.md v5 기준 업데이트
- [ ] CHANGELOG.md 오늘 작업 추가
+- [x] 실제 화면 테스트 (디자이너 페이지) → 완료, 정상 작동
+- [x] 간격 조정 규칙 결정 → 2026-02-06 Gap 프리셋으로 해결 (좁게/보통/넓게)

 ---

-## 중단점
+## 그리드 가이드 재설계 상세

-> **다음 작업자 참고**:
-> 
-> 1. **타입 오류**: PopCanvas.tsx line 76
->    - `}: PopCanvasV5Props)` → `}: PopCanvasProps)`로 변경
->    - 인터페이스는 이미 `PopCanvasProps`로 정의됨 (line 48)
->
-> 2. **팔레트 UI**: PopDesigner.tsx에 컴포넌트 팔레트 추가 필요
->    - 위치: 좌측 ResizablePanel (현재 비어있음)
->    - 참고: 이전 ComponentPaletteV4.tsx (삭제됨, archive에서 참고 가능)
->    - DnD 타입: PopCanvas.tsx에 `DND_ITEM_TYPES` 인라인 정의됨
->
-> 3. **문서**: ARCHITECTURE.md가 아직 v3/v4 기준임
+### 문제 원인
+1. GridGuide.tsx가 SVG로 별도 렌더링 → CSS Grid 기반 컴포넌트와 좌표계 불일치
+2. PopRenderer의 그리드 배경이 희미 (rgba 0.2)
+3. 행/열 번호 라벨 없음
+
+### 해결 방안 (Option C 하이브리드)
+```
+역할 분담:
+- PopRenderer: 격자선 + 컴포넌트 (같은 좌표계)
+- PopCanvas: 라벨 + 줌/패닝 + 드롭존
+- GridGuide: 삭제
+```
+
+### 핵심 설계
+```
+SVG 격자 (별도 좌표) → CSS Grid 셀 (동일 좌표)
+- gridCells: 12열 × 20행 = 240개 실제 DOM 셀
+- border-dashed border-blue-300/40 스타일
+- 컴포넌트는 z-index:10으로 위에 표시
+```
+
+### 라벨 구조
+```
+    [1] [2] [3] [4] [5] [6] [7] [8] [9] [10][11][12]  ← 열 라벨 (캔버스 상단)
+    ┌───────────────────────────────────────────┐
+[1] │   │   │   │   │   │   │   │   │   │   │   │
+[2] │   │   │   │   │   │   │   │   │   │   │   │
+[3] │   │   │   │ ■ │   │   │   │   │   │   │   │  ← 5열 3행
+    └───────────────────────────────────────────┘
+ ↑ 행 라벨 (캔버스 좌측)
+```

 ---

@ -58,28 +100,78 @@ v5 그리드 시스템 통합 완료, popdocs 문서 구조 재정비
 - **연구**: Softr, Ant Design, Material Design 분석
 - **결정**: CSS Grid 기반 그리드 시스템 채택

+### 그리드 가이드 재설계 배경
+- **문제**: SVG GridGuide와 CSS Grid PopRenderer가 좌표계 불일치
+- **원칙**: "격자선은 컴포넌트와 같은 좌표계에서 태어나야 한다"
+- **결정**: CSS Grid 기반 실제 DOM 셀로 격자 렌더링
+
 ### popdocs 재정비 배경
 - **문제**: 문서 구조가 AI 에이전트 진입점 역할 못함
 - **해결**: Progressive Disclosure 적용, 저장/조회 규칙 명시화
 - **참고**: 2025-2026 AI 컨텍스트 엔지니어링 최신 기법

-### 핵심 결정
- Layer 1 (진입점): README, STATUS, SAVE_RULES
- Layer 2 (상세): CHANGELOG, PROBLEMS, INDEX 등
- Layer 3 (심화): decisions/, sessions/, archive/
+---
+
+## 빌드 결과
+
+```
+exit_code: 0
+popScreenMngList: 29.4 kB (311 KB First Load)
+총 변경: 8,453줄 삭제, 1,819줄 추가 (순감 6,634줄)
+```

 ---

 ## 관련 링크

 - ADR: [decisions/003-v5-grid-system.md](../decisions/003-v5-grid-system.md)
- CHANGELOG: 오늘 작업 추가 필요
 - 삭제된 파일 목록: FILES.md 하단 "삭제된 파일" 섹션

 ---

-## 메모
+## 드래그앤드롭 좌표 버그 수정 상세

- POPUPDATE.md (루트)는 별도로 유지 (전체 프로젝트 기록용)
- popdocs/는 POP 디자이너 개발 전용
- rangraph 연동 고려 (장기 기억 검색용)
+### 문제 현상
+- 컴포넌트를 아래로 드래그해도 위로 올라감
+- Row 92 같은 비정상적인 좌표로 배치됨
+- 드래그 이동/리사이즈가 전혀 작동하지 않음
+
+### 핵심 원인
+캔버스에 `transform: scale(0.8)` 적용 시 좌표 계산 불일치:
+```
+getBoundingClientRect() → 스케일 적용된 크기 (1024px → 819px)
+getClientOffset() → 뷰포트 기준 실제 마우스 좌표
+이 둘을 그대로 계산하면 좌표가 완전히 틀림
+```
+
+### 해결 방법
+단순한 상대 좌표 + 스케일 보정:
+```typescript
+// 캔버스 내 상대 좌표 (스케일 보정)
+const relX = (offset.x - canvasRect.left) / canvasScale;
+const relY = (offset.y - canvasRect.top) / canvasScale;
+
+// 그리드 좌표 계산 (실제 캔버스 크기 사용)
+calcGridPosition(relX, relY, customWidth, breakpoint.columns, ...);
+```
+
+### 추가 수정
+- DND 타입 상수를 3개 파일에서 중복 정의 → `constants/dnd.ts`로 통합
+- 불필요한 "컴포넌트가 이동되었습니다" toast 메시지 제거
+
+---
+
+## 다음 작업자 참고
+
+1. **테스트 완료**
+   - 디자이너 페이지에서 그리드 가이드 확인 ✅
+   - 컴포넌트 드래그앤드롭 테스트 ✅
+   - 4가지 모드 전환 테스트 (추가 확인 필요)
+
+2. **향후 결정 필요**
+   - 간격 조정: 전역 고정 vs 화면별 vs 컴포넌트별
+   - 행 수: 현재 20행 고정, 동적 변경 여부
+
+3. **Phase 4 준비**
+   - 실제 컴포넌트 구현 (pop-label, pop-button 등)
+   - 데이터 바인딩 연결
--- a/popdocs/sessions/2026-02-06.md
+++ b/popdocs/sessions/2026-02-06.md
@ -0,0 +1,239 @@
+# 2026-02-06 작업 기록
+
+## 요약
+v5.1 자동 줄바꿈 + 검토 필요 시스템 완성, 브레이크포인트 재설계, 세로 자동 확장 구현
+
+---
+
+## 완료
+
+### 브레이크포인트 재설계
+- [x] GRID_BREAKPOINTS 값 수정 (기기 기반)
+- [x] detectGridMode() 조건 수정
+- [x] useDeviceOrientation.ts TABLET_MIN 768로 변경
+- [x] 뷰어에서 detectGridMode() 사용하여 일관성 확보
+
+### 세로 자동 확장
+- [x] VIEWPORT_PRESETS에서 height 속성 제거
+- [x] dynamicCanvasHeight useMemo 추가
+- [x] MIN_CANVAS_HEIGHT, CANVAS_EXTRA_ROWS 상수 추가
+- [x] gridLabels 동적 계산 (행 수 자동 조정)
+- [x] gridCells 동적 계산 (PopRenderer)
+- [x] 뷰어 프리뷰 모드 스크롤 지원
+
+### 자동 줄바꿈 시스템 (v5.1)
+- [x] convertAndResolvePositions() 자동 줄바꿈 로직
+- [x] 원본 col 보존 로직
+- [x] 초과 컴포넌트 맨 아래 배치
+- [x] colSpan 자동 축소
+
+### 검토 필요 시스템
+- [x] needsReview() 함수 추가
+- [x] OutOfBoundsPanel → ReviewPanel 변경
+- [x] 파란색 테마 (안내 느낌)
+- [x] 클릭 시 컴포넌트 선택
+
+### 버그 수정
+- [x] hiddenComponentIds 중복 정의 에러 수정
+- [x] useDrop 의존성 배열 수정
+- [x] 검토 필요 패널 모드별 표시 불일치 수정
+
+### 그리드 셀 크기 강제 고정 (v5.2.1)
+- [x] gridAutoRows → gridTemplateRows 변경 (행 높이 강제 고정)
+- [x] dynamicRowCount를 gridStyle과 gridCells에서 공유
+- [x] 컴포넌트 overflow: visible → overflow: hidden 변경
+- [x] PopRenderer dynamicRowCount에서 숨김 컴포넌트 제외
+- [x] PopCanvas와 PopRenderer의 여유행 기준 통일 (+3)
+- [x] 디버깅용 console.log 2개 삭제
+- [x] 뷰어 page.tsx viewportWidth 선언 순서 수정
+
+---
+
+## 브레이크포인트 변경 상세
+
+### 변경 전 → 변경 후
+
+| 모드 | 변경 전 | 변경 후 | 근거 |
+|------|--------|--------|------|
+| mobile_portrait | ~599px | ~479px | 스마트폰 세로 최대 440px |
+| mobile_landscape | 600~839px | 480~767px | 767px까지 스마트폰 |
+| tablet_portrait | 840~1023px | 768~1023px | iPad Mini 768px 포함 |
+| tablet_landscape | 1024px+ | 동일 | 변경 없음 |
+
+### 연구 결과 (기기별 CSS 뷰포트)
+
+| 기기 | CSS 뷰포트 너비 |
+|------|----------------|
+| iPhone SE | 375px |
+| iPhone 16 Pro | 402px |
+| Galaxy S25 Ultra | 440px |
+| iPad Mini 7 | 768px |
+| iPad Pro 11 | 834px (세로), 1194px (가로) |
+| iPad Pro 13 | 1024px (세로), 1366px (가로) |
+
+---
+
+## 세로 자동 확장 상세
+
+### 핵심 상수
+
+```typescript
+const MIN_CANVAS_HEIGHT = 600;  // 최소 캔버스 높이 (px)
+const CANVAS_EXTRA_ROWS = 3;    // 항상 유지되는 여유 행 수
+```
+
+### 동적 높이 계산 로직
+
+```typescript
+const dynamicCanvasHeight = useMemo(() => {
+  const visibleComps = Object.values(layout.components)
+    .filter(comp => !hiddenComponentIds.includes(comp.id));
+
+  if (visibleComps.length === 0) return MIN_CANVAS_HEIGHT;
+
+  const maxRowEnd = visibleComps.reduce((max, comp) => {
+    const pos = getEffectivePosition(comp);
+    return Math.max(max, pos.row + pos.rowSpan);
+  }, 1);
+
+  const totalRows = maxRowEnd + CANVAS_EXTRA_ROWS;
+  const height = totalRows * (rowHeight + gap) + padding * 2;
+
+  return Math.max(MIN_CANVAS_HEIGHT, height);
+}, [dependencies]);
+```
+
+### 영향받는 영역
+
+| 영역 | 변경 |
+|------|------|
+| 캔버스 컨테이너 | minHeight: dynamicCanvasHeight |
+| 디바이스 스크린 | minHeight: dynamicCanvasHeight |
+| 행 라벨 | 동적 행 수 계산 |
+| 격자 셀 | 동적 행 수 계산 |
+
+---
+
+## 자동 줄바꿈 로직 상세
+
+### 처리 단계
+
+```
+1. 비율 변환 + 원본 col 보존
+   converted = map(comp => ({
+     position: convertPositionToMode(comp.position),
+     originalCol: comp.position.col,  // 원본 보존
+   }))
+
+2. 정상 vs 초과 분리
+   normalComponents = filter(originalCol <= targetColumns)
+   overflowComponents = filter(originalCol > targetColumns)
+
+3. 초과 컴포넌트 맨 아래 배치
+   maxRow = normalComponents의 최대 (row + rowSpan - 1)
+   overflowComponents → col=1, row=maxRow+1
+
+4. colSpan 자동 축소
+   if (colSpan > targetColumns) colSpan = targetColumns
+
+5. 겹침 해결
+   resolveOverlaps([...normalComponents, ...wrappedComponents])
+```
+
+---
+
+## 대화 핵심
+
+### 반응형 불일치 문제
+
+**사용자 리포트**:
+> "아이폰 SE, iPad Pro 프리셋은 잘 되는데, 
+> 브라우저 수동 리사이즈 시 6칸 모드가 적용 안 되는 것 같아"
+
+**원인 분석**:
+- useResponsiveMode: width/height 비율로 landscape/portrait 판정
+- GRID_BREAKPOINTS: 순수 너비 기반
+- 768~839px 구간에서 불일치 발생
+
+**해결**:
+- 뷰어에서 detectGridMode(viewportWidth) 사용
+- 프리뷰 모드만 useResponsiveModeWithOverride 유지
+
+### 세로 무한 스크롤 결정
+
+**사용자 질문**:
+> "우리 화면 모드는 너비만 신경쓰면 되잖아?
+> 세로는 무한 스크롤이 가능해야 하겠네?"
+
+**확인 사항**:
+1. 너비만 신경쓰면 됨 ✅
+2. 캔버스 세로 무한 스크롤 필요 ✅
+3. 뷰어에서 터치 스크롤 지원 ✅
+
+**구현 방식 선택**:
+- 수동 행 추가 방식 vs **자동 확장 방식 (채택)**
+- 이유: 여유 공간 3행 자동 유지, 사용자 부담 최소화
+
+---
+
+## 빌드 결과
+
+```
+exit_code: 0
+주요 변경 파일: 6개
+```
+
+---
+
+## 관련 링크
+
+- ADR: [decisions/005-breakpoint-redesign.md](../decisions/005-breakpoint-redesign.md)
+- ADR: [decisions/006-auto-wrap-review-system.md](../decisions/006-auto-wrap-review-system.md)
+- 이전 세션: [sessions/2026-02-05.md](./2026-02-05.md)
+
+---
+
+## 이번 작업에서 배운 것
+
+### 새로 알게 된 기술 개념
+
+- **gridAutoRows vs gridTemplateRows**: `gridAutoRows`는 행의 *최소* 높이만 보장하고 콘텐츠에 따라 늘어날 수 있음. `gridTemplateRows`는 행 높이를 *강제 고정*함. 가이드 셀과 컴포넌트가 같은 Grid 컨테이너에 있을 때, 컴포넌트 콘텐츠가 행 높이를 밀어내면 인접한 빈 가이드 셀 크기도 함께 변해 시각적 불일치가 발생함.
+
+### 발생했던 에러와 원인 패턴
+
+| 에러 | 원인 패턴 |
+|------|-----------|
+| 그리드 셀 크기 불균일 | 같은 CSS Grid에서 gridAutoRows(최소값)를 사용하면 콘텐츠가 행 높이를 변형시킴 |
+| Canvas vs Renderer 행 수 불일치 | 같은 데이터(행 수)를 두 곳에서 계산하면서 필터 조건(숨김 제외)이 달랐음 |
+| 디버깅 console.log 잔존 | 기능 완료 후 정리 단계를 생략함 |
+| viewportWidth 참조 순서 | 변수 사용 코드가 선언 코드보다 위에 위치 (JS 호이스팅으로 동작은 하지만 가독성 저하) |
+
+### 다음에 비슷한 작업할 때 주의할 점
+
+1. **CSS Grid에서 "고정 크기" 셀이 필요하면 `gridTemplateRows`를 사용**하고, `gridAutoRows`는 동적 추가행 대비용으로만 유지
+2. **같은 데이터를 여러 곳에서 계산할 때, 필터 조건이 동일한지 반드시 비교** (숨김 제외 등)
+3. **기능 완료 후 `console.log`를 Grep으로 검색하여 디버깅 로그 정리**
+4. **변수 선언 순서는 의존 관계 순서와 일치**시켜야 가독성과 유지보수성 확보
+
+---
+
+## 중단점
+
+> **다음 작업**: Phase 4 실제 컴포넌트 구현
+> - pop-label, pop-button 등 실제 렌더링 구현
+> - 데이터 바인딩 연결
+> - STATUS.md의 "다음 작업" 섹션 참조
+
+---
+
+## 다음 작업자 참고
+
+1. **테스트 필요**
+   - 아이폰 SE 실기기 테스트
+   - iPad Mini 세로 모드 확인
+   - 브라우저 리사이즈로 모드 전환 확인
+
+2. **향후 작업**
+   - Phase 4: 실제 컴포넌트 구현 (pop-label, pop-button 등)
+   - 데이터 바인딩 연결
+   - 워크플로우 연동