# POP 개발 계획 --- ## 현재 상태 (2026-02-04) **v4 통합 설계 모드 Phase 1.5 완료 (Flexbox 가로 배치 + Spacer)** ### 완료된 작업 1. **v4 기본 구조** - 완료 2. **v4 렌더러** - 완료 (PopFlexRenderer) 3. **v4 디자이너 통합** - 완료 4. **새 화면 v4 기본 적용** - 완료 5. **Undo/Redo** - 완료 (데스크탑 모드와 동일 방식) 6. **드래그 리사이즈** - 완료 7. **Flexbox 가로 배치** - 완료 (업계 표준 방식) 8. **Spacer 컴포넌트** - 완료 9. **컴포넌트 순서 변경** - 완료 (드래그 앤 드롭) ### 현재 UI 상태 ``` ┌─────────────────────────────────────────────────────────────────┐ │ ← 목록 화면명 *변경됨 [↶][↷] 자동 레이아웃 (v4) [저장] │ ├─────────────────────────────────────────────────────────────────┤ │ 미리보기: [모바일↕] [모바일↔] [태블릿↕] [태블릿↔(기본)] │ │ 너비: [========●====] 1024 x 768 70% [-][+] │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ │ │ 컴포넌트 │ [필드1] [필드2] [필드3] [필드4] │ 속성 패널 │ │ 팔레트 │ [필드5] [Spacer] [Spacer] │ │ │ (20%) │ (가로 배치 + 줄바꿈) │ (20%) │ │ │ │ │ │ - 필드 │ 디바이스 스크린 (스크롤 가능) │ │ │ - 버튼 │ │ │ │ - 리스트 │ │ │ │ - 인디케이터│ │ │ │ - 스캐너 │ │ │ │ - 숫자패드 │ │ │ │ - 스페이서 │ │ │ └──────────┴────────────────────────────────────┴─────────────────┘ ``` --- ## 작업 순서 ``` [Phase 1] [Phase 2] [Phase 3] [Phase 4] v4 기본 구조 → 오버라이드 기능 → 컴포넌트 숨김 → 순서 오버라이드 완료 다음 계획 계획 ``` --- ## Phase 1: 기본 구조 (완료) - [x] v3/v4 탭 제거 (자동 판별) - [x] 새 화면 → v4로 시작 - [x] 기존 v3 화면 → v3로 로드 (하위 호환) - [x] 4개 프리셋 버튼 (모바일↕, 모바일↔, 태블릿↕, 태블릿↔) - [x] 슬라이더 유지 (320~1200px) - [x] 기본 프리셋: 태블릿 가로 (1024x768) - [x] ComponentPaletteV4 생성 (v4 전용 팔레트) - [x] 빈 레이아웃도 v4로 시작하도록 로직 수정 ## Phase 1.5: Flexbox 가로 배치 + 기본 기능 (완료) - [x] Undo/Redo (Ctrl+Z / Ctrl+Shift+Z) - [x] 드래그 리사이즈 핸들 (오른쪽, 아래, 오른쪽아래) - [x] Flexbox 가로 배치 (`direction: horizontal`, `wrap: true`) - [x] 컴포넌트 타입별 기본 크기 설정 - [x] Spacer 컴포넌트 (`pop-spacer`) - 정렬용 빈 공간 - [x] 컴포넌트 순서 변경 (드래그 앤 드롭) - [x] 디바이스 스크린 스크롤 (무한 스크롤) ## Phase 2: 오버라이드 기능 (다음) - [ ] ModeOverride 데이터 구조 추가 - [ ] 편집 감지 → 자동 오버라이드 저장 - [ ] 편집 상태 표시 (버튼 색상 변경) - [ ] "자동으로 되돌리기" 버튼 ## Phase 3: 컴포넌트 표시/숨김 (계획) - [ ] visibility 속성 추가 (모드별 true/false) - [ ] 속성 패널 체크박스 UI - [ ] 렌더러에서 visibility 처리 ## Phase 4: 순서 오버라이드 (계획) - [ ] 모드별 children 순서 오버라이드 - [ ] 드래그로 순서 변경 UI --- ## 완료된 기능 목록 ### v4 타입 정의 - [x] `PopLayoutDataV4` - 단일 소스 레이아웃 - [x] `PopContainerV4` - 스택 컨테이너 - [x] `PopSizeConstraintV4` - 크기 규칙 (fixed/fill/hug) - [x] `PopResponsiveRuleV4` - 반응형 규칙 - [x] `createEmptyPopLayoutV4()` - 생성 함수 - [x] `isV4Layout()` - 타입 가드 - [x] `addComponentToV4Layout()` - 컴포넌트 추가 - [x] `removeComponentFromV4Layout()` - 컴포넌트 삭제 - [x] `updateComponentInV4Layout()` - 컴포넌트 수정 - [x] `updateContainerV4()` - 컨테이너 수정 - [x] `findContainerV4()` - 컨테이너 찾기 ### v4 렌더러 - [x] `PopFlexRenderer` - Flexbox 기반 렌더링 - [x] 컨테이너 재귀 렌더링 (`ContainerRenderer`) - [x] 반응형 규칙 적용 (`applyResponsiveRules`) - [x] 컴포넌트 숨김 처리 (`hideBelow`) - [x] 크기 제약 → CSS 변환 (`calculateSizeStyle`) - [x] 드래그 리사이즈 핸들 (`ComponentRendererV4`) - [x] 드래그 앤 드롭 순서 변경 (`DraggableComponentWrapper`) ### v4 캔버스 - [x] `PopCanvasV4` - v4 전용 캔버스 - [x] 뷰포트 프리셋 (4개 모드) - [x] 너비 슬라이더 (320~1200px) - [x] 줌 컨트롤 (30%~150%) - [x] 패닝 (Space + 드래그) - [x] 드래그 앤 드롭 ### v4 속성 패널 - [x] `ComponentEditorPanelV4` - 속성 편집 패널 - [x] 크기 제약 편집 (fixed/fill/hug) - [x] 컨테이너 설정 (방향, 정렬, 간격) ### 디자이너 통합 - [x] `PopDesigner` v3/v4 자동 판별 - [x] 새 화면 v4 기본 적용 - [x] 기존 v3 화면 하위 호환 - [x] `ComponentPaletteV4` v4 전용 팔레트 (Spacer 포함) - [x] Undo/Redo 버튼 및 단축키 - [x] 컴포넌트 순서 변경 핸들러 (`handleReorderComponentV4`) --- ## v3 vs v4 비교 | 항목 | v3 (기존) | v4 (새로운) | |------|-----------|-------------| | 설계 | 4모드 각각 | 1번만 | | 데이터 | col, row 위치 | 규칙 (fill/fixed/hug) | | 렌더링 | CSS Grid | Flexbox | | 반응형 | 수동 | 자동 + 규칙 | | 새 화면 | - | 기본 적용 | --- ## 관련 파일 | 파일 | 역할 | |------|------| | `PopDesigner.tsx` | v3/v4 통합 디자이너 | | `PopCanvasV4.tsx` | v4 캔버스 (4개 프리셋 + 슬라이더) | | `PopFlexRenderer.tsx` | v4 Flexbox 렌더러 | | `ComponentPaletteV4.tsx` | v4 컴포넌트 팔레트 | | `ComponentEditorPanelV4.tsx` | v4 속성 편집 패널 | | `pop-layout.ts` | v3/v4 타입 정의 | --- *최종 업데이트: 2026-02-04*