From 013afc743014d0b6cf89bcec60681a52ad7b0716 Mon Sep 17 00:00:00 2001
From: skiende74 <skiende74@gmail.com>
Date: Sun, 10 Nov 2024 19:15:01 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A6=AC=EB=B7=B0=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../EnterVerificationCodeStep.tsx             | 83 ++++---------------
 .../ResetPassword/ResetPasswordStep.tsx       | 69 ++-------------
 .../SendVerificationEmailStep.tsx             | 73 +++-------------
 .../src/components/ResetPassword/style.ts     | 57 +++++++++++++
 4 files changed, 93 insertions(+), 189 deletions(-)
 create mode 100644 frontend/src/components/ResetPassword/style.ts

diff --git a/frontend/src/components/ResetPassword/EnterVerificationCodeStep.tsx b/frontend/src/components/ResetPassword/EnterVerificationCodeStep.tsx
index 0fc3be1eb..76ff29d62 100644
--- a/frontend/src/components/ResetPassword/EnterVerificationCodeStep.tsx
+++ b/frontend/src/components/ResetPassword/EnterVerificationCodeStep.tsx
@@ -1,4 +1,3 @@
-import styled from '@emotion/styled';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
@@ -7,10 +6,10 @@ import Button from '@/components/_common/Button/Button';
 import FlexBox from '@/components/_common/FlexBox/FlexBox';
 import FormField from '@/components/_common/FormField/FormField';
 import Header from '@/components/_common/Header/Header';
+import CS from '@/components/ResetPassword/style';
 import { ROUTE_PATH } from '@/constants/routePath';
 import usePostResetPasswordMail from '@/hooks/query/usePostResetPasswordMail';
 import useValidateInput from '@/hooks/useValidateInput';
