kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity
ERP-node/frontend/lib/registry/components/v2-split-panel-layout
History
kjs 7a65ab0f85 docs: update full-screen analysis and V2 component usage guide 
- Revised the full-screen analysis document to reflect the latest updates, including the purpose and core rules for screen development.
- Expanded the V2 component usage guide to include a comprehensive catalog of components, their configurations, and usage guidelines for LLM and chatbot applications.
- Added a summary of the system architecture and clarified the implementation methods for user business screens and admin menus.
- Enhanced the documentation to serve as a reference for AI agents and screen designers, ensuring adherence to the established guidelines.

These updates aim to improve clarity and usability for developers and designers working with the WACE ERP screen composition system.

Made-with: Cursor
 		2026-03-13 15:02:06 +09:00
..
config-panels feat: enhance column width configuration and rendering 2026-03-13 11:29:32 +09:00
README.md V2 컴포넌트 규칙 추가 및 기존 컴포넌트 자동 등록 개선: 화면 컴포넌트 개발 가이드에 V2 컴포넌트 사용 규칙을 명시하고, ComponentsPanel에서 수동으로 추가하던 table-list 컴포넌트를 자동 등록으로 변경하여 관리 효율성을 높였습니다. 또한, V2 컴포넌트 목록과 수정/개발 시 규칙을 추가하여 일관된 개발 환경을 조성하였습니다. 2026-01-19 14:52:11 +09:00
SplitPanelContext.tsx Merge branch 'jskim-node' of http://39.117.244.52:3000/kjs/ERP-node into gbpark-node 2026-02-24 09:29:44 +09:00
SplitPanelLayoutComponent.tsx docs: update full-screen analysis and V2 component usage guide 2026-03-13 15:02:06 +09:00
SplitPanelLayoutConfigPanel.tsx feat: enhance column width configuration and rendering 2026-03-13 11:29:32 +09:00
SplitPanelLayoutRenderer.tsx V2 컴포넌트 규칙 추가 및 기존 컴포넌트 자동 등록 개선: 화면 컴포넌트 개발 가이드에 V2 컴포넌트 사용 규칙을 명시하고, ComponentsPanel에서 수동으로 추가하던 table-list 컴포넌트를 자동 등록으로 변경하여 관리 효율성을 높였습니다. 또한, V2 컴포넌트 목록과 수정/개발 시 규칙을 추가하여 일관된 개발 환경을 조성하였습니다. 2026-01-19 14:52:11 +09:00
config.ts V2 컴포넌트 규칙 추가 및 기존 컴포넌트 자동 등록 개선: 화면 컴포넌트 개발 가이드에 V2 컴포넌트 사용 규칙을 명시하고, ComponentsPanel에서 수동으로 추가하던 table-list 컴포넌트를 자동 등록으로 변경하여 관리 효율성을 높였습니다. 또한, V2 컴포넌트 목록과 수정/개발 시 규칙을 추가하여 일관된 개발 환경을 조성하였습니다. 2026-01-19 14:52:11 +09:00
index.ts [agent-pipeline] pipe-20260311151253-nyk7 round-4 2026-03-12 00:27:35 +09:00
types.ts feat: implement packaging unit and item management APIs 2026-03-12 01:18:09 +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,
};