feat: main page UI #46

Author: novice0840

frontend/src/pages/MainPage/MainPage.styled.ts

@@ -0,0 +1,30 @@
+import { css } from '@emotion/react';
+
+import { Theme } from '@/styles/Theme';
+
+export const mainPageLayout = css`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+
+  background-color: ${Theme.color.peanut200};
+  gap: 3rem;
+`;
+
+export const logoWrapper = css`
+  width: 16rem;
+  height: 16rem;
+
+  background-color: white;
+`;
+
+export const title = css`
+  font-size: 4.8rem;
+`;
+
+export const intro = css`
+  color: ${Theme.color.gray400};
+  font-size: 1.6rem;
+`;

frontend/src/pages/MainPage/MainPage.tsx

@@ -1,7 +1,24 @@
-import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { mainPageLayout, logoWrapper, title, intro } from './MainPage.styled';
+
+import Button from '@/components/common/Button/Button';
 
 const MainPage = () => {
-  return <div>this is main page</div>;
+  const navigate = useNavigate();
+
+  const goToNicknamePage = () => {
+    navigate('/nickname');
+  };
+
+  return (
+    <div css={mainPageLayout}>
+      <div css={logoWrapper}>LO to the GO</div>
+      <h1 css={title}>땅콩</h1>
+      <div css={intro}>어색한 분위기를 주도해봐요</div>
+      <Button text="방 만들기" active={true} onClick={goToNicknamePage}></Button>
+    </div>
+  );
 };
 
 export default MainPage;

frontend/src/styles/GlobalStyle.ts

@@ -143,7 +143,6 @@ const GlobalStyle = css`
   ${reset}
 
   html {
-    margin-top: 3rem;
     font-size: 10px;
   }