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

9.2 KiB
Raw Blame History

POP 변경 이력

형식: Keep a Changelog

[미출시]

  • Phase 2: 모드별 오버라이드 기능
  • Phase 3: 컴포넌트 표시/숨김
  • Phase 4: 순서 오버라이드
  • Tier 2, 3 컴포넌트

[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

  • Spacer 컴포넌트 (pop-spacer)

    • 빈 공간을 차지하여 레이아웃 정렬에 사용
    • 기본 크기: width: fill, height: 48px
    • 디자인 모드에서 점선 배경으로 표시
    • 실제 모드에서는 투명 (공간만 차지)

  • 컴포넌트 순서 변경 (드래그 앤 드롭)

    • 같은 컨테이너 내에서 컴포넌트 순서 변경 가능
    • 드래그 중인 컴포넌트는 반투명하게 표시
    • 드롭 위치는 파란색 테두리로 표시
    • handleReorderComponentV4 핸들러 추가

Changed

  • 기본 레이아웃 방향 변경 (Flexbox 가로 배치)

    • direction: "vertical" → direction: "horizontal"
    • wrap: false → wrap: true (자동 줄바꿈)
    • alignItems: "stretch" → alignItems: "start"
    • 컴포넌트가 가로로 나열되고, 공간 부족 시 다음 줄로 이동

  • 컴포넌트 기본 크기 타입별 설정

    • 필드: 200x48px (fixed)
    • 버튼: 120x48px (fixed)
    • 리스트: fill x 200px
    • 인디케이터: 120x80px (fixed)
    • 스캐너: 200x48px (fixed)
    • 숫자패드: 200x280px (fixed)
    • Spacer: fill x 48px

  • Undo/Redo 방식 개선 (데스크탑 모드와 동일)

    • useLayoutHistory 훅 제거
    • 별도 history[], historyIndex 상태로 관리
    • saveToHistoryV4() 함수로 명시적 히스토리 저장
    • 컴포넌트 추가/삭제/수정/순서변경 시 히스토리 저장

  • 디바이스 스크린 스크롤

    • overflow: auto 추가 (컴포넌트가 넘치면 스크롤)
    • height → minHeight 변경 (컨텐츠에 따라 높이 증가)

Technical Details

업계 표준 레이아웃 방식 (Figma, Webflow, FlutterFlow):
1. Flexbox 기반 Row/Column 배치
2. 크기 제어: Fill / Fixed / Hug
3. Spacer 컴포넌트로 정렬 조정
4. 화면 크기별 조건 분기 (반응형)

사용 예시:
[버튼A] [Spacer(fill)] [버튼B]  → 버튼B가 오른쪽 끝으로
[Spacer] [컴포넌트] [Spacer]   → 컴포넌트가 가운데로

[2026-02-04] 드래그 리사이즈 + Undo/Redo 기능

Added

  • useLayoutHistory.ts - Undo/Redo 히스토리 훅

    • 최대 50개 히스토리 저장
    • undo(), redo(), canUndo, canRedo
    • reset() - 새 레이아웃 로드 시 히스토리 초기화

  • 드래그 리사이즈 핸들 (PopFlexRenderer)

    • 오른쪽 핸들: 너비 조정 (cursor: ew-resize)
    • 아래쪽 핸들: 높이 조정 (cursor: ns-resize)
    • 오른쪽 아래 핸들: 너비+높이 동시 조정 (cursor: nwse-resize)
    • 선택된 컴포넌트에만 표시
    • 최소 크기 보장 (너비 48px, 높이 touchTargetMin)

Changed

  • PopDesigner.tsx

    • useLayoutHistory 훅 통합 (v3, v4 각각 독립적)
    • Undo/Redo 버튼 추가 (툴바 오른쪽)
    • 단축키 등록:
      • Ctrl+Z / Cmd+Z: 실행 취소
      • Ctrl+Shift+Z / Cmd+Shift+Z / Ctrl+Y: 다시 실행
    • handleResizeComponentV4 핸들러 추가

  • PopCanvasV4.tsx

    • onResizeComponent prop 추가
    • PopFlexRenderer에 전달

  • PopFlexRenderer.tsx

    • onComponentResize prop 추가
    • ComponentRendererV4에 리사이즈 핸들 추가
    • 드래그 이벤트 처리 (mousemove, mouseup)

단축키 목록

단축키 기능
Delete / Backspace 선택된 컴포넌트 삭제
Ctrl+Z / Cmd+Z 실행 취소 (Undo)
Ctrl+Shift+Z / Ctrl+Y 다시 실행 (Redo)
Space + 드래그 캔버스 패닝
Ctrl + 휠 줌 인/아웃

[2026-02-04] v4 통합 설계 모드 Phase 1 완료

목표

v4를 기본 레이아웃 모드로 통합하고, 새 화면은 자동으로 v4로 시작

Added

  • ComponentPaletteV4.tsx - v4 전용 컴포넌트 팔레트
    • 6개 컴포넌트 (필드, 버튼, 리스트, 인디케이터, 스캐너, 숫자패드)
    • 드래그 앤 드롭 지원

Changed

  • PopDesigner.tsx - v3/v4 통합 디자이너로 리팩토링

    • v3/v4 탭 제거 (자동 판별)
    • 새 화면 → v4로 시작
    • 기존 v3 화면 → v3로 로드 (하위 호환)
    • 빈 레이아웃 → v4로 시작 (컴포넌트 유무로 판별)
    • 레이아웃 버전 텍스트 표시 ("자동 레이아웃 (v4)" / "4모드 레이아웃 (v3)")

  • PopCanvasV4.tsx - 4개 프리셋으로 변경

    • 기존: [모바일] [태블릿] [데스크톱]
    • 변경: [모바일↕] [모바일↔] [태블릿↕] [태블릿↔]
    • 기본 프리셋: 태블릿 가로 (1024x768)
    • 슬라이더 범위: 320~1200px
    • 비율 유지: 슬라이더 조절 시 높이도 비율에 맞게 자동 조정

Fixed

  • 새 화면이 v3로 열리는 문제
    • 원인: 백엔드가 빈 v2 레이아웃 반환 (version 필드 있음)
    • 해결: 컴포넌트 유무로 빈 레이아웃 판별 → v4로 시작

Technical Details

레이아웃 로드 로직:
1. version 필드 확인
2. components 존재 여부 확인
3. version 있고 components 있음 → 해당 버전으로 로드
4. version 없거나 components 없음 → v4로 새로 시작

[2026-02-04] v4 타입 및 렌더러

Added

  • v4 타입 정의 (간결 버전)

    • PopLayoutDataV4 - 단일 소스 레이아웃
    • PopContainerV4 - 스택 컨테이너 (direction, wrap, gap, alignItems)
    • PopComponentDefinitionV4 - 크기 제약 기반 (size: fixed/fill/hug)
    • PopSizeConstraintV4 - 크기 규칙
    • PopResponsiveRuleV4 - 반응형 규칙 (breakpoint별 변경)
    • PopGlobalSettingsV4 - 전역 설정
    • createEmptyPopLayoutV4() - 생성 함수
    • isV4Layout() - 타입 가드
    • CRUD 함수들 (add, remove, update, find)

  • PopFlexRenderer.tsx - v4 Flexbox 렌더러

    • 컨테이너 재귀 렌더링
    • 반응형 규칙 적용
    • 크기 제약 → CSS 변환

  • ComponentEditorPanelV4.tsx - v4 속성 편집 패널

    • 크기 제약 편집 UI
    • 컨테이너 설정 UI

  • PopCanvasV4.tsx - v4 전용 캔버스

    • 뷰포트 프리셋
    • 너비 슬라이더
    • 줌/패닝

[2026-02-04] (earlier)

Added

  • 저장/조회 시스템 구축
    • rangraph: AI 장기 기억 (시맨틱 검색, 요약)
    • popdocs: 상세 기록 (파일 기반, 히스토리)
    • 이중 저장 체계로 검색 + 기록 분리

Changed

  • popdocs 문서 구조 정리
    • README.md: 저장/조회 규칙 추가
    • 기존 문서 archive/로 이동
  • 문서 관리 전략 확정
    • 저장 시: 파일 형식 자동 파악 → 형식 맞춰 추가 → rangraph 요약
    • 조회 시: rangraph 시맨틱 검색

Removed

  • .cursorrules 변경 계획 철회 (Git 커밋 영향)

[2026-02-03]

Added

  • v4 제약조건 기반 레이아웃 계획
    • 단일 소스 + 자동 적응
    • 3가지 규칙 (크기, 배치, 반응형)
    • ADR: decisions/001-v4-constraint-based.md

[2026-02-02]

Fixed

  • 캔버스 rowSpan 문제
    • 원인: gridTemplateRows 고정 px
    • 해결: 1fr 사용

[2026-02-01]

Fixed

  • 4모드 자동 전환 문제
    • 해결: useResponsiveMode 훅 추가

[2026-01-31]

Added

  • v3 섹션 제거, 순수 그리드 구조
  • 4개 모드 독립 그리드

[2026-01-30]

Added

  • POP 디자이너 기본 구조
  • PopDesigner, PopCanvas 컴포넌트

[2026-01-29]

Added

  • screen_layouts_pop 테이블
  • POP 레이아웃 API (CRUD)

최신이 위, 시간순 역순