refactor: SelectorWithLabelForm to fit into Question Schema

src/components/forms/SelectorWithLabelForm.tsx

@@ -1,3 +1,5 @@
+import { useId } from "react";
+
 import {
     Select,
     SelectContent,
@@ -6,37 +8,47 @@ import {
     SelectValue,
 } from "@/components/ui/select";
 
-import { SelectProps } from "@radix-ui/react-select";
-
-export type SelectorItem = {
-    value: string;
-    label: string;
-};
+import { FormState, Question } from "./Form";
 
-export interface SelectorProps extends SelectProps {
-    label: string;
-    items: SelectorItem[];
-    placeholder: string;
-}
+// prettier-ignore
+export type SelectorWithLabelFormProps = 
+    Omit<Question<string>, "questionType" | "dataType"> &
+    FormState
 
 export const SelectorWithLabelForm = ({
-    label,
-    items,
-    placeholder,
-    ...selectProps
-}: SelectorProps) => {
+    questionText,
+    options,
+    formState,
+    setFormState,
+}: SelectorWithLabelFormProps) => {
+    const htmlFor = useId();
+
     return (
-        <div>
-            <p className="py-1 font-bold">{label}</p>
-            <Select {...selectProps}>
-                <SelectTrigger className="w-full rounded-xl">
-                    <SelectValue placeholder={placeholder} />
+        <div data-testid="selector-with-label-form">
+            <label className="py-1 font-bold" htmlFor={htmlFor}>
+                {questionText}
+            </label>
+            <Select
+                value={formState[questionText] as string}
+                onValueChange={(value) =>
+                    setFormState({
+                        ...formState,
+                        [questionText]: value,
+                    })
+                }
+            >
+                <SelectTrigger className="w-full rounded-xl" asChild={false}>
+                    <SelectValue placeholder="옵션을 선택해주세요" />
                 </SelectTrigger>
-                <SelectContent>
-                    {items.map((item, index) => {
+                <SelectContent id={htmlFor}>
+                    {options.map((option, index) => {
                         return (
-                            <SelectItem key={index} value={item.value}>
-                                {item.label}
+                            <SelectItem
+                                key={index}
+                                value={option}
+                                data-testid={`select-options_${option}`}
+                            >
+                                {option}
                             </SelectItem>
                         );
                     })}