Skip to content

Commit

Permalink
feat: 로그인화면 제작
Browse files Browse the repository at this point in the history
gogumalatte committed Aug 7, 2024
1 parent 81bd88a commit 5143f1c
Showing 2 changed files with 80 additions and 11 deletions.
9 changes: 9 additions & 0 deletions public/images/personIcon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
82 changes: 71 additions & 11 deletions src/pages/Login/index.tsx
Original file line number Diff line number Diff line change
@@ -1,26 +1,69 @@
import styled from '@emotion/styled';
import { Box, ChakraProvider, Image, Text } from '@chakra-ui/react';

export const Login = () => {
return (
<Wrapper>
<img src="/images/loginLogo.svg" alt="로그인 이미지" />
<a href="https://alphamail.site/google/login">
<LoginButton>
<img src="/images/googleIcon.svg" alt="구글 아이콘"></img>구글 계정으로 로그인
</LoginButton>
</a>
</Wrapper>
<ChakraProvider>
<Wrapper>
<CenterBox>
<Card>
<Image src="/images/loginLogo.svg" alt="로그인 이미지" />
<DescriptionText>
간편하게 로그인하고 알파메일에서 제공하는 다양한 기능을 이용해보세요!
</DescriptionText>
<Image src="/images/personIcon.svg" alt="사람 그림" mb={8} />
<a href="https://alphamail.site/google/login">
<LoginButton>
<Image src="/images/googleIcon.svg" alt="구글 아이콘" />
구글 계정으로 로그인
</LoginButton>
</a>
<AgreementText>
<Text as="span" fontWeight="bold">alphamail의 이용약관</Text><Text as="span" fontWeight="bold">개인정보 처리방침</Text>에 동의합니다.
</AgreementText>
</Card>
</CenterBox>
</Wrapper>
</ChakraProvider>
);
};

const Wrapper = styled.div`
width: 630px;
height: 670px;
width: 100vw;
height: 100vh;
background-color: #e5f3ff;
display: flex;
justify-content: center;
align-items: center;
`;

const CenterBox = styled.div`
width: 45vw;
height: 80vh;
background-color: rgba(165, 165, 165, 0.2);
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
`;

const Card = styled(Box)`
width: 43vw;
height: 77vh;
background-color: #ffffff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 10px;
padding: 20px;
padding-top: 40px;
padding-bottom: 40px;
`;

const LoginButton = styled.button`
display: flex;
width: 473px;
width: 20vw;
height: 50px;
padding: 0px 19px;
justify-content: center;
@@ -39,3 +82,20 @@ const LoginButton = styled.button`
line-height: 140%; /* 22.4px */
letter-spacing: -0.32px;
`;

const DescriptionText = styled(Text)`
font-size: 16px;
margin-top: 16px;
margin-bottom: 30px;
text-align: center;
color: #6f6f71;
`;

const AgreementText = styled(Text)`
font-size: 12px;
color: #6F6F71;
margin-top: 20px;
text-align: center;
`;

export default Login;

0 comments on commit 5143f1c

Please sign in to comment.