From b331bc14047513360b5f33841c39157c9eda8d4c Mon Sep 17 00:00:00 2001 From: hamo-o Date: Sun, 24 Nov 2024 17:41:01 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=20Modal=20Header,=20Footer=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../@modal/_components/OutstandingModal.tsx | 81 ++----------------- .../_components/OutstandingModalFooter.tsx | 60 ++++++++++++++ .../_components/OutstandingModalHeader.tsx | 38 +++++++++ .../app/students/_contexts/StudyProvider.tsx | 5 +- .../constants/status/outstandigOptions.ts | 7 ++ 5 files changed, 115 insertions(+), 76 deletions(-) create mode 100644 apps/admin/app/students/@modal/_components/OutstandingModalFooter.tsx create mode 100644 apps/admin/app/students/@modal/_components/OutstandingModalHeader.tsx diff --git a/apps/admin/app/students/@modal/_components/OutstandingModal.tsx b/apps/admin/app/students/@modal/_components/OutstandingModal.tsx index 2362a90b..620c9cd0 100644 --- 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 선택된 수강생이 없습니다.; return ( - {enabled ? ( - - 선택한 수강생을
- {outstandingRoundMap[achievement]} {formatTypeToString()}하시겠어요? - - ) : ( - - {outstandingRoundMap[achievement]} {formatTypeToString()}되었어요. - - )} - + {firstStudentName} 님 외{" "} {STUDENTS_NUM - 1}명 - {enabled ? ( - - ) : ( - - )} + ); diff --git a/apps/admin/app/students/@modal/_components/OutstandingModalFooter.tsx b/apps/admin/app/students/@modal/_components/OutstandingModalFooter.tsx new file mode 100644 index 00000000..2439104f --- /dev/null +++ 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 ? ( + + ) : ( + + ); +}; +export default OutstandingModalFooter; diff --git a/apps/admin/app/students/@modal/_components/OutstandingModalHeader.tsx b/apps/admin/app/students/@modal/_components/OutstandingModalHeader.tsx new file mode 100644 index 00000000..8ac83b8c --- /dev/null +++ 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 ? ( + + 선택한 수강생을
+ {outstandingRoundMap[achievement]} {outstandingTypeMap[type]} + 하시겠어요? + + ) : ( + + {outstandingRoundMap[achievement]} {outstandingTypeMap[type]} + 되었어요. + + ); +}; +export default OutstandingModalHeader; diff --git a/apps/admin/app/students/_contexts/StudyProvider.tsx b/apps/admin/app/students/_contexts/StudyProvider.tsx index 2357a488..91dc7ef4 100644 --- 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 index 33dcde62..3a039b97 100644 --- 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 = { + 처리: "회원으로 등록", + 철회: "회원에서 철회", +};