Merge pull request #107 from LEEJW1953/fe-main

[Feat] 메인페이지 레이아웃 구현

app/frontend/src/App.tsx

@@ -1,13 +1,19 @@
-import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import { RouterProvider, createBrowserRouter, Outlet } from 'react-router-dom';
 
 import { Header } from '@/components';
-import '@/styles/reset.css';
+import { Main } from '@/pages';
 
 const router = createBrowserRouter([
   {
     path: '/',
-    element: <Header />,
+    element: (
+      <>
+        <Header />
+        <Outlet />
+      </>
+    ),
     children: [
+      { path: '/', element: <Main /> },
       {
         path: 'mogaco',
         element: <>모각코</>,

app/frontend/src/components/commons/Button/index.css.ts

@@ -7,6 +7,7 @@ export const button = recipe({
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
+    gap: '1rem',
     fontFamily: vars.font.family.pretendard,
     fontWeight: vars.font.weight.semibold,
     border: '1px solid transparent',

app/frontend/src/components/index.ts

@@ -1,3 +1,4 @@
+export * from './commons/Button';
 export * from './commons/Header';
 export * from './commons/Input';
 export * from './commons/Popover';

app/frontend/src/constants/Main.ts

@@ -0,0 +1 @@
+export const MAIN_IMAGE = '/src/assets/images/main.png';

app/frontend/src/constants/index.ts

@@ -1 +1,2 @@
 export * from './Header';
+export * from './Main';

app/frontend/src/pages/Main/index.css.ts

@@ -0,0 +1,54 @@
+import { style } from '@vanilla-extract/css';
+
+import { vars, fontStyle } from '@/styles';
+
+export const container = style({
+  position: 'relative',
+  display: 'flex',
+  margin: '8.5rem auto',
+  width: '104rem',
+  height: '81.7rem',
+  color: vars.color.grayscale400,
+  background: vars.color.grayscaleWhite,
+});
+
+export const login = style({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const mainImage = style({
+  width: '69.7rem',
+  height: '69.7rem',
+  alignSelf: 'flex-end',
+  objectFit: 'contain',
+});
+
+export const text = style([
+  fontStyle.sansRegular24,
+  {
+    color: vars.color.grayscale400,
+    textAlign: 'right',
+    lineHeight: '3.5rem',
+  },
+]);
+
+export const textArea = style({
+  position: 'absolute',
+  right: '0',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-end',
+  gap: '1.2rem',
+});
+
+export const title = style([
+  fontStyle.poppinsBold96,
+  {
+    display: 'flex',
+    justifyContent: 'center',
+    textAlign: 'center',
+    color: vars.color.morakGreen,
+  },
+]);

app/frontend/src/pages/Main/index.tsx

@@ -0,0 +1,27 @@
+import { ReactComponent as GoogleIcon } from '@/assets/icons/google.svg';
+import { Button } from '@/components';
+import { MAIN_IMAGE } from '@/constants';
+
+import * as styles from './index.css';
+
+export function Main() {
+  return (
+    <div className={styles.container}>
+      <img src={MAIN_IMAGE} alt="main" className={styles.mainImage} />
+      <div className={styles.textArea}>
+        <div className={styles.title}>morak</div>
+        <div className={styles.text}>
+          함께라서 더 빛나는 코드의 세계
+          <br />
+          모락과 함께하세요
+        </div>
+        <div className={styles.login}>
+          <Button type="button" theme="primary" shape="line" size="large" onClick={() => {}}>
+            <GoogleIcon />
+            Google로 시작하기
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

app/frontend/src/pages/index.ts

@@ -1 +1 @@
-// export * from "";
+export { Main } from './Main';

app/frontend/src/styles/font.css.ts

@@ -17,17 +17,24 @@ const poppinsBold = style({
   fontWeight: vars.font.weight.bold,
 });
 
-export const sansBold12 = style([
-  sansBold,
+export const poppinsBold30 = style([
+  poppinsBold,
   {
-    fontSize: '1.2rem',
+    fontSize: '3rem',
   },
 ]);
 
-export const poppinsBold30 = style([
+export const poppinsBold96 = style([
   poppinsBold,
   {
-    fontSize: '3rem',
+    fontSize: '9.6rem',
+  },
+]);
+
+export const sansBold12 = style([
+  sansBold,
+  {
+    fontSize: '1.2rem',
   },
 ]);