feat: 우수 처리, 철회 로직 모달로 이동

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 (
-    <Modal>
-      <Text typo="h1">우수회원철회</Text>
-    </Modal>
-  );
+const OutstandinModalPage = () => {
+  return <OutstandingModal />;
 };
 
-export default OutstandingModal;
+export default OutstandinModalPage;

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 (
+    <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>
+        )}
+
+        <Text color="sub">
+          {
+            // TODO: 가장 앞 사람 정보 요청
+            /* 이현영 님 외{" "} */
+          }
+          <styled.span color="primary">{STUDENTS_NUM}명</styled.span>
+        </Text>
+        {enabled ? (
+          <Button onClick={handleClickOutstanding}>
+            선택한 우수 회원 {type}
+          </Button>
+        ) : (
+          <Button onClick={onClose}>확인하기</Button>
+        )}
+      </Flex>
+    </Modal>
+  );
+};
+
+export default OutstandingModal;