pop-field 컴포넌트 전체 구현 (types, component, config, registry):
- 6개 서브타입 (text/number/date/select/auto/numpad)
- 섹션 기반 레이아웃 (summary/form, auto 열 수 계산)
- 저장 탭 5섹션 (테이블/읽기/입력/숨은/자동생성 필드)
- 자동생성 레이아웃 연결 (linkedFieldId)
- 숨은 필드 DB/JSON 소스 선택 (JsonKeySelect 재사용)
- 채번 규칙 API 연동 (getAvailableNumberingRulesForScreen)
- 저장 탭 섹션별 접기/펼치기 토글
- 팔레트 4곳 등록 + index.ts 활성화
ConnectionEditor(연결 탭 UI) + useConnectionResolver(런타임 이벤트 라우터)를 추가하여
디자이너가 코드 없이 컴포넌트 간 데이터 흐름을 설정할 수 있도록 구현.
pop-search -> pop-string-list 실시간 필터링(시나리오 2) 검증 완료.
주요 변경:
- ConnectionEditor: 연결 추가/수정/삭제, 복수 컬럼 체크박스, 필터 모드 선택
- useConnectionResolver: connections 기반 __comp_output__/__comp_input__ 자동 라우팅
- connectionMeta 타입 + pop-search/pop-string-list에 sendable/receivable 등록
- PopDataConnection 확장 (sourceOutput, targetInput, filterConfig, targetColumns)
- pop-search 개선: 필드명 자동화, set_value receivable, number 타입, DRY
- pop-string-list: 복수 컬럼 OR 클라이언트 필터 수신
- "데이터" 탭 -> "연결" 탭, UI 용어 자연어화
Co-authored-by: Cursor <cursoragent@cursor.com>
- pop-search 컴포넌트 신규 추가 (Component, Config, types, index)
- 입력 타입: text, number, date, date-preset, select, multi-select, combo, modal-table, modal-card, modal-icon-grid, toggle
- 디자이너 팔레트, 레지스트리, 타입, 렌더러 라벨 등록
- 기본 그리드 크기 4x2, labelText/labelVisible 설정 지원
- filter_changed 이벤트 발행 (연결 시스템 미적용, 추후 dataFlow 기반으로 전환 예정)
Co-authored-by: Cursor <cursoragent@cursor.com>
- "전체보기" 토글을 "더보기" 점진 확장으로 변경 (loadMoreCount씩 추가, maxExpandRows 상한)
- 페이지네이션 모드 추가: bottom(하단 페이지 표시) / side(좌우 화살표) 스타일 선택
- StepOverflow 설정 UI에 오버플로우 방식 Select + 모드별 분기 설정 추가
- PopRenderer viewer 모드에서 gridTemplateRows minmax(auto) 적용으로 동적 높이 확장 지원
Co-authored-by: Cursor <cursoragent@cursor.com>
- executePopAction / usePopAction 훅 신규 생성
- pop-button을 usePopAction 기반으로 리팩토링
- PopModalDefinition 타입 + MODAL_SIZE_PRESETS 정의
- PopDesignerContext 신규 생성 (모달 탭 상태 공유)
- PopDesigner에 모달 탭 UI 추가 (메인 캔버스 / 모달 캔버스 전환)
- PopCanvas에 접이식 ModalSizeSettingsPanel + ModalThumbnailPreview 구현
- PopViewerWithModals 신규 생성 (뷰어 모달 렌더링 + 스택 관리)
- FULL 모달 전체화면 지원 (h-dvh, w-screen, rounded-none)
- pop-string-list 카드 버튼 액션 연동
- pop-icon / SelectedItemsDetailInput lucide import 최적화
- tsconfig skipLibCheck 설정 추가
Co-authored-by: Cursor <cursoragent@cursor.com>
테이블 데이터를 리스트/카드 두 가지 모드로 표시하는 pop-string-list 컴포넌트 전체 구현
- 6단계 Stepper 설정 패널 (모드 선택, 헤더/오버플로우, 데이터+컬럼 선택, 조인 설정, 카드/리스트 레이아웃, 필터/정렬)
- 카드 모드: 시각적 그리드 편집기 (드래그 너비/높이 조절, 셀 병합, 셀별 컬럼/스타일 설정)
- 리스트 모드: 드래그앤드롭 컬럼 순서 변경, 너비 조절, 런타임 컬럼 전환 설정
- 조인 설정: Combobox 테이블 검색, 자동 연결 가능 컬럼 발견, 타입 기반 필터링, 가져올 컬럼 선택
- CardColumnJoin에 selectedTargetColumns 필드 추가
- 디자이너 팔레트/에디터/렌더러에 pop-string-list 등록
Co-authored-by: Cursor <cursoragent@cursor.com>
- pop-icon (아이콘 네비게이션) + pop-dashboard (KPI/차트/게이지) 양쪽 기능 통합
- PopComponentType에 pop-icon, pop-dashboard 모두 등록
- PopRenderer: currentScreenId(아이콘) + previewPageIndex(대시보드) 양쪽 props 공존
- ComponentEditorPanel: previewPageIndex/onPreviewPage props 추가 + 스크롤 CSS 개선 유지
- pop-text: isRealtime 조건부 타이머 로직 적용 (ksh-dashboard 개선 채택)
- COMPONENT_TYPE_LABELS에 pop-icon 라벨 추가 (타입 안전성 보정)
충돌 해결 7개 파일, 17개 지점 - 모두 양쪽 의도 보존
Co-authored-by: Cursor <cursoragent@cursor.com>
- 라벨 정렬(좌/중/우) 기능 추가 (KPI, 차트, 게이지, 통계카드)
- 글자 크기 커스텀 제거 (컨테이너 반응형 자동 적용)
- 페이지별 미리보기 버튼 추가 (디자이너 캔버스에 즉시 반영)
- 아이템 스타일 에디터 접기/펼치기 지원
- 차트 디자인: CartesianGrid, 대각선 X축 라벨, 숫자 약어(K/M), 축 여백
- handleUpdateComponent stale closure 버그 수정 (함수적 setState)
- 디버그 console.log 전량 제거
Co-authored-by: Cursor <cursoragent@cursor.com>
- pop-icon.tsx 신규 추가: 아이콘 컴포넌트 구현
- ComponentPalette: 아이콘 컴포넌트 팔레트 추가
- ComponentEditorPanel: 아이콘 편집 패널 추가
- PopRenderer: 아이콘 렌더링 지원
- pop-layout.ts: 아이콘 타입 정의 추가
- pop-text.tsx: 텍스트 컴포넌트 개선
- next.config.mjs: 설정 업데이트
Co-authored-by: Cursor <cursoragent@cursor.com>
- page.tsx: overflow-hidden 제거로 뷰어 스크롤 활성화,
pop-components 레지스트리 자동 등록 import 추가
- PopRenderer.tsx: 레지스트리에서 실제 컴포넌트 조회 후 렌더링,
미등록 컴포넌트는 플레이스홀더 fallback 표시
- PLAN.MD: POP 뷰어 스크롤 수정 계획으로 업데이트
- POPUPDATE_2.md: v8.0 - 모달 화면 설계 규칙(제9조) 추가,
버튼 modal action 스펙 확장 (inline/screen-ref 모드)
Co-authored-by: Cursor <cursoragent@cursor.com>
- 브레이크포인트 재설계: 실제 기기 CSS 뷰포트 기반 (479/767/1023px)
- 자동 줄바꿈 시스템: col > maxCol 컴포넌트 자동 재배치, 검토 필요 알림
- Gap 프리셋: 좁게/보통/넓게 3단계 간격 조절
- 셀 크기 강제 고정: gridTemplateRows + overflow-hidden
- 세로 자동 확장: 동적 캔버스 높이 계산 (최소 600px)
- 뷰어 모드 일관성: detectGridMode() 직접 사용
- 컴포넌트 ID 충돌 방지: 로드 시 idCounter 자동 설정
- popdocs 문서 정비: ADR 2건, 레거시 문서 archive 이동
Co-authored-by: Cursor <cursoragent@cursor.com>
모드별(4/6/8/12칸) 컴포넌트 위치/크기 오버라이드 저장
화면 밖 컴포넌트 오른쪽 패널 표시 및 드래그 재배치
컴포넌트 숨김 기능 (드래그/H키/클릭, 드래그로 해제)
리사이즈 겹침 검사 추가
드롭 위치 그리드 범위 초과 시 자동 조정
숨김 컴포넌트 드래그 안됨 버그 수정 (상태 업데이트 통합)
레거시 v1~v4 시스템 제거 (6,634줄 순감)
GridGuide SVG → PopRenderer CSS Grid 기반으로 전환
행/열 라벨 추가로 배치 위치 명확화
컴포넌트 타입 pop-sample로 단순화
문서 정리 (ARCHITECTURE, SPEC, CHANGELOG, ADR)
SeongHyun Kim
shin