ERP-node/popdocs

POP 화면 시스템

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