[Feat] 프론트 관리자 페이지 레이아웃 생성 #621

components/Layout/Layout.tsx

@@ -12,6 +12,7 @@ import Statistics from 'pages/statistics';
 import Header from './Header';
 import Footer from './Footer';
 import CurrentMatch from './CurrentMatch';
+import AdminLayout from '../admin/Layout';
 import styles from 'styles/Layout/Layout.module.scss';
 
 type AppLayoutProps = {
@@ -100,7 +101,9 @@ export default function AppLayout({ children }: AppLayoutProps) {
     }
   };
 
-  return (
+  return presentPath.includes('/admin') && user.isAdmin ? (
+    <AdminLayout>{children}</AdminLayout>
+  ) : (
     <div className={styles.appContainer}>
       <div className={styles.background}>
         <div>

components/admin/Layout.tsx

@@ -0,0 +1,26 @@
+import Link from 'next/link';
+import SideNav from './SideNav';
+import styles from 'styles/admin/Layout.module.scss';
+
+type AdminLayoutProps = {
+  children: React.ReactNode;
+};
+
+export default function AdminLayout({ children }: AdminLayoutProps) {
+  return (
+    <div className={styles.adminContainer}>
+      <div className={styles.header}>
+        <Link href='/admin'>
+          <div className={styles.title}>관리자 페이지</div>
+        </Link>
+        <Link href='/'>
+          <button className={styles.homeButton}>Home</button>
+        </Link>
+      </div>
+      <div className={styles.container}>
+        <SideNav />
+        {children}
+      </div>
+    </div>
+  );
+}

components/admin/SideNav.tsx

@@ -0,0 +1,87 @@
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import { GoSettings } from 'react-icons/go';
+import { MdOutlineMessage } from 'react-icons/md';
+import {
+  GrUserSettings,
+  GrNotification,
+  GrStatusWarning,
+  GrAnnounce,
+} from 'react-icons/gr';
+import styles from 'styles/admin/SideNav.module.scss';
+
+export default function SideNav() {
+  const currentPath = useRouter().asPath;
+  const [selectedPath, setSelectedPath] = useState(currentPath);
+
+  useEffect(
+    () => setSelectedPath(currentPath.replace('/admin', '')),
+    [currentPath]
+  );
+
+  return (
+    <div className={styles.container}>
+      <Link href='/admin/users'>
+        <div
+          className={`${styles.content} ${
+            selectedPath === '/users' && styles.selected
+          }`}
+        >
+          <GrUserSettings className={styles.logo} />
+          <div className={styles.contentText}>유저 관리</div>
+        </div>
+      </Link>
+      <Link href='/admin/feedback'>
+        <div
+          className={`${styles.content} ${
+            selectedPath === '/feedback' && styles.selected
+          }`}
+        >
+          <MdOutlineMessage className={styles.logo} />
+          <div className={styles.contentText}>피드백 관리</div>
+        </div>
+      </Link>
+      <Link href='/admin/announcement'>
+        <div
+          className={`${styles.content} ${
+            selectedPath === '/announcement' && styles.selected
+          }`}
+        >
+          <GrAnnounce className={styles.logo} />
+          <div className={styles.contentText}>공지사항 관리</div>
+        </div>
+      </Link>
+      <Link href='/admin/notification'>
+        <div
+          className={`${styles.content} ${
+            selectedPath === '/notification' && styles.selected
+          }`}
+        >
+          <GrNotification className={styles.logo} />
+          <div className={styles.contentText}>알림 관리</div>
+        </div>
+      </Link>
+      <Link href='/admin/penalty'>
+        <div
+          className={`${styles.content} ${
+            selectedPath === '/penalty' && styles.selected
+          }`}
+        >
+          <GrStatusWarning className={styles.logo} />
+          <div className={styles.contentText}>페널티 관리</div>
+        </div>
+      </Link>
+      <Link href='/admin/slot'>
+        <div
+          className={`${styles.content} ${
+            selectedPath === '/slot' && styles.selected
+          }`}
+        >
+          <GoSettings className={styles.logo} />
+          <div className={styles.contentText}>슬롯 관리</div>
+        </div>
+      </Link>
+    </div>
+  );
+}

pages/admin/announcement.tsx

@@ -0,0 +1,3 @@
+export default function Announcement() {
+  return <div>announcement page</div>;
+}

pages/admin/feedback.tsx

@@ -0,0 +1,3 @@
+export default function Feedback() {
+  return <div>feedback page</div>;
+}

pages/admin/index.tsx

@@ -0,0 +1,3 @@
+export default function Admin() {
+  return <div>admin page</div>;
+}

pages/admin/notification.tsx

@@ -0,0 +1,3 @@
+export default function Notification() {
+  return <div>notification page</div>;
+}

pages/admin/penalty.tsx

@@ -0,0 +1,3 @@
+export default function Penalty() {
+  return <div>penalty page</div>;
+}

pages/admin/slot.tsx

@@ -0,0 +1,3 @@
+export default function Slot() {
+  return <div>slot page</div>;
+}

pages/admin/users.tsx

@@ -0,0 +1,3 @@
+export default function Users() {
+  return <div>users page</div>;
+}

styles/admin/Layout.module.scss

@@ -0,0 +1,41 @@
+@import 'styles/common.scss';
+
+.adminContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100vw;
+  min-width: 720px;
+  height: 100vh;
+  background: white;
+}
+
+.header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 4.5rem;
+  padding: 0 1.5rem;
+  background: white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+}
+
+.title {
+  color: black;
+  font-family: $admin-font;
+  font-size: $giant-font;
+}
+
+.homeButton {
+  @include button(white, black, 4rem, 2.5rem);
+}
+
+.container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}

styles/admin/SideNav.module.scss

@@ -0,0 +1,36 @@
+@import 'styles/common.scss';
+
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 250px;
+  height: 100%;
+  padding: 0.5rem;
+  margin-top: 0.2rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+}
+
+.content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 2rem;
+  padding: 0 0.5rem;
+  margin-bottom: 0.5rem;
+  border-radius: 0.75rem;
+}
+
+.logo {
+  width: 18px;
+  height: 18px;
+  margin-left: 3px;
+}
+
+.contentText {
+  font-family: $admin-font;
+  margin-left: 0.75rem;
+}
+
+.selected {
+  background: #f3f4f6;
+}

styles/common.scss

@@ -46,6 +46,7 @@ $winner-blue: #040eff;
 /* font */
 $logo-font: 'Agonostic Italic', cursive;
 $title-font: 'Reality Hyper Regular', cursive;
+$admin-font: 'Inter', cursive;
 $text-border-black: 0.1rem 0 black, 0 0.1rem black, -0.1rem 0 black,
   0 -0.1rem black;
 $text-shadow-red: 2px 2px 0px $pp-red;

styles/globals.css

@@ -21,6 +21,13 @@ body {
   font-style: normal;
 }
 
+@font-face {
+  font-family: 'Inter';
+  src: url('../public/font/Inter-VariableFont_slnt,wght.ttf') format('opentype');
+  font-weight: normal;
+  font-style: normal;
+}
+
 ::-webkit-scrollbar {
   display: none;
 }