- 브레이크포인트 재설계: 실제 기기 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)
visibility 속성으로 모드별 컴포넌트 표시/숨김 제어
pop-break 컴포넌트로 Flexbox 강제 줄바꿈 지원 (flex-basis: 100%)
컴포넌트 오버라이드 병합 로직 추가 (모드별 설정 변경 가능)
삭제 시 오버라이드 자동 정리 로직 구현
속성 패널에 "표시" 탭 추가 (체크박스 UI)
팔레트에 "줄바꿈" 컴포넌트 추가
popdocs 문서 정리 (PHASE3_SUMMARY, decisions/002, 기존 문서 업데이트)
- PopFlexRenderer에 BASE_VIEWPORT_WIDTH(1024px) 기준 스케일 계산 추가
- 컴포넌트 크기(fixedWidth/Height), gap, padding에 scale 적용
- 뷰어에서 viewportWidth 동적 감지 및 최대 1366px 제한
- 디자인 모드에서는 scale=1 유지, 뷰어에서만 비율 적용
- DndProvider 없는 환경에서 useDrag/useDrop 에러 방지
- v4 레이아웃 뷰어 렌더링 지원 (isPopLayoutV4 체크)
- v4 타입 추가: PopLayoutDataV4, PopContainerV4, PopSizeConstraintV4
- 핵심 변경: 4모드 위치 지정 → 단일 소스 규칙 기반 (fill/fixed/hug)
- 생성 함수: createEmptyPopLayoutV4(), isV4Layout() 타입 가드
- 문서 정리: popdocs/ 폴더로 통합, 기존 문서 archive/로 이동
- v2 레이아웃 데이터 구조 도입 (4모드별 별도 레이아웃 + 공유 컴포넌트 정의)
- tablet_landscape, tablet_portrait, mobile_landscape, mobile_portrait
- sections/components를 Record<string, Definition> 객체로 관리
- v1 → v2 자동 마이그레이션 지원
- 캔버스 UX 개선
- 줌 기능 (30%~150%, 마우스 휠 + 버튼)
- 패닝 기능 (중앙 마우스, Space+드래그, 배경 드래그)
- 2개 캔버스 동시 표시 (가로/세로 모드)
- Delete 키로 섹션/컴포넌트 삭제 기능 추가
- layout.sections 순회하여 componentIds에서 부모 섹션 찾는 방식
- 미리보기 v2 레이아웃 호환성 수정
- Object.keys(layout.sections).length 체크로 변경
수정 파일: PopDesigner.tsx, PopCanvas.tsx, SectionGridV2.tsx(신규),
types/pop-layout.ts, PopPanel.tsx, PopScreenPreview.tsx,
PopCategoryTree.tsx, screenManagementService.ts
POP 전용 카테고리 트리 UI 구현 (계층적 폴더 구조)
카테고리 CRUD API 추가 (hierarchy_path LIKE 'POP/%' 필터)
화면 이동 기능 (기존 연결 삭제 후 새 연결 추가 방식)
카테고리/화면 순서 변경 기능 (display_order 교환)
이동 UI를 서브메뉴에서 검색 가능한 모달로 개선
POP 레이아웃 버전 통일 (pop-1.0) 및 로드 로직 수정
DB 스키마 호환성 수정 (writer 컬럼, is_active VARCHAR)
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으로 변경하여 드롭 시 크기 유지
- 레거시 컴포넌트를 제거하고, V2/V2 컴포넌트 전용 Zod 스키마와 기본값 레지스트리를 통합 관리합니다.
- V2 컴포넌트의 overrides 스키마를 정의하고, 관련된 설정 패널을 통합하였습니다.
- 화면 복제 기능을 개선하여 DB 구조 개편 후의 효율적인 화면 관리를 지원하며, 버튼의 `targetScreenId` 매핑 버그를 수정하였습니다.
- 프리뷰 모드에서 URL 파라미터의 company_code를 우선 사용하도록 변경하였습니다.
- UnifiedRepeater 및 UnifiedSelect 컴포넌트를 추가하여 다양한 데이터 관리 기능을 지원합니다.
- V2Repeater 컴포넌트를 추가하여 인라인 테이블, 모달, 버튼 등 다양한 반복 데이터 관리를 지원합니다.
- V2RepeaterConfigPanel을 통해 반복 컴포넌트의 설정 패널을 통합하였습니다.
- DynamicComponentRenderer에서 모든 v2- 컴포넌트를 ComponentRegistry에서 통합 처리하도록 개선하여 코드의 일관성을 높였습니다.
- 레거시 타입을 v2 컴포넌트로 매핑하는 로직을 정리하여 가독성을 향상시켰습니다.
- 여러 문서의 내용을 업데이트하여 최신 정보를 반영하였습니다.
- 컴포넌트 개발 가이드와 관련된 문서의 목차를 재구성하고, V2 및 Zod 레이아웃 시스템에 대한 내용을 추가하였습니다.
- 화면 컴포넌트 개발 가이드를 개선하여 핵심 원칙과 패턴을 명확히 설명하였습니다.
- 불필요한 문서 및 가이드를 삭제하고, 통합된 가이드를 통해 개발자들이 쉽게 참고할 수 있도록 하였습니다.
- UnifiedSelect 컴포넌트에서 columnName이 유효하지 않은 경우 옵션 로드를 건너뛰도록 개선하였습니다.
- DynamicComponentRenderer에서 unified-select의 기본 source를 'distinct'로 설정하여 항상 테이블 컬럼에서 DISTINCT 값을 자동으로 로드하도록 변경하였습니다.
- layoutV2Converter에서 상위 레벨 속성을 추출하고, componentConfig와 병합하여 레거시 구조와의 호환성을 유지하였습니다.
- 관련된 경고 메시지를 추가하여 유효하지 않은 columnName에 대한 정보를 로그로 남기도록 하였습니다.
- 레거시 컴포넌트를 제거하고, V2 및 Unified 컴포넌트 전용 Zod 스키마와 기본값 레지스트리를 통합 관리합니다.
- V2 컴포넌트와 Unified 컴포넌트의 overrides 스키마를 정의하고, 기본값과의 병합 로직을 추가하였습니다.
- 레이아웃 조회 시 V2 테이블을 우선적으로 조회하고, 없을 경우 V1 테이블을 조회하도록 개선하였습니다.
- 관련된 테스트 계획 및 에러 처리 계획을 수립하여 안정성을 높였습니다.
- 화면 복제 기능을 개선하여 DB 구조 개편 후의 효율적인 화면 관리를 지원합니다.
- 그룹 복제 시 버튼의 `targetScreenId`가 새 화면으로 매핑되지 않는 버그를 수정하였습니다.
- 관련된 서비스 및 쿼리에서 `table_type_columns`를 사용하여 라벨 정보를 조회하도록 변경하였습니다.
- 여러 컨트롤러 및 서비스에서 `column_labels` 대신 `table_type_columns`를 참조하도록 업데이트하였습니다.
- 테이블 컬럼의 DISTINCT 값을 조회하는 API를 추가하였습니다. 이 API는 특정 테이블과 컬럼에서 DISTINCT 값을 반환하여 선택박스 옵션으로 사용할 수 있도록 합니다.
- API 호출 시 멀티테넌시를 고려하여 회사 코드에 따라 필터링을 적용하였습니다.
- 관련된 라우터 설정을 추가하여 API 접근을 가능하게 하였습니다.
- 프론트엔드에서 DISTINCT 값을 조회할 수 있도록 UnifiedSelect 컴포넌트를 업데이트하였습니다.
- 화면 컴포넌트 개발 가이드를 개선하여 핵심 원칙과 패턴을 명확히 설명하였습니다.
- 목차를 재구성하고, V2 컴포넌트 규칙, 표준 Props 인터페이스, 멀티테넌시 관련 내용을 추가하였습니다.
- 각 컴포넌트의 역할과 사용법을 상세히 설명하여 개발자들이 이해하기 쉽게 하였습니다.
- API 호출 시 autoFilter 패턴과 렌더링 최적화 패턴을 포함하여 가이드의 실용성을 높였습니다.
- 렉 구조 컴포넌트에서 v2-rack-structure를 지원하도록 수정하였습니다. 기존의 rack-structure 컴포넌트는 deprecated 처리되었습니다.
- 불필요한 콘솔 로그 메시지를 제거하여 코드의 가독성을 향상시켰습니다.
- 관련된 컴포넌트에서 v2 구조에 맞게 변경 사항을 반영하였습니다.
- 카테고리 값 관리 컴포넌트에 체크박스를 통한 다중 선택 기능을 추가하였습니다.
- 선택된 카테고리를 일괄 삭제할 수 있는 다이얼로그를 구현하였습니다.
- 테이블 관리 서비스에서 다중 선택 처리 로직을 추가하여, 파이프(|)로 구분된 값을 처리하도록 개선하였습니다.
- 관련된 로그 메시지를 추가하여 다중 선택 및 삭제 과정에서의 정보를 기록하도록 하였습니다.
- 카테고리 값 삭제 시, 자기 자신과 모든 하위 카테고리 ID를 재귀적으로 수집하는 기능을 추가하였습니다.
- 삭제 대상 카테고리 값 수집 완료 후, 하위 카테고리부터 역순으로 삭제하는 로직을 구현하였습니다.
- 관련된 로그 메시지를 추가하여 삭제 과정과 결과를 기록하도록 하였습니다.
- 화면 관리 기능에서 하위 항목 개수를 계산하는 로직을 개선하여 사용자에게 더 정확한 정보를 제공하도록 하였습니다.
- 화면의 기본 테이블을 업데이트하는 기능을 추가하였습니다. 사용자가 선택한 테이블 이름을 화면 레이아웃에 저장하고, 해당 정보를 기반으로 데이터베이스의 화면 정의를 업데이트합니다.
- 관련된 로그 메시지를 추가하여 업데이트 성공 여부를 콘솔에 기록하도록 하였습니다.
- 화면 디자인에서 현재 선택된 테이블을 기본 테이블로 설정하는 로직을 포함하였습니다.
- 테스트 테이블에서 채번 규칙 목록을 조회하는 API를 추가하였습니다. 이 API는 회사 코드와 선택적 메뉴 OBJID를 기반으로 규칙을 반환합니다.
- 회사별 카테고리 컬럼을 조회하는 API를 추가하여, 회사 코드에 따라 카테고리 컬럼을 필터링하여 반환하도록 개선하였습니다.
- 관련된 서비스 및 라우터를 업데이트하여 새로운 기능을 통합하였습니다.
- 채번 규칙 저장 API에서 ruleName을 필수로 설정하고, tableName과 columnName은 선택적으로 변경하였습니다.
- 테이블 관리 페이지에서 자동 저장 기능을 제거하고, 전체 저장 버튼으로 저장하도록 수정하였습니다.
- 카테고리 컬럼 선택 시, 선택된 컬럼의 테이블 이름과 컬럼 이름을 함께 전달하도록 개선하였습니다.
- V2 Core 라이브러리를 추가하여 느슨한 결합 아키텍처를 지원합니다.
- V2 EventBus를 통해 타입 안전한 이벤트 발행 및 구독 기능을 구현하였습니다.
- V2ErrorBoundary 컴포넌트를 추가하여 각 컴포넌트의 에러를 격리하고, 사용자 정의 폴백 UI 및 재시도 기능을 제공합니다.
- UnifiedRepeater 및 ButtonPrimaryComponent에서 V2 EventBus를 활용하여 이벤트 처리 로직을 개선하였습니다.
- 레거시 이벤트와의 호환성을 위해 LegacyEventAdapter를 추가하여 점진적 마이그레이션을 지원합니다.
- V2 컴포넌트 간의 통신을 위한 이벤트 타입을 정의하였습니다.
- EditModal, InteractiveScreenViewer, SaveModal 컴포넌트에서 리피터 데이터(배열)를 마스터 저장에서 제외하고, 별도로 저장하는 로직을 추가하였습니다.
- 리피터 데이터 저장 이벤트를 발생시켜 UnifiedRepeater 컴포넌트가 이를 리스닝하도록 개선하였습니다.
- 각 컴포넌트에서 최종 저장 데이터 로그를 업데이트하여, 저장 과정에서의 데이터 흐름을 명확히 하였습니다.
이로 인해 데이터 저장의 효율성과 리피터 관리의 일관성이 향상되었습니다.
- 엑셀 컬럼과 시스템 컬럼 간의 중복 체크 설정을 위한 체크박스 추가
- 중복 체크 시 처리 방법을 선택할 수 있는 옵션(건너뛰기/덮어쓰기) 추가
- 중복 체크 설정된 컬럼 수 및 관련 안내 메시지 표시
- 중복 체크를 위한 기존 데이터 조회 로직 구현
- 업로드 후 성공/실패/건너뛰기 건수에 대한 상세 결과 메시지 표시
- ScreenDesigner 컴포넌트에서 불필요한 디버그 로그를 제거하여 코드 가독성을 향상시켰습니다.
- ButtonConfigPanel에서 actionType을 로컬 상태로 관리하도록 개선하여, 버튼 액션 설정의 일관성을 높였습니다.
- RepeatContainerComponent에서 섹션별 폼 데이터 관리 기능을 추가하여, 각 반복 아이템의 독립적인 폼 데이터 처리가 가능해졌습니다.
이로 인해 코드의 효율성과 유지보수성이 향상되었습니다.
- InteractiveDataTable에서 valueCode 및 valueId에 대한 매핑 로직을 추가하여, 두 가지 키로 카테고리 정보를 저장할 수 있도록 개선하였습니다.
- UnifiedInput 및 TableListComponent에서 불필요한 디버그 로그를 주석 처리하여 코드 가독성을 향상시켰습니다.
이로 인해 카테고리 관리 및 데이터 처리의 효율성이 향상되었습니다.
- 카테고리 트리 컨트롤러에 전체 카테고리 키 목록 조회 라우트 추가: GET /api/category-tree/test/all-category-keys
- 카테고리 트리 서비스에 전체 카테고리 키 목록 조회 메서드 구현: 모든 테이블과 컬럼 조합을 반환
- 채번규칙 컨트롤러에서 폼 데이터 처리 기능 추가: 코드 미리보기 시 카테고리 기반 폼 데이터 사용
- 관련 API 클라이언트 및 타입 정의 업데이트: 카테고리 키 조회 및 채번규칙 API에 대한 요청 처리 개선
이로 인해 카테고리 관리 및 채번규칙 테스트의 효율성이 향상되었습니다.
카테고리 값을 메뉴별로 다르게 설정할 수 있도록 menuObjid를 모달 체인 전체에 전달합니다.
변경 내용:
- InteractiveDataTable: 등록/수정 모달 열 때 menuObjid를 이벤트에 포함
- EditModal: menuObjid를 state에 저장하고 하위 컴포넌트에 전달
- SaveModal: menuObjid props를 받아서 DynamicComponentRenderer에 전달
- SelectBasicComponent: getCategoryValues API 호출 시 menuObjid 파라미터 전달
이를 통해 같은 테이블/컬럼이라도 메뉴에 따라 다른 카테고리 옵션을 표시할 수 있습니다.
카테고리 API를 호출할 때 menuObjid를 전달하여 메뉴별 필터링 적용 가능하게 변경
- 카테고리 트리 컨트롤러와 서비스 추가: 트리 구조를 지원하는 카테고리 값 관리 기능을 구현하였습니다.
- 카테고리 트리 API 클라이언트 추가: CRUD 작업을 위한 API 클라이언트를 구현하였습니다.
- 카테고리 값 관리 컴포넌트 및 설정 패널 추가: 사용자 인터페이스에서 카테고리 값을 관리할 수 있도록 트리 구조 기반의 컴포넌트를 추가하였습니다.
- 관련 라우트 및 레지스트리 업데이트: 카테고리 트리 관련 라우트를 추가하고, 컴포넌트 레지스트리에 등록하였습니다.
이로 인해 카테고리 관리의 효율성이 향상되었습니다.
shin
SeongHyun Kim
kjs
DDD1542
leeheejin