[Fix] 나의 과제 페이지, 수강 신청 페이지 QA 반영

apps/client/apis/studyDetailApi.ts

@@ -1,10 +1,7 @@
 import { fetcher } from "@wow-class/utils";
 import { apiPath } from "constants/apiPath";
 import { tags } from "constants/tags";
-import type {
-  StudyDetailDashboardDto,
-  UpcomingStudyDto,
-} from "types/dtos/studyDetail";
+import type { StudyDetailDashboardDto } from "types/dtos/studyDetail";
 
 export const studyDetailApi = {
   getStudyDetailDashboard: async (studyId: number) => {
@@ -16,17 +13,6 @@ export const studyDetailApi = {
       }
     );
 
-    return response.data;
-  },
-  getUpcomingStudy: async (studyId: number) => {
-    const response = await fetcher.get<UpcomingStudyDto>(
-      `${apiPath.studyDetail}/upcoming?studyId=${studyId}`,
-      {
-        next: { tags: [tags.upcomingStudy] },
-        cache: "force-cache",
-      }
-    );
-
     return response.data;
   },
 };

apps/client/app/(afterLogin)/my-study/my-assignment/_components/AssignmentContent/AssignmentOverviewBox/AssignmentBoxButtons.tsx

@@ -1,61 +1,34 @@
 "use client";
 
 import { Space } from "@wow-class/ui";
-import { myStudyApi } from "apis/myStudyApi";
-import { studyDetailApi } from "apis/studyDetailApi";
+import { padWithZero, parseISODate } from "@wow-class/utils";
 import { studyHistoryApi } from "apis/studyHistoryApi";
 import { tags } from "constants/tags";
 import Link from "next/link";
-import { useEffect, useState } from "react";
+import { toast } from "react-toastify";
 import type { Assignment } from "types/dtos/studyDetail";
 import type { AssignmentSubmissionStatusType } from "types/entities/common/assignment";
