FIRE-281 add mainPage

mainpage에서 기본적인 레이아웃 구정완료

src/App.tsx

@@ -4,6 +4,7 @@ import Lobby from './pages/Lobby';
 import Layout from './components/layout/Layout';
 import Login from './pages/Login';
 import Room from './pages/Room';
+import Main from './pages/Main';
 
 function App() {
   return (
@@ -18,6 +19,9 @@ function App() {
         <Route path="/room" element={<Layout />}>
           <Route path=":roomId" element={<Room />} />
         </Route>
+        <Route path="/main" element={<Layout />}>
+          <Route index element={<Main />} />
+        </Route>
       </Routes>
     </BrowserRouter>
   );

src/pages/Main.tsx

@@ -0,0 +1,87 @@
+import styled from 'styled-components';
+
+export default function Main() {
+  return (
+    <Container>
+      <Header>
+        <Logo>modoco</Logo>
+        <Profile />
+      </Header>
+      <TitleContainer>
+        <Title>모여서 도란도란</Title>
+        <Title>코딩해요</Title>
+      </TitleContainer>
+      <Search />
+      <RandomEnter />
+    </Container>
+  );
+}
+
+const RandomEnter = styled.div`
+  width: 16.1rem;
+  height: 5.4rem;
+  background-color: white;
+  margin-top: 4rem;
+  border-radius: 6.2rem;
+`;
+
+const Search = styled.div`
+  width: 52.6rem;
+  height: 5.6rem;
+  margin-top: 2.4rem;
+  background-color: transparent;
+  border-radius: 10rem;
+  background-color: lightgray;
+  border: solid 0.1rem #374151;
+`;
+
+const TitleContainer = styled.div`
+  margin-top: 6rem;
+  width: 62rem;
+  height: 16rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const Title = styled.h1`
+  font-family: GmarketSansTTFBold;
+  font-size: 7.2rem;
+  align-self: center;
+  color: #ffffff;
+`;
+
+const Logo = styled.div`
+  font-size: 2.4rem;
+  font-family: PretendardRegular, Arial;
+  position: absolute;
+  left: 4rem;
+`;
+
+const Profile = styled.div`
+  background-color: gray;
+  right: 4rem;
+  position: absolute;
+  height: 4rem;
+  width: 9rem;
+  border-radius: 4.8rem;
+`;
+
+const Header = styled.div`
+  width: 100%;
+  height: 10rem;
+  color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-bottom: solid #2b2e41 0.1rem;
+`;
+
+const Container = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #18181b;
+`;