최고관리자의 POP 화면을 다른 회사로 복사하는 기능 추가.
화면 단위 복사와 카테고리(그룹) 단위 일괄 복사를 모두 지원하며,
화면 간 참조(cartScreenId, sourceScreenId 등)를 자동 치환하고
카테고리 구조까지 대상 회사에 재생성한다.
[백엔드]
- analyzePopScreenLinks: POP 레이아웃 내 다른 화면 참조 스캔
- deployPopScreens: screen_definitions + screen_layouts_pop 복사,
screenId 참조 치환, numberingRuleId 초기화, 그룹 구조 복사
- POP 그룹 조회 쿼리 개선 (screen_layouts_pop JOIN으로 실제 POP 화면만 카운트)
- ensurePopRootGroup 최고관리자 전용으로 변경
[프론트엔드]
- PopDeployModal: 단일 화면/카테고리 일괄 복사 모달 (대상 회사 선택,
연결 화면 감지, 카테고리 트리 미리보기)
- PopCategoryTree: 그룹 컨텍스트 메뉴에 '카테고리 복사' 추가,
하위 그룹 화면까지 재귀 수집
- PopScreenSettingModal: UI 간소화 및 화면명 저장 기능 보완
- screenApi: analyzePopScreenLinks, deployPopScreens 클라이언트 함수 추가
스크롤 컨테이너(overflow-auto)에 배경색이 없어 부모의 bg-gray-100이
컨텐츠 하단 빈 공간에 노출되는 문제 수정.
스크롤 컨테이너에 직접 bg-white를 적용하여 자식 높이 계산과
무관하게 흰색 배경이 유지되도록 변경.
프리뷰 모드에서는 디바이스 프레임 효과를 위해 기존 회색 배경 유지.
- PopViewerWithModals에 __pop_navigate__ 이벤트 구독 추가
- targetScreenId가 있으면 해당 POP 화면으로 이동
- "back"이면 router.back(), params는 쿼리스트링 전달
- 입고확정 버튼에 카드리스트 선택 상태 시각 피드백
- 미선택: 기본 아이콘/색상
- 선택됨: emerald-600 배경 + 선택 개수 뱃지
- selected_items connectionMeta category를 "event"로 변경하여 자동 매칭 대상 포함
- useConnectionResolver: _auto 모드에서 역방향(타겟→소스) 라우팅 추가
- pop-button: 입고 확정 성공 후 followUpActions 실행 (navigate/refresh/event)
- pop-button: execute-action API URL 경로 수정 (/api/pop/ → /pop/)
컴포넌트 연결 단순화
- ConnectionEditor: 이벤트 연결 시 "어디로" Select 1개로 단순화
- useConnectionResolver: 호환 이벤트 자동 라우팅 (_auto 모드)
- connectionMeta에 category(event/filter/data) 필드 추가
상태 변경 규칙 UI 개선
- StatusChangeRule 타입 통합, 모든 버튼 프리셋에서 사용 가능
- TableCombobox/ColumnCombobox 공용 컴포넌트 추출 (pop-shared/)
- 테이블/컬럼 드롭다운, 고정값/조건부 값 설정 UI
- 입고확정 API 신규 (popActionRoutes.ts, 동적 상태 변경 처리)
조회 키 자동/수동 설정
- 대상 테이블 기반 자동 판단 (cart_items -> id, 그 외 -> row_key -> PK)
- 수동 모드: 카드 항목 필드와 대상 PK 컬럼을 직접 지정 가능
- PK 컬럼명 동적 표시 (isPrimaryKey 정보 활용)
- CartListModeConfig에 sourceComponentId 추가
- cartType이 빈 문자열인 경우 componentId로 매칭
- Select value: sourceComponentId 기반 안정적 매칭
- 런타임: sourceComponentId > cartType > 첫 번째 순으로 폴백
원인: 4160 화면의 cartAction에 cartType 미설정 -> 빈 문자열 ->
Select 저장 시 undefined 순환 -> 선택 불가
- screenApi 필드명 수정 (screenId/screenName)
- 레이아웃 components Record -> Object.values() 변환
- config 키 수정 (props -> config)
- SelectItem 빈 값 방어 (cartType || __comp_id)
- cartType 수동입력 -> 원본 컴포넌트 Select 자동 로드
- 상태 필터 UI 제거 (in_cart 고정)
- 설정 미완료 가드 완화 (sourceScreenId만 필수)
- CartListModeConfig 타입 추가 (sourceScreenId, cartType, statusFilter)
- 원본 화면 카드 설정 자동 상속 (screenApi.getLayoutPop)
- cart_items 조회 + row_data JSON 파싱 + __cart_ 접두사 병합
- 체크박스 선택 (전체/개별) + selected_items 이벤트 발행
- 인라인 삭제 (확인 후 즉시 DB 반영)
- 수량 수정 (NumberInputModal 재사용, 로컬 __cart_modified)
- 설정 패널: 장바구니 모드 토글 + 원본 화면/컴포넌트 선택
- connectionMeta: selected_items, confirm_trigger 추가
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 활성화
장바구니 담기 -> DB 저장 전체 플로우 구현 및 검증 완료.
- useCartSync 훅 신규: DB(cart_items) <-> 로컬 상태 동기화, dirty check, 일괄 저장
- pop-button cart 프리셋: 배지 표시, 저장 트리거, 확인 모달, 3색 데이터 흐름 시각화
- pop-card-list: 담기/취소 UI, cart_save_trigger 수신 시 saveToDb 실행
- 선택적 컬럼 저장: RowDataMode(all/selected) + 연결 기반 자동 컬럼 로딩
- ComponentEditorPanel: allComponents/connections/componentId를 ConfigPanel에 전달
- connectionMeta: cart_save_trigger/cart_updated/cart_save_completed 이벤트 정의
- ConnectionEditor: 이벤트 타입 연결 구분 (데이터 vs 이벤트)
- types.ts: CartItemWithId, CartSyncStatus, CartButtonConfig 등 타입 추가
- 접근성: NumberInputModal/PackageUnitModal에 DialogTitle 추가
Made-with: Cursor
- 입력 필드/포장등록/담기 버튼 독립 ON/OFF 분리
- NumberInputModal을 4단계 상태 머신으로 재작성
(수량 -> 포장 수 -> 개당 수량 -> summary)
- 포장 단위 커스텀 지원 (기본 6종 + 디자이너 추가)
- 본문 필드에 계산식 통합 (3-드롭다운 수식 빌더)
- 입력 필드: limitColumn(동적 상한), saveTable/saveColumn(저장 대상)
- 저장 대상 테이블 선택을 TableCombobox로 교체 (검색 가능)
- 다중 정렬 지원 + 하위 호환 (sorts.map 에러 수정)
- GroupedColumnSelect 항상 테이블명 헤더 표시
- 반응형 표시 우선순위 (required/shrink/hidden) 설정
- PackageEntry/CartItem 타입 확장, CardPackageConfig 신규
Co-authored-by: Cursor <cursoragent@cursor.com>
모달 타입 통합 (modal-table/card/icon-grid -> modal 1종):
- normalizeInputType()으로 레거시 저장값 호환
- 캔버스 모달 모드 완전 제거 (ModalMode, modalCanvasId, returnEvent)
- SearchInputType 9종으로 정리
모달 뷰 실제 구현:
- TableView / IconView 분리 렌더링 (displayStyle 반영)
- 아이콘 뷰: 이름 첫 글자 컬러 카드 + 초성 그룹 헤더
- getIconColor() 결정적 해시 색상 (16색 팔레트)
가나다/ABC 필터 탭:
- ModalFilterTab 타입 + getGroupKey() 한글 초성 추출
- 쌍자음 합침 (ㄲ->ㄱ, ㄸ->ㄷ 등)
- 모달 상단 토글 버튼으로 초성/알파벳 섹션 그룹화
디자이너 설정 개선:
- 컬럼 헤더 라벨 커스터마이징 (columnLabels)
- 필터 탭 활성화 체크박스 (가나다/ABC)
- card 스타일 제거, 정렬 옵션 제거
- 검색 방식 (포함/시작/같음) 유지
시나리오 A 모달 선택 필터링:
- ConnectionEditor 필터 컬럼에 DB 전체 컬럼 표시
- pop-string-list 복수 필터 AND 지원
- useConnectionResolver 페이로드 구조 정규화
Co-authored-by: Cursor <cursoragent@cursor.com>
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>
[Config 패널]
- STEP 6 리스트 레이아웃에 컬럼 추가/삭제 기능 추가
- 메인 + 조인 컬럼을 전환 후보로 확장 (기존: 조인만)
- 독립 헤더로 추가된 컬럼은 전환 후보에서 자동 제외
- STEP 3 체크 변경 시 STEP 6 순서/조인컬럼/alternateColumns 보존
- STEP 4 조인 삭제 시 listColumns/alternateColumns에서 고아 참조 자동 정리
[런타임 컴포넌트]
- 리스트 헤더에 alternateColumns 전환 UI 추가 (Popover 드롭다운)
- 조인 컬럼명 resolveColumnName 유틸 추가 ("테이블.컬럼" -> "컬럼")
- 카드 모드 텍스트 잘림 수정 (gridTemplateRows: minmax 적용)
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>
- PopButtonComponent: 5가지 액션 타입(save/delete/api/modal/event) + 후속 액션 체이닝
- PopButtonConfigPanel: 프리셋 기반 설정(save/delete/logout/menu/modal-open/custom)
- 확인 다이얼로그(ConfirmConfig) 선택 기능
- usePopEvent/useDataSource 훅 연동
- PopComponentType에 pop-button 추가, 팔레트 등록
Co-authored-by: Cursor <cursoragent@cursor.com>
- PopCardListComponent: 카드 리스트 렌더링 컴포넌트 구현
- PopCardListConfig: 카드 리스트 설정 패널 구현
- types.ts: PopCardListProps 타입 정의 추가
- ComponentPalette: 카드 리스트 컴포넌트 팔레트에 등록
- pop-layout.ts: cardList 타입 추가
Co-authored-by: Cursor <cursoragent@cursor.com>
팀원 pull 후 대시보드 500 에러 발생 원인 해결:
- subType별 허용 집계 함수 제한 (stat-card는 COUNT만)
- SUM/AVG 선택 시 숫자 타입 컬럼만 표시
- 비호환 집계 함수 선택 시 컬럼 자동 초기화
- subType 변경 시 비호환 aggregation 자동 전환 (STEP 7.5)
- chart 모드 groupBy 미설정 경고 추가
Co-authored-by: Cursor <cursoragent@cursor.com>
- sessions/2026-02-11.md: usePopEvent/useDataSource 구현 내용 추가
- CHANGELOG.md: Phase 0 훅 구현 섹션 추가
- STATUS.md: 진행 상태 + 다음 작업 업데이트
- PLAN.md: 현재 상태 문구 업데이트
- README.md: 마지막 대화 요약 동기화
- INDEX.md: 공통 훅 함수/타입 색인 추가
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>
설정 패널 버그 수정 (PopDashboardConfig):
- gaugeConfig 스프레드 순서 수정: min/max/target 값이 기존값에 덮어씌워지는 문제 해결
- 스프레드를 먼저 적용 후 변경 필드를 뒤에 배치하여 올바르게 반영
아이템 레이아웃 개선:
- KpiCard/StatCard: items-center justify-center 추가로 셀 내 중앙 정렬
- GaugeItem: SVG를 flex-1 영역에서 반응형 렌더링 (h-full w-auto)
- GaugeItem: preserveAspectRatio로 비율 유지, 라벨/목표값 shrink-0
모드 레이아웃 개선:
- ArrowsMode: 아이템이 전체 영역 사용, 화살표/인디케이터를 overlay로 변경
- ArrowsMode: 화살표 크기 축소 (h-11 -> h-8), backdrop-blur 추가
- AutoSlideMode: 슬라이드 컨테이너를 absolute inset-0으로 전체 영역 활용
- AutoSlideMode: 인디케이터를 하단 overlay로 변경
Co-authored-by: Cursor <cursoragent@cursor.com>
설정 패널 간소화:
- 차트 X축/Y축 수동 입력 필드 제거 (자동 적용 안내 문구로 대체)
- groupBy 선택 시 X축 자동, 집계 결과를 Y축(value)으로 자동 매핑
차트 렌더링 개선 (ChartItem):
- PieChart에 카테고리명+값+비율 라벨 표시
- Legend 컴포넌트 추가 (containerWidth 300px 이상 시)
- Tooltip formatter로 이름/값 쌍 표시
데이터 fetcher 안정화 (dataFetcher):
- apiClient(axios) 우선 호출, dashboardApi(fetch) 폴백 패턴 적용
- PostgreSQL bigint/numeric 문자열 -> 숫자 자동 변환 처리
- Recharts가 숫자 타입을 요구하는 문제 해결
Co-authored-by: Cursor <cursoragent@cursor.com>
설정 패널 (PopDashboardConfig):
- groupBy(X축 분류) Combobox 설정 UI 추가
- 차트 xAxisColumn/yAxisColumn 입력 UI 추가
- 통계 카드 카테고리 추가/삭제/편집 인라인 에디터 추가
- 대상 컬럼 Select를 Combobox(검색 가능)로 개선
데이터 처리 버그 수정 (PopDashboardComponent):
- 차트: groupBy 있을 때 xAxisColumn 자동 보정 로직 추가
- 통계 카드: 카테고리별 필터 실제 적용 (기존: 모든 카테고리에 rows.length 동일 입력)
- useCallback 의존성 안정화 (visibleItemIds 문자열 키 사용)
- refreshInterval 최소 5초 강제
데이터 fetcher 방어 로직 (dataFetcher.ts):
- validateDataSourceConfig() 추가: 설정 미완료 시 SQL 전송 차단
- 빈 필터/불완전 조인 건너뜀 처리
- COUNT 컬럼 미선택 시 COUNT(*) 자동 처리
- fetchTableColumns() 이중 폴백 (tableManagementApi -> dashboardApi)
아이템 UI 개선:
- KPI/차트/게이지/통계 카드 패딩 및 폰트 크기 조정
- 작은 셀에서도 라벨/단위/증감율 표시되도록 hidden 제거
기타:
- GridMode MIN_CELL_WIDTH 160 -> 80 축소
- PLAN.MD: 대시보드 4가지 아이템 모드 완성 계획으로 갱신
- STATUS.md: 프로젝트 상태 추적 파일 추가
Co-authored-by: Cursor <cursoragent@cursor.com>
구조 변경:
- grid 모드를 독립 displayMode에서 페이지 내부 그리드 레이아웃으로 전환
- DashboardPage 타입 추가 (각 페이지가 독립 그리드 보유)
- migrateConfig()로 기존 grid/useGridLayout 설정 자동 마이그레이션
설정 패널 (PopDashboardConfig):
- 드롭다운 기반 집계 설정 UI 전면 재작성 (+917줄)
- 테이블/컬럼 선택 Combobox, 페이지 관리, 셀 배치 편집기
- fetchTableList() 추가 (테이블 목록 조회)
컴포넌트/모드 개선:
- GridMode: 반응형 자동 열 축소 (MIN_CELL_WIDTH 기준)
- PopDashboardComponent: 페이지 기반 렌더링 로직
- PopDashboardPreview: 페이지 뱃지 표시
기타:
- ComponentEditorPanel: 탭 콘텐츠 스크롤 수정 (min-h-0 추가)
- types.ts: grid를 displayMode에서 제거, DashboardPage 타입 추가
Co-authored-by: Cursor <cursoragent@cursor.com>
- PopDashboardComponent: early return을 모든 hooks 이후로 이동 (Rules of Hooks)
- PopDashboardConfigPanel: onChange -> onUpdate prop 이름 정합, 빈 객체 config 방어
- PopDashboardPreview: Array.isArray 방어 추가
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>
- 9개 컴포넌트 정의 (pop-text, pop-dashboard, pop-table, pop-button, pop-icon, pop-search, pop-field, pop-lookup, pop-system)
- POP 헌법 (공통 규칙 8조) 추가
- 공통 인프라 설계 (DataSourceConfig, ColumnBinding, JoinConfig, useDataSource, usePopEvent, PopActionConfig)
- 컴포넌트 간 통신 예시 4가지
- 구현 우선순위 Phase 0~6
Co-authored-by: Cursor <cursoragent@cursor.com>
- CHANGELOG.md: 2026-02-09 병합 요약 (충돌 3건 해결, 검증 결과)
- PROBLEMS.md: 병합 관련 문제-해결 3건 추가
- WORKFLOW_PROMPTS.md: 워크플로우 프롬프트 수정
Co-authored-by: Cursor <cursoragent@cursor.com>
- WORKFLOW_PROMPTS.md 신규 생성 (작업 단계별 표준 프롬프트)
- PLAN.md에 "현재 구현 계획" 섹션 템플릿 추가
- SAVE_RULES.md에 구현 계획 저장/조회/동기화 규칙 추가
- README.md에 구현 계획 및 워크플로우 프롬프트 링크 추가
Co-authored-by: Cursor <cursoragent@cursor.com>
SeongHyun Kim
shin
kjs