feat: add designs page and design modal

AboutClan · May 7, 2024 · 194913e · 194913e
1 parent c40e215
commit 194913e
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 7 deletions.
diff --git a/design/attendance/AttendanceModal.tsx b/design/attendance/AttendanceModal.tsx
@@ -4,9 +4,14 @@ import styled from "styled-components";
 import Avatar from "../../components/atoms/Avatar";
 import { PopOverIcon } from "../../components/atoms/Icons/PopOverIcon";
 import { IFooterOptions, ModalLayout } from "../../modals/Modals";
+import { IModal } from "../../types/components/modalTypes";
 import AttendanceBar from "./AttendanceBar";
 
-function AttendanceModal({ type }: { type: 1 | 2 | 3 }) {
+interface AttendanceModalProps extends IModal {
+  type: 1 | 2;
+}
+
+function AttendanceModal({ type, setIsModal }: AttendanceModalProps) {
   const today = dayjs();
   const firstDayOfMonth = today.startOf("month");
   const differenceInDays = today.diff(firstDayOfMonth, "day");
@@ -23,7 +28,7 @@ function AttendanceModal({ type }: { type: 1 | 2 | 3 }) {
         title={`${dayjs().month() + 1}월 2주차 주간 체크`}
         headerOptions={{}}
         footerOptions={footerOptions}
-        setIsModal={() => {}}
+        setIsModal={setIsModal}
       >
         <ScoreBarWrapper>
           <AttendanceBar myScore={17} />

diff --git a/pageTemplates/user/userNavigation/UserNavigationBlock.tsx b/pageTemplates/user/userNavigation/UserNavigationBlock.tsx
@@ -1,7 +1,9 @@
-import { useRouter } from "next/router";
 import { useSession } from "next-auth/react";
+import { useRouter } from "next/router";
 import styled from "styled-components";
+import RowButtonBlock from "../../../components/atoms/blocks/RowButtonBlock";
 
+import { DESIGN_PAGE_USER_PERMISSION } from "../../../constants/storage/userPermissions";
 import { useFailToast } from "../../../hooks/custom/CustomToast";
 import { DispatchString } from "../../../types/hooks/reactTypes";
 import { UserOverviewModal } from "./UserNavigation";
@@ -20,6 +22,7 @@ function UserNavigationBlock({ setModalOpen }: IUserNavigationBlock) {
   const isGuest = session?.user.name === "guest";
   const role = session?.user.role;
   const isAdmin = role === "previliged" || role === "manager";
+  const hasDesignAccess = DESIGN_PAGE_USER_PERMISSION.includes(session?.user.uid);
 
   //네비게이션 함수
   const onClickBlock = <T extends "page" | "modal">(type: T, content: ContentByType<T>): void => {
@@ -44,12 +47,15 @@ function UserNavigationBlock({ setModalOpen }: IUserNavigationBlock) {
 
   return (
     <Layout>
-      {isAdmin && (
+      {(isAdmin || hasDesignAccess) && (
         <div>
           <BlockName>관리자</BlockName>
-          <NavBlock>
-            <button onClick={() => onClickBlock("page", "/admin")}>관리자 페이지</button>
-          </NavBlock>
+          {isAdmin && (
+            <NavBlock>
+              <button onClick={() => onClickBlock("page", "/admin")}>관리자 페이지</button>
+            </NavBlock>
+          )}
+          {hasDesignAccess && <RowButtonBlock url="/designs" text="디자인 페이지" />}
         </div>
       )}
       <div>

diff --git a/pages/designs/index.tsx b/pages/designs/index.tsx
@@ -0,0 +1,16 @@
+import RowButtonBlock from "../../components/atoms/blocks/RowButtonBlock";
+import Header from "../../components/layouts/Header";
+import Slide from "../../components/layouts/PageSlide";
+
+function DesignsPage() {
+  return (
+    <>
+      <Header title="디자인 페이지" />
+      <Slide>
+        <RowButtonBlock text="스터디 점수판" url="designs/studyAttendance" />
+      </Slide>
+    </>
+  );
+}
+
+export default DesignsPage;
diff --git a/pages/designs/studyAttendance.tsx b/pages/designs/studyAttendance.tsx
@@ -0,0 +1,23 @@
+import { useState } from "react";
+import RowButtonBlock from "../../components/atoms/blocks/RowButtonBlock";
+import Header from "../../components/layouts/Header";
+import Slide from "../../components/layouts/PageSlide";
+import AttendanceModal from "../../design/attendance/AttendanceModal";
+
+function StudyAttendance() {
+  const [hasModalNumber, setHasModalNumber] = useState<1 | 2>();
+  return (
+    <>
+      <Header title="스터디 점수판" />
+      <Slide>
+        <RowButtonBlock text="기존 스터디 출석표 모달 1" func={() => setHasModalNumber(1)} />
+        <RowButtonBlock text="기존 스터디 출석표 모달 2" func={() => setHasModalNumber(2)} />
+      </Slide>
+      {hasModalNumber && (
+        <AttendanceModal type={hasModalNumber} setIsModal={() => setHasModalNumber(null)} />
+      )}
+    </>
+  );
+}
+
+export default StudyAttendance;