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

feaure-005~008: style페이지 추가 #118

Merged
merged 2 commits into from
Feb 19, 2024
Merged

feaure-005~008: style페이지 추가 #118

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
dab554c
feaure-005~008: style페이지 추가
seungwoohan12 Feb 19, 2024
aee2d61
Merge branch 'dev' into feature-006
seungwoohan12 Feb 19, 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
213 changes: 29 additions & 184 deletions src/pages/FindEmailPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useState} from 'react';
import styled from 'styled-components';
import * as FindEmailPageStyles from '@/styles/find/FindEmailPageStyle';
import { Link } from 'react-router-dom';
import smallLogo from "../assets/logo.png";
import theme from '@/styles/theme';
Expand Down Expand Up @@ -38,218 +39,62 @@ const FindEmailPage = () => {

if(isFind){
return (
<Container>
<FindEmailPageStyles.Container>
<FindEmail userName={name} email={email}/>
</Container>
</FindEmailPageStyles.Container>
);
}
return (
<Container>
<Wrapper>
<FindEmailPageStyles.Container>
<FindEmailPageStyles.Wrapper>
<ImageSlider/>
<MainSection>
<Intro>
<FindEmailPageStyles.MainSection>
<FindEmailPageStyles.Intro>
<img src={smallLogo} alt="로고 이미지" />
<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 style={{fontSize:"14px", color:"#BBB", fontWeight: "500", lineHeight: "1.6"}}>
</FindEmailPageStyles.FindButton>
<FindEmailPageStyles.TextTotalComponent style={{margin: "40px 0px 0px 0px"}}>
<FindEmailPageStyles.TextDiv style={{fontSize:"14px", color:"#BBB", fontWeight: "500", lineHeight: "1.6"}}>
계정이 기억나시나요?
</TextDiv>
</FindEmailPageStyles.TextDiv>
<StyledLink to="/sign-in">로그인</StyledLink>
</TextTotalComponent>
<TextTotalComponent style={{margin: "12px 0px 0px 0px"}}>
<TextDiv style={{fontSize:"14px", color:"#BBB", fontWeight: "500", lineHeight: "1.6"}}>
</FindEmailPageStyles.TextTotalComponent>
<FindEmailPageStyles.TextTotalComponent style={{margin: "12px 0px 0px 0px"}}>
<FindEmailPageStyles.TextDiv style={{fontSize:"14px", color:"#BBB", fontWeight: "500", lineHeight: "1.6"}}>
아직 계정이 없으신가요?
</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;
width: auto;
height: 840px;
margin-top: 300px;
`;

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%;
}
`;

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%;
}
`;

const InputBox = styled.input`
display: flex;
align-items: center;
margin-bottom : 8px;
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