Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

로고 클릭시 홈화면 이동, 인증번호 재전송 기능 수정 #127

Merged
merged 2 commits into from
Feb 20, 2024
Merged

로고 클릭시 홈화면 이동, 인증번호 재전송 기능 수정 #127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
582a381
로고 클릭시 홈화면 이동, 인증번호 재전송 기능 수정
seungwoohan12 Feb 20, 2024
4e5cf7d
Merge branch 'dev' into feature-006
seungwoohan12 Feb 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/PhoneCheck.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ const PhoneCheck : React.FC<PhoneCheckProps> = ({setCheck, tel, setTel, type}) =
const handleCertifyNum = async () => {
if(isSend){
SetIsCheck(false);
setTime(10);
setTime(5*60);
}
try{
const {data} = type === true ? (await sendSMSAPI({
Expand Down
228 changes: 41 additions & 187 deletions src/pages/FindEmailPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import NotFindUserModal from '@/components/modals/NotFindUserModal';
import PhoneCheck from '@/components/PhoneCheck';
import FindEmail from '@/components/FindEmail';
import ImageSlider from '@/components/ImageSlider';
import { useNavigate } from 'react-router-dom';

import theme from '@/styles/theme';

Expand Down Expand Up @@ -41,6 +42,12 @@ const FindEmailPage = () => {
}
};

const navigate = useNavigate();

const tohome = () => {
navigate('/');
};

if (isFind) {
return (
<FindEmailPageStyles.Container>
Expand All @@ -49,41 +56,46 @@ const FindEmailPage = () => {
);
}
return (
<Container>
<Wrapper>
<FindEmailPageStyles.Container>
<FindEmailPageStyles.Wrapper>
<ImageSlider />
<MainSection>
<Intro>
<LogoIcon />
<FindEmailPageStyles.MainSection>
<FindEmailPageStyles.Intro>
<LogoIcon onClick={tohome} />
<h3>이메일 찾기</h3>
<p>이메일이 기억나지 않으시나요?</p>
</Intro>
<InputSection>
<Label>
</FindEmailPageStyles.Intro>
<FindEmailPageStyles.InputSection>
<FindEmailPageStyles.Label>
<span>이름</span>
<InputBox
<FindEmailPageStyles.InputBox
type="text"
id="name"
name="name"
value={name}
placeholder="홍길동"
onChange={onChangeName}
readOnly={allChecked}
></InputBox>
</Label>
<TwoLabel>
></FindEmailPageStyles.InputBox>
</FindEmailPageStyles.Label>
<FindEmailPageStyles.TwoLabel>
<PhoneCheck
setCheck={setAllChecked}
tel={tel}
setTel={setTel}
type={false}
/>
</TwoLabel>
<FindButton disabled={!allChecked} onClick={findBtnHandler}>
</FindEmailPageStyles.TwoLabel>
<FindEmailPageStyles.FindButton
disabled={!allChecked}
onClick={findBtnHandler}
>
찾아보기
</FindButton>
<TextTotalComponent style={{ margin: '40px 0px 0px 0px' }}>
<TextDiv
</FindEmailPageStyles.FindButton>
<FindEmailPageStyles.TextTotalComponent
style={{ margin: '40px 0px 0px 0px' }}
>
<FindEmailPageStyles.TextDiv
style={{
fontSize: '14px',
color: '#BBB',
Expand All @@ -92,11 +104,13 @@ const FindEmailPage = () => {
}}
>
계정이 기억나시나요?
</TextDiv>
</FindEmailPageStyles.TextDiv>
<StyledLink to="/sign-in">로그인</StyledLink>
</TextTotalComponent>
<TextTotalComponent style={{ margin: '12px 0px 0px 0px' }}>
<TextDiv
</FindEmailPageStyles.TextTotalComponent>
<FindEmailPageStyles.TextTotalComponent
style={{ margin: '12px 0px 0px 0px' }}
>
<FindEmailPageStyles.TextDiv
style={{
fontSize: '14px',
color: '#BBB',
Expand All @@ -105,179 +119,19 @@ const FindEmailPage = () => {
}}
>
아직 계정이 없으신가요?
</TextDiv>
</FindEmailPageStyles.TextDiv>
<StyledLink to="/sign-up">이메일로 회원가입</StyledLink>
</TextTotalComponent>
</InputSection>
</MainSection>
</Wrapper>
</FindEmailPageStyles.TextTotalComponent>
</FindEmailPageStyles.InputSection>
</FindEmailPageStyles.MainSection>
</FindEmailPageStyles.Wrapper>
{isModal && <NotFindUserModal setIsShow={setIsModal} type={true} />}
</Container>
</FindEmailPageStyles.Container>
);
};

export default FindEmailPage;

const Container = styled.div`
display: flex;
`;

const Wrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-width: 1440px;
width: 100%;
min-height: 100vh;
gap: 124px;
`;

const MainSection = styled.div`
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: auto;
height: 840px;
`;

const Intro = styled.div`
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 40px;
img {
width: 64.55px;
height: 20px;
margin-bottom: 4px;
}
h3 {
color: #1e1e1e;
font-family: Pretendard;
font-size: 36px;
font-weight: bold;
line-height: 160%;
margin: 0;
}
p {
color: #bbb;
font-size: 16px;
font-weight: 500;
margin-top: 10px;
line-height: 160%;
}
`;

const InputSection = styled.div`
display: flex;
flex-direction: column;
align-items: center;
width: 600px;
height: auto;
`;

const Label = styled.label`
span {
font-size: 16px;
color: #787878;
font-family: Pretendard;
margin-bottom: 8px;
font-weight: 500;
line-height: 160%;
}

&:not(:first-of-type) {
margin-top: 20px;
}
`;

const TwoLabel = styled.label`
display: flex;
flex-direction: column;
margin-bottom: 8px;
span {
font-size: 16px;
font-family: Pretendard;
margin-bottom: 8px;
font-weight: 500;
line-height: 160%;
}

&:not(:first-of-type) {
margin-top: 20px;
}
`;

const InputBox = styled.input`
display: flex;
align-items: center;
justify-content: center;
width: 494px;
height: 56px;
padding: 0px 0px 0px 20px;
gap: 20px;
flex: 1 0 0;
font-size: 16px;
font-style: normal;
color: var(--Main, #1e1e1e);
font-family: Pretendard;
font-weight: 500;
line-height: 160%;
border-radius: 12px;
border: 1.5px solid var(--gray-200, #e8e8e8);
outline: none;

&:hover {
border: 1.5px solid #1e1e1e;
}
&:focus {
border: 1.5px solid #1e1e1e;
border-color: #1e1e1e;
}
&::placeholder {
color: #bbb;

${theme.typography.Body1};
}
`;

const FindButton = styled.button`
width: 494px;
height: 56px;
background: #1e1e1e;
color: #eeeeee;
font-size: 16px;
font-weight: 500;
line-height: 160%;
border-radius: 12px;
border: none;
font-family: Pretendard;
&:hover {
cursor: pointer;
}
&:disabled {
background-color: #f3f3f3;
color: #bbbbbb;
}
`;

const TextTotalComponent = styled.div`
display: flex;
flex-direction: row;
margin: '0px';
`;

const TextDiv = styled.div`
color: ${(props) => props.color || '#1e1e1e'};
text-transform: capitalize;
font-size: 36px;
font-weight: bold;
font-style: normal;
line-height: 160%; /* 57.6px */
font-family: Pretendard;
margin: '0px';
`;

const StyledLink = styled(Link)`
color: ${({ theme }) => theme.color.gray500};
${theme.typography.Body3};
Expand Down
Loading
Loading