refactor: SliderWithLabelForm to fit into Question Schema

src/components/forms/SliderWithLabelForm.tsx

@@ -1,55 +1,47 @@
-import { useEffect, useState } from "react";
-
 import { Slider } from "@/components/ui/slider";
 
-export interface SliderWithLabelFormProps {
-    label: string;
-    minLabel: string;
-    maxLabel: string;
+import { FormState, Question } from "./FormRenderer";
 
-    minValue: number;
-    maxValue: number;
-    step: number;
+// prettier-ignore
+export type SliderWithLabelFormProps = 
+    Omit<Question, "questionType" | "dataType"> &
+    FormState;
 
-    value: number[];
-    onChange: (value: number[]) => void;
-}
+/**
+ * 기본 인자
+ */
 
 export const SliderWithLabelForm = ({
-    label,
-    minLabel,
-    maxLabel,
-    minValue,
-    maxValue,
-    step,
-
-    value,
-    onChange,
+    questionText,
+    options,
+    formState,
+    setFormState,
 }: SliderWithLabelFormProps) => {
-    const [sliderValue, setSliderValue] = useState<number[]>(value);
-
-    useEffect(
-        function onSliderValueChange() {
-            onChange(sliderValue);
-        },
-        [sliderValue],
-    );
+    const min = options[0];
+    const max = options[options.length - 1];
 
     return (
         <div>
-            <p className="font-bold">{label}</p>
+            <p className="font-bold">{questionText}</p>
             <div className="px-2">
                 <Slider
+                    data-testid="slider-with-label-form"
                     className="pt-4 text-gray-500"
-                    value={sliderValue}
-                    onValueChange={setSliderValue}
-                    min={minValue}
-                    max={maxValue}
-                    step={step}
+                    defaultValue={[formState[questionText][0].value]}
+                    value={[formState[questionText][0].value]}
+                    onValueChange={(value) => {
+                        setFormState({
+                            ...formState,
+                            [questionText]: [{ value: value[0] }],
+                        });
+                    }}
+                    min={min.value}
+                    max={max.value}
+                    step={1}
                 />
                 <div className="flex justify-between my-1">
-                    <span className="text-sm text-gray-500">{minLabel}</span>
-                    <span className="text-sm text-gray-500">{maxLabel}</span>
+                    <span className="text-sm text-gray-500">{min.label}</span>
+                    <span className="text-sm text-gray-500">{max.label}</span>
                 </div>
             </div>
         </div>

src/components/forms/__test__/SliderWithLabelForm.test.tsx

@@ -0,0 +1,50 @@
+import { SetStateAction } from "react";
+
+import { FormProps, FormState, Option } from "../FormRenderer";
+import { SliderWithLabelForm } from "../SliderWithLabelForm";
+import { render, screen } from "@testing-library/react";
+
+describe("<SliderWithLabelForm/>", () => {
+    const formState = {
+        "test-question-slider": [{ value: 2 }],
+    };
+    const setFormState = jest.fn();
+
+    const options = [
+        { label: "label1", value: 1 },
+        { label: "label2", value: 2 },
+        { label: "label3", value: 3 },
+    ];
+
+    beforeAll(() => {
+        global.ResizeObserver = class ResizeObserver {
+            observe() {}
+            unobserve() {}
+            disconnect() {}
+        };
+    });
+
+    beforeEach(() => {
+        render(
+            <SliderWithLabelForm
+                questionText={"test-question-slider"}
+                options={options}
+                formState={formState}
+                setFormState={setFormState}
+            />,
+        );
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    test("should render Container properly", () => {
+        expect(screen.getByTestId("slider-with-label-form")).toBeInTheDocument();
+    });
+
+    test("should render min, max label properly", () => {
+        expect(screen.getByText("label1")).toBeInTheDocument();
+        expect(screen.getByText("label3")).toBeInTheDocument();
+    });
+});