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 (실제 컴포넌트 구현)
문서 구조
저장/조회 시스템
역할 분담
| 저장소 |
역할 |
특징 |
| 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
Phase 3 완료 사항 (2026-02-04) ✅
새 기능
- visibility 속성: 모드별 컴포넌트 표시/숨김 제어
- pop-break 컴포넌트: Flexbox 강제 줄바꿈 (
flex-basis: 100%)
- 컴포넌트 오버라이드 병합: 모드별 설정 변경 (리스트 컬럼 수 등)
- 오버라이드 정리 로직: 컴포넌트 삭제 시 모든 오버라이드 자동 정리
사용 예시
태블릿: [A] [B] [C] [D] (한 줄)
모바일: [A] [B] (두 줄, 줄바꿈 적용)
[C] [D]
참고
최종 업데이트: 2026-02-04 (Phase 3 완료)