[#46] Feat: Admin Main 레이아웃 구성

src/components/Admin/AdminLetters/AdminLetters.jsx

@@ -1,7 +1,24 @@
 import React from "react";
+import styled from "styled-components";
+import AdminMainTemplate from "../../Template/AdminMain/AdminMainTemplate";
+import AdminPageTitle from "../AdminPageTitle";
+import LetterConfigurationButtons from "./LetterConfigurationButtons";
 
 const AdminLetters = () => {
-  return <div>Letters</div>;
+  return (
+    <AdminMainTemplate>
+      <AdminLettersBlock>
+        <AdminPageTitle>신청곡 설정</AdminPageTitle>
+        <LetterConfigurationButtons />
+      </AdminLettersBlock>
+    </AdminMainTemplate>
+  );
 };
 
+const AdminLettersBlock = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
 export default AdminLetters;

src/components/Admin/AdminLetters/CurrentLetterState.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import styled from "styled-components";
+
+const CurrentLetterState = () => {
+  return <CurrentLetterStateBlock></CurrentLetterStateBlock>;
+};
+
+const CurrentLetterStateBlock = styled.div``;
+
+export default CurrentLetterState;

src/components/Admin/AdminLetters/LetterConfigurationButtons.jsx

@@ -0,0 +1,50 @@
+import React from "react";
+import styled, { css } from "styled-components";
+
+const LetterConfigurationButtons = () => {
+  return (
+    <ButtonsBlock>
+      <InitializeButton>신청곡 초기화</InitializeButton>
+      <RequestConfigurationButton>신청곡 중지</RequestConfigurationButton>
+    </ButtonsBlock>
+  );
+};
+
+const ButtonsBlock = styled.div`
+  margin-top: 3rem;
+`;
+
+const ButtonStyles = css`
+  margin: 0rem 1rem;
+  border: none;
+  border-radius: 0.3rem;
+  padding: 1rem 1.2rem;
+  color: #fff;
+  outline: none;
+  box-shadow: 7px 0px 35px 1px rgba(0, 0, 0, 0.2);
+  font-size: 1.2rem;
+  font-weight: 600;
+
+  &:first-child {
+    margin-left: 0rem;
+  }
+
+  &:hover {
+    opacity: 0.7;
+  }
+`;
+
+const InitializeButton = styled.button`
+  ${ButtonStyles}
+
+  background: #495057;
+  cursor: pointer;
+`;
+
+const RequestConfigurationButton = styled.button`
+  ${ButtonStyles}
+
+  background: #ffa8a8;
+`;
+
+export default LetterConfigurationButtons;

src/components/Admin/AdminNavigation.jsx

@@ -1,16 +1,21 @@
 import React from "react";
 import styled, { css } from "styled-components";
 import { AiOutlineMail, AiOutlineUser } from "react-icons/ai";
+import { Link } from "react-router-dom";
 
 const AdminNavigation = () => {
   return (
     <AdminNavigationList>
-      <AdminNavigationItem>
-        <LetterIcon />
-      </AdminNavigationItem>
-      <AdminNavigationItem>
-        <UserIcon />
-      </AdminNavigationItem>
+      <Link to="/admin/users">
+        <AdminNavigationItem>
+          <UserIcon />
+        </AdminNavigationItem>
+      </Link>
+      <Link to="/admin/letters">
+        <AdminNavigationItem>
+          <LetterIcon />
+        </AdminNavigationItem>
+      </Link>
     </AdminNavigationList>
   );
 };

src/components/Admin/AdminPageTitle.jsx

@@ -1,7 +1,14 @@
 import React from "react";
+import styled from "styled-components";
 
-const AdminPageTitle = () => {
-  return <div>Title</div>;
+const AdminPageTitle = ({ children }) => {
+  return <Title>{children}</Title>;
 };
 
+const Title = styled.h3`
+  font-size: 1.7rem;
+  color: rgba(0, 0, 0, 0.5);
+  text-align: center;
+`;
+
 export default AdminPageTitle;

src/components/Admin/AdminUsers/AdminUsers.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import AdminMainTemplate from "../../Template/AdminMain/AdminMainTemplate";
+import AdminPageTitle from "../AdminPageTitle";
+
+const AdminUsers = () => {
+  return (
+    <AdminMainTemplate>
+      <AdminPageTitle>회원 목록</AdminPageTitle>
+    </AdminMainTemplate>
+  );
+};
+
+export default AdminUsers;

src/components/Template/AdminMain/AdminMainTemplate.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import styled from "styled-components";
+
+const AdminMainTemplate = ({ children }) => {
+  return <AdminMainTemplateBlock>{children}</AdminMainTemplateBlock>;
+};
+
+const AdminMainTemplateBlock = styled.div`
+  margin: 4.5rem 10rem 0rem 10rem;
+  min-width: 800px;
+`;
+
+export default AdminMainTemplate;

src/pages/AdminPage.jsx

@@ -1,15 +1,22 @@
 import React from "react";
 import { Route } from "react-router";
+import styled from "styled-components";
+import AdminLetters from "../components/Admin/AdminLetters/AdminLetters";
 import AdminNavigation from "../components/Admin/AdminNavigation";
+import AdminUsers from "../components/Admin/AdminUsers/AdminUsers";
 
 const AdminPage = () => {
   return (
-    <>
+    <AdminPageBlock>
       <AdminNavigation />
-      <Route path="/admin/letters" />
-      <Route path="/admin/users" />
-    </>
+      <Route path="/admin/letters" component={AdminLetters} />
+      <Route path="/admin/users" component={AdminUsers} />
+    </AdminPageBlock>
   );
 };
 
+const AdminPageBlock = styled.div`
+  display: flex;
+`;
+
 export default AdminPage;