fix: 인풋 id 하이드레이션 에러 수정

sosow0212 · Oct 29, 2024 · 5373ce3 · 5373ce3
1 parent 55f3d0c
commit 5373ce3
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 4 deletions.
diff --git a/frontend/src/app/add-shows/_components/add-shows-form.tsx b/frontend/src/app/add-shows/_components/add-shows-form.tsx
@@ -28,7 +28,7 @@ export default function AddShowsForm() {
     formState: { errors, isDirty, isValid },
   } = useForm<ShowType>({
     resolver: zodResolver(addShowForm),
-    mode: "onBlur",
+    mode: "all",
     defaultValues: {
       title: "",
       description: "",

diff --git a/frontend/src/app/add-shows/_components/basic-info.tsx b/frontend/src/app/add-shows/_components/basic-info.tsx
@@ -45,7 +45,7 @@ export default function BasicInfo({ register, errors }: BasicInfoProps) {
 
       <Input
         label="입장료"
-        type="number"
+        type="text"
         className="flex h-58 w-351 items-start gap-10 rounded-6 border bg-white p-16 lg:w-full"
         placeholder="입장료를 입력해주세요"
         {...register("fee", { valueAsNumber: true })}

diff --git a/frontend/src/components/common/input/index.tsx b/frontend/src/components/common/input/index.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { clsx } from "clsx";
-import { ComponentProps, forwardRef, useState } from "react";
+import { ComponentProps, forwardRef, useId, useState } from "react";
 import { MdOutlineVisibility, MdOutlineVisibilityOff } from "react-icons/md";
 
 import { useToggle } from "@/hooks";
@@ -38,7 +38,8 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
   ) => {
     const [inputType, setInputType] = useState(type);
     const { value: isVisible, handleToggle } = useToggle();
-    const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
+    const generatedId = useId();
+    const inputId = id || `input-${generatedId}`;
 
     const handleClickVisible = () => {
       handleToggle();