diff --git a/package-lock.json b/package-lock.json
index 2f530e0..f4fbe1d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4727,6 +4727,7 @@
"version": "0.12.1",
"resolved": "https://registry.npmjs.org/@react-oauth/google/-/google-0.12.1.tgz",
"integrity": "sha512-qagsy22t+7UdkYAiT5ZhfM4StXi9PPNvw0zuwNmabrWyMKddczMtBIOARflbaIj+wHiQjnMAsZmzsUYuXeyoSg==",
+ "license": "MIT",
"peerDependencies": {
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
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/components/Layout/UpperImage.tsx b/src/components/Layout/UpperImage.tsx
index 9cd7d5d..e974fa9 100644
--- a/src/components/Layout/UpperImage.tsx
+++ b/src/components/Layout/UpperImage.tsx
@@ -1,11 +1,60 @@
+import { Box, Text, VStack } from '@chakra-ui/react';
import styled from '@emotion/styled';
export const UpperImage = () => {
- return 어퍼 이미지;
+ return (
+
+
+
+
+ 메일 작성 한번 할 때마다 어떻게 써야할지 나만 막막해?
+
+
+
+ 별거 아닌 것 같은데 막상 쓰려니 왜 이렇게 까다로운지...😢
+
+
+ 알파메일로 메일 작성하면 1분도 안걸린다고?
+
+
+ 교수님께 보내는 메일..이제 수백번 안고쳐도 된다고!
+
+
+
+ 누구나 일잘러가 될 수 있는 업무툴, 알파메일이 있으면 칼퇴도 문제없다
+
+
+
+
+ );
};
-const Wrapper = styled.div`
+const StyledWrapper = styled(Box)`
width: 100%;
height: 400px;
background-image: url('/images/upper_image.jpg');
+ background-size: cover;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 16px;
+`;
+
+const Bubble = styled(Box)`
+ max-width: 60%;
+ padding: 12px 16px;
+ border-radius: 20px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ margin-bottom: 8px;
+`;
+
+const LeftBubble = styled(Bubble)`
+ background: rgba(255, 255, 255, 0.8);
+ align-self: flex-start;
+`;
+
+const RightBubble = styled(Bubble)`
+ background: rgba(0, 123, 255, 0.8);
+ color: white;
+ align-self: flex-end;
`;
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
index 472220a..b782df1 100644
--- a/src/components/Layout/index.tsx
+++ b/src/components/Layout/index.tsx
@@ -24,6 +24,7 @@ export const Layout = () => {
const Wrapper = styled.div`
width: 100%;
position: relative;
+ padding-top: ${HEADER_HEIGHT};
`;
const UpperImageWrapper = styled.div`
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;