diff --git a/apps/admin/app/students/@modal/(.)outstanding/page.tsx b/apps/admin/app/students/@modal/(.)outstanding/page.tsx
index 41c28c52..e579a9e2 100644
--- a/apps/admin/app/students/@modal/(.)outstanding/page.tsx
+++ b/apps/admin/app/students/@modal/(.)outstanding/page.tsx
@@ -1,11 +1,7 @@
-import { Modal, Text } from "@wow-class/ui";
+import OutstandingModal from "@/students/_components/OutstandingModal";
-const OutstandingModal = () => {
- return (
-
- 우수회원철회
-
- );
+const OutstandinModalPage = () => {
+ return ;
};
-export default OutstandingModal;
+export default OutstandinModalPage;
diff --git a/apps/admin/app/students/_components/OutstandingModal.tsx b/apps/admin/app/students/_components/OutstandingModal.tsx
new file mode 100644
index 00000000..1692e819
--- /dev/null
+++ b/apps/admin/app/students/_components/OutstandingModal.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+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 {
+ outstandingStudentsAtom,
+ selectedStudentsAtom,
+ studyAtom,
+} from "@/students/_contexts/StudyProvider";
+
+const OutstandingModal = () => {
+ const study = useAtomValue(studyAtom);
+ const selectedStudents = useAtomValue(selectedStudentsAtom);
+ const STUDENTS_NUM = selectedStudents.length;
+
+ const [outstandingStudents, setOutstandingStudents] = useAtom(
+ outstandingStudentsAtom
+ );
+
+ const { onClose } = useModalRoute();
+
+ const { type, achievement, enabled } = outstandingStudents;
+ 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: selectedStudents,
+ achievementType: achievement,
+ });
+
+ if (result.success) {
+ // TODO: revalidate 되지 않는 문제 해결
+ revalidateTagByName(tags.students);
+ // TODO: 이미 처리된 / 철회된 요청 에러처리
+ setOutstandingStudents({
+ ...outstandingStudents,
+ enabled: false,
+ });
+ }
+ };
+
+ const formatTypeToString = () => {
+ if (type === "처리") return "회원으로 등록";
+ else if (type === "철회") return "회원에서 철회";
+ };
+
+ return (
+
+
+ {enabled ? (
+
+ 선택한 수강생을
+ {outstandingRoundMap[achievement]} {formatTypeToString()}하시겠어요?
+
+ ) : (
+
+ {outstandingRoundMap[achievement]} {formatTypeToString()}되었어요.
+
+ )}
+
+
+ {
+ // TODO: 가장 앞 사람 정보 요청
+ /* 이현영 님 외{" "} */
+ }
+ {STUDENTS_NUM}명
+
+ {enabled ? (
+
+ ) : (
+
+ )}
+
+
+ );
+};
+
+export default OutstandingModal;