디자이너 팔레트에서 배치 가능한 10번째 POP 컴포넌트로 pop-profile을
추가한다. 화면 설계자가 필요한 화면에만 프로필 기능을 배치할 수 있도록
시스템 UI가 아닌 컴포넌트 등록 방식으로 구현한다.
[뷰어 컴포넌트]
- useAuth() 연동으로 실제 로그인 사용자 정보 표시
- Popover 드롭다운: 사용자 정보 + POP 대시보드 / PC 모드 / 로그아웃
- 비로그인 시 로그인 버튼 표시
- 아바타: 사용자 사진 또는 이름 이니셜 표시
[설정 패널]
- 아바타 크기 선택 (sm 32px / md 40px / lg 48px)
- 메뉴 항목 개별 on/off (대시보드 이동 / PC 모드 전환 / 로그아웃)
[디자이너 통합]
- PopComponentType에 "pop-profile" 추가
- DEFAULT_COMPONENT_GRID_SIZE: 1x1
- PALETTE_ITEMS: UserCircle 아이콘 + 설명
- COMPONENT_TYPE_LABELS: "프로필"
- PopComponentRegistry 등록 (category: action)
모바일/태블릿 환경에서 바코드·QR을 카메라로 스캔하여 검색·입력 필드에
값을 자동 전달하는 pop-scanner 컴포넌트를 추가하고, JSON 형태의
멀티필드 데이터를 여러 컴포넌트에 분배하는 파싱 체계를 구현한다.
[pop-scanner 신규]
- 카메라 스캔 UI (BarcodeScanModal) + 아이콘 전용 버튼
- parseMode 3모드: none(단일값), auto(전역 자동매칭), json(반자동 매핑)
- auto: scan_auto_fill 전역 이벤트로 fieldName 기준 자동 입력
- json: 연결된 컴포넌트 필드를 체크박스 목록으로 표시,
fieldName==JSON키 자동 매칭 + 관리자 override(enabled/sourceKey)
- getDynamicConnectionMeta로 parseMode별 sendable 동적 생성
[pop-field 연동]
- scan_auto_fill 구독: sections.fields의 fieldName과 JSON 키 매칭
- columnMapping 키를 fieldName 기준으로 통일 (fieldId→fieldName)
- targetColumn 선택 시 fieldName 자동 동기화
- 새 필드 fieldName 기본값을 빈 문자열로 변경
[pop-search 연동]
- scan_auto_fill 구독: filterColumns 전체 키 매칭
- set_value 수신 시 모달 타입이면 modalDisplayText도 갱신
[BarcodeScanModal 개선]
- 모달 열릴 때 상태 리셋 (scannedCode/error/isScanning)
- "다시 스캔" 버튼 추가
- 스캔 가이드 영역 확대 (h-3/5 w-4/5)
[getConnectedFields 필드 추출]
- filterColumns(복수) > modalConfig.valueField > fieldName 우선순위
- pop-field sections.fields[].fieldName 추출
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 활성화
- 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>
테이블 데이터를 리스트/카드 두 가지 모드로 표시하는 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>
- 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>
- pop-icon.tsx 신규 추가: 아이콘 컴포넌트 구현
- ComponentPalette: 아이콘 컴포넌트 팔레트 추가
- ComponentEditorPanel: 아이콘 편집 패널 추가
- PopRenderer: 아이콘 렌더링 지원
- pop-layout.ts: 아이콘 타입 정의 추가
- pop-text.tsx: 텍스트 컴포넌트 개선
- next.config.mjs: 설정 업데이트
Co-authored-by: Cursor <cursoragent@cursor.com>
Backend:
- screen_layouts_pop 테이블용 CRUD API 추가 (getLayoutPop, saveLayoutPop, deleteLayoutPop, getScreenIdsWithPopLayout)
- 멀티테넌시 권한 체크 포함
Frontend API:
- screenApi에 POP 레이아웃 함수 4개 추가
POP 관리 페이지:
- popScreenMngList 신규 생성
- isPop prop으로 미리보기 URL 분기 (/pop/screens/{id})
- CreateScreenModal에서 POP 화면 생성 시 빈 레이아웃 자동 생성
POP 디자이너:
- PopDesigner, PopCanvas, PopPanel, SectionGrid 컴포넌트 구현
- react-dnd로 팔레트→캔버스 드래그앤드롭
- react-grid-layout으로 컴포넌트 자유 배치/리사이즈
- 그리드 단순화: 고정 셀 크기(40px) 기반 자동 계산, 그리드 점 제거
- onLayoutChange를 onDragStop/onResizeStop으로 변경하여 드롭 시 크기 유지
SeongHyun Kim
shin