ERP-node/popdocs/README.md

# POP 화면 시스템

> Point of Production - 현장 작업자용 모바일/태블릿 화면

---

## Quick Reference

### 주요 경로

| 용도 | 경로 |
|------|------|
| 뷰어 | `/pop/screens/{screenId}` |
| 관리 | `/admin/screenMng/popScreenMngList` |
| API | `/api/screen-management/layout-pop/:screenId` |

### 핵심 파일

| 작업 | 파일 |
|------|------|
| 타입 | `frontend/components/pop/designer/types/pop-layout.ts` |
| 렌더러 | `frontend/components/pop/designer/renderers/` |
| 디자이너 | `frontend/components/pop/designer/PopDesigner.tsx` |

### 현재 상태

- **버전**: v4.0 (제약조건 기반) ✅
- **Phase**: Phase 3 완료 (visibility + 줄바꿈)
- **다음**: Phase 4 (실제 컴포넌트 구현)

---

## 문서 구조

| 파일 | 용도 |
|------|------|
| [SPEC.md](./SPEC.md) | 기술 스펙 |
| [V4_UNIFIED_DESIGN_SPEC.md](./V4_UNIFIED_DESIGN_SPEC.md) | v4 통합 설계 모드 |
| [PLAN.md](./PLAN.md) | 계획/로드맵 |
| [CHANGELOG.md](./CHANGELOG.md) | 변경 이력 |
| [decisions/](./decisions/) | 중요 결정 기록 (ADR) |
| [components-spec.md](./components-spec.md) | 컴포넌트 상세 |
| [archive/](./archive/) | 이전 문서 |

---

## 저장/조회 시스템

### 역할 분담

| 저장소 | 역할 | 특징 |
|--------|------|------|
| **rangraph** | AI 장기 기억 | 시맨틱 검색, 요약 저장 |
| **popdocs** | 상세 기록 | 파일 기반, 히스토리 |

### 저장 요청

| 요청 예시 | AI 행동 |
|----------|--------|
| "@CHANGELOG.md 오늘 작업 정리해줘" | 파일 형식 맞춰 추가 + rangraph 요약 |
| "이 결정 저장해줘" | rangraph save_decision + decisions/ ADR |
| "해결됐어" | rangraph save_lesson + CHANGELOG Fixed |
| "작업 완료" | rangraph workflow_submit + CHANGELOG Added |

### 조회 요청

| 요청 예시 | AI 행동 |
|----------|--------|
| "어제 뭐했지?" | rangraph 검색 |
| "지금 뭐하는 중이었지?" | rangraph workflow_status |
| "이 버그 전에도 있었어?" | rangraph search_memory |
| "v4 관련 작업들" | rangraph search_memory "v4" |

---

## v4 핵심 (요약)

```
v3: 4개 모드 각각 위치 설정 → 4배 작업량
v4: 3가지 규칙만 설정 → 자동 적응

핵심 규칙:
1. 크기: fixed(고정) / fill(채움) / hug(맞춤)
2. 배치: direction, wrap, gap
3. 반응형: breakpoint별 변경

Phase 3 추가:
4. visibility: 모드별 표시/숨김
5. pop-break: 강제 줄바꿈
```

상세: [V4_UNIFIED_DESIGN_SPEC.md](./V4_UNIFIED_DESIGN_SPEC.md)

---

## Phase 3 완료 사항 (2026-02-04) ✅

### 새 기능
- **visibility 속성**: 모드별 컴포넌트 표시/숨김 제어
- **pop-break 컴포넌트**: Flexbox 강제 줄바꿈 (`flex-basis: 100%`)
- **컴포넌트 오버라이드 병합**: 모드별 설정 변경 (리스트 컬럼 수 등)
- **오버라이드 정리 로직**: 컴포넌트 삭제 시 모든 오버라이드 자동 정리

### 사용 예시
```
태블릿: [A] [B] [C] [D]  (한 줄)
모바일: [A] [B]          (두 줄, 줄바꿈 적용)
        [C] [D]
```

### 참고
- [decisions/002-phase3-visibility-break.md](./decisions/002-phase3-visibility-break.md) - 상세 설계

---

*최종 업데이트: 2026-02-04 (Phase 3 완료)*