From 5373ce37b239f15f8f3676b6c626c38b2420c915 Mon Sep 17 00:00:00 2001
From: Han-wo <hansw98@naver.com>
Date: Tue, 29 Oct 2024 23:56:59 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=9D=B8=ED=92=8B=20id=20=ED=95=98?=
 =?UTF-8?q?=EC=9D=B4=EB=93=9C=EB=A0=88=EC=9D=B4=EC=85=98=20=EC=97=90?=
 =?UTF-8?q?=EB=9F=AC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/app/add-shows/_components/add-shows-form.tsx | 2 +-
 frontend/src/app/add-shows/_components/basic-info.tsx     | 2 +-
 frontend/src/components/common/input/index.tsx            | 5 +++--
 3 files changed, 5 insertions(+), 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
index 29a18ee..8be619f 100644
--- 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
index 6bea49b..b5b22b7 100644
--- 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
index f90e8ee..b277323 100644
--- 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();