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>

popdocs/STATUS.md

@@ -1,6 +1,6 @@
 # 현재 상태
 
-> **마지막 업데이트**: 2026-02-05 심야
+> **마지막 업데이트**: 2026-02-06
 > **담당**: POP 화면 디자이너
 
 ---
@@ -19,10 +19,16 @@
 | 컴포넌트 팔레트 | 완료 | `ComponentPalette.tsx` |
 | 드래그앤드롭 | 완료 | 스케일 보정, DND 상수 통합 |
 | 그리드 가이드 재설계 | 완료 | CSS Grid 기반 통합 |
-| **모드별 오버라이드** | **완료** | 위치/크기 모드별 저장 |
-| **화면 밖 컴포넌트** | **완료** | 오른쪽 패널 배치, 드래그로 복원 |
-| **숨김 기능** | **완료** | 모드별 숨김/숨김해제 |
-| **리사이즈 겹침 검사** | **완료** | 실시간 겹침 방지 |
+| 모드별 오버라이드 | 완료 | 위치/크기 모드별 저장 |
+| 화면 밖 컴포넌트 | 완료 | 오른쪽 패널 배치, 드래그로 복원 |
+| 숨김 기능 | 완료 | 모드별 숨김/숨김해제 |
+| 리사이즈 겹침 검사 | 완료 | 실시간 겹침 방지 |
+| Gap 프리셋 | 완료 | 좁게/보통/넓게 간격 조정 |
+| **자동 줄바꿈** | **완료** | col > maxCol → 맨 아래 배치 |
+| **검토 필요 시스템** | **완료** | 오버라이드 없으면 검토 알림 |
+| **브레이크포인트 재설계** | **완료** | 기기 기반 (479/767/1023px) |
+| **세로 자동 확장** | **완료** | 캔버스 높이 동적 계산 |
+| **그리드 셀 크기 강제 고정** | **완료** | gridTemplateRows로 행 높이 고정, overflow-hidden |
 
 ---
 
@@ -38,29 +44,39 @@
 
 ---
 
-## 최근 주요 변경 (2026-02-05 심야)
+## 최근 주요 변경 (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칸 모드별로 컴포넌트 위치/크기 개별 저장 |
 | 자동 레이아웃 고정 | 드래그/리사이즈 시 자동으로 오버라이드 저장 |
 | 원본으로 되돌리기 | 오버라이드 삭제하여 자동 재배치로 복원 |
-
-### 화면 밖 컴포넌트 처리
-| 기능 | 설명 |
-|------|------|
-| 오른쪽 패널 표시 | 현재 모드에서 초과하는 컴포넌트 별도 표시 |
-| 드래그로 복원 | 패널에서 그리드로 드래그하여 재배치 |
-| 위치 자동 조정 | 그리드 범위 초과 시 자동으로 왼쪽으로 밀어서 배치 |
-
-### 숨김 기능
-| 기능 | 설명 |
-|------|------|
-| 모드별 숨김 | 특정 모드에서만 컴포넌트 숨김 가능 |
-| 숨김 방법 | 드래그→숨김패널 / H키 / 화면밖 컴포넌트 클릭 |
-| 숨김 해제 | 숨김패널에서 그리드로 드래그 |
-| 12칸 모드 제한 | 기본 모드(12칸)에서는 숨김 기능 비활성화 |
+| 숨김 기능 | 특정 모드에서 컴포넌트 의도적 숨김 (검토와 별개) |
 
 ---
 
@@ -74,6 +90,14 @@
 | DND 타입 상수 불일치 | 해결됨 | constants/dnd.ts로 통합 |
 | 숨김 컴포넌트 드래그 안됨 | 해결됨 | 상태 업데이트 순서 수정 |
 | 그리드 범위 초과 에러 | 해결됨 | 드롭 위치 자동 조정 |
+| Expected drag drop context | 해결됨 | 뷰어 모드에서 일반 div 렌더링 |
+| Gap 프리셋 UI 안 보임 | 해결됨 | 그리드 라벨에 adjustedGap 적용 |
+| 화면 밖 컴포넌트 정보 손실 | 해결됨 | 자동 줄바꿈으로 항상 그리드 안에 배치 |
+| 뷰어 반응형 모드 불일치 | 해결됨 | detectGridMode() 사용으로 일관성 확보 |
+| hiddenComponentIds 중복 정의 | 해결됨 | 중복 useMemo 제거 |
+| 그리드 가이드 셀 크기 불균일 | 해결됨 | gridTemplateRows로 행 높이 강제 고정 |
+| Canvas/Renderer 행 수 불일치 | 해결됨 | 숨김 필터 통일, 여유행 +3 |
+| 디버깅 console.log 잔존 | 해결됨 | reviewComponents 내 삭제 |
 
 ---
 
@@ -81,7 +105,8 @@
 
 | 날짜 | 요약 | 상세 |
 |------|------|------|
-| 2026-02-05 심야 | 반응형 레이아웃, 숨김 기능, 겹침 검사 | 이 세션 |
+| 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) |
 
 ---
@@ -90,7 +115,8 @@
 
 | ADR | 제목 | 날짜 |
 |-----|------|------|
-| 005 | 반응형 레이아웃 및 숨김 기능 | 2026-02-05 |
+| 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 |