[#46] Feat: Admin Navigation 추가

src/App.js

@@ -19,6 +19,7 @@ import MyPage from "./pages/MyPage";
 import ErrorPage from "./pages/ErrorPage";
 import PrivacyPolicy from "./pages/PrivacyPolicy";
 import ThankYouPage from "./pages/ThankYouPage";
+import AdminPage from "./pages/AdminPage";
 
 function App() {
   return (
@@ -38,6 +39,7 @@ function App() {
           <Route path="/error" component={ErrorPage} />
           <Route path="/policy" component={PrivacyPolicy} />
           <Route path="/thankyou" component={ThankYouPage} />
+          <Route path="/admin" component={AdminPage} />
           <Redirect from="*" to="/" />
         </Switch>
         <Footer />

src/components/Admin/AdminLetters/AdminLetters.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const AdminLetters = () => {
+  return <div>Letters</div>;
+};
+
+export default AdminLetters;

src/components/Admin/AdminNavigation.jsx

@@ -0,0 +1,71 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import { AiOutlineMail, AiOutlineUser } from "react-icons/ai";
+
+const AdminNavigation = () => {
+  return (
+    <AdminNavigationList>
+      <AdminNavigationItem>
+        <LetterIcon />
+      </AdminNavigationItem>
+      <AdminNavigationItem>
+        <UserIcon />
+      </AdminNavigationItem>
+    </AdminNavigationList>
+  );
+};
+
+const AdminNavigationList = styled.ul`
+  background-color: #f1f3f5;
+  box-sizing: border-box;
+  max-width: 7rem;
+  width: 100%;
+  height: calc(100vh - 8rem);
+  margin-bottom: -6rem;
+  box-shadow: 5px 0px 30px 1px rgba(200, 200, 200, 0.5);
+  padding-top: 3.5rem;
+
+  @media ${({ theme }) => theme.device.mobile} {
+    height: 100vh;
+  }
+`;
+
+const NavigationItemStyles = css`
+  margin: 1.2rem 0rem;
+  padding: 1.5rem 0rem;
+  width: 100%;
+  text-align: center;
+  cursor: pointer;
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  &:hover {
+    border-right: 3px solid #faa2c1;
+
+    & > * {
+      color: #faa2c1;
+    }
+  }
+`;
+
+const AdminNavigationItem = styled.li`
+  ${NavigationItemStyles}
+`;
+
+const IconStyles = css`
+  font-size: 2.3rem;
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.5);
+`;
+
+const LetterIcon = styled(AiOutlineMail)`
+  ${IconStyles}
+`;
+
+const UserIcon = styled(AiOutlineUser)`
+  ${IconStyles}
+`;
+
+export default AdminNavigation;

src/components/Admin/AdminPageTitle.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const AdminPageTitle = () => {
+  return <div>Title</div>;
+};
+
+export default AdminPageTitle;

src/pages/AdminPage.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Route } from "react-router";
+import AdminNavigation from "../components/Admin/AdminNavigation";
+
+const AdminPage = () => {
+  return (
+    <>
+      <AdminNavigation />
+      <Route path="/admin/letters" />
+      <Route path="/admin/users" />
+    </>
+  );
+};
+
+export default AdminPage;