From 81e77cdc5f2821a0f920d033ad967c68584d0ea4 Mon Sep 17 00:00:00 2001
From: SeieunYoo <101736358+SeieunYoo@users.noreply.github.com>
Date: Sun, 13 Oct 2024 03:16:50 +0900
Subject: [PATCH] =?UTF-8?q?[Fix]=20=EA=B3=BC=EC=A0=9C=20=EC=A0=9C=EC=B6=9C?=
 =?UTF-8?q?=20=EA=B4=80=EB=A0=A8=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?=
 =?UTF-8?q?=20(#155)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 레포지토리 입력 모달 버튼 이후에는 무조건 모달 닫기

* fix: 수강 신청한 스터디 가 없을 때는 empty 컴포넌ㅌ 보여주기

* feat: 제출 완료 버튼 누르면 dashboard data 새로 fetch, revalidateTagByName async 바꾸기

* feat: await 추가
---
 apps/admin/utils/revalidateTagByName.ts       |  2 +-
 .../AssignmentBoxButtons.tsx                  | 32 ++++++++++++++++---
 .../AssignmentOverviewBox/index.tsx           |  1 +
 .../RepositorySubmissionBox.tsx               |  2 +-
 .../(.)study-application/[studyId]/page.tsx   |  4 +--
 .../(.)study-cancellation/[studyId]/page.tsx  |  4 +--
 .../_components/EmptyStudyApplication.tsx     | 27 ++++++++++++++++
 .../app/(afterLogin)/study-apply/page.tsx     | 19 +++++++----
 apps/client/utils/revalidateTagByName.ts      |  2 +-
 9 files changed, 75 insertions(+), 18 deletions(-)
 create mode 100644 apps/client/app/(afterLogin)/study-apply/_components/EmptyStudyApplication.tsx

diff --git a/apps/admin/utils/revalidateTagByName.ts b/apps/admin/utils/revalidateTagByName.ts
index f813c230..e29e1b69 100644
--- a/apps/admin/utils/revalidateTagByName.ts
+++ b/apps/admin/utils/revalidateTagByName.ts
@@ -2,6 +2,6 @@
 
 import { revalidateTag } from "next/cache";
 
-export const revalidateTagByName = (tag: string) => {
+export const revalidateTagByName = async (tag: string) => {
   revalidateTag(tag);
 };
diff --git a/apps/client/app/(afterLogin)/my-study/my-assignment/_components/AssignmentContent/AssignmentOverviewBox/AssignmentBoxButtons.tsx b/apps/client/app/(afterLogin)/my-study/my-assignment/_components/AssignmentContent/AssignmentOverviewBox/AssignmentBoxButtons.tsx
index 48a3b8d0..d0438e4b 100644
--- a/apps/client/app/(afterLogin)/my-study/my-assignment/_components/AssignmentContent/AssignmentOverviewBox/AssignmentBoxButtons.tsx
+++ b/apps/client/app/(afterLogin)/my-study/my-assignment/_components/AssignmentContent/AssignmentOverviewBox/AssignmentBoxButtons.tsx
@@ -2,6 +2,7 @@
 
 import { Space } from "@wow-class/ui";
 import { padWithZero, parseISODate } from "@wow-class/utils";
+import { studyDetailApi } from "apis/studyDetailApi";
 import { studyHistoryApi } from "apis/studyHistoryApi";
 import { tags } from "constants/tags";
 import Link from "next/link";
@@ -16,12 +17,14 @@ interface AssignmentBoxButtonsProps {
   assignment: Assignment;
   repositoryLink?: string;
   buttonsDisabled?: boolean;
+  studyId: number;
 }
 
 export const AssignmentBoxButtons = ({
   buttonsDisabled,
   assignment,
   repositoryLink,
+  studyId,
 }: AssignmentBoxButtonsProps) => {
   return (
     <>
@@ -34,6 +37,8 @@ export const AssignmentBoxButtons = ({
       <SecondaryButton
         assignment={assignment}
         buttonsDisabled={buttonsDisabled}
+        key={assignment.assignmentSubmissionStatus}
+        studyId={studyId}
       />
     </>
   );
@@ -42,7 +47,7 @@ const PrimaryButton = ({
   assignment,
   buttonsDisabled,
   repositoryLink,
-}: AssignmentBoxButtonsProps) => {
+}: Omit<AssignmentBoxButtonsProps, "studyId">) => {
   const { assignmentSubmissionStatus, submissionFailureType, submissionLink } =
     assignment;
   const { primaryButtonText } =
@@ -77,9 +82,11 @@ const PrimaryButton = ({
 const SecondaryButton = ({
   assignment,
   buttonsDisabled,
+  studyId,
 }: Omit<AssignmentBoxButtonsProps, "repositoryLink">) => {
   const { assignmentSubmissionStatus, studyDetailId, deadline, committedAt } =
     assignment;
+
   if (isDeadlinePassed(deadline)) {
     return (
       <Button disabled={true} style={buttonStyle}>
@@ -92,12 +99,28 @@ const SecondaryButton = ({
       ? buttonTextMap.INITIAL
       : buttonTextMap[assignmentSubmissionStatus];
 
+  const fetchStudyDashboard = async () => {
+    const studyDashboard =
+      await studyDetailApi.getStudyDetailDashboard(studyId);
+    return studyDashboard;
+  };
+
   const handleClickSubmissionComplete = async () => {
     const response = await studyHistoryApi.submitAssignment(studyDetailId);
     if (response.success) {
-      revalidateTagByName(tags.studyDetailDashboard);
-      revalidateTagByName(tags.studyHistory);
-      toast.success("과제 제출이 완료되었어요.");
+      await revalidateTagByName(tags.studyDetailDashboard);
+      await revalidateTagByName(tags.studyHistory);
+      const fetchedStudyDashBoardData = await fetchStudyDashboard();
+      const currentAssignmentSubmissionStatus =
+        fetchedStudyDashBoardData?.submittableAssignments.filter(
+          (item) => item.studyDetailId === studyDetailId
+        )[0]?.assignmentSubmissionStatus;
+
+      if (currentAssignmentSubmissionStatus === "SUCCESS") {
+        toast.success("과제 제출이 완료되었습니다.");
+      } else if (currentAssignmentSubmissionStatus === "FAILURE") {
+        toast.error("과제 제출에 실패했습니다.");
+      }
     }
   };
 
@@ -106,6 +129,7 @@ const SecondaryButton = ({
     committedAt as string
   );
   const commitText = `최종 수정일자 ${year}년 ${month}월 ${day}일 ${padWithZero(hours)}:${padWithZero(minutes)}`;
+
   return (
     <Button
       disabled={buttonsDisabled}
diff --git a/apps/client/app/(afterLogin)/my-study/my-assignment/_components/AssignmentContent/AssignmentOverviewBox/index.tsx b/apps/client/app/(afterLogin)/my-study/my-assignment/_components/AssignmentContent/AssignmentOverviewBox/index.tsx
index 7a69514b..585dfbe0 100644
--- a/apps/client/app/(afterLogin)/my-study/my-assignment/_components/AssignmentContent/AssignmentOverviewBox/index.tsx
+++ b/apps/client/app/(afterLogin)/my-study/my-assignment/_components/AssignmentContent/AssignmentOverviewBox/index.tsx
@@ -66,6 +66,7 @@ export const AssignmentOverviewBox = async ({
                   assignment={assignment}
                   buttonsDisabled={buttonsDisabled || !isSubmittable}
                   repositoryLink={repositoryLink}
+                  studyId={myOngoingStudyInfoData.studyId}
                 />
               </>
             }
diff --git a/apps/client/app/(afterLogin)/my-study/my-assignment/_components/AssignmentContent/RepositorySubmissionBox.tsx b/apps/client/app/(afterLogin)/my-study/my-assignment/_components/AssignmentContent/RepositorySubmissionBox.tsx
index 2757bb47..5139509c 100644
--- a/apps/client/app/(afterLogin)/my-study/my-assignment/_components/AssignmentContent/RepositorySubmissionBox.tsx
+++ b/apps/client/app/(afterLogin)/my-study/my-assignment/_components/AssignmentContent/RepositorySubmissionBox.tsx
@@ -95,8 +95,8 @@ export const RepositorySubmissionBox = ({
     if (success) {
       revalidateTagByName(tags.studyDetailDashboard);
       setRepositorySubmissionStatus("SUBMITTED");
-      onClose();
     }
+    onClose();
   };
 
   return (
diff --git a/apps/client/app/(afterLogin)/study-apply/@modal/(.)study-application/[studyId]/page.tsx b/apps/client/app/(afterLogin)/study-apply/@modal/(.)study-application/[studyId]/page.tsx
index 42cb0100..e5dfb810 100644
--- a/apps/client/app/(afterLogin)/study-apply/@modal/(.)study-application/[studyId]/page.tsx
+++ b/apps/client/app/(afterLogin)/study-apply/@modal/(.)study-application/[studyId]/page.tsx
@@ -49,8 +49,8 @@ const StudyApplication = ({ params }: { params: { studyId: number } }) => {
   const handleClickApplyButton = async () => {
     const result = await studyApplyApi.applyStudy(Number(studyId));
     if (result.success) {
-      revalidateTagByName(tags.studyApply);
-      revalidateTagByName(tags.myOngoingStudy);
+      await revalidateTagByName(tags.studyApply);
+      await revalidateTagByName(tags.myOngoingStudy);
       setApplySuccess(true);
     }
   };
diff --git a/apps/client/app/(afterLogin)/study-apply/@modal/(.)study-cancellation/[studyId]/page.tsx b/apps/client/app/(afterLogin)/study-apply/@modal/(.)study-cancellation/[studyId]/page.tsx
index 68ff33bb..127dd3da 100644
--- a/apps/client/app/(afterLogin)/study-apply/@modal/(.)study-cancellation/[studyId]/page.tsx
+++ b/apps/client/app/(afterLogin)/study-apply/@modal/(.)study-cancellation/[studyId]/page.tsx
@@ -50,8 +50,8 @@ const StudyCancel = ({ params }: { params: { studyId: number } }) => {
     const result = await studyApplyApi.cancelStudyApplication(Number(studyId));
 
     if (result.success) {
-      revalidateTagByName(tags.studyApply);
-      revalidateTagByName(tags.myOngoingStudy);
+      await revalidateTagByName(tags.studyApply);
+      await revalidateTagByName(tags.myOngoingStudy);
       setCancelSuccess(true);
     }
   };
diff --git a/apps/client/app/(afterLogin)/study-apply/_components/EmptyStudyApplication.tsx b/apps/client/app/(afterLogin)/study-apply/_components/EmptyStudyApplication.tsx
new file mode 100644
index 00000000..6bf0f021
--- /dev/null
+++ b/apps/client/app/(afterLogin)/study-apply/_components/EmptyStudyApplication.tsx
@@ -0,0 +1,27 @@
+import { Flex } from "@styled-system/jsx";
+import { Text } from "@wow-class/ui";
+import Image from "next/image";
+
+const EmptyStudyApplication = () => {
+  return (
+    <Flex
+      alignItems="center"
+      direction="column"
+      gap="xl"
+      justifyContent="center"
+      minHeight="calc(100vh - 108px)"
+    >
+      <Image
+        alt="empty-study"
+        height={140}
+        src="/images/empty.svg"
+        width={186}
+      />
+      <Text as="h2" color="sub" typo="h2">
+        현재 수강할 수 있는 스터디가 없어요
+      </Text>
+    </Flex>
+  );
+};
+
+export default EmptyStudyApplication;
diff --git a/apps/client/app/(afterLogin)/study-apply/page.tsx b/apps/client/app/(afterLogin)/study-apply/page.tsx
index 0392888b..5a1e31a2 100644
--- a/apps/client/app/(afterLogin)/study-apply/page.tsx
+++ b/apps/client/app/(afterLogin)/study-apply/page.tsx
@@ -1,6 +1,7 @@
 import { Space, Text } from "@wow-class/ui";
 import { studyApplyApi } from "apis/studyApplyApi";
 
+import EmptyStudyApplication from "./_components/EmptyStudyApplication";
 import StudyItem from "./_components/StudyItem";
 
 const StudyApplyPage = async () => {
@@ -16,13 +17,17 @@ const StudyApplyPage = async () => {
         신청 가능한 스터디
       </Text>
       <Space height={19} />
-      {studyList?.map((study) => (
-        <StudyItem
-          appliedStudyId={appliedStudyId}
-          key={study.studyId}
-          study={study}
-        />
-      ))}
+      {studyList.length > 0 ? (
+        studyList.map((study) => (
+          <StudyItem
+            appliedStudyId={appliedStudyId}
+            key={study.studyId}
+            study={study}
+          />
+        ))
+      ) : (
+        <EmptyStudyApplication />
+      )}
     </>
   );
 };
diff --git a/apps/client/utils/revalidateTagByName.ts b/apps/client/utils/revalidateTagByName.ts
index f813c230..e29e1b69 100644
--- a/apps/client/utils/revalidateTagByName.ts
+++ b/apps/client/utils/revalidateTagByName.ts
@@ -2,6 +2,6 @@
 
 import { revalidateTag } from "next/cache";
 
-export const revalidateTagByName = (tag: string) => {
+export const revalidateTagByName = async (tag: string) => {
   revalidateTag(tag);
 };