LookUp

읽기 전용 입력 필드와 검색 버튼으로 구성된 조회 컨트롤

개요

Cals LookUp은 원본 Vue QSLookUp 컴포넌트를 React로 재구현한 것으로, 입력 필드에 직접 타이핑할 수 없고 검색 버튼 클릭을 통해 외부에서 값을 설정하는 패턴의 컨트롤입니다.

주요 특징

• ✅ 읽기 전용 입력: 입력 필드는 항상 disabled, 값은 외부에서 설정
• ✅ 검색 버튼: 클릭 시 onClick 핸들러 호출
• ✅ FormItem 래핑: label, required, error 등 폼 레이블 지원
• ✅ 커스텀 스타일: 배경색, 텍스트 색상, 테두리 등 스타일 오버라이드
• ✅ 가시성 제어: visible prop으로 선언적 표시/숨김
• ✅ 레이블 도움말: labelTooltip으로 도움말 아이콘 표시

기본 사용

value prop으로 표시할 값을 지정하고, onClick으로 검색 동작을 정의합니다.

<LookUp value="ITEM-001" onClick={() => alert("검색 클릭")} />

비활성화 (disabled)

disabled=true이면 검색 버튼이 비활성화됩니다.

<LookUp value="읽기 전용" disabled />
<LookUp placeholder="비활성화" disabled />

Placeholder

빈 상태에서 안내 텍스트를 표시합니다. showPlaceholder=false로 숨길 수 있습니다.

<LookUp placeholder="항목을 검색하세요" />
<LookUp placeholder="이 텍스트는 표시되지 않음" showPlaceholder={false} />

FormItem 래핑

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

<LookUp label="품목 코드" value="A-100" />
<LookUp label="필수 항목" required placeholder="필수 입력" />
<LookUp label="에러 상태" error="값을 선택해주세요" />

레이블 도움말 (labelTooltip)

레이블 옆에 도움말 아이콘을 표시합니다.

<LookUp
  label="거래처"
  labelTooltip="거래처 코드를 검색하여 선택합니다"
  value="V-200"
/>

크기 (size)

size prop으로 InputGroup 크기를 변경합니다.

<LookUp size="xs" value="XS" />
<LookUp size="sm" value="SM" />
<LookUp size="md" value="MD" />
<LookUp size="lg" value="LG" />
<LookUp size="xl" value="XL" />

커스텀 스타일

backgroundColor, color, borderColor 등의 prop으로 스타일을 지정합니다.

<LookUp value="배경색" backgroundColor="#fee2e2" />
<LookUp value="텍스트 색상" color="#2563eb" />
<LookUp value="테두리" borderColor="#ef4444" borderWidth="2px" />

가시성 제어 (visible)

visible prop으로 선언적으로 표시/숨김을 제어합니다.

<LookUp value="보이는 데이터" visible={true} />
<LookUp value="숨겨진 데이터" visible={false} />

API Reference

Props

Ref

접근성

권장 사항

• ✅ 검색 버튼에 aria-label="검색"이 자동 설정됨
• ✅ InputGroup이 role="group"을 가짐 (Foundation 보증)
• ✅ FormItem label과 컨트롤이 올바르게 연결됨
• ❌ 중요 정보를 color만으로 전달하지 않기 (색맹 고려)

관련 컴포넌트

• Input: 직접 입력 가능한 텍스트 입력 컴포넌트
• Select: 드롭다운 선택 컴포넌트