Merge pull request #15 from GDSC-Hongik/feature/layout

[Feature] client, admin layout 구축
GDSC-Hongik · Aug 13, 2024 · a514e0f · a514e0f
2 parents 178c622 + 0f1293b
commit a514e0f
Show file tree

Hide file tree

Showing 74 changed files with 789 additions and 225 deletions.
diff --git a/apps/admin/app/fonts/GeistMonoVF.woff b/apps/admin/app/fonts/GeistMonoVF.woff
diff --git a/apps/admin/app/fonts/GeistVF.woff b/apps/admin/app/fonts/GeistVF.woff
diff --git a/apps/admin/app/global.css b/apps/admin/app/global.css
@@ -1 +1,56 @@
 @layer reset, base, tokens, recipes, utilities;
+@import url("@wow-class/ui/styles.css");
+
+@font-face {
+  font-family: "SUIT";
+  font-weight: 200;
+  src: url("/fonts/SUIT-Thin.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "SUIT";
+  font-weight: 300;
+  src: url("/fonts/SUIT-ExtraLight.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "SUIT";
+  font-weight: 400;
+  src: url("/fonts/SUIT-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "SUIT";
+  font-weight: 500;
+  src: url("/fonts/SUIT-Medium.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "SUIT";
+  font-weight: 600;
+  src: url("/fonts/SUIT-SemiBold.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "SUIT";
+  font-weight: 700;
+  src: url("/fonts/SUIT-Bold.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "SUIT";
+  font-weight: 800;
+  src: url("/fonts/SUIT-ExtraBold.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "SUIT";
+  font-weight: 900;
+  src: url("/fonts/SUIT-Heavy.ttf") format("truetype");
+}
+
+body {
+  font-family: "SUIT" !important;
+  display: flex;
+  flex-direction: row;
+}
diff --git a/apps/admin/app/layout.tsx b/apps/admin/app/layout.tsx
@@ -1,20 +1,11 @@
 import "./global.css";
 import "wowds-ui/styles.css";
 
+import Navbar from "components/Navbar";
 import type { Metadata } from "next";
-import localFont from "next/font/local";
 
 import { JotaiProvider } from "../components/JotaiProvider";
 
-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-});
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
-});
-
 export const metadata: Metadata = {
   title: "Create Next App",
   description: "Generated by create next app",
@@ -26,9 +17,12 @@ const RootLayout = ({
   children: React.ReactNode;
 }>) => {
   return (
-    <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable}`}>
-        <JotaiProvider>{children}</JotaiProvider>
+    <html lang="ko">
+      <body>
+        <JotaiProvider>
+          <Navbar />
+          {children}
+        </JotaiProvider>
       </body>
     </html>
   );

diff --git a/apps/admin/app/page.tsx b/apps/admin/app/page.tsx
@@ -1,11 +1,9 @@
 import { styled } from "@styled-system/jsx";
-import { Button } from "@wow-class/ui";
 
 const Home = () => {
   return (
     <div>
       Home
-      <Button appName="admin">버튼</Button>
       <styled.div color="red.300">sdf</styled.div>
       <styled.div color="mono.100">sdf</styled.div>
     </div>

diff --git a/apps/admin/app/participants/page.tsx b/apps/admin/app/participants/page.tsx
@@ -0,0 +1,5 @@
+const Participants = () => {
+  return <div>Participants</div>;
+};
+
+export default Participants;
diff --git a/apps/admin/app/studies/[study]/page.tsx b/apps/admin/app/studies/[study]/page.tsx
@@ -0,0 +1,5 @@
+const Study = () => {
+  return <div>Study</div>;
+};
+
+export default Study;
diff --git a/apps/admin/app/studies/page.tsx b/apps/admin/app/studies/page.tsx
@@ -0,0 +1,5 @@
+const Studies = () => {
+  return <div>Studies</div>;
+};
+
+export default Studies;
diff --git a/apps/admin/components/Navbar.tsx b/apps/admin/components/Navbar.tsx
@@ -0,0 +1,81 @@
+import { css } from "@styled-system/css";
+import { Flex } from "@styled-system/jsx";
+import { NavItem } from "@wow-class/ui";
+import Image from "next/image";
+
+import { navMenu } from "../constants/navMenu";
+import adminImageUrl from "../public/images/administrator.svg";
+import logoImageUrl from "../public/images/logo.svg";
+
+/**
+ * @description admin 내비게이션 바 컴포넌트입니다.
+ */
+
+const Navbar = () => {
+  return (
+    <aside aria-label="admin navigation bar" className={navbarContainerStyle}>
+      <Flex align="center" gap={8} padding="6px 0px 7px 20px">
+        <div className={logoTextStyle}>와우클래스 멘토</div>
+        <Image
+          alt="logo"
+          height={20.5}
+          src={logoImageUrl}
+          width={42}
+          className={css({
+            width: "42px",
+            height: "20.5px",
+          })}
+        />
+      </Flex>
+      <nav
+        aria-label="admin nav menu"
+        className={navContainerStyle}
+        role="navigation"
+      >
+        <ul>
+          {navMenu.map((menu) => (
+            <NavItem
+              alt={menu.alt}
+              href={menu.href}
+              imageUrl={menu.imageUrl}
+              items={menu.items}
+              key={menu.name}
+              name={menu.name}
+            />
+          ))}
+        </ul>
+        <NavItem
+          alt="administrator-icon"
+          href=""
+          imageUrl={adminImageUrl}
+          name="멘티 페이지로 전환"
+        />
+      </nav>
+    </aside>
+  );
+};
+
+export default Navbar;
+
+const navbarContainerStyle = css({
+  width: "250px",
+  minHeight: "100vh",
+  paddingTop: "54px",
+  borderRightWidth: "arrow",
+  borderColor: "mono.400",
+});
+
+const logoTextStyle = css({
+  fontSize: "24px",
+  fontWeight: 700,
+  lineHeight: "130%",
+  letterSpacing: "-0.24px",
+});
+
+const navContainerStyle = css({
+  padding: "8px 0px",
+  display: "flex",
+  flexDirection: "column",
+  minHeight: "calc(100vh - 98px)",
+  justifyContent: "space-between",
+});
diff --git a/apps/admin/constants/navMenu.ts b/apps/admin/constants/navMenu.ts
@@ -0,0 +1,38 @@
+import folderImageUrl from "../public/images/folder.svg";
+import homeImageUrl from "../public/images/home.svg";
+import participantImageUrl from "../public/images/particpant.svg";
+
+export const navMenu = [
+  {
+    href: "studies",
+    imageUrl: homeImageUrl,
+    alt: "home-icon",
+    name: "개설된 스터디",
+    items: [
+      {
+        href: "basic-web-study",
+        imageUrl: folderImageUrl,
+        alt: "folder-icon",
+        name: "기초 웹 스터디",
+      },
+      {
+        href: "dev-beginner-study",
+        imageUrl: folderImageUrl,
+        alt: "folder-icon",
+        name: "개발 입문 스터디",
+      },
+      {
+        href: "basic-mobile-study",
+        imageUrl: folderImageUrl,
+        alt: "folder-icon",
+        name: "기초 모바일 스터디",
+      },
+    ],
+  },
+  {
+    href: "participants",
+    imageUrl: participantImageUrl,
+    alt: "participant-icon",
+    name: "수강생 관리",
+  },
+];
diff --git a/apps/admin/next.config.mjs b/apps/admin/next.config.mjs
@@ -1,4 +1,15 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  async redirects() {
+    return [
+      {
+        source: "/",
+        destination: "/studies",
+        permanent: false,
+        statusCode: 301,
+      },
+    ];
+  },
+};
 
 export default nextConfig;
diff --git a/apps/admin/panda.config.ts b/apps/admin/panda.config.ts
@@ -3,5 +3,5 @@ import commonConfig from "@wow-class/panda-config/common-config";
 
 export default defineConfig({
   ...commonConfig,
-  include: ["./app/**/*.{ts,tsx,js,jsx}"],
+  include: ["./app/**/*.{ts,tsx,js,jsx}", "./components/**/*.{ts,tsx,js,jsx}"],
 });
diff --git a/apps/admin/public/fonts/SUIT-Bold.ttf b/apps/admin/public/fonts/SUIT-Bold.ttf
diff --git a/apps/admin/public/fonts/SUIT-ExtraBold.ttf b/apps/admin/public/fonts/SUIT-ExtraBold.ttf
diff --git a/apps/admin/public/fonts/SUIT-ExtraLight.ttf b/apps/admin/public/fonts/SUIT-ExtraLight.ttf
diff --git a/apps/admin/public/fonts/SUIT-Heavy.ttf b/apps/admin/public/fonts/SUIT-Heavy.ttf
diff --git a/apps/admin/public/fonts/SUIT-Light.ttf b/apps/admin/public/fonts/SUIT-Light.ttf
diff --git a/apps/admin/public/fonts/SUIT-Medium.ttf b/apps/admin/public/fonts/SUIT-Medium.ttf
diff --git a/apps/admin/public/fonts/SUIT-Regular.ttf b/apps/admin/public/fonts/SUIT-Regular.ttf
diff --git a/apps/admin/public/fonts/SUIT-SemiBold.ttf b/apps/admin/public/fonts/SUIT-SemiBold.ttf
diff --git a/apps/admin/public/fonts/SUIT-Thin.ttf b/apps/admin/public/fonts/SUIT-Thin.ttf
diff --git a/apps/admin/public/images/administrator.svg b/apps/admin/public/images/administrator.svg
diff --git a/apps/admin/public/images/folder.svg b/apps/admin/public/images/folder.svg
diff --git a/apps/admin/public/images/home.svg b/apps/admin/public/images/home.svg
diff --git a/apps/admin/public/images/logo.svg b/apps/admin/public/images/logo.svg
diff --git a/apps/admin/public/images/particpant.svg b/apps/admin/public/images/particpant.svg
diff --git a/apps/client/app/(afterLogin)/layout.tsx b/apps/client/app/(afterLogin)/layout.tsx
@@ -0,0 +1,12 @@
+import Navbar from "components/Navbar";
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <>
+      <Navbar />
+      {children}
+    </>
+  );
+};
+
+export default Layout;
diff --git a/apps/client/app/(afterLogin)/my-page/page.tsx b/apps/client/app/(afterLogin)/my-page/page.tsx
@@ -0,0 +1,5 @@
+const MyPage = () => {
+  return <div>MyPage</div>;
+};
+
+export default MyPage;
diff --git a/apps/client/app/(afterLogin)/my-study/my-homework/page.tsx b/apps/client/app/(afterLogin)/my-study/my-homework/page.tsx
@@ -0,0 +1,5 @@
+const MyHomework = () => {
+  return <div>MyHomework</div>;
+};
+
+export default MyHomework;
diff --git a/apps/client/app/(afterLogin)/my-study/page.tsx b/apps/client/app/(afterLogin)/my-study/page.tsx
@@ -0,0 +1,5 @@
+const MyStudy = () => {
+  return <div>MyStudy</div>;
+};
+
+export default MyStudy;
diff --git a/apps/client/app/(afterLogin)/study-apply/page.tsx b/apps/client/app/(afterLogin)/study-apply/page.tsx
@@ -0,0 +1,5 @@
+const StudyApply = () => {
+  return <div>StudyApply</div>;
+};
+
+export default StudyApply;
diff --git a/apps/client/app/(beforeLogin)/auth/page.tsx b/apps/client/app/(beforeLogin)/auth/page.tsx
@@ -0,0 +1,5 @@
+const Auth = () => {
+  return <div>Auth</div>;
+};
+
+export default Auth;
diff --git a/apps/client/app/fonts/GeistMonoVF.woff b/apps/client/app/fonts/GeistMonoVF.woff
diff --git a/apps/client/app/fonts/GeistVF.woff b/apps/client/app/fonts/GeistVF.woff