Merge pull request #624 from 42organization/Feat/프론트_관리자_페이지_레이아웃_생성_…

…#621

[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,67 @@
+import { useRouter } from 'next/router';
+import SideNavContent from './SideNavContent';
+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.replace('/admin', '');
+
+  return (
+    <div className={styles.container}>
+      <SideNavContent
+        url={'/users'}
+        menuName={'유저 관리'}
+        currentPath={currentPath}
+      >
+        <GrUserSettings className={styles.logo} />
+      </SideNavContent>
+
+      <SideNavContent
+        url={'/feedback'}
+        menuName={'피드백 관리'}
+        currentPath={currentPath}
+      >
+        <MdOutlineMessage className={styles.logo} />
+      </SideNavContent>
+
+      <SideNavContent
+        url={'/announcement'}
+        menuName={'공지사항 관리'}
+        currentPath={currentPath}
+      >
+        <GrAnnounce className={styles.logo} />
+      </SideNavContent>
+
+      <SideNavContent
+        url={'/notification'}
+        menuName={'알림 관리'}
+        currentPath={currentPath}
+      >
+        <GrNotification className={styles.logo} />
+      </SideNavContent>
+
+      <SideNavContent
+        url={'/penalty'}
+        menuName={'페널티 관리'}
+        currentPath={currentPath}
+      >
+        <GrStatusWarning className={styles.logo} />
+      </SideNavContent>
+
+      <SideNavContent
+        url={'/slot'}
+        menuName={'슬롯 관리'}
+        currentPath={currentPath}
+      >
+        <GoSettings className={styles.logo} />
+      </SideNavContent>
+    </div>
+  );
+}

components/admin/SideNavContent.tsx

@@ -0,0 +1,29 @@
+import Link from 'next/link';
+import styles from 'styles/admin/SideNavContent.module.scss';
+
+type SideNavContentProps = {
+  url: string;
+  menuName: string;
+  currentPath: string;
+  children: React.ReactNode;
+};
+
+export default function SideNavContent({
+  url,
+  menuName,
+  currentPath,
+  children,
+}: SideNavContentProps) {
+  return (
+    <Link href={`/admin${url}`}>
+      <div
+        className={`${styles.content} ${
+          currentPath === url && styles.selected
+        }`}
+      >
+        {children}
+        <div className={styles.contentText}>{menuName}</div>
+      </div>
+    </Link>
+  );
+}

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,48 @@
+@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;
+  cursor: pointer;
+}
+
+.homeButton {
+  @include button(white, black, 4rem, 2.5rem);
+  background: white;
+  border: 1px solid $medium-gray;
+}
+
+.homeButton:hover {
+  background: linear-gradient(to bottom, white, $light-gray);
+}
+
+.container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}

styles/admin/SideNav.module.scss

@@ -0,0 +1,17 @@
+@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);
+}
+
+.logo {
+  width: 18px;
+  height: 18px;
+  margin-left: 3px;
+}

styles/admin/SideNavContent.module.scss

@@ -0,0 +1,26 @@
+@import 'styles/common.scss';
+
+.content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 2rem;
+  padding: 0 0.5rem;
+  margin-bottom: 0.5rem;
+  border-radius: 0.75rem;
+  border: 1px solid rgba(0, 0, 0, 0);
+  cursor: pointer;
+}
+
+.content:hover {
+  border: 1px solid $medium-gray;
+}
+
+.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;
 }