refactor: 이전 비밀번호와 같은 비밀번호 입력 시 새로운 에러메세지 출력

yourssu · May 23, 2024 · ed2f0d7 · ed2f0d7
1 parent 1300368
commit ed2f0d7
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 8 deletions.
diff --git a/src/home/components/ChangePasswordContents/CurrentPasswordForm/CurrentPasswordForm.tsx b/src/home/components/ChangePasswordContents/CurrentPasswordForm/CurrentPasswordForm.tsx
@@ -14,6 +14,7 @@ import {
 interface CurrentPasswordFormProps {
   onConfirm: () => void;
   setSessionToken: ({ sessionToken }: SessionTokenType) => void;
+  setPreviousPassword: (password: string) => void;
 }
 
 export const CurrentPasswordForm = (props: CurrentPasswordFormProps) => {

diff --git a/src/home/components/ChangePasswordContents/CurrentPasswordForm/useCurrentPasswordForm.ts b/src/home/components/ChangePasswordContents/CurrentPasswordForm/useCurrentPasswordForm.ts
@@ -10,11 +10,13 @@ import { SessionTokenType } from '@/home/types/GetPassword.type';
 interface CurrentPasswordFormProps {
   onConfirm: () => void;
   setSessionToken: ({ sessionToken }: SessionTokenType) => void;
+  setPreviousPassword: (password: string) => void;
 }
 
 export const useCurrentPasswordForm = ({
   onConfirm,
   setSessionToken,
+  setPreviousPassword,
 }: CurrentPasswordFormProps) => {
   const [currentPassword, setCurrentPassword] = useState('');
   const [isError, setIsError] = useState(false);
@@ -23,7 +25,6 @@ export const useCurrentPasswordForm = ({
 
   const checkCurrentPassword = async () => {
     if (!isLoggedIn) {
-      alert('로그인이 필요합니다.');
       navigate('/Login');
       return;
     }
@@ -35,6 +36,7 @@ export const useCurrentPasswordForm = ({
     if (data) {
       setIsError(false);
       setSessionToken(data as SessionTokenType);
+      setPreviousPassword(currentPassword);
       onConfirm();
     } else if (error) setIsError(true);
   };

diff --git a/src/home/components/ChangePasswordContents/NewPasswordForm/NewPasswordForm.tsx b/src/home/components/ChangePasswordContents/NewPasswordForm/NewPasswordForm.tsx
@@ -14,20 +14,22 @@ import {
 
 interface NewPasswordFormProps {
   sessionToken: SessionTokenType;
+  previousPassword: string;
 }
 
-export const NewPasswordForm = ({ sessionToken }: NewPasswordFormProps) => {
+export const NewPasswordForm = (props: NewPasswordFormProps) => {
   const {
     newPassword,
     newPasswordCheck,
     isNewPasswordError,
     isNewPasswordCheckError,
     isFirstRender,
     validationAttempted,
+    errorMessage,
     setNewPasswordCheck,
     handleNewPasswordChange,
     handleSubmit,
-  } = useNewPasswordForm(sessionToken);
+  } = useNewPasswordForm(props);
 
   const isNewPasswordFieldNegative = !isFirstRender && isNewPasswordError;
   const isRepeatPasswordFieldNegative = isNewPasswordCheckError && validationAttempted;
@@ -42,9 +44,7 @@ export const NewPasswordForm = ({ sessionToken }: NewPasswordFormProps) => {
           value={newPassword}
           onChange={(e) => handleNewPasswordChange(e.target.value)}
           isNegative={isNewPasswordFieldNegative}
-          helperLabel={
-            isNewPasswordFieldNegative ? '숫자와 영문자 조합으로 8자 이상 입력해주세요.' : ''
-          }
+          helperLabel={isNewPasswordFieldNegative ? errorMessage : ''}
         />
         <StyledInputAnimation
           className={!isNewPasswordError && newPassword.length >= 8 ? 'active' : ''}

diff --git a/src/home/components/ChangePasswordContents/NewPasswordForm/useNewPasswordForm.ts b/src/home/components/ChangePasswordContents/NewPasswordForm/useNewPasswordForm.ts
@@ -9,25 +9,39 @@ import { UserState } from '@/home/recoil/UserState';
 import { SessionTokenType } from '@/home/types/GetPassword.type';
 import { api } from '@/service/TokenService';
 
-export const useNewPasswordForm = (sessionToken: SessionTokenType) => {
+interface NewPasswordFormProps {
+  sessionToken: SessionTokenType;
+  previousPassword: string;
+}
+
+export const useNewPasswordForm = (props: NewPasswordFormProps) => {
   const [newPassword, setNewPassword] = useState('');
   const [newPasswordCheck, setNewPasswordCheck] = useState('');
   const [isNewPasswordError, setIsNewPasswordError] = useState(false);
   const [isNewPasswordCheckError, setIsNewPasswordCheckError] = useState(false);
   const [isFirstRender, setIsFirstRender] = useState(true);
   const [validationAttempted, setValidationAttempted] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string>('');
   const navigate = useNavigate();
 
+  const { sessionToken, previousPassword } = props;
   const isLoggedIn = useRecoilValue(LogInState);
   const currentUser = useRecoilValue(UserState);
 
   const regexp = new RegExp('^(?=.*[a-zA-Z])(?=.*[0-9]).{8,}$');
 
   const handleNewPasswordChange = (password: string) => {
     setNewPassword(password);
+    if (previousPassword === password) {
+      setIsNewPasswordError(true);
+      setErrorMessage('현재 비밀번호와 다른 비밀번호를 입력해주세요.');
+      return;
+    }
+    setErrorMessage('');
     if (password.length >= 8) {
       setIsFirstRender(false);
       setIsNewPasswordError(!regexp.test(password));
+      setErrorMessage('숫자와 영문자 조합으로 8자 이상 입력해주세요.');
     } else {
       setIsNewPasswordError(true);
     }
@@ -61,6 +75,7 @@ export const useNewPasswordForm = (sessionToken: SessionTokenType) => {
         navigate('/myPage');
       }
     }
+    navigate('/Login');
   };
 
   useEffect(() => {
@@ -78,6 +93,7 @@ export const useNewPasswordForm = (sessionToken: SessionTokenType) => {
     isNewPasswordCheckError,
     isFirstRender,
     validationAttempted,
+    errorMessage,
     setNewPasswordCheck,
     handleNewPasswordChange,
     handleSubmit,

diff --git a/src/home/pages/ChangePassword/ChangePassword.tsx b/src/home/pages/ChangePassword/ChangePassword.tsx
@@ -11,6 +11,7 @@ type ChangePasswordFunnelStepsType = '현재비밀번호입력' | '새비밀번
 export const ChangePassword = () => {
   const [Funnel, setStep] = useFunnel<ChangePasswordFunnelStepsType>('현재비밀번호입력');
   const [sessionToken, setSessionToken] = useState<SessionTokenType | null>(null);
+  const [previousPassword, setPreviousPassword] = useState<string>('');
 
   return (
     <ChangePasswordFrame>
@@ -19,10 +20,14 @@ export const ChangePassword = () => {
           <CurrentPasswordForm
             onConfirm={() => setStep('새비밀번호입력')}
             setSessionToken={setSessionToken}
+            setPreviousPassword={setPreviousPassword}
           />
         </Funnel.Step>
         <Funnel.Step name="새비밀번호입력">
-          <NewPasswordForm sessionToken={sessionToken as SessionTokenType} />
+          <NewPasswordForm
+            sessionToken={sessionToken as SessionTokenType}
+            previousPassword={previousPassword}
+          />
         </Funnel.Step>
       </Funnel>
     </ChangePasswordFrame>