History

kjs 702b506665 feat: 분할 패널 테이블에서 카테고리 값을 라벨로 표시하는 기능 추가 - 좌측/우측 패널 테이블의 카테고리 타입 컬럼 매핑 로드 - formatCellValue 함수 추가하여 카테고리 코드를 라벨+배지로 변환 - 좌측 패널 테이블 렌더링 부분(그룹화/일반)에 formatCellValue 적용 - 우측 패널 테이블 렌더링 부분에 formatCellValue 적용 - Badge 컴포넌트 import 및 카테고리별 색상 표시 변경 사항: - 카테고리 매핑 상태 추가 (leftCategoryMappings, rightCategoryMappings) - API 클라이언트 import 추가 - 카테고리 값 조회 API 호출 useEffect 2개 추가 - 셀 값 포맷팅 함수 formatCellValue 추가 - 모든 테이블 td 렌더링에서 String(value) → formatCellValue() 적용		2025-11-13 17:52:33 +09:00
..
README.md	분할레이아웃	2025-10-15 17:25:38 +09:00
SplitPanelLayoutComponent.tsx	feat: 분할 패널 테이블에서 카테고리 값을 라벨로 표시하는 기능 추가	2025-11-13 17:52:33 +09:00
SplitPanelLayoutConfigPanel.tsx	테이블 데이터 필터링 기능 및 textarea컴포넌트 자동 매핑 삭제	2025-11-13 17:06:41 +09:00
SplitPanelLayoutRenderer.tsx	분할레이아웃	2025-10-15 17:25:38 +09:00
config.ts	분할레이아웃	2025-10-15 17:25:38 +09:00
index.ts	반응형 및 테이블 리스트 컴포넌트 오류 수정	2025-10-17 15:31:23 +09:00
types.ts	테이블 데이터 필터링 기능 및 textarea컴포넌트 자동 매핑 삭제	2025-11-13 17:06:41 +09:00

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,
};