kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity
ERP-node/frontend/lib/registry/components/split-panel-layout2
History
kmh cc61ef3ff4 feat: enhance category mapping and label resolution in split panel layouts 
- Added functionality to resolve unresolved category labels after data loading in SplitPanelLayout2Component.
- Implemented batch API calls to fetch missing category labels based on unresolved codes.
- Improved category mapping logic in SplitPanelLayoutComponent to handle join tables and provide fallback mappings.
- Enhanced the user experience by ensuring that category labels are correctly displayed even when they are initially unresolved.

These changes aim to improve the robustness of category handling across the split panel components.
 		2026-03-12 07:54:12 +09:00
..
components feat(universal-form-modal): 조건부 테이블, 동적 Select 옵션, 서브 테이블 수정 로드 기능 구현 2025-12-29 09:06:07 +09:00
ActionButtonConfigModal.tsx feat(universal-form-modal): 조건부 테이블, 동적 Select 옵션, 서브 테이블 수정 로드 기능 구현 2025-12-29 09:06:07 +09:00
ColumnConfigModal.tsx feat(universal-form-modal): 조건부 테이블, 동적 Select 옵션, 서브 테이블 수정 로드 기능 구현 2025-12-29 09:06:07 +09:00
DataTransferConfigModal.tsx feat(split-panel-layout2): 그룹핑, 탭 필터링, 설정 모달 기능 추가 2025-12-24 09:08:16 +09:00
README.md feat(universal-form-modal): 조건부 테이블, 동적 Select 옵션, 서브 테이블 수정 로드 기능 구현 2025-12-29 09:06:07 +09:00
SplitPanelLayout2Component.tsx feat: enhance category mapping and label resolution in split panel layouts 2026-03-12 07:54:12 +09:00
SplitPanelLayout2ConfigPanel.tsx refactor: 전체 프론트엔드 하드코딩 색상 → CSS 변수 일괄 치환 2026-03-09 14:31:59 +09:00
SplitPanelLayout2Renderer.tsx feat(universal-form-modal): 조건부 테이블, 동적 Select 옵션, 서브 테이블 수정 로드 기능 구현 2025-12-29 09:06:07 +09:00
config.ts feat: SplitPanelLayout2 마스터-디테일 컴포넌트 구현 2025-12-03 18:53:03 +09:00
index.ts feat(split-panel-layout2): 그룹핑, 탭 필터링, 설정 모달 기능 추가 2025-12-24 09:08:16 +09:00
types.ts feat(universal-form-modal): 조건부 테이블, 동적 Select 옵션, 서브 테이블 수정 로드 기능 구현 2025-12-28 19:32:13 +09:00

README.md

SplitPanelLayout2 컴포넌트

마스터-디테일 패턴의 좌우 분할 레이아웃 컴포넌트 (개선 버전)

개요

  • ID: split-panel-layout2
  • 카테고리: layout
  • 웹타입: container
  • 버전: 2.0.0

주요 기능

  • 좌측 패널: 마스터 데이터 목록 (예: 부서 목록)
  • 우측 패널: 디테일 데이터 목록 (예: 부서원 목록)
  • 조인 기반 데이터 연결
  • 검색 기능 (좌측/우측 모두)
  • 계층 구조 지원 (트리 형태)
  • 데이터 전달 기능 (모달로 선택된 데이터 전달)
  • 리사이즈 가능한 분할 바

사용 예시

부서-사원 관리

  1. 좌측 패널: dept_info 테이블 (부서 목록)
  2. 우측 패널: user_info 테이블 (사원 목록)
  3. 조인 조건: dept_code = dept_code
  4. 데이터 전달: dept_code, dept_name, company_code

설정 옵션

좌측 패널 설정

속성 타입 설명
title string 패널 제목
tableName string 테이블명
displayColumns ColumnConfig[] 표시할 컬럼 목록
searchColumn string 검색 대상 컬럼
showSearch boolean 검색 기능 표시 여부
hierarchyConfig object 계층 구조 설정

우측 패널 설정

속성 타입 설명
title string 패널 제목
tableName string 테이블명
displayColumns ColumnConfig[] 표시할 컬럼 목록
searchColumn string 검색 대상 컬럼
showSearch boolean 검색 기능 표시 여부
showAddButton boolean 추가 버튼 표시
showEditButton boolean 수정 버튼 표시
showDeleteButton boolean 삭제 버튼 표시

조인 설정

속성 타입 설명
leftColumn string 좌측 테이블의 조인 컬럼
rightColumn string 우측 테이블의 조인 컬럼

데이터 전달 설정

속성 타입 설명
sourceColumn string 좌측 패널의 소스 컬럼
targetColumn string 모달로 전달할 타겟 컬럼명

데이터 흐름

[좌측 패널 항목 클릭]
    ↓
[selectedLeftItem 상태 저장]
    ↓
[modalDataStore에 테이블명으로 저장]
    ↓
[ScreenContext DataProvider 등록]
    ↓
[우측 패널 데이터 로드 (조인 조건 적용)]

버튼과 연동

버튼 컴포넌트에서 이 컴포넌트의 선택된 데이터에 접근하려면:

  1. 버튼의 액션 타입을 openModalWithData로 설정
  2. 데이터 소스 ID를 좌측 패널의 테이블명으로 설정 (예: dept_info)
  3. modalDataStore에서 자동으로 데이터를 가져옴

개발자 정보

  • 생성일: 2024
  • 경로: lib/registry/components/split-panel-layout2/

관련 문서