From 3d79c422790a729e9e660f6473cc6f8ad9e9ad93 Mon Sep 17 00:00:00 2001
From: dutexion <dutexion@gmail.com>
Date: Mon, 6 May 2024 23:10:27 +0900
Subject: [PATCH] style :: login page publish

---
 src/pages/Login.tsx | 47 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 src/pages/Login.tsx

diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
new file mode 100644
index 0000000..aea254c
--- /dev/null
+++ b/src/pages/Login.tsx
@@ -0,0 +1,47 @@
+import styled from '@emotion/styled';
+import { Input } from '@/components/common/Input';
+import { XButton } from '@/components/common/XButton';
+
+export const Login = () => {
+  return (
+    <Wrapper>
+      <Title>Xquare에 로그인</Title>
+      <InputContainer>
+        <Input label="이메일" width={326} />
+        <Input label="암호" width={326} type="password" />
+      </InputContainer>
+      <ButtonContainer>
+        <XButton width={100} height={50}>
+          로그인
+        </XButton>
+      </ButtonContainer>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  width: 100%;
+  height: calc(100vh - 80px + 200px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 60px;
+  padding-top: 180px;
+`;
+
+const Title = styled.div`
+  font-size: 24px;
+  font-weight: 700;
+`;
+
+const InputContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
+const ButtonContainer = styled.div`
+  width: 326px;
+  display: flex;
+  justify-content: end;
+`;