Select

Select

Select 컴포넌트입니다. 옵션 선택이 가능한 버튼 기반 드롭다운 UI를 제공합니다.

🛠️ Props

Props 이름	타입	기본값	설명
label	string(optional)	❌	버튼과 함께 렌더링할 label 요소의 값을 전달
options	{ label: string; value: string }[]	❌	드롭다운에 표시할 옵션 리스트
value	string(optional)	❌	현재 선택된 옵션의 value 값
onValueChange	(value: string) => void(optional)	❌	옵션 선택 시 호출할 콜백 함수
placeholder	string(optional)	"선택"	아무 값도 선택되지 않았을 때 버튼에 표시할 텍스트
fullWidth	boolean(optional)	❌	부모 요소 기준, 버튼 너비를 100%로 설정
size	"lg" | "sm" (optional)	"lg"	버튼의 padding, 텍스트 크기를 제어
className	string(optional)	❌	버튼과 드롭다운을 감싸는 wrapper 요소에 추가할 className
그 외	...	...	기본 button의 props를 모두 사용할 수 있음

🎨 UI 테스트

(아래 예시에 사용된 설정)

const [selectedValue1, setSelectedValue1] = useState("");
const [selectedValue2, setSelectedValue2] = useState("");
const [selectedValue3, setSelectedValue3] = useState("");
const [selectedValue4, setSelectedValue4] = useState("");
const [selectedValue5, setSelectedValue5] = useState("");
const [selectedValue6, setSelectedValue6] = useState("");
const [selectedValue7, setSelectedValue7] = useState("");
const [selectedValue8, setSelectedValue8] = useState("");

const options = [
  { label: "옵션 1", value: "1" },
  { label: "옵션 2", value: "2" },
  { label: "옵션 3", value: "3" },
];

기본 사용 예시

<Select
  placeholder="선택하세요"
  options={options}
  value={selectedValue1}
  onValueChange={setSelectedValue1}
/>

다양한 사이즈

<Select
  size="lg"
  placeholder="선택하세요"
  options={options}
  value={selectedValue2}
  onValueChange={setSelectedValue2}
/>
<Select
  size="sm"
  placeholder="선택하세요"
  options={options}
  value={selectedValue3}
  onValueChange={setSelectedValue3}
/>

라벨 유무

<Select
  label="옵션 선택"
  placeholder="선택하세요"
  options={options}
  value={selectedValue4}
  onValueChange={setSelectedValue4}
/>
<Select
  placeholder="선택하세요"
  options={options}
  value={selectedValue5}
  onValueChange={setSelectedValue5}
/>

fullWidth 적용

<Select
  fullWidth
  placeholder="부모 너비 100%"
  options={options}
  value={selectedValue8}
  onValueChange={setSelectedValue8}
/>

기본 값 설정

const [controlledValue, setControlledValue] = useState("2");

<Select
  value={controlledValue}
  onValueChange={setControlledValue}
  options={options}
/>

🔥 실제 서비스에서의 사용 방법

주소지 선택

import { SeoulDistricts } from "../types";

export default function Example() {
  const seoulDistrictOptions = SeoulDistricts.map((district) => ({
    label: district,
    value: district,
  }));

  const [selectedAddress, setSelectedAddress] = useState<string | undefined>();

  return (
    <Select
      label="주소*"
      options={seoulDistrictOptions}
      value={selectedAddress}
      onValueChange={setSelectedAddress}
      className="w-[472px]"
    />
  )
}

정렬기준 선택

export default function Example() {
  const sortingOptions = [
    { label: "마감임박순", value: "time" },
    { label: "시급높은순", value: "pay" },
    { label: "시간적은순", value: "hour" },
    { label: "가나다순", value: "shop" },
  ];

  const [selectedSorting, setSelectedSorting] = useState<string>(sortingOptions[0]?.value);
  
  return (
    <Select
      options={sortingOptions}
      value={selectedSorting}
      onValueChange={setSelectedSorting}
      size="sm"
    />
  )
}

✅ 확인사항

• value와 onValueChange는 함께 사용하면 컨트롤드 컴포넌트처럼 동작합니다.
• placeholder는 value가 없는 경우에만 표시됩니다.
• 옵션 리스트는 반드시 { label, value } 형태여야 합니다.
• 옵션창 외의 공간을 누르면 옵션창이 자동으로 닫힙니다.