# POP 화면 시스템

> **AI 에이전트 시작점**: 이 파일 → STATUS.md 순서로 읽으세요.
> 저장 요청 시: [SAVE_RULES.md](./SAVE_RULES.md) 참조

---

## 현재 상태

| 항목 | 값 |
|------|-----|
| 버전 | **v5.2** (그리드 시스템) + **컴포넌트 정의서 v8.0** + **Phase 0 공통 인프라 완료** |
| 상태 | **Phase 0 완료 (usePopEvent + useDataSource), Phase 2 pop-button 설계 진행 중** |
| 다음 | pop-button 설계/구현 -> pop-icon 검토 -> Phase 3 (pop-table) |

**마지막 업데이트**: 2026-02-11

---

## 마지막 대화 요약

> **Phase 0 공통 인프라 구현 완료 (2026-02-11)**:
> 
> 1. **usePopEvent 훅** (`hooks/pop/usePopEvent.ts`)
>    - screenId 기반 이벤트 버스 (publish/subscribe/sharedData)
>    - 전역 Map 2개 (screenBuses, sharedDataStore), SSR 가드
>    - cleanupScreen 유틸 (화면 언마운트 시 메모리 정리)
> 
> 2. **popSqlBuilder 유틸** (`hooks/pop/popSqlBuilder.ts`)
>    - dataFetcher.ts에서 SQL 빌더 로직 5개 함수 추출 (로직 변경 없이 복사)
> 
> 3. **useDataSource 훅** (`hooks/pop/useDataSource.ts`)
>    - DataSourceConfig 기반 CRUD 통합 (조회 분기 + 자동 새로고침)
>    - 집계/조인 -> SQL 빌더 + executeQuery, 단순 -> dataApi.getTableData
>    - save/update/remove CRUD 래핑
> 
> 4. **검수**: 린트 0, 중복 0, 시뮬레이션 8시나리오 정상
> 5. **Git**: ksh-button 커밋 -> ksh-v2-work merge -> origin push
> 
> 다음: pop-button 설계/구현 -> pop-icon 검토 -> Phase 3

---

## 빠른 경로

| 알고 싶은 것 | 문서 |
|--------------|------|
| 지금 뭐 해야 해? | [STATUS.md](./STATUS.md) |
| 저장/조회 규칙 | [SAVE_RULES.md](./SAVE_RULES.md) |
| 컴포넌트 정의서 (최신) | [POPUPDATE_2.md](../POPUPDATE_2.md) |
| 왜 v5로 바꿨어? | [decisions/003-v5-grid-system.md](./decisions/003-v5-grid-system.md) |
| 그리드 가이드 설계 | [decisions/004-grid-guide-integration.md](./decisions/004-grid-guide-integration.md) |
| 브레이크포인트 재설계 | [decisions/005-breakpoint-redesign.md](./decisions/005-breakpoint-redesign.md) |
| 자동 줄바꿈 시스템 | [decisions/006-auto-wrap-review-system.md](./decisions/006-auto-wrap-review-system.md) |
| 개발 계획/로드맵 | [PLAN.md](./PLAN.md) |
| 지금 바로 코딩할 계획 | [PLAN.md "현재 구현 계획"](./PLAN.md#현재-구현-계획) |
| 작업 프롬프트 | [WORKFLOW_PROMPTS.md](./WORKFLOW_PROMPTS.md) |
| 컴포넌트 설계 (v4, 갱신 필요) | [components-spec.md](./components-spec.md) |
| 이전 문제 해결 | [PROBLEMS.md](./PROBLEMS.md) |
| 코드 어디 있어? | [FILES.md](./FILES.md) |
| 기능별 색인 | [INDEX.md](./INDEX.md) |
| 변경 히스토리 | [CHANGELOG.md](./CHANGELOG.md) |

---

## 핵심 파일

| 파일 | 역할 | 경로 |
|------|------|------|
| 타입 정의 | v5 레이아웃 타입 | `frontend/components/pop/designer/types/pop-layout.ts` |
| 캔버스 | 그리드 캔버스 + DnD + 라벨 | `frontend/components/pop/designer/PopCanvas.tsx` |
| 렌더러 | CSS Grid 렌더링 + 격자 셀 | `frontend/components/pop/designer/renderers/PopRenderer.tsx` |
| 디자이너 | 메인 컴포넌트 | `frontend/components/pop/designer/PopDesigner.tsx` |
| 팔레트 | 컴포넌트 목록 | `frontend/components/pop/designer/panels/ComponentPalette.tsx` |

---

## 문서 구조

```
[Layer 1: 먼저 읽기]
README.md (지금 여기) → STATUS.md

[Layer 2: 필요시 읽기]  
CHANGELOG, PROBLEMS, INDEX, FILES, ARCHITECTURE, SPEC, PLAN

[Layer 3: 심화]
decisions/, sessions/, archive/
```

**컨텍스트 효율화**: 모든 문서를 읽지 마세요. 필요한 것만 단계적으로.

---

## POP이란?

**Point of Production** - 현장 작업자용 모바일/태블릿 화면 시스템

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

---

## v5 그리드 시스템 (현재)

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

**핵심**: 컴포넌트를 칸 단위로 배치 (col, row, colSpan, rowSpan)

**세로 무한 스크롤**: 캔버스 높이 자동 확장 (컴포넌트 배치에 따라)

**그리드 가이드**: CSS Grid 기반 격자 셀 + 행/열 라벨 (ON/OFF 토글)

---

*상세: [SPEC.md](./SPEC.md) | 히스토리: [CHANGELOG.md](./CHANGELOG.md)*