Merge pull request whatever-mentoring#9 from whatever-mentoring/featu…

…re/Main-page

feat: 메인 페이지 ui 제작

src/App.tsx

@@ -1,21 +1,41 @@
 import Main from 'pages/Main';
+import Answer from 'pages/Answer';
+import PostDetail from 'pages/Main/PostDetail';
+import Search from 'pages/Main/Search';
+import React from 'react';
 import { Mypage } from 'pages/Mypage';
 import { MyComment } from 'pages/Mypage/MyComment';
 import { MyQna } from 'pages/Mypage/MyQna';
 import { MyScrap } from 'pages/Mypage/MyScrap';
 import { Provision } from 'pages/Mypage/Provision';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import WriteAnswer from 'pages/Answer/WriteAnswer';
+import Ask from 'pages/Ask';
+import WriteQuestion from 'pages/Ask/WriteQuestion';
 
 function App() {
   return (
     <BrowserRouter>
       <Routes>
+        {/* MainPage */}
+        <Route path="/" element={<Main />} />
+        <Route path="/post/:id" element={<PostDetail />} />
+        <Route path="/search" element={<Search />} />
+
+        {/* AnswerPage */}
+        <Route path="/answer" element={<Answer />} />
+        <Route path="/answer/:id" element={<WriteAnswer />} />
+
+        {/* AskPage */}
+        <Route path="/ask" element={<Ask />} />
+        <Route path="/ask/write" element={<WriteQuestion />} />
+
+        {/* MyPage */}
         <Route path="/myPage" element={<Mypage />} />
         <Route path="/myPage/myQna" element={<MyQna />} />
         <Route path="/myPage/myComment" element={<MyComment />} />
         <Route path="/myPage/myScrap" element={<MyScrap />} />
         <Route path="/myPage/provision" element={<Provision />} />
-        <Route path="/" element={<Main />} />
       </Routes>
     </BrowserRouter>
   );

src/assets/common.ts

@@ -1,9 +1,13 @@
+import { Link } from 'react-router-dom';
 import { styled } from 'styled-components';
 import { Palette } from 'styles/Palette';
 
-export const EntireContainer = styled.div<{ homebar?: boolean }>`
+export const EntireContainer = styled.div<{
+  homebar?: boolean;
+  background?: string;
+}>`
   padding: 25px 30px;
-  background: ${Palette.Gray05};
+  background: ${({ background }) => (background ? background : Palette.White)};
   height: ${({ homebar }) =>
     homebar ? 'calc(100vh - 156px)' : 'calc(100vh - 60px)'};
   overflow: auto;
@@ -70,3 +74,8 @@ export const TextContainer = styled.div<{ gap?: number }>`
   flex-direction: column;
   gap: ${({ gap }) => (gap ? gap : 0)}px;
 `;
+
+export const StyledLink = styled(Link)<{ color?: string }>`
+  text-decoration: none;
+  color: ${({ color }) => (color ? color : Palette.Black)};
+`;