108af2a68b
새로운 그룹화 레이아웃 컴포넌트 2종 추가: - Section Card: 제목+테두리 기반 명확한 섹션 구분 - Section Paper: 배경색 기반 미니멀한 섹션 구분 주요 변경사항: - 새 컴포넌트 등록 (각 4개 파일: Component, ConfigPanel, Renderer, index) - UnifiedPropertiesPanel에 인라인 설정 UI 추가 (280줄) - DetailSettingsPanel ConfigPanel 인터페이스 통일화 (config → componentConfig) - getComponentConfigPanel에 동적 import 매핑 추가 - 기존 컴포넌트 타입 정리 (autocomplete, entity-search, modal-repeater) 특징: - shadcn/ui 기반 일관된 디자인 시스템 준수 - 중첩 박스 금지 원칙 적용 - 반응형 지원 (모바일 우선) - collapsible 기능 지원 (Section Card) |
||
|---|---|---|
| .. | ||
| AutocompleteSearchInputComponent.tsx | ||
| AutocompleteSearchInputConfigPanel.tsx | ||
| AutocompleteSearchInputRenderer.tsx | ||
| README.md | ||
| index.ts | ||
| types.ts | ||
README.md
AutocompleteSearchInput 컴포넌트
자동완성 드롭다운 방식의 엔티티 검색 입력 컴포넌트입니다.
특징
- 타이핑하면 즉시 드롭다운 표시
- 빈 값일 때 전체 목록 조회
- 추가 정보 표시 가능
- X 버튼으로 선택 초기화
- 외부 클릭 시 자동 닫힘
사용 예시
<AutocompleteSearchInputComponent
tableName="customer_mng"
displayField="customer_name"
valueField="customer_code"
searchFields={["customer_name", "customer_code"]}
placeholder="거래처명 입력"
showAdditionalInfo
additionalFields={["customer_code", "address"]}
value={selectedCode}
onChange={(code, fullData) => {
console.log("선택됨:", code, fullData);
}}
/>
설정 옵션
tableName: 검색할 테이블명displayField: 표시할 필드valueField: 값으로 사용할 필드searchFields: 검색 대상 필드들placeholder: 플레이스홀더showAdditionalInfo: 추가 정보 표시 여부additionalFields: 추가로 표시할 필드들