🔨 Refactoring: Password-update 페이지 리팩토링

prgrms-fe-devcourse · Oct 9, 2023 · a76b6d4 · a76b6d4
2 parents ab327e1 + a8e589c
commit a76b6d4
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 100 deletions.
diff --git a/src/pages/password-update/PasswordUpdate.tsx b/src/pages/password-update/PasswordUpdate.tsx
@@ -1,90 +1,9 @@
-import { useState } from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
-import putUpdatePassword from '@apis/password';
-import { Alert } from '@components/Alert';
-import { Button } from '@components/Button';
-import { FormInput } from '@components/FormInput';
-import useSessionStorage from '@hooks/useSessionStorage';
-import { User } from '@/types';
-import { LABEL, PASSWORD_HINT, USER_INPUT } from './constants';
-import { PasswordHint } from '@pages/password-update/components';
 import { LandingMain } from '@pages/landing/Landing.style';
-import { PasswordUpdateForm, ButtonContainer } from './PasswordUpdate.style';
-import isPasswordOk from './utils/isPasswordOk';
-
-interface PasswordUpdateFormData {
-  password: string;
-  passwordConfirm: string;
-}
-
+import PasswordUpdateForm from './components/PasswordUpdateForm';
 const PasswordUpdate = () => {
-  const [passwordChanged, setPasswordChanged] = useState<boolean>(false);
-  const [userSessionData] = useSessionStorage<Pick<User, '_id' | 'token'>>(
-    'userData',
-    {
-      _id: '',
-      token: ''
-    }
-  );
-  const methods = useForm<PasswordUpdateFormData>();
-  const { watch } = methods;
-  const [password, passwordConfirm] = watch(['password', 'passwordConfirm']);
-
-  const onSubmit = () => {
-    if (isPasswordOk(password) && password === passwordConfirm) {
-      putUpdatePassword({ password, token: `Bearer ${userSessionData.token}` })
-        .then(() => setPasswordChanged(true))
-        .catch((error) => console.log(error));
-    }
-  };
-
   return (
     <LandingMain>
-      {passwordChanged && (
-        <Alert
-          emoji={'✅'}
-          content={'비밀번호가 정상적으로 변경되었습니다.'}
-          buttonLabel={'확인'}
-          nextPageLink={
-            userSessionData.token ? `/profile/${userSessionData._id}` : '/login'
-          }
-        />
-      )}
-      <FormProvider {...methods}>
-        <PasswordUpdateForm onSubmit={methods.handleSubmit(onSubmit)}>
-          <PasswordHint text={PASSWORD_HINT} />
-          <FormInput
-            name={USER_INPUT.NEW_PASSWORD.NAME}
-            placeholder={USER_INPUT.NEW_PASSWORD.PLACE_HOLDER}
-            title={USER_INPUT.NEW_PASSWORD.TITLE}
-            show={password && password.length > 0}
-            success={password && isPasswordOk(password)}
-            type={USER_INPUT.NEW_PASSWORD.TYPE}
-            errorMessage={USER_INPUT.NEW_PASSWORD.ERROR_MESSAGE}
-            successMessage={USER_INPUT.NEW_PASSWORD.SUCCESS_MESSAGE}
-          />
-          <FormInput
-            name={USER_INPUT.NEW_PASSWORD_CONFIRM.NAME}
-            placeholder={USER_INPUT.NEW_PASSWORD_CONFIRM.PLACE_HOLDER}
-            title={USER_INPUT.NEW_PASSWORD_CONFIRM.TITLE}
-            show={password && passwordConfirm.length > 0}
-            success={passwordConfirm && password === passwordConfirm}
-            type={USER_INPUT.NEW_PASSWORD_CONFIRM.TYPE}
-            errorMessage={USER_INPUT.NEW_PASSWORD_CONFIRM.ERROR_MESSAGE}
-            successMessage={USER_INPUT.NEW_PASSWORD_CONFIRM.SUCCESS_MESSAGE}
-          />
-          <ButtonContainer>
-            <Button
-              label={LABEL.CHANGE_PASSWORD}
-              width={300}
-              height={45}
-              bold={false}
-              dark={true}
-              handleClick={() => methods.handleSubmit(onSubmit)}
-            />
-          </ButtonContainer>
-        </PasswordUpdateForm>
-      </FormProvider>
+      <PasswordUpdateForm />
     </LandingMain>
   );
 };

diff --git a/...s/password-update/PasswordUpdate.style.ts → ...te/components/PasswordUpdateForm.style.ts b/...s/password-update/PasswordUpdate.style.ts → ...te/components/PasswordUpdateForm.style.ts
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-const PasswordUpdateForm = styled.form`
+const PasswordUpdateFormContainer = styled.form`
   padding: 10px 0px;
   background-color: ${({ theme }) => theme.color.white};
   ${({ theme }) => theme.style.flexCenter};
@@ -25,4 +25,4 @@ const ButtonContainer = styled.div`
   margin-top: 20px;
 `;
 
