현재 상태
마지막 업데이트: 2026-02-06
담당: POP 화면 디자이너
진행 상태
| 단계 |
상태 |
설명 |
| v5 타입 정의 |
완료 |
pop-layout.ts |
| v5 렌더러 |
완료 |
PopRenderer.tsx |
| v5 캔버스 |
완료 |
PopCanvas.tsx |
| v5 편집 패널 |
완료 |
ComponentEditorPanel.tsx |
| v5 유틸리티 |
완료 |
gridUtils.ts |
| 레거시 삭제 |
완료 |
v1~v4 코드, 데이터 |
| 문서 정리 |
완료 |
popdocs v5 기준 재정비 |
| 컴포넌트 팔레트 |
완료 |
ComponentPalette.tsx |
| 드래그앤드롭 |
완료 |
스케일 보정, DND 상수 통합 |
| 그리드 가이드 재설계 |
완료 |
CSS Grid 기반 통합 |
| 모드별 오버라이드 |
완료 |
위치/크기 모드별 저장 |
| 화면 밖 컴포넌트 |
완료 |
오른쪽 패널 배치, 드래그로 복원 |
| 숨김 기능 |
완료 |
모드별 숨김/숨김해제 |
| 리사이즈 겹침 검사 |
완료 |
실시간 겹침 방지 |
| Gap 프리셋 |
완료 |
좁게/보통/넓게 간격 조정 |
| 자동 줄바꿈 |
완료 |
col > maxCol → 맨 아래 배치 |
| 검토 필요 시스템 |
완료 |
오버라이드 없으면 검토 알림 |
| 브레이크포인트 재설계 |
완료 |
기기 기반 (479/767/1023px) |
| 세로 자동 확장 |
완료 |
캔버스 높이 동적 계산 |
| 그리드 셀 크기 강제 고정 |
완료 |
gridTemplateRows로 행 높이 고정, overflow-hidden |
다음 작업 (우선순위)
-
실제 컴포넌트 구현 (Phase 4)
- pop-label, pop-button 등 실제 렌더링
- 데이터 바인딩 연결
-
워크플로우 연동
최근 주요 변경 (2026-02-06)
브레이크포인트 재설계
| 모드 |
변경 전 |
변경 후 |
근거 |
| mobile_portrait |
~599px |
~479px |
스마트폰 세로 |
| mobile_landscape |
600~839px |
480~767px |
스마트폰 가로 |
| tablet_portrait |
840~1023px |
768~1023px |
iPad Mini 포함 |
| tablet_landscape |
1024px+ |
동일 |
- |
세로 자동 확장
| 기능 |
설명 |
| 동적 캔버스 높이 |
컴포넌트 배치에 따라 자동 계산 |
| 최소 높이 |
600px 보장 |
| 여유 행 |
항상 3행 추가 |
| 뷰어 스크롤 |
터치 스크롤로 아래 컴포넌트 접근 |
v5.1 자동 줄바꿈 시스템
| 기능 |
설명 |
| 자동 줄바꿈 |
col > maxCol인 컴포넌트를 맨 아래에 자동 배치 |
| 정보 손실 방지 |
모든 컴포넌트가 항상 그리드 안에 표시됨 |
| 검토 필요 알림 |
오버라이드 없으면 "검토 필요" 패널 표시 |
| 검토 완료 |
편집하면 오버라이드 저장, 검토 필요에서 제거 |
기존 기능 유지 (2026-02-05 심야)
| 기능 |
설명 |
| 모드별 재배치 |
4/6/8/12칸 모드별로 컴포넌트 위치/크기 개별 저장 |
| 자동 레이아웃 고정 |
드래그/리사이즈 시 자동으로 오버라이드 저장 |
| 원본으로 되돌리기 |
오버라이드 삭제하여 자동 재배치로 복원 |
| 숨김 기능 |
특정 모드에서 컴포넌트 의도적 숨김 (검토와 별개) |
알려진 문제
| 문제 |
상태 |
비고 |
| 타입 이름 불일치 |
해결됨 |
V5 접미사 제거 |
| SVG 격자 좌표 불일치 |
해결됨 |
GridGuide 삭제, CSS Grid 통합 |
| 드래그 좌표 계산 오류 |
해결됨 |
스케일 보정 적용 |
| DND 타입 상수 불일치 |
해결됨 |
constants/dnd.ts로 통합 |
| 숨김 컴포넌트 드래그 안됨 |
해결됨 |
상태 업데이트 순서 수정 |
| 그리드 범위 초과 에러 |
해결됨 |
드롭 위치 자동 조정 |
| Expected drag drop context |
해결됨 |
뷰어 모드에서 일반 div 렌더링 |
| Gap 프리셋 UI 안 보임 |
해결됨 |
그리드 라벨에 adjustedGap 적용 |
| 화면 밖 컴포넌트 정보 손실 |
해결됨 |
자동 줄바꿈으로 항상 그리드 안에 배치 |
| 뷰어 반응형 모드 불일치 |
해결됨 |
detectGridMode() 사용으로 일관성 확보 |
| hiddenComponentIds 중복 정의 |
해결됨 |
중복 useMemo 제거 |
| 그리드 가이드 셀 크기 불균일 |
해결됨 |
gridTemplateRows로 행 높이 강제 고정 |
| Canvas/Renderer 행 수 불일치 |
해결됨 |
숨김 필터 통일, 여유행 +3 |
| 디버깅 console.log 잔존 |
해결됨 |
reviewComponents 내 삭제 |
최근 세션
관련 결정
| ADR |
제목 |
날짜 |
| 006 |
v5.1 자동 줄바꿈 + 검토 필요 시스템 |
2026-02-06 |
| 005 |
브레이크포인트 재설계 (기기 기반) + 세로 자동 확장 |
2026-02-06 |
| 004 |
그리드 가이드 CSS Grid 통합 |
2026-02-05 |
| 003 |
v5 CSS Grid 채택 |
2026-02-05 |
| 001 |
v4 제약조건 기반 |
2026-02-03 |
전체 히스토리: CHANGELOG.md