-import { getIsAfterStartDate } from "utils/getIsAfterStartDate";
 import { isDeadlinePassed } from "utils/isDeadlinePassed";
 import { revalidateTagByName } from "utils/revalidateTagByName";
 import { Link as LinkIcon, Reload as ReloadIcon } from "wowds-icons";
 import Button from "wowds-ui/Button";
 interface AssignmentBoxButtonsProps {
   assignment: Assignment;
+  repositoryLink?: string;
   buttonsDisabled?: boolean;
 }
 
 export const AssignmentBoxButtons = ({
-  buttonsDisabled: buttonDisabledProp,
+  buttonsDisabled,
   assignment,
+  repositoryLink,
 }: AssignmentBoxButtonsProps) => {
-  const [startDate, setStartDate] = useState("");
-
-  const targetWeek = assignment.week;
-
-  useEffect(() => {
-    const fetchAssignmentStartDate = async () => {
-      const ongoingStudyInfo = await myStudyApi.getMyOngoingStudyInfo();
-
-      if (ongoingStudyInfo?.studyId) {
-        const curriculumData = await myStudyApi.getStudyCurriculumList(
-          ongoingStudyInfo.studyId
-        );
-
-        const matchingWeek = curriculumData?.find(
-          (item) => item.week === targetWeek
-        );
-
-        if (matchingWeek) {
-          setStartDate(matchingWeek.period.startDate);
-        }
-      }
-    };
-
-    fetchAssignmentStartDate();
-  }, [targetWeek]);
-
-  const buttonsDisabled = buttonDisabledProp || !getIsAfterStartDate(startDate);
-
   return (
     <>
       <PrimaryButton
         assignment={assignment}
         buttonsDisabled={buttonsDisabled}
+        repositoryLink={repositoryLink}
       />
       <Space height={8} />
       <SecondaryButton
@@ -68,29 +41,8 @@ export const AssignmentBoxButtons = ({
 const PrimaryButton = ({
   assignment,
   buttonsDisabled,
+  repositoryLink,
 }: AssignmentBoxButtonsProps) => {
-  const [repositoryLink, setRepositoryLink] = useState("");
-
-  useEffect(() => {
-    const fetchStudyDashBoard = async () => {
-      const ongoingStudyInfo = await myStudyApi.getMyOngoingStudyInfo();
-      if (!ongoingStudyInfo) {
-        return;
-      }
-      const studyDashboard = await studyDetailApi.getStudyDetailDashboard(
-        ongoingStudyInfo.studyId
-      );
-
-      if (!studyDashboard) {
-        return;
-      } else {
-        setRepositoryLink(studyDashboard.repositoryLink);
-      }
-    };
-
-    fetchStudyDashBoard();
-  }, []);
-
   const { assignmentSubmissionStatus, submissionFailureType, submissionLink } =
     assignment;
   const { primaryButtonText } =
@@ -105,14 +57,13 @@ const PrimaryButton = ({
     return;
   }
   const stroke = buttonsDisabled ? "mono100" : "primary";
-  const link =
-    assignmentSubmissionStatus === null ? repositoryLink : submissionLink;
-
+  const primaryButtonHref =
+    assignmentSubmissionStatus === "SUCCESS" ? submissionLink : repositoryLink;
   return (
     <Button
       asProp={Link}
       disabled={buttonsDisabled}
-      href={link ?? ""}
+      href={primaryButtonHref ?? ""}
       icon={<LinkIcon height={20} stroke={stroke} width={20} />}
       style={buttonStyle}
       target="_blank"
@@ -126,43 +77,43 @@ const PrimaryButton = ({
 const SecondaryButton = ({
   assignment,
   buttonsDisabled,
-}: AssignmentBoxButtonsProps) => {
+}: Omit<AssignmentBoxButtonsProps, "repositoryLink">) => {
   const { assignmentSubmissionStatus, studyDetailId, deadline, committedAt } =
     assignment;
+  if (isDeadlinePassed(deadline)) {
+    return (
+      <Button disabled={true} style={buttonStyle}>
+        마감
+      </Button>
+    );
+  }
   const { secondaryButtonText } =
     assignmentSubmissionStatus === null
       ? buttonTextMap.INITIAL
       : buttonTextMap[assignmentSubmissionStatus];
+
   const handleClickSubmissionComplete = async () => {
     const response = await studyHistoryApi.submitAssignment(studyDetailId);
     if (response.success) {
-      //TODO: 과제 제출 이후에는 과제 상태에 대한 업데이트 필요
-      //이번주 과제 조회 api, 대시보드 api revaliate
-      revalidateTagByName(
-        assignmentSubmissionStatus === null
-          ? tags.studyDetailDashboard
-          : tags.upcomingStudy
-      );
+      revalidateTagByName(tags.studyDetailDashboard);
       revalidateTagByName(tags.studyHistory);
+      toast.success("과제 제출이 완료되었어요.");
     }
   };
 
-  if (isDeadlinePassed(deadline)) {
-    return (
-      <Button disabled={true} style={buttonStyle}>
-        마감
-      </Button>
-    );
-  }
   const stroke = buttonsDisabled ? "mono100" : "backgroundNormal";
+  const { year, month, day, hours, minutes } = parseISODate(
+    committedAt as string
+  );
+  const commitText = `최종 수정일자 ${year}년 ${month}월 ${day}일 ${padWithZero(hours)}:${padWithZero(minutes)}`;
   return (
     <Button
       disabled={buttonsDisabled}
       icon={<ReloadIcon height={20} stroke={stroke} width={20} />}
       style={buttonStyle}
       {...(assignmentSubmissionStatus === "SUCCESS" &&
         committedAt && {
-          subText: `최종 수정일자 ${committedAt}`,
+          subText: commitText,
         })}
       onClick={handleClickSubmissionComplete}
     >
@@ -173,7 +124,7 @@ const SecondaryButton = ({
 
 const buttonStyle = {
   maxWidth: "100%",
-  height: "48px !important",
+  height: "fit-content",
 };
 
 const buttonTextMap: Record<

apps/client/app/(afterLogin)/my-study/my-assignment/_components/AssignmentContent/AssignmentOverviewBox/AssignmentBoxInfo.tsx

@@ -1,8 +1,11 @@
 import { Flex, styled } from "@styled-system/jsx";
 import { Text } from "@wow-class/ui";
 import { padWithZero, parseISODate } from "@wow-class/utils";
+import { myStudyApi } from "apis/myStudyApi";
+import { studyDetailApi } from "apis/studyDetailApi";
 import Image from "next/image";
 import type { Assignment } from "types/dtos/studyDetail";
+import { getAssignmentGithubFolderName } from "utils/getAssignmentGithubFolderName";
 
 import { FailurePopover } from "./FailurePopover";
 interface AssignmentBoxInfoProps {
@@ -12,12 +15,8 @@ interface AssignmentBoxInfoProps {
 export const AssignmentBoxInfo = async ({
   assignment,
 }: AssignmentBoxInfoProps) => {
-  const {
-    deadline,
-    assignmentSubmissionStatus,
-    submissionFailureType,
-    submissionLink,
-  } = assignment;
+  const { deadline, assignmentSubmissionStatus, submissionFailureType, week } =
+    assignment;
 
   const { year, month, day, hours, minutes } = parseISODate(deadline);
 
@@ -29,15 +28,29 @@ export const AssignmentBoxInfo = async ({
   const isFailure = assignmentSubmissionStatus === "FAILURE";
   const isNotSubmitted = isFailure && submissionFailureType === "NOT_SUBMITTED";
 
+  const myOngoingStudyInfoData = await myStudyApi.getMyOngoingStudyInfo();
+
+  if (!myOngoingStudyInfoData?.studyId) {
+    return;
+  }
+  const studyDashboard = await studyDetailApi.getStudyDetailDashboard(
+    myOngoingStudyInfoData.studyId
+  );
+
+  if (!studyDashboard) {
+    return;
+  }
   return (
     <>
       <Text color="sub">{deadlineText}</Text>
       {(isSuccess || (isFailure && !isNotSubmitted)) && (
         <Flex alignItems="center" gap="xs">
           <Text as="div" color="sub">
-            제출한 과제
+            제출한 과제 :{" "}
             <Text as="span" color="textBlack">
-              과제 이름
+              {`${getAssignmentGithubFolderName(
+                studyDashboard.repositoryLink
+              )}/week${week}`}
             </Text>
           </Text>
           <Image alt="dot" height={6} src="/images/dot.svg" width={6} />

apps/client/app/(afterLogin)/my-study/my-assignment/_components/AssignmentContent/AssignmentOverviewBox/index.tsx

@@ -1,6 +1,8 @@
 import { Space } from "@wow-class/ui";
+import { myStudyApi } from "apis/myStudyApi";
 import Link from "next/link";
 import type { Assignment } from "types/dtos/studyDetail";
+import { getIsAfterStartDate } from "utils/getIsAfterStartDate";
 import Box from "wowds-ui/Box";
 import TextButton from "wowds-ui/TextButton";
 
@@ -11,39 +13,62 @@ import { AssignmentBoxTitle } from "./AssignmentBoxTitle";
 interface AssignmentOverviewBoxProps {
   assignments: Assignment[];
   buttonsDisabled?: boolean;
+  repositoryLink?: string;
 }
 
-export const AssignmentOverviewBox = ({
+export const AssignmentOverviewBox = async ({
   assignments,
+  repositoryLink,
   buttonsDisabled = false,
 }: AssignmentOverviewBoxProps) => {
+  const myOngoingStudyInfoData = await myStudyApi.getMyOngoingStudyInfo();
+
+  if (!myOngoingStudyInfoData?.studyId) {
+    return;
+  }
+
+  const curriculumData = await myStudyApi.getStudyCurriculumList(
+    myOngoingStudyInfoData.studyId
+  );
+
   return (
     <>
-      {assignments.map((assignment) => (
-        <Box
-          key={assignment.studyDetailId}
-          style={boxStyle}
-          variant="text"
-          text={
-            <>
-              <AssignmentBoxTitle assignment={assignment} />
-              <TextButton
-                asProp={Link}
-                href={assignment.descriptionLink}
-                style={textButtonstyle}
-                target="_blank"
-                text="과제 명세 확인"
-              />
-              <AssignmentBoxInfo assignment={assignment} />
-              <Space height={26} />
-              <AssignmentBoxButtons
-                assignment={assignment}
-                buttonsDisabled={buttonsDisabled}
-              />
-            </>
-          }
-        />
-      ))}
+      {assignments.map((assignment) => {
+        const currentCurriculum = curriculumData?.find(
+          (item) => item.week === assignment.week
+        );
+
+        const isCurrentWeek = getIsAfterStartDate(
+          String(currentCurriculum?.period.startDate)
+        );
+
+        return (
+          <Box
+            key={assignment.studyDetailId}
+            style={boxStyle}
+            variant="text"
+            text={
+              <>
+                <AssignmentBoxTitle assignment={assignment} />
+                <TextButton
+                  asProp={Link}
+                  href={assignment.descriptionLink}
+                  style={textButtonstyle}
+                  target="_blank"
+                  text="과제 명세 확인"
+                />
+                <AssignmentBoxInfo assignment={assignment} />
+                <Space height={26} />
+                <AssignmentBoxButtons
+                  assignment={assignment}
+                  buttonsDisabled={buttonsDisabled || !isCurrentWeek}
+                  repositoryLink={repositoryLink}
+                />
+              </>
+            }
+          />
+        );
+      })}
     </>
   );
 };

apps/client/app/(afterLogin)/my-study/my-assignment/_components/AssignmentContent/RepositorySubmissionBox.tsx

@@ -71,7 +71,7 @@ export const RepositorySubmissionBox = ({
     } else if (!isGithubRepositoryUrl(repositoryUrl)) {
       setErrorState({
         isError: true,
-        errorMessage: "GitHub repository URL을 제출해야 합니다.",
+        errorMessage: "GitHub 레포지토리 URL을 제출해야 합니다.",
       });
     } else {
       setErrorState({