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/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>; + setValue: (value: string) => void; } const InputField = ({ 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 ( { 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); }} /> 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); }} /> 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>) => (value: string) => { + setter(value); + }; + return ( - - - + + +