-export { PasswordUpdateForm, ButtonContainer };
+export { PasswordUpdateFormContainer, ButtonContainer };
diff --git a/src/pages/password-update/components/PasswordUpdateForm.tsx b/src/pages/password-update/components/PasswordUpdateForm.tsx
@@ -0,0 +1,94 @@
+import { useState } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import putUpdatePassword from '@apis/password';
+import { Alert } from '@components/Alert';
+import { Button } from '@components/Button';
+import { FormInput } from '@components/FormInput';
+import useSessionStorage from '@hooks/useSessionStorage';
+import { User } from '@/types';
+import { LABEL, PASSWORD_HINT, USER_INPUT, ALERT } from '../constants';
+import { PasswordHint } from '@pages/password-update/components';
+import {
+  PasswordUpdateFormContainer,
+  ButtonContainer
+} from './PasswordUpdateForm.style';
+import isPasswordOk from '../validations';
+
+interface PasswordUpdateFormData {
+  password: string;
+  passwordConfirm: string;
+}
+
+const PasswordUpdateForm = () => {
+  const [passwordChanged, setPasswordChanged] = useState<boolean>(false);
+  const [userSessionData] = useSessionStorage<Pick<User, '_id' | 'token'>>(
+    'userData',
+    {
+      _id: '',
+      token: ''
+    }
+  );
+  const methods = useForm<PasswordUpdateFormData>();
+  const { watch } = methods;
+  const [password, passwordConfirm] = watch(['password', 'passwordConfirm']);
+
+  const onSubmit = () => {
+    if (isPasswordOk(password) && password === passwordConfirm) {
+      putUpdatePassword({ password, token: `Bearer ${userSessionData.token}` })
+        .then(() => setPasswordChanged(true))
+        .catch((error) => console.log(error));
+    }
+  };
+
+  return (
+    <>
+      {passwordChanged && (
+        <Alert
+          emoji={ALERT.EMOJI}
+          content={ALERT.CONTENT}
+          buttonLabel={ALERT.BUTTON_LABEL}
+          nextPageLink={
+            userSessionData.token ? `/profile/${userSessionData._id}` : '/login'
+          }
+        />
+      )}
+      <FormProvider {...methods}>
+        <PasswordUpdateFormContainer onSubmit={methods.handleSubmit(onSubmit)}>
+          <PasswordHint text={PASSWORD_HINT} />
+          <FormInput
+            name={USER_INPUT.NEW_PASSWORD.NAME}
+            placeholder={USER_INPUT.NEW_PASSWORD.PLACE_HOLDER}
+            title={USER_INPUT.NEW_PASSWORD.TITLE}
+            show={password && password.length > 0}
+            success={password && isPasswordOk(password)}
+            type={USER_INPUT.NEW_PASSWORD.TYPE}
+            errorMessage={USER_INPUT.NEW_PASSWORD.ERROR_MESSAGE}
+            successMessage={USER_INPUT.NEW_PASSWORD.SUCCESS_MESSAGE}
+          />
+          <FormInput
+            name={USER_INPUT.NEW_PASSWORD_CONFIRM.NAME}
+            placeholder={USER_INPUT.NEW_PASSWORD_CONFIRM.PLACE_HOLDER}
+            title={USER_INPUT.NEW_PASSWORD_CONFIRM.TITLE}
+            show={password && passwordConfirm.length > 0}
+            success={passwordConfirm && password === passwordConfirm}
+            type={USER_INPUT.NEW_PASSWORD_CONFIRM.TYPE}
+            errorMessage={USER_INPUT.NEW_PASSWORD_CONFIRM.ERROR_MESSAGE}
+            successMessage={USER_INPUT.NEW_PASSWORD_CONFIRM.SUCCESS_MESSAGE}
+          />
+          <ButtonContainer>
+            <Button
+              label={LABEL.CHANGE_PASSWORD}
+              width={300}
+              height={45}
+              bold={false}
+              dark={true}
+              handleClick={() => methods.handleSubmit(onSubmit)}
+            />
+          </ButtonContainer>
+        </PasswordUpdateFormContainer>
+      </FormProvider>
+    </>
+  );
+};
+
+export default PasswordUpdateForm;
diff --git a/src/pages/password-update/constants/index.ts b/src/pages/password-update/constants/index.ts
@@ -19,8 +19,14 @@ const USER_INPUT = {
 
 const PASSWORD_HINT = `비밀번호는 영문자, 특수문자, 숫자 중 2가지 이상을 포함한 8~32개의 문자로 이뤄져야 합니다.`;
 
+const ALERT = {
+  EMOJI: '😀',
+  CONTENT: '비밀번호가 정상적으로 변경되었습니다.',
+  BUTTON_LABEL: '확인'
+};
+
 const LABEL = {
   CHANGE_PASSWORD: '변경하기'
 };
 
-export { USER_INPUT, PASSWORD_HINT, LABEL };
+export { USER_INPUT, PASSWORD_HINT, LABEL, ALERT };
diff --git a/src/pages/password-update/utils/isPasswordOk.ts b/src/pages/password-update/utils/isPasswordOk.ts
diff --git a/.../utils/passWordUpdateValidations/index.ts → ...ages/password-update/validations/index.ts b/.../utils/passWordUpdateValidations/index.ts → ...ages/password-update/validations/index.ts