4.4 KiB

Raw Blame History

POP 개발 계획

현재 상태 (2026-02-06)

v5.2 그리드 시스템 완성 (브레이크포인트 재설계 + 세로 자동 확장)

작업 순서

[Phase 1~3]      [Phase 5]           [Phase 4]
v4 Flexbox    →  v5 CSS Grid      →  실제 컴포넌트 구현
   완료            완료 (v5.2)         다음

완료된 Phase

Phase 1~3: v4 Flexbox 시스템 (완료, 레거시 삭제됨)

v4 Flexbox 기반 시스템은 v5 CSS Grid로 완전히 대체되었습니다. v4 관련 파일은 모두 삭제되었습니다.

v4 기본 구조, 렌더러, 디자이너 통합
Undo/Redo, 드래그 리사이즈, Flexbox 가로 배치
비율 스케일링 시스템
오버라이드 기능 (모드별 배치 고정)
컴포넌트 표시/숨김, 줄바꿈

Phase 5: v5 CSS Grid 시스템 (완료)

Phase 5.1: 타입 정의 (완료)

PopLayoutDataV5 인터페이스
PopGridConfig, PopGridPosition 타입
GridMode, GRID_BREAKPOINTS 상수
createEmptyPopLayoutV5(), isV5Layout(), detectGridMode()

Phase 5.2: 그리드 렌더러 (완료)

PopRenderer.tsx - CSS Grid 기반 렌더링
격자 셀 렌더링 (CSS Grid 동일 좌표계)
위치 변환 (12칸 -> 4/6/8칸)

Phase 5.3: 디자이너 UI (완료)

PopCanvas.tsx - 그리드 캔버스 + 행/열 라벨
드래그 스냅 (칸에 맞춤)
ComponentEditorPanel.tsx - 위치 편집

Phase 5.4: 반응형 자동화 (완료)

자동 변환 알고리즘 (12칸 -> 4칸)
겹침 감지 및 재배치
모드별 오버라이드 저장

v5.1 추가 기능 (완료)

자동 줄바꿈 (col > maxCol -> 맨 아래 배치)
"검토 필요" 알림 시스템
Gap 프리셋 (좁게/보통/넓게)
숨김 기능 (모드별)

v5.2 브레이크포인트 재설계 + 세로 자동 확장 (완료)

기기 기반 브레이크포인트 (479/767/1023px)
세로 자동 확장 (dynamicCanvasHeight)
뷰어 반응형 일관성 (detectGridMode 사용)
VIEWPORT_PRESETS에서 height 제거

다음 작업

Phase 4: 실제 컴포넌트 구현

현재 모든 컴포넌트는 pop-sample (샘플 박스)로 렌더링됩니다. 실제 컴포넌트를 구현하여 데이터 바인딩까지 연결해야 합니다.

컴포넌트 구현 목록:

pop-field: 입력/표시 필드
pop-button: 액션 버튼
pop-list: 데이터 리스트 (카드 템플릿)
pop-indicator: KPI/상태 표시
pop-scanner: 바코드/QR 스캔
pop-numpad: 숫자 입력 패드

참고 문서: components-spec.md

후속 작업

워크플로우 연동 (버튼 액션, 화면 전환)
데이터 바인딩 연결
실기기 테스트 (아이폰 SE, iPad Mini 등)

현재 구현 계획

용도: 이 섹션은 "지금 바로 실행할 구체적 계획"입니다. 새 세션에서 이 섹션만 읽으면 코딩을 시작할 수 있어야 합니다. 완료되면 다음 기능의 계획으로 교체합니다.

대상: (계획 수립 전)

현재 구현 계획이 없습니다. 계획 수립 세션에서 다음 형식으로 작성해주세요:

### 대상: [기능명]

#### 구현 순서 (의존성 기반)
1. [ ] 파일명 - 변경 내용 요약
2. [ ] 파일명 - 변경 내용 요약

#### 파일별 변경 사항
| # | 파일 (경로) | 작업 | 핵심 변경 | 주의사항 |
|---|------------|------|----------|---------|

#### 함정 경고
- (빠뜨리면 에러나는 것들)

#### 참조
- 관련 문서/파일 경로

브레이크포인트 (v5.2 현재)

모드	화면 너비	칸 수	대상 기기
mobile_portrait	~479px	4칸	아이폰 SE ~ 갤럭시 S
mobile_landscape	480~767px	6칸	스마트폰 가로
tablet_portrait	768~1023px	8칸	8~10인치 태블릿 세로
tablet_landscape	1024px~	12칸	10~14인치 태블릿 가로

문서	내용
STATUS.md	현재 진행 상태
SPEC.md	기술 스펙
ARCHITECTURE.md	코드 구조
components-spec.md	컴포넌트 상세 설계
decisions/005	브레이크포인트 재설계 ADR

4.4 KiB Raw Blame History