Merge pull request #68 from Beside-Potenday/kiyeong

로그인 화면 구현

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 <Wrapper> 어퍼 이미지</Wrapper>;
+  return (
+    <StyledWrapper>
+      <VStack spacing={4} align="flex-start">
+        <LeftBubble>
+          <Text fontSize="lg" fontWeight="bold">
+            메일 작성 한번 할 때마다 어떻게 써야할지 나만 막막해?
+          </Text>
+        </LeftBubble>
+        <LeftBubble>
+          <Text fontSize="lg">별거 아닌 것 같은데 막상 쓰려니 왜 이렇게 까다로운지...😢</Text>
+        </LeftBubble>
+        <RightBubble>
+          <Text fontSize="lg">알파메일로 메일 작성하면 1분도 안걸린다고?</Text>
+        </RightBubble>
+        <RightBubble>
+          <Text fontSize="lg">교수님께 보내는 메일..이제 수백번 안고쳐도 된다고!</Text>
+        </RightBubble>
+        <RightBubble>
+          <Text fontSize="lg">
+            누구나 일잘러가 될 수 있는 업무툴, 알파메일이 있으면 칼퇴도 문제없다
+          </Text>
+        </RightBubble>
+      </VStack>
+    </StyledWrapper>
+  );
 };
 
-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;
 `;

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`

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 (
-    <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;