refactor: Modal Header, Footer 분리

GDSC-Hongik · Nov 24, 2024 · b331bc1 · b331bc1
1 parent a4d8c7c
commit b331bc1
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 76 deletions.
diff --git a/apps/admin/app/students/@modal/_components/OutstandingModal.tsx b/apps/admin/app/students/@modal/_components/OutstandingModal.tsx
@@ -2,98 +2,33 @@
 
 import { Flex, styled } from "@styled-system/jsx";
 import { Modal, Text } from "@wow-class/ui";
-import { useModalRoute } from "@wow-class/ui/hooks";
-import studyAchievementApi from "apis/study/studyAchievementApi";
-import { outstandingRoundMap } from "constants/status/outstandigOptions";
-import { tags } from "constants/tags";
-import { useAtom, useAtomValue } from "jotai";
-import { revalidateTagByName } from "utils/revalidateTagByName";
-import Button from "wowds-ui/Button";
+import { useAtomValue } from "jotai";
 
 import {
-  enabledOutstandingStudentsAtom,
   outstandingStudentsAtom,
   selectedStudentsAtom,
-  studyAtom,
 } from "@/students/_contexts/StudyProvider";
 
+import OutstandingModalFooter from "./OutstandingModalFooter";
+import OutstandingModalHeader from "./OutstandingModalHeader";
+
 const OutstandingModal = () => {
-  const study = useAtomValue(studyAtom);
-  const [{ firstStudentName, students }, setSelectedStudents] =
-    useAtom(selectedStudentsAtom);
-  const [{ enabled }, setEnabledOutstandingStudents] = useAtom(
-    enabledOutstandingStudentsAtom
-  );
+  const { firstStudentName, students } = useAtomValue(selectedStudentsAtom);
   const { type, achievement } = useAtomValue(outstandingStudentsAtom);
-  const { onClose } = useModalRoute();
 
   const STUDENTS_NUM = students.length;
   if (!type || !achievement) return null;
-
-  const handleClickOutstanding = async () => {
-    if (!study || !STUDENTS_NUM || !achievement) return;
-
-    const fetch =
-      type === "처리"
-        ? studyAchievementApi.postStudyAchievement
-        : studyAchievementApi.deleteStudyAchievement;
-
-    const result = await fetch(study.studyId, {
-      studentIds: students,
-      achievementType: achievement,
-    });
-
-    if (result.success) {
-      revalidateTagByName(tags.students);
-      setEnabledOutstandingStudents({
-        enabled: false,
-      });
-    }
-  };
-
-  const handleClickCloseModal = () => {
-    setSelectedStudents({
-      students: [],
-      firstStudentName: "",
-    });
-    onClose();
-  };
-
-  const formatTypeToString = () => {
-    if (type === "처리") return "회원으로 등록";
-    else if (type === "철회") return "회원에서 철회";
-  };
+  if (!STUDENTS_NUM) return <Text>선택된 수강생이 없습니다.</Text>;
 
   return (
     <Modal>
       <Flex align="center" direction="column" gap="1.5rem">
-        {enabled ? (
-          <Text
-            typo="h1"
-            style={{
-              textAlign: "center",
-            }}
-          >
-            선택한 수강생을 <br />
-            {outstandingRoundMap[achievement]} {formatTypeToString()}하시겠어요?
-          </Text>
-        ) : (
-          <Text typo="h1">
-            {outstandingRoundMap[achievement]} {formatTypeToString()}되었어요.
-          </Text>
-        )}
-
+        <OutstandingModalHeader />
         <Text color="sub">
           {firstStudentName} 님 외{" "}
           <styled.span color="primary">{STUDENTS_NUM - 1}명</styled.span>
         </Text>
-        {enabled ? (
-          <Button onClick={handleClickOutstanding}>
-            선택한 우수 회원 {type}
-          </Button>
-        ) : (
-          <Button onClick={handleClickCloseModal}>확인하기</Button>
-        )}
+        <OutstandingModalFooter />
       </Flex>
     </Modal>
   );

diff --git a/apps/admin/app/students/@modal/_components/OutstandingModalFooter.tsx b/apps/admin/app/students/@modal/_components/OutstandingModalFooter.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import { useModalRoute } from "@wow-class/ui/hooks";
+import studyAchievementApi from "apis/study/studyAchievementApi";
+import { tags } from "constants/tags";
+import { useAtom, useAtomValue } from "jotai";
+import { revalidateTagByName } from "utils/revalidateTagByName";
+import Button from "wowds-ui/Button";
+
+import {
+  enabledOutstandingStudentsAtom,
+  outstandingStudentsAtom,
+  selectedStudentsAtom,
+  studyAtom,
+} from "@/students/_contexts/StudyProvider";
+
+const OutstandingModalFooter = () => {
+  const study = useAtomValue(studyAtom);
+  const [{ enabled }, setEnabledOutstandingStudents] = useAtom(
+    enabledOutstandingStudentsAtom
+  );
+  const { type, achievement } = useAtomValue(outstandingStudentsAtom);
+  const [{ students }, setSelectedStudents] = useAtom(selectedStudentsAtom);
+
+  const { onClose } = useModalRoute();
+
+  const handleClickOutstanding = async () => {
+    if (!study || !achievement) return;
+
+    const fetch =
+      type === "처리"
+        ? studyAchievementApi.postStudyAchievement
+        : studyAchievementApi.deleteStudyAchievement;
+    const result = await fetch(study.studyId, {
+      studentIds: students,
+      achievementType: achievement,
+    });
+    if (result.success) {
+      revalidateTagByName(tags.students);
+      setEnabledOutstandingStudents({
+        enabled: false,
+      });
+    }
+  };
+
+  const handleClickCloseModal = () => {
+    setSelectedStudents({
+      students: [],
+      firstStudentName: "",
+    });
+    onClose();
+  };
+
+  return enabled ? (
+    <Button onClick={handleClickOutstanding}>선택한 우수 회원 {type}</Button>
+  ) : (
+    <Button onClick={handleClickCloseModal}>확인하기</Button>
+  );
+};
+export default OutstandingModalFooter;
diff --git a/apps/admin/app/students/@modal/_components/OutstandingModalHeader.tsx b/apps/admin/app/students/@modal/_components/OutstandingModalHeader.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { Text } from "@wow-class/ui";
+import {
+  outstandingRoundMap,
+  outstandingTypeMap,
+} from "constants/status/outstandigOptions";
+import { useAtomValue } from "jotai";
+
+import {
+  enabledOutstandingStudentsAtom,
+  outstandingStudentsAtom,
+} from "@/students/_contexts/StudyProvider";
+
+const OutstandingModalHeader = () => {
+  const { enabled } = useAtomValue(enabledOutstandingStudentsAtom);
+  const { type, achievement } = useAtomValue(outstandingStudentsAtom);
+
+  if (!type || !achievement) return null;
+  return enabled ? (
+    <Text
+      typo="h1"
+      style={{
+        textAlign: "center",
+      }}
+    >
+      선택한 수강생을 <br />
+      {outstandingRoundMap[achievement]} {outstandingTypeMap[type]}
+      하시겠어요?
+    </Text>
+  ) : (
+    <Text typo="h1">
+      {outstandingRoundMap[achievement]} {outstandingTypeMap[type]}
+      되었어요.
+    </Text>
+  );
+};
+export default OutstandingModalHeader;
diff --git a/apps/admin/app/students/_contexts/StudyProvider.tsx b/apps/admin/app/students/_contexts/StudyProvider.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import type { OutstandingType } from "constants/status/outstandigOptions";
 import { atom, createStore, Provider } from "jotai";
 import type { PropsWithChildren, ReactNode } from "react";
 import type { AchievementType } from "types/entities/achievement";
@@ -11,10 +12,8 @@ export type StudyAtomprops = {
   title: ReactNode;
 };
 
-export type OutstandingStudentsType = "처리" | "철회";
-
 export type OutstandingStudentsProps = {
-  type?: OutstandingStudentsType;
+  type?: OutstandingType;
   achievement?: AchievementType;
 };
 

diff --git a/apps/admin/constants/status/outstandigOptions.ts b/apps/admin/constants/status/outstandigOptions.ts
@@ -22,3 +22,10 @@ export const outstandingRoundMap: Record<
   FIRST_ROUND_OUTSTANDING_STUDENT: "1차 우수",
   SECOND_ROUND_OUTSTANDING_STUDENT: "2차 우수",
 };
+
+export type OutstandingType = "처리" | "철회";
+
+export const outstandingTypeMap: Record<OutstandingType, string> = {
+  처리: "회원으로 등록",
+  철회: "회원에서 철회",
+};