ERP-node/popdocs/CHANGELOG.md

# POP 변경 이력

형식: [Keep a Changelog](https://keepachangelog.com/)

---

## [미출시]

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

---

## [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)

---

*최신이 위, 시간순 역순*