kjs
e1a5befdf7
- 선택항목 상세입력 컴포넌트 확장 - 실시간 가격 계산 기능 추가 (할인율/할인금액, 반올림 방식) - 카테고리 값 기반 연산 매핑 시스템 - 3단계 드릴다운 방식 설정 UI (메뉴 → 카테고리 → 값 매핑) - 설정 가능한 계산 로직 - autoCalculation 설정으로 계산 필드명 동적 지정 - valueMapping으로 카테고리 코드와 연산 타입 매핑 - 할인 방식: none/rate/amount - 반올림 방식: none/round/floor/ceil - 반올림 단위: 1/10/100/1000 - UI 개선 - 입력 필드 가로 배치 (반응형 Grid) - 카테고리 타입 필드 옵션 로딩 개선 - 계산 결과 필드 자동 표시 및 읽기 전용 처리 - 날짜 입력 필드 네이티브 피커 지원 - API 연동 - 2레벨 메뉴 목록 조회 - 메뉴별 카테고리 컬럼 조회 - 카테고리별 값 목록 조회 - 문서화 - 기간별 단가 설정 가이드 작성 |
||
|---|---|---|
| .. | ||
| README.md | ||
| SplitPanelLayoutComponent.tsx | ||
| SplitPanelLayoutConfigPanel.tsx | ||
| SplitPanelLayoutRenderer.tsx | ||
| config.ts | ||
| index.ts | ||
| types.ts | ||
README.md
SplitPanelLayout 컴포넌트
마스터-디테일 패턴의 좌우 분할 레이아웃 컴포넌트입니다.
특징
- 🔄 마스터-디테일 패턴: 좌측에서 항목 선택 시 우측에 상세 정보 표시
- 📏 크기 조절 가능: 드래그하여 좌우 패널 크기 조정
- 🔍 검색 기능: 각 패널에 독립적인 검색 기능
- 🔗 관계 설정: JOIN, DETAIL, CUSTOM 관계 타입 지원
- ⚙️ 유연한 설정: 다양한 옵션으로 커스터마이징 가능
사용 사례
1. 코드 관리
- 좌측: 코드 카테고리 목록
- 우측: 선택된 카테고리의 코드 목록
2. 테이블 조인 설정
- 좌측: 기본 테이블 목록
- 우측: 선택된 테이블의 조인 조건 설정
3. 메뉴 관리
- 좌측: 메뉴 트리 구조
- 우측: 선택된 메뉴의 상세 설정
설정 옵션
좌측 패널 (leftPanel)
title: 패널 제목tableName: 데이터베이스 테이블명showSearch: 검색 기능 표시 여부showAdd: 추가 버튼 표시 여부
우측 패널 (rightPanel)
title: 패널 제목tableName: 데이터베이스 테이블명showSearch: 검색 기능 표시 여부showAdd: 추가 버튼 표시 여부relation: 좌측 항목과의 관계 설정type: "join" | "detail" | "custom"foreignKey: 외래키 컬럼명
레이아웃 설정
splitRatio: 좌측 패널 너비 비율 (0-100, 기본 30)resizable: 크기 조절 가능 여부 (기본 true)minLeftWidth: 좌측 최소 너비 (기본 200px)minRightWidth: 우측 최소 너비 (기본 300px)autoLoad: 자동 데이터 로드 (기본 true)
예시
const config: SplitPanelLayoutConfig = {
leftPanel: {
title: "코드 카테고리",
tableName: "code_category",
showSearch: true,
showAdd: true,
},
rightPanel: {
title: "코드 목록",
tableName: "code_info",
showSearch: true,
showAdd: true,
relation: {
type: "detail",
foreignKey: "category_id",
},
},
splitRatio: 30,
resizable: true,
};