diff --git a/src/components/commons/Input/index.tsx b/src/components/commons/Input/index.tsx
index f60e2bf..ed8c793 100644
--- a/src/components/commons/Input/index.tsx
+++ b/src/components/commons/Input/index.tsx
@@ -22,13 +22,14 @@ export default function Input({
id,
label,
placeholder,
- text,
- setText,
font = "body-5",
iconType = "text",
iconSize = 18,
isRequired = false,
className = "",
+ text,
+ setText,
+ register,
}: InputProps) {
const [isVisible, setIsVisible] = useState(false);
@@ -66,12 +67,11 @@ export default function Input({
id={id}
className={typeClasses}
placeholder={placeholder}
- value={text}
- onChange={e => setText(e.target.value)}
type={
iconType === "password" ? (isVisible ? "text" : "password") : "text"
}
autoComplete='off'
+ {...register}
/>
{iconType === "text" ? (
setText("")}
+ style={{ display: text?.length === 0 ? "none" : "block" }}
+ onClick={() => setText && setText("phone", "")}
/>
);
}
diff --git a/src/types/components/commons/input/index.ts b/src/types/components/commons/input/index.ts
index 39949c1..ba5397e 100644
--- a/src/types/components/commons/input/index.ts
+++ b/src/types/components/commons/input/index.ts
@@ -1,15 +1,18 @@
+import { PhoneSignInForm } from "@/app/(auth)/sign-in/phone/page";
import { FontSizeType } from "@/constants/design";
+import { UseFormRegisterReturn, UseFormSetValue } from "react-hook-form";
export interface InputProps {
type: "default" | "error";
id: string;
label: string;
placeholder: string;
- text: string;
- setText: (text: string) => void;
font?: FontSizeType;
iconType?: "text" | "password";
iconSize?: number;
isRequired?: boolean;
className?: string;
+ text?: string;
+ setText?: UseFormSetValue;
+ register?: UseFormRegisterReturn;
}
diff --git a/src/types/components/commons/input/inputDeleteIcon.ts b/src/types/components/commons/input/inputDeleteIcon.ts
index e42f5a4..a1cd030 100644
--- a/src/types/components/commons/input/inputDeleteIcon.ts
+++ b/src/types/components/commons/input/inputDeleteIcon.ts
@@ -1,5 +1,8 @@
+import { PhoneSignInForm } from "@/app/(auth)/sign-in/phone/page";
+import { UseFormSetValue } from "react-hook-form";
+
export interface InputDeleteIconProps {
iconSize: number;
- text: string;
- setText: (text: string) => void;
+ text: string | undefined;
+ setText: UseFormSetValue | undefined;
}
From b7018edba184ea79d6afa3c379903e44bcd7e073 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=83=80=EB=9E=98?=
<85001878+meowTarae@users.noreply.github.com>
Date: Mon, 14 Jul 2025 20:44:20 +0900
Subject: [PATCH 11/16] =?UTF-8?q?Typo(#17):=20icon=20=EC=98=A4=EA=B8=B0?=
=?UTF-8?q?=EC=9E=AC=EB=90=9C=20=EA=B2=BD=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/commons/Input/inputVisibleIcon.tsx | 4 +---
1 file changed, 1 insertion(+), 3 deletions(-)
diff --git a/src/components/commons/Input/inputVisibleIcon.tsx b/src/components/commons/Input/inputVisibleIcon.tsx
index 98b50bb..f66709c 100644
--- a/src/components/commons/Input/inputVisibleIcon.tsx
+++ b/src/components/commons/Input/inputVisibleIcon.tsx
@@ -6,9 +6,7 @@ export default function InputVisibleIcon({
isVisible,
setIsVisible,
}: InputVisibleIconProps) {
- const iconSrc = isVisible
- ? "./icons/eyeCrossLine.svg"
- : "./icons/eyeOpen.svg";
+ const iconSrc = isVisible ? "/icons/eyeCrossLine.svg" : "/icons/eyeOpen.svg";
return (
Date: Mon, 14 Jul 2025 20:45:14 +0900
Subject: [PATCH 12/16] =?UTF-8?q?Feat(#17):=20rhf=20=EB=A5=BC=20=EC=A0=81?=
=?UTF-8?q?=EC=9A=A9=ED=95=9C=20=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=20Inp?=
=?UTF-8?q?ut=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/app/(auth)/sign-in/phone/page.tsx | 51 +++++++++++++--------------
1 file changed, 24 insertions(+), 27 deletions(-)
diff --git a/src/app/(auth)/sign-in/phone/page.tsx b/src/app/(auth)/sign-in/phone/page.tsx
index b9c6324..3b6acf3 100644
--- a/src/app/(auth)/sign-in/phone/page.tsx
+++ b/src/app/(auth)/sign-in/phone/page.tsx
@@ -22,6 +22,7 @@ export default function PhoneSignInPage() {
});
const phoneValue = watch("phone") || "";
+ const passwordValue = watch("password") || "";
const isPhoneError = phoneValue.length > 0 && /\D/.test(phoneValue);
const onSubmit = (data: PhoneSignInForm) => {
@@ -35,6 +36,7 @@ export default function PhoneSignInPage() {
>
전화번호로 시작하기
+ {/* 전화번호 */}
-
-
- {errors.password && (
-
- {errors.password.message}
-
- )}
-