From a62250259652b6a388e3d2cada4f9d362a840834 Mon Sep 17 00:00:00 2001
From: ash <ansh4393@gmail.com>
Date: Sun, 21 Apr 2024 17:58:08 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20>=20=EB=B9=84?=
 =?UTF-8?q?=EB=B0=80=EB=B2=88=ED=98=B8=20=EC=9E=AC=EC=84=A4=EC=A0=95=20UI?=
 =?UTF-8?q?=20=EA=B5=AC=ED=98=84=20(#222)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

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

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

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

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

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

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

* 🧑#221 - 개행 추가

* 🔍️#221 - SEO 추가
---
 src/components/account/FindPasswordForm.tsx  | 10 +-
 src/components/account/ResetPasswordForm.tsx | 99 ++++++++++++++++++++
 src/components/account/index.ts              |  1 +
 src/pages/account/resetPassword.tsx          | 22 +++++
 src/types/password.ts                        |  5 +
 5 files changed, 130 insertions(+), 7 deletions(-)
 create mode 100644 src/components/account/ResetPasswordForm.tsx
 create mode 100644 src/pages/account/resetPassword.tsx

diff --git a/src/components/account/FindPasswordForm.tsx b/src/components/account/FindPasswordForm.tsx
index cd9c24e5..60f4ea09 100644
--- a/src/components/account/FindPasswordForm.tsx
+++ b/src/components/account/FindPasswordForm.tsx
@@ -19,7 +19,7 @@ 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) => {
@@ -27,11 +27,7 @@ export const FindPasswordForm = ({ setIsSubmitted }: FindPasswordFormProps) => {
       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="재설정 링크보내기"
           />
diff --git a/src/components/account/ResetPasswordForm.tsx b/src/components/account/ResetPasswordForm.tsx
new file mode 100644
index 00000000..afc2799b
--- /dev/null
+++ b/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;
+`;
diff --git a/src/components/account/index.ts b/src/components/account/index.ts
index 4f9150d6..e1594576 100644
--- a/src/components/account/index.ts
+++ b/src/components/account/index.ts
@@ -4,3 +4,4 @@ export * from './RegisterProfileImage';
 export * from './RegisterTerms';
 export * from './FindPasswordForm';
 export * from './CompleteFindPassword';
+export * from './ResetPasswordForm';
diff --git a/src/pages/account/resetPassword.tsx b/src/pages/account/resetPassword.tsx
new file mode 100644
index 00000000..2770589e
--- /dev/null
+++ b/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;
+`;
diff --git a/src/types/password.ts b/src/types/password.ts
index c3ffb87e..e1ec89f9 100644
--- a/src/types/password.ts
+++ b/src/types/password.ts
@@ -11,3 +11,8 @@ export interface PasswordResetLinkRequest {
  */
 
 export type PasswordFindForm = Omit<PasswordResetLinkRequest, 'redirectUrl'>;
+
+export interface PasswordResetForm {
+  password: string;
+  passwordCheck: string;
+}