From de27ea7a9fef8c12a9a534795936efe3dad38714 Mon Sep 17 00:00:00 2001
From: jymaeng <jymaeng1234@gmail.com>
Date: Wed, 27 Nov 2024 23:22:19 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20qfeed-61=20=EB=9E=9C=EB=94=A9=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Landing/index.tsx | 67 +++++++++++++++++++++++++++++++++++++
 src/router/index.tsx        |  9 +++--
 src/styles/theme.ts         |  2 ++
 3 files changed, 76 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/Landing/index.tsx

diff --git a/src/pages/Landing/index.tsx b/src/pages/Landing/index.tsx
new file mode 100644
index 0000000..c1d2218
--- /dev/null
+++ b/src/pages/Landing/index.tsx
@@ -0,0 +1,67 @@
+import { Logo } from '@/components/ui/Logo/Logo';
+import theme from '@/styles/theme';
+import styled from '@emotion/styled';
+
+const STYLE = {
+  LOGO: {
+    WIDTH : '7rem',         // 112px
+    HEIGHT : '5.8125rem',   // 93px
+    MARGIN_TOP : '12.5rem', // 200px
+
+  },
+  TITLE: {
+    MARGIN_TOP : '2.5rem',  //40px
+  },
+  SUBTITLE: {
+    MARGIN_TOP : '17.5rem', //280px
+  }
+}
+
+export const LandingPage = () => {
+  return (
+    <Container>
+      <LogoWraper>
+        <Logo width={STYLE.LOGO.WIDTH} height={STYLE.LOGO.HEIGHT}/>
+        <Title>나의 취향 메이트 찾기</Title>
+        <SubTitle>Q-feed</SubTitle>
+      </LogoWraper>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display : flex;
+  justify-content : center;
+  align-items : center;
+  width : 100%;
+  height : 100vh;
+  background-color: ${theme.colors.backgroundBase};
+  background-image: linear-gradient(${theme.colors.background40}, ${theme.colors.background40});
+`;
+
+const LogoWraper = styled.div`
+  margin-top : ${STYLE.LOGO.MARGIN_TOP};
+  display : flex;
+  flex-direction : column;
+  align-items : center;
+  justify-content : center;
+`;
+
+const Title = styled.h1`
+  font : ${theme.typography.header1.fontFamily}
+  font-size : ${theme.typography.header1.size};
+  color : ${theme.colors.primary};
+  font-weight : bold;
+  margin-top: ${STYLE.TITLE.MARGIN_TOP};
+
+`;
+
+
+const SubTitle = styled.h2`
+  font : ${theme.typography.header2.fontFamily};
+  font-size : ${theme.typography.header2.size};
+  font-weight : bold;
+  color : ${theme.colors.primary};
+  weight : bold;
+  margin-top : ${STYLE.SUBTITLE.MARGIN_TOP};
+`;
diff --git a/src/router/index.tsx b/src/router/index.tsx
index 5e5050f..2773ef2 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -5,6 +5,7 @@ import Main from '@/pages/Main';
 import MyPage from '@/pages/MyPage';
 import QSpaceMainPage from '@/pages/QSpaceMain';
 import { createBrowserRouter } from 'react-router-dom';
+import { LandingPage } from '@/pages/Landing';
 
 const router = createBrowserRouter([
   {
@@ -24,13 +25,17 @@ const router = createBrowserRouter([
         element: <MyPage />,
       },
       {
-        path: '/qspace', // 홈 페이지
+        path: '/qspace', // 큐스페이스 페이지
         element: <QSpaceMainPage />,
       },
       {
-        path: '/login',
+        path: '/login', // 로그인 페이지
         element: <Login />,
       },
+      {
+        path: '/landing', //랜딩페이지
+        element: <LandingPage />,
+      },
 
     ],
   },
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
index 0c0ffba..69635ab 100644
--- a/src/styles/theme.ts
+++ b/src/styles/theme.ts
@@ -10,6 +10,8 @@ const theme = {
     textYellow: '#C1A830',
     kakaoYellow : '#FEE500',
     background: '#F3EBE0',
+    backgroundBase : '#FFF9F4',
+    background40: 'rgba(243, 235, 224, 0.4)',
     white: '#ffffff',
     white80: 'rgba(255, 255, 255, 0.8)',
     black: '#121212',