Merge pull request #20 from Team-Sttock/feature/common-components

DropdownField 컴포넌트 구현

Author: spolice0324

.eslintrc.json

@@ -17,12 +17,14 @@
     "simple-import-sort/exports": "error",
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/strict-boolean-expressions": "off",
     "react/jsx-props-no-spreading": "off",
     "consistent-return": "off",
     "@typescript-eslint/no-misused-promises": [2, {
       "checksVoidReturn": {
         "attributes": false
       }
-    }]
+    }],
+    "@next/next/no-img-element": "off"
   }
 }

.pnp.cjs

@@ -0,0 +1,66 @@
+import { CheckIcon } from '@heroicons/react/20/solid'
+import React, { useId } 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 CustomOption = ({ innerProps, data, isSelected }: any) => {
+  return (
+    <div
+      {...innerProps}
+      className="px-2 py-2 flex items-center justify-between hover:bg-beige"
+    >
+      {data.label} {isSelected && <CheckIcon className="w-6 h-6"></CheckIcon>}
+    </div>
+  )
+}
+
+const DropdownField: React.FC<DropdownFieldProps> = ({
+  name,
+  control,
+  options,
+}) => {
+  const id = useId()
+  return (
+    <div>
+      <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: '#0f0e0d',
+              },
+            })}
+            className="border border-beige text-dark-brown"
+            components={{ Option: CustomOption }}
+            instanceId={id}
+          />
+        )}
+      />
+    </div>
+  )
+}
+
+export default DropdownField

.yarn/cache/@babel-code-frame-npm-7.22.13-2782581d20-22e342c807.zip

@@ -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"
   },

.yarn/cache/@babel-helper-module-imports-npm-7.22.15-687e77ee50-ecd7e457df.zip

@@ -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>
+  )
+}