# POP 개발 계획

---

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

**v5.2 그리드 시스템 완성 (브레이크포인트 재설계 + 세로 자동 확장)**

---

## 작업 순서

```
[Phase 1~3]      [Phase 5]           [Phase 4]
v4 Flexbox    →  v5 CSS Grid      →  실제 컴포넌트 구현
   완료            완료 (v5.2)         다음
```

---

## 완료된 Phase

### Phase 1~3: v4 Flexbox 시스템 (완료, 레거시 삭제됨)

v4 Flexbox 기반 시스템은 v5 CSS Grid로 완전히 대체되었습니다.
v4 관련 파일은 모두 삭제되었습니다.

- [x] v4 기본 구조, 렌더러, 디자이너 통합
- [x] Undo/Redo, 드래그 리사이즈, Flexbox 가로 배치
- [x] 비율 스케일링 시스템
- [x] 오버라이드 기능 (모드별 배치 고정)
- [x] 컴포넌트 표시/숨김, 줄바꿈

### Phase 5: v5 CSS Grid 시스템 (완료)

#### Phase 5.1: 타입 정의 (완료)
- [x] `PopLayoutDataV5` 인터페이스
- [x] `PopGridConfig`, `PopGridPosition` 타입
- [x] `GridMode`, `GRID_BREAKPOINTS` 상수
- [x] `createEmptyPopLayoutV5()`, `isV5Layout()`, `detectGridMode()`

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

#### Phase 5.3: 디자이너 UI (완료)
- [x] `PopCanvas.tsx` - 그리드 캔버스 + 행/열 라벨
- [x] 드래그 스냅 (칸에 맞춤)
- [x] `ComponentEditorPanel.tsx` - 위치 편집

#### Phase 5.4: 반응형 자동화 (완료)
- [x] 자동 변환 알고리즘 (12칸 -> 4칸)
- [x] 겹침 감지 및 재배치
- [x] 모드별 오버라이드 저장

#### v5.1 추가 기능 (완료)
- [x] 자동 줄바꿈 (col > maxCol -> 맨 아래 배치)
- [x] "검토 필요" 알림 시스템
- [x] Gap 프리셋 (좁게/보통/넓게)
- [x] 숨김 기능 (모드별)

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

---

## 다음 작업

### Phase 4: 실제 컴포넌트 구현

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

**컴포넌트 구현 목록**:

- [ ] pop-field: 입력/표시 필드
- [ ] pop-button: 액션 버튼
- [ ] pop-list: 데이터 리스트 (카드 템플릿)
- [ ] pop-indicator: KPI/상태 표시
- [ ] pop-scanner: 바코드/QR 스캔
- [ ] pop-numpad: 숫자 입력 패드

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

### 후속 작업

- [ ] 워크플로우 연동 (버튼 액션, 화면 전환)
- [ ] 데이터 바인딩 연결
- [ ] 실기기 테스트 (아이폰 SE, iPad Mini 등)

---

## 현재 구현 계획

> **용도**: 이 섹션은 "지금 바로 실행할 구체적 계획"입니다.
> 새 세션에서 이 섹션만 읽으면 코딩을 시작할 수 있어야 합니다.
> 완료되면 다음 기능의 계획으로 **교체**합니다.

### 대상: (계획 수립 전)

현재 구현 계획이 없습니다. 계획 수립 세션에서 다음 형식으로 작성해주세요:

```
### 대상: [기능명]

#### 구현 순서 (의존성 기반)
1. [ ] 파일명 - 변경 내용 요약
2. [ ] 파일명 - 변경 내용 요약

#### 파일별 변경 사항
| # | 파일 (경로) | 작업 | 핵심 변경 | 주의사항 |
|---|------------|------|----------|---------|

#### 함정 경고
- (빠뜨리면 에러나는 것들)

#### 참조
- 관련 문서/파일 경로
```

---

## 브레이크포인트 (v5.2 현재)

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

---

## 관련 문서

| 문서 | 내용 |
|------|------|
| [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 |

---

*최종 업데이트: 2026-02-06 (v5.2 완료, Phase 4 대기)*