- 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>
- 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>
- next.config.mjs에서 API 프록시 설정을 Docker 환경에 맞게 수정하여, SERVER_API_URL을 사용하도록 변경했습니다.
- InteractiveDataTable 및 TableListComponent에서 상대 경로 대신 getFilePreviewUrl 함수를 사용하여 전체 URL을 사용하도록 개선했습니다.
- FileManagerModal 및 FileUploadComponent에서 Blob 다운로드 방식을 apiClient를 통해 통일하여 Docker 환경에서의 호환성을 높였습니다.
- 불필요한 previewUrl 사용을 제거하고, 항상 apiClient를 통해 파일을 다운로드하도록 변경했습니다.
; Please enter a commit message to explain why this merge is necessary,
; especially if it merges an updated upstream into a topic branch.
;
; Lines starting with ';' will be ignored, and an empty message aborts
; the commit.
- 브레이크포인트 재설계: 실제 기기 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>
- Added new alignment, distribution, and size matching functionalities to the ScreenDesigner component.
- Implemented keyboard shortcuts for nudging components and toggling labels.
- Introduced a modal for displaying keyboard shortcuts to improve user experience.
- Updated SlimToolbar to support new alignment and distribution actions based on selected components.
- Enhanced zoom control with RAF throttling to prevent flickering during zoom operations.
- deleteFile, previewFile, downloadFile, setRepresentativeFile 함수에서 objid 파라미터의 타입을 정수에서 문자열로 변경하여 일관성을 높였습니다.
- getComponentFiles 함수에 레코드의 컬럼 값으로 파일을 직접 조회하는 로직을 추가하여, 파일 로드 시 유연성을 개선했습니다.
- FileUploadComponent에서 localStorage 파일 캐시 정리 로직을 추가하여, 등록 후 재등록 시 이전 파일이 남아있지 않도록 처리했습니다.
- v2-file-upload/FileUploadComponent에서 등록 모드 시 이전 파일 로드를 스킵하도록 개선하여, 불필요한 파일 로드를 방지했습니다.
- InteractiveScreenViewer 컴포넌트에 레이어 시스템을 도입하여, 레이어의 활성화 및 조건부 표시 로직을 추가하였습니다.
- ScreenDesigner 컴포넌트에서 레이어 상태 관리 및 레이어 정보 저장 기능을 구현하였습니다.
- 레이어 정의 및 조건부 표시 설정을 위한 새로운 타입과 스키마를 추가하여, 레이어 기반의 UI 구성 요소를 보다 유연하게 관리할 수 있도록 하였습니다.
- 레이어별 컴포넌트 렌더링 로직을 추가하여, 모달 및 드로어 형태의 레이어를 효과적으로 처리할 수 있도록 개선하였습니다.
- 전반적으로 레이어 시스템을 통해 사용자 경험을 향상시키고, UI 구성의 유연성을 높였습니다.
- TableManagementService에서 V2 레이아웃 동기화 로직을 추가하여, 새로운 입력 타입에 따라 화면 레이아웃을 자동으로 업데이트하도록 개선하였습니다.
- syncScreenLayoutsV2InputType 메서드를 통해 V2 레이아웃의 컴포넌트 source를 동기화하는 기능을 구현하였습니다.
- EditModal에서 배열 데이터를 쉼표 구분 문자열로 변환하는 로직을 추가하여, 손상된 값을 필터링하고 데이터 저장 시 일관성을 높였습니다.
- CategorySelectComponent에서 불필요한 스타일 및 높이 관련 props를 제거하여 코드 간결성을 개선하였습니다.
- V2Select 및 관련 컴포넌트에서 height 스타일을 통일하여 사용자 경험을 향상시켰습니다.
모드별(4/6/8/12칸) 컴포넌트 위치/크기 오버라이드 저장
화면 밖 컴포넌트 오른쪽 패널 표시 및 드래그 재배치
컴포넌트 숨김 기능 (드래그/H키/클릭, 드래그로 해제)
리사이즈 겹침 검사 추가
드롭 위치 그리드 범위 초과 시 자동 조정
숨김 컴포넌트 드래그 안됨 버그 수정 (상태 업데이트 통합)
- numberingRuleController.ts에서 API 엔드포인트의 코드 스타일을 일관되게 정리하여 가독성을 높였습니다.
- 불필요한 줄바꿈을 제거하고, 코드 블록을 명확하게 정리하여 유지보수성을 개선했습니다.
- tableManagementService.ts와 ButtonConfigPanel.tsx에서 코드 정리를 통해 일관성을 유지하고, 가독성을 향상시켰습니다.
- 전반적으로 코드의 깔끔함을 유지하고, 향후 개발 시 이해하기 쉽게 개선했습니다.
- 파트 업데이트 및 삭제 시 id 대신 order를 사용하여 로직을 개선하였습니다.
- savedRules 상태 업데이트 시 깊은 복사를 통해 객체 참조를 분리하여 클로저 문제를 방지하였습니다.
- 규칙 선택 시 깊은 복사를 통해 좌측 목록과 편집 영역의 객체가 공유되지 않도록 하여 데이터 무결성을 강화하였습니다.
- 관련 로깅을 추가하여 상태 변경 시 디버깅을 용이하게 하였습니다.
SeongHyun Kim
shin
kjs
DDD1542