From 1382e4940e9e496b03e403b9a6ec9530e7cc981b Mon Sep 17 00:00:00 2001
From: ImxYJL <allensain14@gmail.com>
Date: Mon, 9 Dec 2024 22:16:20 +0900
Subject: [PATCH 1/3] =?UTF-8?q?refactor:=20url=20=EC=83=9D=EC=84=B1=20?=
 =?UTF-8?q?=ED=8F=BC=EC=9D=98=20=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=20inp?=
 =?UTF-8?q?ut=EC=97=90=20=EB=8C=80=ED=95=9C=20=EC=97=90=EB=9F=AC=20?=
 =?UTF-8?q?=EB=A9=94=EC=84=B8=EC=A7=80=20=ED=8A=B8=EB=A6=AC=EA=B1=B0=20?=
 =?UTF-8?q?=EC=9D=B4=EB=B2=A4=ED=8A=B8=EB=A5=BC=20onChange=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/hooks/usePasswordValidation.ts   | 20 ++++++-------------
 .../components/Inputs/PasswordField.tsx       |  9 +--------
 2 files changed, 7 insertions(+), 22 deletions(-)

diff --git a/frontend/src/hooks/usePasswordValidation.ts b/frontend/src/hooks/usePasswordValidation.ts
index 2759ff345..ed1a2efb6 100644
--- a/frontend/src/hooks/usePasswordValidation.ts
+++ b/frontend/src/hooks/usePasswordValidation.ts
@@ -12,13 +12,12 @@ const PASSWORD_LENGTH_ERROR_MESSAGE = `${MIN_PASSWORD_INPUT}자부터 ${MAX_PASS
 
 const usePasswordValidation = (password: string) => {
   const [passwordErrorMessage, setPasswordErrorMessage] = useState('');
-  const [isBlurredOnce, setIsBlurredOnce] = useState(false);
-
-  const initializeIsBlurredOnce = () => {
-    setIsBlurredOnce(false);
-  };
 
   const validatePassword = () => {
+    if (!password) {
+      setPasswordErrorMessage('');
+      return;
+    }
     if (!isWithinLengthRange(password, MAX_PASSWORD_INPUT, MIN_PASSWORD_INPUT)) {
       return setPasswordErrorMessage(PASSWORD_LENGTH_ERROR_MESSAGE);
     }
@@ -28,19 +27,12 @@ const usePasswordValidation = (password: string) => {
     return setPasswordErrorMessage('');
   };
 
-  const handlePasswordBlur = () => {
-    setIsBlurredOnce(true);
-    validatePassword();
-  };
-
   useEffect(() => {
-    if (isBlurredOnce) validatePassword();
-  }, [password, isBlurredOnce]);
+    validatePassword();
+  }, [password]);
 
   return {
     passwordErrorMessage,
-    handlePasswordBlur,
-    initializeIsBlurredOnce,
   };
 };
 
diff --git a/frontend/src/pages/HomePage/components/Inputs/PasswordField.tsx b/frontend/src/pages/HomePage/components/Inputs/PasswordField.tsx
index a8bc9082d..46d695d7e 100644
--- a/frontend/src/pages/HomePage/components/Inputs/PasswordField.tsx
+++ b/frontend/src/pages/HomePage/components/Inputs/PasswordField.tsx
@@ -1,5 +1,3 @@
-import { useEffect } from 'react';
-
 import { EyeButton, Input } from '@/components';
 import { useEyeButton, usePasswordValidation } from '@/hooks';
 import { MAX_PASSWORD_INPUT, MIN_PASSWORD_INPUT } from '@/pages/HomePage/utils/validateInput';
@@ -12,11 +10,7 @@ import { InputField } from '.';
 
 const PasswordField = ({ id, value: password, setValue: setPassword }: InputValueProps) => {
   const { isOff, handleEyeButtonToggle } = useEyeButton();
-  const { passwordErrorMessage, handlePasswordBlur, initializeIsBlurredOnce } = usePasswordValidation(password);
-
-  useEffect(() => {
-    initializeIsBlurredOnce();
-  }, [initializeIsBlurredOnce]);
+  const { passwordErrorMessage } = usePasswordValidation(password);
 
   return (
     <InputField
@@ -29,7 +23,6 @@ const PasswordField = ({ id, value: password, setValue: setPassword }: InputValu
         <Input
           id={id}
           value={password}
-          onBlur={handlePasswordBlur}
           type={isOff ? 'password' : 'text'}
           $style={{ width: '100%', paddingRight: '3rem' }}
           onChange={(event) => {

From edf7e9e2f71279257340af1ce46446f7cfd41d9f Mon Sep 17 00:00:00 2001
From: ImxYJL <allensain14@gmail.com>
Date: Mon, 9 Dec 2024 22:29:09 +0900
Subject: [PATCH 2/3] =?UTF-8?q?refactor:=20=ED=8F=BC=EC=9D=98=20setState?=
 =?UTF-8?q?=20=ED=95=A8=EC=88=98=EB=A5=BC=20Wrapper=EB=A1=9C=20=EA=B0=90?=
 =?UTF-8?q?=EC=8B=B8=EB=8A=94=20=ED=98=95=ED=83=9C=EB=A1=9C=EB=A1=9C=20?=
 =?UTF-8?q?=EC=9E=90=EC=8B=9D=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?=
 =?UTF-8?q?=EC=97=90=EA=B2=8C=20=EC=A0=84=EB=8B=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../HomePage/components/Inputs/InputField.tsx      |  4 +---
 .../HomePage/components/URLGeneratorForm/index.tsx | 14 +++++++++++---
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/HomePage/components/Inputs/InputField.tsx b/frontend/src/pages/HomePage/components/Inputs/InputField.tsx
index 4be9564b2..48914af06 100644
--- a/frontend/src/pages/HomePage/components/Inputs/InputField.tsx
+++ b/frontend/src/pages/HomePage/components/Inputs/InputField.tsx
@@ -1,5 +1,3 @@
-import { Dispatch, SetStateAction } from 'react';
-
 import { EssentialPropsWithChildren } from '@/types';
 
 import * as S from '../URLGeneratorForm/styles';
@@ -14,7 +12,7 @@ interface InputFieldProps {
 export interface InputValueProps {
   id: string;
   value: string;
-  setValue: Dispatch<SetStateAction<string>>;
+  setValue: (value: string) => void;
 }
 
 const InputField = ({
diff --git a/frontend/src/pages/HomePage/components/URLGeneratorForm/index.tsx b/frontend/src/pages/HomePage/components/URLGeneratorForm/index.tsx
index 63a18c6c6..33114446c 100644
--- a/frontend/src/pages/HomePage/components/URLGeneratorForm/index.tsx
+++ b/frontend/src/pages/HomePage/components/URLGeneratorForm/index.tsx
@@ -73,12 +73,20 @@ const URLGeneratorForm = () => {
     openModal(MODAL_KEYS.confirm);
   }, DEBOUNCE_TIME);
 
+  const handleInputChange = (setter: React.Dispatch<React.SetStateAction<string>>) => (value: string) => {
+    setter(value);
+  };
+
   return (
     <S.URLGeneratorForm>
       <FormLayout title="함께한 팀원으로부터 리뷰를 받아보세요!" direction="column">
-        <RevieweeNameField id={INPUT_ID.revieweeName} value={revieweeName} setValue={setRevieweeName} />
-        <ProjectNameField id={INPUT_ID.projectName} value={projectName} setValue={setProjectName} />
-        <PasswordField id={INPUT_ID.password} value={password} setValue={setPassword} />
+        <RevieweeNameField
+          id={INPUT_ID.revieweeName}
+          value={revieweeName}
+          setValue={handleInputChange(setRevieweeName)}
+        />
+        <ProjectNameField id={INPUT_ID.projectName} value={projectName} setValue={handleInputChange(setProjectName)} />
+        <PasswordField id={INPUT_ID.password} value={password} setValue={handleInputChange(setPassword)} />
         <Button
           type="button"
           styleType={isFormValid ? 'primary' : 'disabled'}

From 93331a8aad8a08beec29ec4f4e142f9415800f54 Mon Sep 17 00:00:00 2001
From: ImxYJL <allensain14@gmail.com>
Date: Tue, 10 Dec 2024 14:44:20 +0900
Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=ED=95=B8=EB=93=A4=EB=9F=AC=20?=
 =?UTF-8?q?=EC=9D=B4=EB=A6=84=20=EC=A0=84=EB=8B=AC=20=EC=98=A4=ED=83=80=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/HomePage/components/Inputs/ProjectNameField.tsx | 4 ++--
 .../pages/HomePage/components/Inputs/RevieweeNameField.tsx    | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/pages/HomePage/components/Inputs/ProjectNameField.tsx b/frontend/src/pages/HomePage/components/Inputs/ProjectNameField.tsx
index 433683907..e025a6938 100644
--- a/frontend/src/pages/HomePage/components/Inputs/ProjectNameField.tsx
+++ b/frontend/src/pages/HomePage/components/Inputs/ProjectNameField.tsx
@@ -7,7 +7,7 @@ import { InputValueProps } from './InputField';
 
 import { InputField } from './';
 
-const ProjectNameField = ({ id, value: revieweeName, setValue: setRevieweeName }: InputValueProps) => {
+const ProjectNameField = ({ id, value: revieweeName, setValue: setProjectName }: InputValueProps) => {
   const [errorMessage, setErrorMessage] = useState('');
 
   useEffect(() => {
@@ -23,7 +23,7 @@ const ProjectNameField = ({ id, value: revieweeName, setValue: setRevieweeName }
         value={revieweeName}
         type="text"
         onChange={(event) => {
-          setRevieweeName(event.target.value);
+          setProjectName(event.target.value);
         }}
       />
     </InputField>
diff --git a/frontend/src/pages/HomePage/components/Inputs/RevieweeNameField.tsx b/frontend/src/pages/HomePage/components/Inputs/RevieweeNameField.tsx
index 8b128c575..1ceb0234c 100644
--- a/frontend/src/pages/HomePage/components/Inputs/RevieweeNameField.tsx
+++ b/frontend/src/pages/HomePage/components/Inputs/RevieweeNameField.tsx
@@ -7,7 +7,7 @@ import { InputValueProps } from './InputField';
 
 import { InputField } from '.';
 
-const RevieweeNameField = ({ id, value: projectName, setValue: setProjectName }: InputValueProps) => {
+const RevieweeNameField = ({ id, value: projectName, setValue: setRevieweeName }: InputValueProps) => {
   const [errorMessage, setErrorMessage] = useState('');
 
   useEffect(() => {
@@ -23,7 +23,7 @@ const RevieweeNameField = ({ id, value: projectName, setValue: setProjectName }:
         value={projectName}
         type="text"
         onChange={(event) => {
-          setProjectName(event.target.value);
+          setRevieweeName(event.target.value);
         }}
       />
     </InputField>