306 lines
11 KiB
Markdown
306 lines
11 KiB
Markdown
# POP 개발 계획
|
|
|
|
---
|
|
|
|
## 현재 상태 (2026-02-04)
|
|
|
|
**v4 통합 설계 모드 Phase 1.6 완료 (비율 스케일링 시스템)**
|
|
|
|
### 완료된 작업
|
|
|
|
1. **v4 기본 구조** - 완료
|
|
2. **v4 렌더러** - 완료 (PopFlexRenderer)
|
|
3. **v4 디자이너 통합** - 완료
|
|
4. **새 화면 v4 기본 적용** - 완료
|
|
5. **Undo/Redo** - 완료 (데스크탑 모드와 동일 방식)
|
|
6. **드래그 리사이즈** - 완료
|
|
7. **Flexbox 가로 배치** - 완료 (업계 표준 방식)
|
|
8. **Spacer 컴포넌트** - 완료
|
|
9. **컴포넌트 순서 변경** - 완료 (드래그 앤 드롭)
|
|
10. **비율 스케일링** - 완료 (업계 표준 Scale with Fixed Aspect Ratio)
|
|
|
|
### 현재 UI 상태
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────────┐
|
|
│ ← 목록 화면명 *변경됨 [↶][↷] 자동 레이아웃 (v4) [저장] │
|
|
├─────────────────────────────────────────────────────────────────┤
|
|
│ 미리보기: [모바일↕] [모바일↔] [태블릿↕] [태블릿↔(기본)] │
|
|
│ 너비: [========●====] 1024 x 768 70% [-][+] │
|
|
├─────────────────────────────────────────────────────────────────┤
|
|
│ │ │ │
|
|
│ 컴포넌트 │ [필드1] [필드2] [필드3] [필드4] │ 속성 패널 │
|
|
│ 팔레트 │ [필드5] [Spacer] [Spacer] │ │
|
|
│ (20%) │ (가로 배치 + 줄바꿈) │ (20%) │
|
|
│ │ │ │
|
|
│ - 필드 │ 디바이스 스크린 (스크롤 가능) │ │
|
|
│ - 버튼 │ │ │
|
|
│ - 리스트 │ │ │
|
|
│ - 인디케이터│ │ │
|
|
│ - 스캐너 │ │ │
|
|
│ - 숫자패드 │ │ │
|
|
│ - 스페이서 │ │ │
|
|
└──────────┴────────────────────────────────────┴─────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## 작업 순서
|
|
|
|
```
|
|
[Phase 1~3] [Phase 4] [Phase 5]
|
|
v4 Flexbox → 실제 컴포넌트 → 그리드 시스템 (v5)
|
|
완료 다음 계획 승인
|
|
```
|
|
|
|
### Phase 5: 그리드 시스템 (v5) - 신규 계획
|
|
|
|
```
|
|
[Phase 5.1] [Phase 5.2] [Phase 5.3] [Phase 5.4]
|
|
그리드 타입 정의 → 그리드 렌더러 → 디자이너 UI → 반응형 자동화
|
|
```
|
|
|
|
**상세 계획**: [GRID_SYSTEM_PLAN.md](./GRID_SYSTEM_PLAN.md)
|
|
|
|
---
|
|
|
|
## 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 1.6: 비율 스케일링 시스템 (완료)
|
|
|
|
- [x] 기준 너비 설정 (BASE_VIEWPORT_WIDTH = 1024px)
|
|
- [x] 최대 너비 제한 (1366px, 12인치)
|
|
- [x] 뷰포트 감지 (resize 이벤트 리스너)
|
|
- [x] 컴포넌트 크기 스케일 적용 (fixedWidth, fixedHeight)
|
|
- [x] 컨테이너 스케일 적용 (gap, padding)
|
|
- [x] 디자인 모드 분리 (scale=1, 원본 유지)
|
|
- [x] DndProvider 에러 수정 (뷰어에서 useDrag/useDrop 방지)
|
|
|
|
## Phase 2: 오버라이드 기능 (완료) ✅
|
|
|
|
### Phase 2.1: 배치 고정 (완료)
|
|
- [x] 현재 모드 추적 (PopDesigner)
|
|
- [x] 고정 버튼 UI 및 로직
|
|
- [x] 오버라이드 저장 (배치만)
|
|
- [x] 오버라이드 초기화 로직
|
|
- [x] **버그 수정**: tempLayout 도입 (root 오염 방지)
|
|
- [x] **속성 패널**: 다른 모드에서 비활성화
|
|
|
|
### Phase 2.2: 렌더러 오버라이드 적용 (완료) ✅
|
|
- [x] PopFlexRenderer에서 오버라이드 병합 (getMergedRoot)
|
|
- [x] 컨테이너 속성 오버라이드 적용 (direction, wrap, gap, alignItems, justifyContent, padding, children)
|
|
- [x] tempLayout 우선 표시 (고정 전 미리보기)
|
|
- [x] 테스트 (모드별 다른 배치)
|
|
|
|
### Phase 2.3: 편집 자동 감지 (완료) ✅
|
|
- [x] 순서 변경 시 자동 tempLayout 저장
|
|
- [x] "고정" 버튼으로 정식 오버라이드 전환
|
|
- [x] 속성 변경은 기본 모드에서만 가능 (다른 모드 차단)
|
|
|
|
## Phase 3: 컴포넌트 표시/숨김 + 줄바꿈 (완료) ✅
|
|
|
|
- [x] visibility 속성 추가 (모드별 true/false)
|
|
- [x] 속성 패널 "표시" 탭 추가 (체크박스 UI)
|
|
- [x] 렌더러에서 visibility 처리
|
|
- [x] pop-break 컴포넌트 추가 (강제 줄바꿈)
|
|
- [x] 컴포넌트 오버라이드 병합 로직
|
|
- [x] 삭제 시 오버라이드 정리 로직
|
|
|
|
## Phase 4: 실제 컴포넌트 구현 (다음)
|
|
|
|
- [ ] pop-field: 입력/표시 필드
|
|
- [ ] pop-button: 액션 버튼
|
|
- [ ] pop-list: 데이터 리스트 (카드 템플릿)
|
|
- [ ] pop-indicator: KPI/상태 표시
|
|
- [ ] pop-scanner: 바코드/QR 스캔
|
|
- [ ] pop-numpad: 숫자 입력 패드
|
|
|
|
---
|
|
|
|
## Phase 5: 그리드 시스템 (v5) - 계획 승인
|
|
|
|
> 상세 계획: [GRID_SYSTEM_PLAN.md](./GRID_SYSTEM_PLAN.md)
|
|
|
|
### 개요
|
|
|
|
Flexbox 흐름 기반 → **CSS Grid 위치 지정** 방식으로 전환
|
|
|
|
| 항목 | v4 (현재) | v5 (그리드) |
|
|
|------|----------|-------------|
|
|
| 배치 | Flexbox 흐름 | Grid 좌표 (열/행) |
|
|
| 크기 | 픽셀 (200px) | 칸 (colSpan, rowSpan) |
|
|
| 줄바꿈 | 자동 | 명시적 |
|
|
|
|
### Phase 5.1: 그리드 타입 정의
|
|
|
|
- [ ] `PopLayoutDataV5` 인터페이스
|
|
- [ ] `PopGridConfig` (칸 수, 행 높이, 간격)
|
|
- [ ] `PopComponentPositionV5` (col, row, colSpan, rowSpan)
|
|
- [ ] 브레이크포인트 상수 (4칸/6칸/8칸/12칸)
|
|
|
|
### Phase 5.2: 그리드 렌더러
|
|
|
|
- [ ] `PopGridRenderer.tsx` 생성
|
|
- [ ] CSS Grid 스타일 계산
|
|
- [ ] 브레이크포인트 감지 및 칸 수 변경
|
|
- [ ] 위치 변환 (12칸 → 4칸)
|
|
|
|
### Phase 5.3: 디자이너 UI
|
|
|
|
- [ ] `PopCanvasV5.tsx` (그리드 캔버스)
|
|
- [ ] 바둑판 배경 표시
|
|
- [ ] 드래그 스냅 (칸에 맞춤)
|
|
- [ ] 위치 편집 패널
|
|
|
|
### Phase 5.4: 반응형 자동화
|
|
|
|
- [ ] 자동 변환 알고리즘 (12칸 → 4칸)
|
|
- [ ] 겹침 감지 및 재배치
|
|
- [ ] 모드별 오버라이드
|
|
|
|
### 브레이크포인트
|
|
|
|
| 모드 | 화면 범위 | 그리드 칸 수 |
|
|
|------|----------|-------------|
|
|
| 모바일 세로 | ~599px (4~6인치) | 4칸 |
|
|
| 모바일 가로 | 600~839px (6~8인치) | 6칸 |
|
|
| 태블릿 세로 | 840~1023px (8~10인치) | 8칸 |
|
|
| 태블릿 가로 | 1024px~ (10~14인치) | 12칸 |
|
|
|
|
---
|
|
|
|
## 완료된 기능 목록
|
|
|
|
### 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`)
|
|
- [x] 비율 스케일링 (`BASE_VIEWPORT_WIDTH`, scale 계산)
|
|
|
|
### 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 타입 정의 |
|
|
| `page.tsx` (뷰어) | v4 레이아웃 뷰어 + viewportWidth 감지 |
|
|
|
|
---
|
|
|
|
## 비율 스케일링 시스템
|
|
|
|
### 개념
|
|
10인치(1024px) 기준으로 디자인하면, 8~12인치 화면에서 배치는 유지하고 크기만 비례 조정
|
|
|
|
### 계산 공식
|
|
```
|
|
scale = viewportWidth / BASE_VIEWPORT_WIDTH (1024)
|
|
scaledSize = originalSize * scale
|
|
```
|
|
|
|
### 적용 범위
|
|
|
|
| 항목 | 스케일 적용 |
|
|
|------|------------|
|
|
| fixedWidth | O |
|
|
| fixedHeight | O |
|
|
| minWidth/maxWidth | O |
|
|
| minHeight | O |
|
|
| gap | O |
|
|
| padding | O |
|
|
| flex (fill) | X (비율 기반) |
|
|
| hug | X (내용 기반) |
|
|
|
|
### 화면별 스케일
|
|
|
|
| 화면 | 너비 | 스케일 | 200px → |
|
|
|------|------|--------|---------|
|
|
| 8인치 | 800px | 0.78 | 156px |
|
|
| 10인치 | 1024px | 1.00 | 200px |
|
|
| 12인치 | 1366px | 1.33 | 266px |
|
|
| 14인치+ | 1366px (max) | 1.33 | 266px + 여백 |
|
|
|
|
---
|
|
|
|
*최종 업데이트: 2026-02-05 (Phase 5 그리드 시스템 계획 추가)*
|