feature: implements FormFactory

Room-Fit · Nov 21, 2024 · f65d079 · f65d079
1 parent 3d1eddc
commit f65d079
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 50 deletions.
diff --git a/src/@types/index.d.ts b/src/@types/index.d.ts
diff --git a/src/components/forms/CheckBoxWithLabelForm.tsx b/src/components/forms/CheckBoxWithLabelForm.tsx
@@ -1,10 +1,10 @@
 import { Checkbox } from "@/components/ui/checkbox";
 
-import { FormState, Question } from "./Form";
+import { FormState, Question } from "./FormRenderer";
 
 // prettier-ignore
 export type CheckBoxWithLabelFormProps = 
-    Omit<Question<string>, "questionType" | "dataType"> &
+    Omit<Question, "questionType" | "dataType"> &
     FormState;
 
 export const CheckBoxWithLabelForm = ({
@@ -24,7 +24,9 @@ export const CheckBoxWithLabelForm = ({
                             data-testid={`checkbox_${option}`}
                             id={`checkbox_${option}`}
                             className="block w-5 h-5"
-                            checked={(formState[questionText] as Array<string>).includes(option)}
+                            checked={(formState[questionText] as Array<string>).includes(
+                                option as string,
+                            )}
                             onCheckedChange={(isChecked) => {
                                 if (isChecked) {
                                     setFormState({
@@ -44,7 +46,7 @@ export const CheckBoxWithLabelForm = ({
                                 }
                             }}
                         />
-                        <label htmlFor={`checkbox_${option}`}>{option}</label>
+                        <label htmlFor={`checkbox_${option}`}>{option as string}</label>
                     </div>
                 );
             })}

diff --git a/src/components/forms/Form.tsx b/src/components/forms/Form.tsx
diff --git a/src/components/forms/FormFactory.tsx b/src/components/forms/FormFactory.tsx
@@ -1,7 +1,6 @@
 import { CheckBoxWithLabelForm } from "./CheckBoxWithLabelForm";
-import { QuestionTypes } from "./Form";
+import { QuestionTypes } from "./FormRenderer";
 import { SelectorWithLabelForm } from "./SelectorWithLabelForm";
-import { DoubleSliderWithLabelForm, SliderWithLabelForm } from "./SliderWithLabelForm";
 
 export interface FormFactoryProps {
     questionType: keyof typeof QuestionTypes;
@@ -10,9 +9,9 @@ export interface FormFactoryProps {
 export const FormFactory = ({ questionType }: FormFactoryProps) => {
     const FormElements = {
         [QuestionTypes.selector]: SelectorWithLabelForm,
-        [QuestionTypes.slider]: SliderWithLabelForm,
-        [QuestionTypes.doubleSlider]: DoubleSliderWithLabelForm,
         [QuestionTypes.checkbox]: CheckBoxWithLabelForm,
+        // [QuestionTypes.slider]: SliderWithLabelForm,
+        // [QuestionTypes.doubleSlider]: DoubleSliderWithLabelForm,
     };
 
     return FormElements[questionType];

diff --git a/src/components/forms/SelectorWithLabelForm.tsx b/src/components/forms/SelectorWithLabelForm.tsx
@@ -8,11 +8,11 @@ import {
     SelectValue,
 } from "@/components/ui/select";
 
-import { FormState, Question } from "./Form";
+import { FormState, Question } from "./FormRenderer";
 
 // prettier-ignore
 export type SelectorWithLabelFormProps = 
-    Omit<Question<string>, "questionType" | "dataType"> &
+    Omit<Question, "questionType" | "dataType"> &
     FormState
 
 export const SelectorWithLabelForm = ({
@@ -33,22 +33,22 @@ export const SelectorWithLabelForm = ({
                 onValueChange={(value) =>
                     setFormState({
                         ...formState,
-                        [questionText]: value,
+                        [questionText]: [value],
                     })
                 }
             >
                 <SelectTrigger className="w-full rounded-xl" asChild={false}>
-                    <SelectValue placeholder="옵션을 선택해주세요" />
+                    <SelectValue placeholder="옵션을 선택해주세요"></SelectValue>
                 </SelectTrigger>
                 <SelectContent id={htmlFor}>
                     {options.map((option, index) => {
                         return (
                             <SelectItem
                                 key={index}
-                                value={option}
+                                value={option as string}
                                 data-testid={`select-options_${option}`}
                             >
-                                {option}
+                                {option as string}
                             </SelectItem>
                         );
                     })}