Skip to content

Commit

Permalink
feat: 리뷰 반영
Browse files Browse the repository at this point in the history
  • Loading branch information
@skiende74
skiende74 committed Nov 10, 2024
1 parent d153b8f commit 013afc7
Show file tree
Hide file tree
Showing 4 changed files with 93 additions and 189 deletions.
83 changes: 17 additions & 66 deletions frontend/src/components/ResetPassword/EnterVerificationCodeStep.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import styled from '@emotion/styled';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';

Expand All @@ -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 {
Expand All @@ -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: '',
Expand All @@ -37,6 +37,7 @@ const SendVerificationEmailStep = ({ args: { email }, onNext }: Props) => {
onSuccess: () => setIsComplete(true),
onError: error => setPostErrorMessage(error.message),
});

const handleClickNext = () => {
onNext({ code, email });
};
Expand All @@ -55,28 +56,30 @@ 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">
<FormField.Input
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
Expand All @@ -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;
`,
};
69 changes: 8 additions & 61 deletions frontend/src/components/ResetPassword/ResetPasswordStep.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import styled from '@emotion/styled';
import { useNavigate } from 'react-router-dom';

import { BangBangIcon, BangGgoodTextIcon } from '@/assets/assets';
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';

Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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;
`,
};
73 changes: 11 additions & 62 deletions frontend/src/components/ResetPassword/SendVerificationEmailStep.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import styled from '@emotion/styled';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';

Expand All @@ -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';

Expand Down Expand Up @@ -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">
Expand All @@ -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()} />}
Expand All @@ -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;
`,
};
Loading

0 comments on commit 013afc7

Please sign in to comment.