kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
ERP-node/popdocs/PLAN.md

9.2 KiB
Raw Blame History

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]        [Phase 2]         [Phase 3]         [Phase 4]
v4 기본 구조  →  오버라이드 기능  →  컴포넌트 숨김  →  순서 오버라이드
   완료            다음               계획              계획

Phase 1: 기본 구조 (완료)

  • v3/v4 탭 제거 (자동 판별)
  • 새 화면 → v4로 시작
  • 기존 v3 화면 → v3로 로드 (하위 호환)
  • 4개 프리셋 버튼 (모바일↕, 모바일↔, 태블릿↕, 태블릿↔)
  • 슬라이더 유지 (320~1200px)
  • 기본 프리셋: 태블릿 가로 (1024x768)
  • ComponentPaletteV4 생성 (v4 전용 팔레트)
  • 빈 레이아웃도 v4로 시작하도록 로직 수정

Phase 1.5: Flexbox 가로 배치 + 기본 기능 (완료)

  • Undo/Redo (Ctrl+Z / Ctrl+Shift+Z)
  • 드래그 리사이즈 핸들 (오른쪽, 아래, 오른쪽아래)
  • Flexbox 가로 배치 (direction: horizontal, wrap: true)
  • 컴포넌트 타입별 기본 크기 설정
  • Spacer 컴포넌트 (pop-spacer) - 정렬용 빈 공간
  • 컴포넌트 순서 변경 (드래그 앤 드롭)
  • 디바이스 스크린 스크롤 (무한 스크롤)

Phase 1.6: 비율 스케일링 시스템 (완료)

  • 기준 너비 설정 (BASE_VIEWPORT_WIDTH = 1024px)
  • 최대 너비 제한 (1366px, 12인치)
  • 뷰포트 감지 (resize 이벤트 리스너)
  • 컴포넌트 크기 스케일 적용 (fixedWidth, fixedHeight)
  • 컨테이너 스케일 적용 (gap, padding)
  • 디자인 모드 분리 (scale=1, 원본 유지)
  • DndProvider 에러 수정 (뷰어에서 useDrag/useDrop 방지)

Phase 2: 오버라이드 기능 (완료) ✅

Phase 2.1: 배치 고정 (완료)

  • 현재 모드 추적 (PopDesigner)
  • 고정 버튼 UI 및 로직
  • 오버라이드 저장 (배치만)
  • 오버라이드 초기화 로직
  • 버그 수정: tempLayout 도입 (root 오염 방지)
  • 속성 패널: 다른 모드에서 비활성화

Phase 2.2: 렌더러 오버라이드 적용 (완료) ✅

  • PopFlexRenderer에서 오버라이드 병합 (getMergedRoot)
  • 컨테이너 속성 오버라이드 적용 (direction, wrap, gap, alignItems, justifyContent, padding, children)
  • tempLayout 우선 표시 (고정 전 미리보기)
  • 테스트 (모드별 다른 배치)

Phase 2.3: 편집 자동 감지 (완료) ✅

  • 순서 변경 시 자동 tempLayout 저장
  • "고정" 버튼으로 정식 오버라이드 전환
  • 속성 변경은 기본 모드에서만 가능 (다른 모드 차단)

Phase 3: 컴포넌트 표시/숨김 + 줄바꿈 (완료) ✅

  • visibility 속성 추가 (모드별 true/false)
  • 속성 패널 "표시" 탭 추가 (체크박스 UI)
  • 렌더러에서 visibility 처리
  • pop-break 컴포넌트 추가 (강제 줄바꿈)
  • 컴포넌트 오버라이드 병합 로직
  • 삭제 시 오버라이드 정리 로직

Phase 4: 실제 컴포넌트 구현 (다음)

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

완료된 기능 목록

v4 타입 정의

  • PopLayoutDataV4 - 단일 소스 레이아웃
  • PopContainerV4 - 스택 컨테이너
  • PopSizeConstraintV4 - 크기 규칙 (fixed/fill/hug)
  • PopResponsiveRuleV4 - 반응형 규칙
  • createEmptyPopLayoutV4() - 생성 함수
  • isV4Layout() - 타입 가드
  • addComponentToV4Layout() - 컴포넌트 추가
  • removeComponentFromV4Layout() - 컴포넌트 삭제
  • updateComponentInV4Layout() - 컴포넌트 수정
  • updateContainerV4() - 컨테이너 수정
  • findContainerV4() - 컨테이너 찾기

v4 렌더러

  • PopFlexRenderer - Flexbox 기반 렌더링
  • 컨테이너 재귀 렌더링 (ContainerRenderer)
  • 반응형 규칙 적용 (applyResponsiveRules)
  • 컴포넌트 숨김 처리 (hideBelow)
  • 크기 제약 → CSS 변환 (calculateSizeStyle)
  • 드래그 리사이즈 핸들 (ComponentRendererV4)
  • 드래그 앤 드롭 순서 변경 (DraggableComponentWrapper)
  • 비율 스케일링 (BASE_VIEWPORT_WIDTH, scale 계산)

v4 캔버스

  • PopCanvasV4 - v4 전용 캔버스
  • 뷰포트 프리셋 (4개 모드)
  • 너비 슬라이더 (320~1200px)
  • 줌 컨트롤 (30%~150%)
  • 패닝 (Space + 드래그)
  • 드래그 앤 드롭

v4 속성 패널

  • ComponentEditorPanelV4 - 속성 편집 패널
  • 크기 제약 편집 (fixed/fill/hug)
  • 컨테이너 설정 (방향, 정렬, 간격)

디자이너 통합

  • PopDesigner v3/v4 자동 판별
  • 새 화면 v4 기본 적용
  • 기존 v3 화면 하위 호환
  • ComponentPaletteV4 v4 전용 팔레트 (Spacer 포함)
  • Undo/Redo 버튼 및 단축키
  • 컴포넌트 순서 변경 핸들러 (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-04