Collection

배열 데이터의 보유 여부를 표시하고 룩업 팝업으로 항목을 선택하는 컬렉션 조회 컨트롤

개요

컬렉션(배열) 값을 직접 편집하지 않고, 보유 여부 텍스트(Collections/Empty)를 읽기 전용으로 표시하며 검색 버튼 클릭을 통해 룩업 팝업에서 항목 배열을 선택하는 패턴의 컨트롤입니다.

주요 특징

• ✅ 보유 여부 표시: 배열 값 존재 시 Collections, 없으면 Empty 표시 (텍스트 커스터마이징 가능)
• ✅ 룩업 팝업 열기: 컨테이너/검색 아이콘 클릭 시 onClick 호출 (또는 renderContent 모달)
• ✅ 선택 결과 반영: 룩업에서 선택한 항목 배열이 onChange로 반영
• ✅ 선택 초기화: clearable X 버튼 클릭 시 빈 배열로 초기화
• ✅ FormItem 래핑: label, required, error 등 폼 레이블 지원
• ✅ 커스텀 스타일 / 가시성 제어: 토큰 오버라이드, visible prop 지원

기본 사용

value 배열의 존재 여부에 따라 보유/미보유 텍스트가 표시됩니다.

<Collection value={[{ id: 1 }, { id: 2 }]} /> {/* Collections */}
<Collection value={[]} /> {/* Empty */}

커스텀 텍스트

hasDataText / emptyText로 표시 텍스트를 변경할 수 있습니다.

<Collection value={[1, 2, 3]} hasDataText="3건 보유" />
<Collection value={[]} emptyText="데이터 없음" />

룩업 팝업 열기 (심플 모드)

컨테이너 또는 검색 아이콘 클릭 시 onClick이 호출됩니다. 외부에서 룩업 팝업을 직접 구현하고, 선택 결과를 onChange 또는 value로 반영하는 패턴입니다.

<Collection value={[]} onClick={() => openLookupPopup()} />

고급 모드: renderContent를 지정하면 Foundation Lookup의 모달 기반 동작을 사용합니다. 모달에서 select(items)를 호출하면 선택된 항목 배열이 onChange로 반영됩니다.

선택 초기화 (clearable)

값 보유 상태에서 X 버튼이 노출되며, 클릭하면 onChange([])로 빈 배열이 반영됩니다.

const [items, setItems] = useState<number[]>([1, 2, 3])
 
<Collection value={items} onChange={setItems} clearable />

비활성화 (disabled)

<Collection value={[1]} disabled />
<Collection value={[]} disabled />

FormItem 래핑

label, required, error 등 FormItem props를 지원합니다.

<Collection label="첨부 컬렉션" value={[1]} />
<Collection label="필수 항목" required value={[]} />
<Collection label="에러 상태" error="컬렉션을 선택해주세요" value={[]} />

Props

관련 컴포넌트

• LookUp - 단일 값 조회 컨트롤 (Collection은 배열 값 특화 변형)