# POP 개발 계획

---

## 오늘 목표 (2026-02-04)

**POP 화면을 만들 수 있는 환경 완성**

### 필요한 것

1. **v4 타입 정의** - 완료
2. **v4 렌더러** - Flexbox로 화면에 표시
3. **기본 컴포넌트** - 실제 배치할 요소들
4. **디자이너 UI 연결** - v4 모드로 설계 가능

### 작업 순서

```
[v4 타입] → [렌더러] → [컴포넌트] → [디자이너 연결]
   완료        진행        대기          대기
```

---

## 현재 진행

### v4 타입 정의 (완료)

- [x] `PopLayoutDataV4` - 단일 소스 레이아웃
- [x] `PopContainerV4` - 스택 컨테이너
- [x] `PopSizeConstraintV4` - 크기 규칙 (fixed/fill/hug)
- [x] `PopResponsiveRuleV4` - 반응형 규칙
- [x] `createEmptyPopLayoutV4()` - 생성 함수
- [x] `isV4Layout()` - 타입 가드

### v4 렌더러 (진행)

- [ ] `PopFlexRenderer` - Flexbox 기반 렌더링
- [ ] 컨테이너 재귀 렌더링
- [ ] 반응형 규칙 적용 (breakpoint)
- [ ] 컴포넌트 숨김 처리 (hideBelow)

### 기본 컴포넌트 (대기)

- [ ] `PopButton` - 터치 버튼
- [ ] `PopInput` - 텍스트 입력
- [ ] `PopLabel` - 텍스트 표시

---

## v3 vs v4 비교

| | v3 (기존) | v4 (새로운) |
|---|---|---|
| 설계 | 4모드 각각 | 1번만 |
| 데이터 | col, row 위치 | 규칙 (fill/fixed/hug) |
| 렌더링 | CSS Grid | Flexbox |
| 반응형 | 수동 | 자동 + 규칙 |

---

## 컴포넌트 로드맵

### Tier 1: Primitive (기본)

| 컴포넌트 | 용도 | 상태 |
|----------|------|------|
| PopButton | 터치 버튼 | 대기 |
| PopInput | 텍스트 입력 | 대기 |
| PopLabel | 텍스트 표시 | 대기 |
| PopBadge | 상태 배지 | 계획 |

### Tier 2: Compound (조합)

| 컴포넌트 | 용도 | 상태 |
|----------|------|------|
| PopFormField | 라벨 + 입력 | 계획 |
| PopCard | 카드 컨테이너 | 계획 |
| PopListItem | 목록 항목 | 계획 |

### Tier 3: Complex (복합)

| 컴포넌트 | 용도 | 상태 |
|----------|------|------|
| PopScanner | 바코드/QR 스캔 | 계획 |
| PopNumpad | 숫자 키패드 | 계획 |
| PopDataList | 페이징 목록 | 계획 |

---

*최종 업데이트: 2026-02-04*