로그인 > 비밀번호 재설정 UI 구현 (#222)

* ✨#221 - 비밀번호 재설정 페이지 추가

* ✨#221 - 비밀번호 재설정 폼 타입 추가

* 💄#221 - 비밀번호 재설정 폼 컴포넌트 추가

* ✨#221 - 비밀번호 재설정 폼 유효성 검사

* ✨#221 - 폼 제출 시 로그인 화면으로 이동

* ✨#221 - 비밀번호 재설정 링크 보낼 때 redirectUrl 변경

* ⚡️#221 - 폼 제출을 처리 하는 동안 버튼 disabled 처리

* ♻️#221 - PAGE_PATH 적용 및 replace로 변경

* 🧑#221 - 개행 추가

* 🔍️#221 - SEO 추가

src/components/account/FindPasswordForm.tsx

@@ -19,19 +19,15 @@ export const FindPasswordForm = ({ setIsSubmitted }: FindPasswordFormProps) => {
     register,
     handleSubmit,
     setError,
-    formState: { errors, isValid },
+    formState: { errors, isValid, isSubmitting },
   } = useForm<PasswordFindForm>({ mode: 'onChange' });
 
   const onSubmit: SubmitHandler<PasswordFindForm> = async (data) => {
     try {
       const { email } = data;
       await passwordResetLink({
         email,
-        /**
-         * @todo
-         * redirectUrl을 비밀번호 재설정 페이지로 변경
-         */
-        redirectUrl: `${window.location.origin}`,
+        redirectUrl: `${window.location.origin}/account/resetPassword`,
       });
       setIsSubmitted(true);
     } catch (error) {
@@ -76,7 +72,7 @@ export const FindPasswordForm = ({ setIsSubmitted }: FindPasswordFormProps) => {
         <ButtonContainer>
           <Button
             type="submit"
-            disabled={!isValid}
+            disabled={!isValid || isSubmitting}
             fullWidth
             text="재설정 링크보내기"
           />

src/components/account/ResetPasswordForm.tsx

@@ -0,0 +1,99 @@
+import styled from '@emotion/styled';
+import router from 'next/router';
+import { useForm } from 'react-hook-form';
+import type { PasswordResetForm } from 'types/password';
+import { Button } from 'components/common';
+import { FormInput } from 'components/form';
+import { PAGE_PATH } from 'constants/common';
+import {
+  ERROR_MESSAGE,
+  INVALID_VALUE,
+  VALID_VALUE,
+} from 'constants/validation';
+
+export const ResetPasswordForm = () => {
+  const {
+    register,
+    getValues,
+    handleSubmit,
+    formState: { isValid, errors, isSubmitting },
+  } = useForm<PasswordResetForm>({ mode: 'onChange' });
+
+  const onSubmit = async () => {
+    /**
+     * @todo
+     * 비밀번호 재설정 API 요청
+     */
+    await router.replace(PAGE_PATH.account.login);
+  };
+
+  return (
+    <>
+      <Title>비밀번호를 재설정해주세요.</Title>
+      <Form onSubmit={handleSubmit(onSubmit)}>
+        <FormInput
+          register={register('password', {
+            required: ERROR_MESSAGE.password.required,
+            minLength: {
+              value: VALID_VALUE.password.min,
+              message: ERROR_MESSAGE.password.length,
+            },
+            maxLength: {
+              value: VALID_VALUE.password.max,
+              message: ERROR_MESSAGE.password.length,
+            },
+            pattern: {
+              value: VALID_VALUE.password.pattern,
+              message: ERROR_MESSAGE.password.pattern,
+            },
+            validate: (value) =>
+              !INVALID_VALUE.password.test(value) ||
+              ERROR_MESSAGE.password.invalidPattern,
+          })}
+          type="password"
+          placeholder="비밀번호"
+          label="비밀번호"
+          errors={errors.password}
+        />
+        <FormInput
+          register={register('passwordCheck', {
+            required: ERROR_MESSAGE.passwordCheck.required,
+            validate: {
+              matchesPreviousPassword: (value) => {
+                const { password } = getValues();
+                return (
+                  password === value || ERROR_MESSAGE.passwordCheck.pattern
+                );
+              },
+            },
+          })}
+          type="password"
+          placeholder="비밀번호 확인"
+          label="비밀번호 확인"
+          errors={errors.passwordCheck}
+        />
+        <StyledButton
+          type="submit"
+          disabled={!isValid || isSubmitting}
+          text="비밀번호 재설정"
+          fullWidth
+        />
+      </Form>
+    </>
+  );
+};
+
+const Title = styled.h1`
+  ${({ theme }) => theme.fonts.headline_01};
+`;
+
+const Form = styled.form`
+  margin-top: 40px;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+`;
+
+const StyledButton = styled(Button)`
+  margin-top: -4px;
+`;

src/components/account/index.ts

@@ -4,3 +4,4 @@ export * from './RegisterProfileImage';
 export * from './RegisterTerms';
 export * from './FindPasswordForm';
 export * from './CompleteFindPassword';
+export * from './ResetPasswordForm';

src/pages/account/resetPassword.tsx

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+import type { NextPage } from 'next/types';
+import { ResetPasswordForm } from 'components/account';
+import { Seo } from 'components/common';
+
+const ResetPassword: NextPage = () => {
+  return (
+    <>
+      <Seo title={'비밀번호 재성정 | a daily diary'} />
+      <ContentWrapper>
+        <ResetPasswordForm />
+      </ContentWrapper>
+    </>
+  );
+};
+
+export default ResetPassword;
+
+const ContentWrapper = styled.section`
+  margin-top: 54px;
+  padding: 30px 20px;
+`;

src/types/password.ts

@@ -11,3 +11,8 @@ export interface PasswordResetLinkRequest {
  */
 
 export type PasswordFindForm = Omit<PasswordResetLinkRequest, 'redirectUrl'>;
+
+export interface PasswordResetForm {
+  password: string;
+  passwordCheck: string;
+}