# 현재 상태

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

---

## 진행 상태

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

---

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

1. **실제 컴포넌트 구현** (Phase 4)
   - pop-label, pop-button 등 실제 렌더링
   - 데이터 바인딩 연결

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칸 모드별로 컴포넌트 위치/크기 개별 저장 |
| 자동 레이아웃 고정 | 드래그/리사이즈 시 자동으로 오버라이드 저장 |
| 원본으로 되돌리기 | 오버라이드 삭제하여 자동 재배치로 복원 |
| 숨김 기능 | 특정 모드에서 컴포넌트 의도적 숨김 (검토와 별개) |

---

## 알려진 문제

| 문제 | 상태 | 비고 |
|------|------|------|
| 타입 이름 불일치 | 해결됨 | V5 접미사 제거 |
| 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 내 삭제 |

---

## 최근 세션

| 날짜 | 요약 | 상세 |
|------|------|------|
| 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) |

---

## 관련 결정

| 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 |

---

*전체 히스토리: [CHANGELOG.md](./CHANGELOG.md)*