DropdownField 컴포넌트 구현

features/common/components/DropdownField.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import { type Control, Controller } from 'react-hook-form'
+import Select from 'react-select'
+
+interface Option {
+  value: string
+  label: string
+}
+
+interface DropdownFieldProps {
+  label: string
+  name: string
+  control: Control<any>
+  options: Option[]
+}
+
+const DropdownField: React.FC<DropdownFieldProps> = ({
+  label,
+  name,
+  control,
+  options,
+}) => {
+  return (
+    <div>
+      <label>{label}</label>
+      {/* figma 내에서는 존재하지 않는 요소, 확인용으로 첨부 */}
+      <Controller
+        name={name}
+        control={control}
+        render={({ field: { onChange, value, ref } }) => (
+          <Select
+            options={options}
+            ref={ref}
+            onChange={onChange}
+            value={options.find((option) => option.value === value)}
+            placeholder=""
+            theme={(theme) => ({
+              ...theme,
+              borderRadius: 0,
+              colors: {
+                ...theme.colors,
+                primary25: '#ebe4d9',
+                primary: '#665a48',
+              },
+            })}
+            className="border border-beige text-dark-brown "
+          />
+        )}
+      />
+    </div>
+  )
+}
+
+export default DropdownField

package.json

@@ -23,6 +23,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.45.4",
+    "react-select": "^5.7.4",
     "tailwindcss": "3.3.3",
     "typescript": "5.1.6"
   },

pages/test.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { useForm } from 'react-hook-form'
+
+import Button from '@/features/common/components/Button'
+import DropdownField from '@/features/common/components/DropdownField'
+
+export default function Page() {
+  const options = [
+    { value: '생활용품', label: '생활용품' },
+    { value: '욕실용품', label: '욕실용품' },
+  ]
+
+  const { control, handleSubmit } = useForm()
+  const onSubmit = (data: any) => {
+    console.log(data)
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <DropdownField
+        label="category"
+        name="product-category"
+        control={control}
+        options={options}
+      />
+      <Button className="mt-6 h-12 w-full" type="submit">
+        submit
+      </Button>
+    </form>
+  )
+}