popdocs 작업 히스토리 기록
This commit is contained in:
SeongHyun Kim
parent
6572519092
commit
63c00174e1
|
|
@ -13,6 +13,54 @@
|
|||
|
||||
---
|
||||
|
||||
## [2026-02-04] 비율 스케일링 시스템 구현
|
||||
|
||||
### Added
|
||||
- **비율 스케일링 시스템** (업계 표준 Scale with Fixed Aspect Ratio)
|
||||
- 기준 너비: 1024px (10인치 태블릿 가로)
|
||||
- 최대 너비: 1366px (12인치 태블릿)
|
||||
- 8~12인치 화면에서 배치 유지, 크기만 비례 조정
|
||||
|
||||
- **뷰포트 감지** (page.tsx)
|
||||
- `viewportWidth` state 추가
|
||||
- resize 이벤트 리스너로 실시간 감지
|
||||
- `Math.min(window.innerWidth, 1366)` 최대값 제한
|
||||
|
||||
### Changed
|
||||
- **PopFlexRenderer.tsx**
|
||||
- `BASE_VIEWPORT_WIDTH = 1024` 상수 추가
|
||||
- `scale = viewportWidth / BASE_VIEWPORT_WIDTH` 계산
|
||||
- `calculateSizeStyle()` 함수에 scale 파라미터 추가
|
||||
- 컴포넌트 크기 (fixedWidth, fixedHeight) 스케일 적용
|
||||
- 컨테이너 gap, padding 스케일 적용
|
||||
- 디자인 모드: scale = 1 (원본), 뷰어 모드: 실제 scale 적용
|
||||
|
||||
- **ComponentRendererV4**
|
||||
- `viewportWidth` prop 추가
|
||||
- 내부에서 scale 계산하여 sizeStyle에 적용
|
||||
|
||||
- **ContainerRenderer**
|
||||
- scaledGap, scaledPadding 계산하여 containerStyle에 적용
|
||||
|
||||
### Technical Details
|
||||
```
|
||||
비율 스케일링 계산:
|
||||
scale = 실제 화면 너비 / 기준 너비 (1024px)
|
||||
|
||||
예시:
|
||||
- 800px (8인치): scale = 0.78 → 200px 컴포넌트 → 156px
|
||||
- 1024px (10인치): scale = 1.00 → 200px 컴포넌트 → 200px (기준)
|
||||
- 1366px (12인치): scale = 1.33 → 200px 컴포넌트 → 266px
|
||||
- 1920px (데스크톱): max-width 1366px 적용 → 12인치와 동일 + 여백
|
||||
```
|
||||
|
||||
### Fixed
|
||||
- **DndProvider 에러** (뷰어 페이지)
|
||||
- 원인: isDesignMode=false일 때 useDrag/useDrop 훅 호출
|
||||
- 해결: DraggableComponentWrapper에서 isDesignMode 체크 후 early return
|
||||
|
||||
---
|
||||
|
||||
## [2026-02-04] Flexbox 가로 배치 + Spacer + Undo/Redo 개선
|
||||
|
||||
### Added
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
## 현재 상태 (2026-02-04)
|
||||
|
||||
**v4 통합 설계 모드 Phase 1.5 완료 (Flexbox 가로 배치 + Spacer)**
|
||||
**v4 통합 설계 모드 Phase 1.6 완료 (비율 스케일링 시스템)**
|
||||
|
||||
### 완료된 작업
|
||||
|
||||
|
|
@ -17,6 +17,7 @@
|
|||
7. **Flexbox 가로 배치** - 완료 (업계 표준 방식)
|
||||
8. **Spacer 컴포넌트** - 완료
|
||||
9. **컴포넌트 순서 변경** - 완료 (드래그 앤 드롭)
|
||||
10. **비율 스케일링** - 완료 (업계 표준 Scale with Fixed Aspect Ratio)
|
||||
|
||||
### 현재 UI 상태
|
||||
|
||||
|
|
@ -75,6 +76,16 @@ v4 기본 구조 → 오버라이드 기능 → 컴포넌트 숨김 →
|
|||
- [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: 오버라이드 기능 (다음)
|
||||
|
||||
- [ ] ModeOverride 데이터 구조 추가
|
||||
|
|
@ -120,6 +131,7 @@ v4 기본 구조 → 오버라이드 기능 → 컴포넌트 숨김 →
|
|||
- [x] 크기 제약 → CSS 변환 (`calculateSizeStyle`)
|
||||
- [x] 드래그 리사이즈 핸들 (`ComponentRendererV4`)
|
||||
- [x] 드래그 앤 드롭 순서 변경 (`DraggableComponentWrapper`)
|
||||
- [x] 비율 스케일링 (`BASE_VIEWPORT_WIDTH`, scale 계산)
|
||||
|
||||
### v4 캔버스
|
||||
|
||||
|
|
@ -165,10 +177,46 @@ v4 기본 구조 → 오버라이드 기능 → 컴포넌트 숨김 →
|
|||
|------|------|
|
||||
| `PopDesigner.tsx` | v3/v4 통합 디자이너 |
|
||||
| `PopCanvasV4.tsx` | v4 캔버스 (4개 프리셋 + 슬라이더) |
|
||||
| `PopFlexRenderer.tsx` | v4 Flexbox 렌더러 |
|
||||
| `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 + 여백 |
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
# POP v4 통합 설계 모드 스펙
|
||||
|
||||
**작성일: 2026-02-04**
|
||||
**상태: Phase 1.5 완료 (Flexbox 가로 배치 + Spacer)**
|
||||
**상태: Phase 1.6 완료 (비율 스케일링 시스템)**
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -218,6 +218,15 @@ interface PopComponentDefinitionV4 {
|
|||
- [x] 컴포넌트 순서 변경 (드래그 앤 드롭)
|
||||
- [x] 디바이스 스크린 무한 스크롤
|
||||
|
||||
### Phase 1.6: 비율 스케일링 시스템 (완료)
|
||||
- [x] 기준 너비 1024px (10인치 태블릿 가로)
|
||||
- [x] 최대 너비 1366px (12인치 태블릿)
|
||||
- [x] 뷰포트 감지 및 resize 이벤트 리스너
|
||||
- [x] 컴포넌트 크기 스케일 적용 (fixedWidth/Height)
|
||||
- [x] 컨테이너 스케일 적용 (gap, padding)
|
||||
- [x] 디자인 모드 분리 (scale=1)
|
||||
- [x] DndProvider 에러 수정
|
||||
|
||||
### Phase 2: 오버라이드 기능 (다음)
|
||||
- [ ] ModeOverride 데이터 구조 추가
|
||||
- [ ] 편집 감지 → 자동 오버라이드 저장
|
||||
|
|
|
|||
Loading…
Reference in New Issue