223f5c0251
- v4 타입 추가: PopLayoutDataV4, PopContainerV4, PopSizeConstraintV4 - 핵심 변경: 4모드 위치 지정 → 단일 소스 규칙 기반 (fill/fixed/hug) - 생성 함수: createEmptyPopLayoutV4(), isV4Layout() 타입 가드 - 문서 정리: popdocs/ 폴더로 통합, 기존 문서 archive/로 이동
2.1 KiB
2.1 KiB
POP 개발 계획
오늘 목표 (2026-02-04)
POP 화면을 만들 수 있는 환경 완성
필요한 것
- v4 타입 정의 - 완료
- v4 렌더러 - Flexbox로 화면에 표시
- 기본 컴포넌트 - 실제 배치할 요소들
- 디자이너 UI 연결 - v4 모드로 설계 가능
작업 순서
[v4 타입] → [렌더러] → [컴포넌트] → [디자이너 연결]
완료 진행 대기 대기
현재 진행
v4 타입 정의 (완료)
PopLayoutDataV4- 단일 소스 레이아웃PopContainerV4- 스택 컨테이너PopSizeConstraintV4- 크기 규칙 (fixed/fill/hug)PopResponsiveRuleV4- 반응형 규칙createEmptyPopLayoutV4()- 생성 함수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