From b6ae3f6c4bdfa512cc2df21ead1a4484debbd35b Mon Sep 17 00:00:00 2001
From: JoGeumJu <ccho8702@naver.com>
Date: Wed, 1 Feb 2023 03:14:29 +0900
Subject: [PATCH] =?UTF-8?q?[#1]=20=ED=8F=B4=EB=8D=94=EB=AA=85=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=20-=20=ED=8F=B4=EB=8D=94=EB=AA=85=EC=9D=80=20?=
 =?UTF-8?q?=EC=86=8C=EB=AC=B8=EC=9E=90=EB=A1=9C=20=EC=8B=9C=EC=9E=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/loginPage/LoginPage.tsx | 100 +++++++++++++++++++++++++
 1 file changed, 100 insertions(+)
 create mode 100644 src/components/loginPage/LoginPage.tsx

diff --git a/src/components/loginPage/LoginPage.tsx b/src/components/loginPage/LoginPage.tsx
new file mode 100644
index 0000000..a84fb13
--- /dev/null
+++ b/src/components/loginPage/LoginPage.tsx
@@ -0,0 +1,100 @@
+import styled from "styled-components";
+import Image from "next/image";
+import kakaoLogin from "../../assets/img/login/kakaoLogin.png";
+import google from "../../assets/img/login/google.png";
+import { customColor } from "../customColor";
+
+export const LoginPage = () => {
+  return (
+    <Wrapper>
+      <Content>
+        간편하게 로그인하고
+        <br />
+        다양한 서비스를 이용하세요
+        <Logins>
+          <KakaoLogin>
+            <Image
+              src={kakaoLogin}
+              fill
+              alt="kakaoLogin"
+              style={{ objectFit: "cover" }}
+            />
+          </KakaoLogin>
+          <GoogleLogin>
+            <Image src={google} width={20} alt="googleLogin" />
+            <GoogleText>구글 로그인</GoogleText>
+          </GoogleLogin>
+        </Logins>
+      </Content>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.section`
+  display: flex;
+  padding: 12px;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  overflow: auto;
+  ::-webkit-scrollbar {
+    width: 12px;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: ${customColor.indigo3 + "aa"};
+    border-radius: 20px;
+    background-clip: padding-box;
+    border: 4px solid transparent;
+  }
+`;
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  font-size: 24px;
+  text-align: center;
+  letter-spacing: -0.5px;
+  gap: 60px 0;
+`;
+const Logins = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 32px 0;
+`;
+const KakaoLogin = styled.button`
+  display: flex;
+  position: relative;
+  border: none;
+  width: 300px;
+  height: 45px;
+  border-radius: 8px;
+  background: #fee500;
+  cursor: pointer;
+  box-shadow: 1px 1px 4px 0 ${customColor.black + "33"};
+`;
+const GoogleLogin = styled.button`
+  display: flex;
+  position: relative;
+  border: none;
+  width: 300px;
+  height: 45px;
+  cursor: pointer;
+  background: ${customColor.white};
+  padding: 0 14px;
+  align-items: center;
+  border-radius: 8px;
+  box-shadow: 1px 1px 4px 0 ${customColor.black + "33"};
+`;
+const GoogleText = styled.p`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  font-weight: bold;
+  font-size: 14px;
+  color: ${customColor.black + "aa"};
+  transform: translate(calc(-50% + 10px), -50%);
+  letter-spacing: -0.5px;
+  /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; */
+  font-family: Roboto;
+`;