diff --git a/public/images/personIcon.svg b/public/images/personIcon.svg
new file mode 100644
index 0000000..b89668f
--- /dev/null
+++ b/public/images/personIcon.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
index 02652ed..cb502ef 100644
--- a/src/pages/Login/index.tsx
+++ b/src/pages/Login/index.tsx
@@ -1,26 +1,69 @@
import styled from '@emotion/styled';
+import { Box, ChakraProvider, Image, Text } from '@chakra-ui/react';
export const Login = () => {
return (
-
- 
-
-
- 
구글 계정으로 로그인
-
-
-
+
+
+
+
+
+
+ 간편하게 로그인하고 알파메일에서 제공하는 다양한 기능을 이용해보세요!
+
+
+
+
+
+ 구글 계정으로 로그인
+
+
+
+ alphamail의 이용약관과 개인정보 처리방침에 동의합니다.
+
+
+
+
+
);
};
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;