-import { flexCenter, title3 } from '@/styles/common';
 import { ResetPasswordArgs } from '@/types/user';
 
 interface Props {
@@ -22,10 +21,11 @@ const SendVerificationEmailStep = ({ args: { email }, onNext }: Props) => {
   const [isComplete, setIsComplete] = useState(false);
   const [postErrorMessage, setPostErrorMessage] = useState('');
   const { mutate: postResetMail } = usePostResetPasswordMail();
+
   const {
     value: code,
-    getErrorMessage: getEmailErrors,
-    onChange: onChangeEmail,
+    getErrorMessage: getCodeErrors,
+    onChange: onChangeCode,
     isValidated: isEmailValid,
   } = useValidateInput({
     initialValue: '',
@@ -37,6 +37,7 @@ const SendVerificationEmailStep = ({ args: { email }, onNext }: Props) => {
       onSuccess: () => setIsComplete(true),
       onError: error => setPostErrorMessage(error.message),
     });
+
   const handleClickNext = () => {
     onNext({ code, email });
   };
@@ -55,13 +56,13 @@ const SendVerificationEmailStep = ({ args: { email }, onNext }: Props) => {
   return (
     <>
       <Header left={<Header.Backward onClick={handleClickBackward} />} />
-      <S.Wrapper>
-        <S.LogoBox>
+      <CS.Wrapper>
+        <CS.LogoBox>
           <BangBangIcon />
           <BangGgoodTextIcon aria-label="방끗 로고" />
-        </S.LogoBox>
-        <S.Box>
-          <S.Label>비밀번호 찾기</S.Label>
+        </CS.LogoBox>
+        <CS.Box>
+          <CS.Label>비밀번호 찾기</CS.Label>
           <FormField onKeyDown={handleKeyDown}>
             <FormField.Label label="검증 코드" />
             <FlexBox.Horizontal justify="flex-start" align="center">
@@ -69,14 +70,16 @@ const SendVerificationEmailStep = ({ args: { email }, onNext }: Props) => {
                 maxLength={254}
                 value={code}
                 name="email"
-                onChange={onChangeEmail}
+                onChange={onChangeCode}
                 style={{ width: '25rem' }}
               />
               <div>
-                <S.SendButton onClick={handleClickSubmit}>전송</S.SendButton>
+                <CS.SendButton onClick={handleClickSubmit} disabled={canMove}>
+                  전송
+                </CS.SendButton>
               </div>
             </FlexBox.Horizontal>
-            {getEmailErrors() && <FormField.ErrorMessage value={getEmailErrors()} />}
+            {getCodeErrors() && <FormField.ErrorMessage value={getCodeErrors()} />}
           </FormField>
           {postErrorMessage && <FormField.ErrorMessage value={postErrorMessage} />}
           <Button
@@ -87,62 +90,10 @@ const SendVerificationEmailStep = ({ args: { email }, onNext }: Props) => {
             onClick={handleClickNext}
             disabled={!canMove}
           />
-        </S.Box>
-      </S.Wrapper>
+        </CS.Box>
+      </CS.Wrapper>
     </>
   );
 };
 
 export default SendVerificationEmailStep;
-
-const S = {
-  Wrapper: styled.div`
-    ${flexCenter}
-    height:calc(100dvh - 56px);
-    flex-direction: column;
-    gap: 1rem;
-  `,
-  LogoBox: styled.div`
-    ${flexCenter}
-    margin-bottom:50px;
-    gap: 2rem;
-  `,
-  Label: styled.div`
-    position: absolute;
-    top: -4.2rem;
-    padding: 1rem 1.4rem;
-    border-radius: 1rem 1rem 0 0;
-    ${title3}
-
-    background-color: ${({ theme }) => theme.palette.green500};
-
-    color: ${({ theme }) => theme.palette.white};
-  `,
-  SendButton: styled.div`
-    padding: 0 1.2rem;
-    cursor: pointer;
-
-    ${flexCenter}
-    background-color: ${({ theme }) => theme.palette.green500};
-
-    color: ${({ theme }) => theme.palette.white};
-    font-weight: ${({ theme }) => theme.text.weight.medium};
-    font-size: ${({ theme }) => theme.text.size.small};
-    line-height: 2;
-    white-space: nowrap;
-    border-radius: 1rem;
-  `,
-  Box: styled.div`
-    display: flex;
-    position: relative;
-
-    width: 30rem;
-    margin-bottom: 0.5rem;
-    padding: 1.6rem;
-
-    background-color: ${({ theme }) => theme.palette.background};
-    flex-direction: column;
-    border-radius: 1rem;
-    gap: 2rem;
-  `,
-};
diff --git a/frontend/src/components/ResetPassword/ResetPasswordStep.tsx b/frontend/src/components/ResetPassword/ResetPasswordStep.tsx
index 8e141f98d..001a04fef 100644
--- a/frontend/src/components/ResetPassword/ResetPasswordStep.tsx
+++ b/frontend/src/components/ResetPassword/ResetPasswordStep.tsx
@@ -1,4 +1,3 @@
-import styled from '@emotion/styled';
 import { useNavigate } from 'react-router-dom';
 
 import { BangBangIcon, BangGgoodTextIcon } from '@/assets/assets';
@@ -6,9 +5,9 @@ import Button from '@/components/_common/Button/Button';
 import FlexBox from '@/components/_common/FlexBox/FlexBox';
 import FormField from '@/components/_common/FormField/FormField';
 import Header from '@/components/_common/Header/Header';
+import CS from '@/components/ResetPassword/style';
 import { ROUTE_PATH } from '@/constants/routePath';
 import useValidateInput from '@/hooks/useValidateInput';
-import { flexCenter, title3 } from '@/styles/common';
 import { ResetPasswordArgs } from '@/types/user';
 import { validatePassword, validatePasswordConfirm } from '@/utils/authValidation';
 
@@ -53,13 +52,13 @@ const SendVerificationEmailStep = ({ args: { email, code }, onNext }: Props) =>
   return (
     <>
       <Header left={<Header.Backward onClick={handleClickBackward} />} />
-      <S.Wrapper>
-        <S.LogoBox>
+      <CS.Wrapper>
+        <CS.LogoBox>
           <BangBangIcon />
           <BangGgoodTextIcon aria-label="방끗 로고" />
-        </S.LogoBox>
-        <S.Box>
-          <S.Label>비밀번호 찾기</S.Label>
+        </CS.LogoBox>
+        <CS.Box>
+          <CS.Label>비밀번호 찾기</CS.Label>
           <FormField onKeyDown={handleKeyDown}>
             <FormField.Label label="새 비밀번호" />
             <FlexBox.Horizontal justify="flex-start" align="center">
@@ -94,62 +93,10 @@ const SendVerificationEmailStep = ({ args: { email, code }, onNext }: Props) =>
             onClick={handleClickNext}
             disabled={!canMove}
           />
-        </S.Box>
-      </S.Wrapper>
+        </CS.Box>
+      </CS.Wrapper>
     </>
   );
 };
 
 export default SendVerificationEmailStep;
-
-const S = {
-  Wrapper: styled.div`
-    ${flexCenter}
-    height:calc(100dvh - 56px);
-    flex-direction: column;
-    gap: 1rem;
-  `,
-  LogoBox: styled.div`
-    ${flexCenter}
-    margin-bottom:50px;
-    gap: 2rem;
-  `,
-  Label: styled.div`
-    position: absolute;
-    top: -4.2rem;
-    padding: 1rem 1.4rem;
-    border-radius: 1rem 1rem 0 0;
-    ${title3}
-
-    background-color: ${({ theme }) => theme.palette.green500};
-
-    color: ${({ theme }) => theme.palette.white};
-  `,
-  SendButton: styled.div`
-    padding: 0 1.2rem;
-    cursor: pointer;
-
-    ${flexCenter}
-    background-color: ${({ theme }) => theme.palette.green500};
-
-    color: ${({ theme }) => theme.palette.white};
-    font-weight: ${({ theme }) => theme.text.weight.medium};
-    font-size: ${({ theme }) => theme.text.size.small};
-    line-height: 2;
-    white-space: nowrap;
-    border-radius: 1rem;
-  `,
-  Box: styled.div`
-    display: flex;
-    position: relative;
-
-    width: 30rem;
-    margin-bottom: 0.5rem;
-    padding: 1.6rem;
-
-    background-color: ${({ theme }) => theme.palette.background};
-    flex-direction: column;
-    border-radius: 1rem;
-    gap: 2rem;
-  `,
-};
diff --git a/frontend/src/components/ResetPassword/SendVerificationEmailStep.tsx b/frontend/src/components/ResetPassword/SendVerificationEmailStep.tsx
index 2c8b60804..a04691b92 100644
--- a/frontend/src/components/ResetPassword/SendVerificationEmailStep.tsx
+++ b/frontend/src/components/ResetPassword/SendVerificationEmailStep.tsx
@@ -1,4 +1,3 @@
-import styled from '@emotion/styled';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
@@ -7,10 +6,10 @@ import Button from '@/components/_common/Button/Button';
 import FlexBox from '@/components/_common/FlexBox/FlexBox';
 import FormField from '@/components/_common/FormField/FormField';
 import Header from '@/components/_common/Header/Header';
+import CS from '@/components/ResetPassword/style';
 import { ROUTE_PATH } from '@/constants/routePath';
 import usePostResetPasswordMail from '@/hooks/query/usePostResetPasswordMail';
 import useValidateInput from '@/hooks/useValidateInput';
-import { flexCenter, title3 } from '@/styles/common';
 import { ResetPasswordArgs } from '@/types/user';
 import { validateEmail } from '@/utils/authValidation';
 
@@ -56,13 +55,13 @@ const SendVerificationEmailStep = ({ onNext }: Props) => {
   return (
     <>
       <Header left={<Header.Backward onClick={handleClickBackward} />} />
-      <S.Wrapper>
-        <S.LogoBox>
+      <CS.Wrapper>
+        <CS.LogoBox>
           <BangBangIcon />
           <BangGgoodTextIcon aria-label="방끗 로고" />
-        </S.LogoBox>
-        <S.Box>
-          <S.Label>비밀번호 찾기</S.Label>
+        </CS.LogoBox>
+        <CS.Box>
+          <CS.Label>비밀번호 찾기</CS.Label>
           <FormField onKeyDown={handleKeyDown}>
             <FormField.Label label="이메일" />
             <FlexBox.Horizontal justify="flex-start" align="center">
@@ -74,7 +73,9 @@ const SendVerificationEmailStep = ({ onNext }: Props) => {
                 style={{ width: '25rem' }}
               />
               <div>
-                <S.SendButton onClick={handleClickSubmit}>전송</S.SendButton>
+                <CS.SendButton onClick={handleClickSubmit} disabled={canMove}>
+                  전송
+                </CS.SendButton>
               </div>
             </FlexBox.Horizontal>
             {getEmailErrors() && <FormField.ErrorMessage value={getEmailErrors()} />}
@@ -88,62 +89,10 @@ const SendVerificationEmailStep = ({ onNext }: Props) => {
             onClick={handleClickNext}
             disabled={!canMove}
           />
-        </S.Box>
-      </S.Wrapper>
+        </CS.Box>
+      </CS.Wrapper>
     </>
   );
 };
 
 export default SendVerificationEmailStep;
-
-const S = {
-  Wrapper: styled.div`
-    ${flexCenter}
-    height:calc(100dvh - 56px);
-    flex-direction: column;
-    gap: 1rem;
-  `,
-  LogoBox: styled.div`
-    ${flexCenter}
-    margin-bottom:50px;
-    gap: 2rem;
-  `,
-  Label: styled.div`
-    position: absolute;
-    top: -4.2rem;
-    padding: 1rem 1.4rem;
-    border-radius: 1rem 1rem 0 0;
-    ${title3}
-
-    background-color: ${({ theme }) => theme.palette.green500};
-
-    color: ${({ theme }) => theme.palette.white};
-  `,
-  SendButton: styled.div`
-    padding: 0 1.2rem;
-    cursor: pointer;
-
-    ${flexCenter}
-    background-color: ${({ theme }) => theme.palette.green500};
-
-    color: ${({ theme }) => theme.palette.white};
-    font-weight: ${({ theme }) => theme.text.weight.medium};
-    font-size: ${({ theme }) => theme.text.size.small};
-    line-height: 2;
-    white-space: nowrap;
-    border-radius: 1rem;
-  `,
-  Box: styled.div`
-    display: flex;
-    position: relative;
-
-    width: 30rem;
-    margin-bottom: 0.5rem;
-    padding: 1.6rem;
-
-    background-color: ${({ theme }) => theme.palette.background};
-    flex-direction: column;
-    border-radius: 1rem;
-    gap: 2rem;
-  `,
-};
diff --git a/frontend/src/components/ResetPassword/style.ts b/frontend/src/components/ResetPassword/style.ts
new file mode 100644
index 000000000..f60433d40
--- /dev/null
+++ b/frontend/src/components/ResetPassword/style.ts
@@ -0,0 +1,57 @@
+import styled from '@emotion/styled';
+
+import { flexCenter, title3 } from '@/styles/common';
+
+const CS = {
+  Wrapper: styled.div`
+    ${flexCenter}
+    height:calc(100dvh - 56px);
+    flex-direction: column;
+    gap: 1rem;
+  `,
+  LogoBox: styled.div`
+    ${flexCenter}
+    margin-bottom:50px;
+    gap: 2rem;
+  `,
+  Label: styled.div`
+    position: absolute;
+    top: -4.2rem;
+    padding: 1rem 1.4rem;
+    border-radius: 1rem 1rem 0 0;
+    ${title3}
+
+    background-color: ${({ theme }) => theme.palette.green500};
+
+    color: ${({ theme }) => theme.palette.white};
+  `,
+  SendButton: styled.button<{ disabled?: boolean }>`
+    padding: 0 1.2rem;
+    cursor: pointer;
+
+    ${flexCenter}
+    background-color: ${({ theme, disabled }) => (disabled ? theme.palette.green300 : theme.palette.green500)};
+
+    color: ${({ theme }) => theme.palette.white};
+    font-weight: ${({ theme }) => theme.text.weight.medium};
+    font-size: ${({ theme }) => theme.text.size.small};
+    line-height: 2;
+    white-space: nowrap;
+    border-radius: 1rem;
+  `,
+  Box: styled.div`
+    display: flex;
+    position: relative;
+
+    width: 30rem;
+    margin-bottom: 0.5rem;
+    padding: 1.6rem;
+
+    background-color: ${({ theme }) => theme.palette.background};
+    flex-direction: column;
+    border-radius: 1rem;
+    gap: 2rem;
+  `,
+};
+
+export default CS;