feat(apply): link the my application page with the example judgment api

frontend/src/api/recruitments.ts

@@ -74,7 +74,7 @@ export const fetchMyMissionJudgment = ({
   token,
 }: FetchMyMissionJudgmentRequest) =>
   axios.get(
-    `/api/recruitments/${recruitmentId}/missions/${missionId}/judgment`,
+    `/api/recruitments/${recruitmentId}/missions/${missionId}/judgments/judge-example`,
     headers({ token })
   );
 
@@ -86,7 +86,8 @@ export const fetchAssignment = ({ token, recruitmentId, missionId }: FetchAssign
 
 export const postMyMissionJudgment = ({ recruitmentId, missionId, token }: PostJudgmentRequest) =>
   axios.post<PostJudgmentResponseData>(
-    `/api/recruitments/${recruitmentId}/missions/${missionId}/judgment`,
+    `/api/recruitments/${recruitmentId}/missions/${missionId}/judgments/judge-example`,
+    {},
     headers({ token })
   );
 

frontend/src/components/@common/Tooltip/Tooltip.module.css

@@ -12,6 +12,7 @@
   padding: 0.5rem 0.25rem;
   border-radius: 10px;
   background-color: var(--gray-003);
+  z-index: var(--tooltip-z-index);
 }
 
 .tooltip {

frontend/src/components/MyApplicationItem/JudgmentResult/JudgmentResult.module.css

@@ -0,0 +1,25 @@
+.judgment-result-text {
+  margin-bottom: 0.2rem;
+  font-size: 1.125rem;
+  font-weight: bold;
+}
+
+.judgment-result-score.default {
+  color: var(--black);
+}
+
+.judgment-result-score.started {
+  color: var(--blue);
+}
+
+.judgment-result-score.pass {
+  color: var(--green);
+}
+
+.judgment-result-score.fail {
+  color: var(--red);
+}
+
+.judgment-result-score.error {
+  color: var(--red);
+}

frontend/src/components/MyApplicationItem/TestResult/TestResult.stories.tsx → frontend/src/components/MyApplicationItem/JudgmentResult/JudgmentResult.stories.tsx

@@ -1,9 +1,11 @@
 import { ComponentMeta, ComponentStory } from "@storybook/react";
-import TestResult from "./TestResult";
+import { ISO8601DateString } from "../../../../types/domains/common";
+import { startedJudgeDateTime } from "./../../../mock/dummy";
+import JudgmentResultText from "./JudgmentResult";
 
 export default {
-  title: "components/TestResult",
-  component: TestResult,
+  title: "components/JudgmentResult",
+  component: JudgmentResultText,
   decorators: [
     (Story) => (
       <div
@@ -19,25 +21,27 @@ export default {
       </div>
     ),
   ],
-} as ComponentMeta<typeof TestResult>;
+} as ComponentMeta<typeof JudgmentResultText>;
 
-const Template: ComponentStory<typeof TestResult> = (args) => <TestResult {...args} />;
+const Template: ComponentStory<typeof JudgmentResultText> = (args) => (
+  <JudgmentResultText {...args} />
+);
 
 export const NoResultText = Template.bind({});
 NoResultText.args = {
   judgment: null,
 };
 
-export const PendingResultText = Template.bind({});
-PendingResultText.args = {
+export const StartedResultText = Template.bind({});
+StartedResultText.args = {
   judgment: {
     pullRequestUrl: "https://github.com/woowacourse/service-apply/pull/367",
     commitHash: "642951e1324eaf66914bd53df339d94cad5667e3",
     status: "STARTED",
     passCount: 0,
     totalCount: 0,
-    message: "빌드를 실패했습니다.",
-    startedDateTime: "2020-10-25T15:00:00",
+    message: "",
+    startedDateTime: startedJudgeDateTime as ISO8601DateString,
     commitUrl:
       "https://github.com/woowacourse/service-apply/pull/367/commits/642951e1324eaf66914bd53df339d94cad5667e3",
   },
@@ -48,11 +52,11 @@ PassResultText.args = {
   judgment: {
     pullRequestUrl: "https://github.com/woowacourse/service-apply/pull/367",
     commitHash: "642951e1324eaf66914bd53df339d94cad5667e3",
-    status: "SUCCESS",
+    status: "SUCCEEDED",
     passCount: 5,
     totalCount: 5,
     message: "",
-    startedDateTime: "2020-10-25T15:00:00",
+    startedDateTime: startedJudgeDateTime as ISO8601DateString,
     commitUrl:
       "https://github.com/woowacourse/service-apply/pull/367/commits/642951e1324eaf66914bd53df339d94cad5667e3",
   },
@@ -63,11 +67,11 @@ NoPassResultText.args = {
   judgment: {
     pullRequestUrl: "https://github.com/woowacourse/service-apply/pull/367",
     commitHash: "642951e1324eaf66914bd53df339d94cad5667e3",
-    status: "SUCCESS",
+    status: "SUCCEEDED",
     passCount: 4,
     totalCount: 5,
     message: "",
-    startedDateTime: "2020-10-25T15:00:00",
+    startedDateTime: startedJudgeDateTime as ISO8601DateString,
     commitUrl:
       "https://github.com/woowacourse/service-apply/pull/367/commits/642951e1324eaf66914bd53df339d94cad5667e3",
   },
@@ -78,11 +82,11 @@ FailJudgmentMission.args = {
   judgment: {
     pullRequestUrl: "https://github.com/woowacourse/service-apply/pull/367",
     commitHash: "642951e1324eaf66914bd53df339d94cad5667e3",
-    status: "FAIL",
+    status: "FAILED",
     passCount: 0,
     totalCount: 0,
     message: "빌드에 실패했습니다",
-    startedDateTime: "2020-10-25T15:00:00",
+    startedDateTime: startedJudgeDateTime as ISO8601DateString,
     commitUrl:
       "https://github.com/woowacourse/service-apply/pull/367/commits/642951e1324eaf66914bd53df339d94cad5667e3",
   },

frontend/src/components/MyApplicationItem/JudgmentResult/JudgmentResult.tsx

@@ -0,0 +1,21 @@
+import classNames from "classnames";
+import { Mission } from "../../../../types/domains/recruitments";
+import formatJudgmentResult from "./../../../utils/format/judgmentResult";
+import styles from "./JudgmentResult.module.css";
+
+export type JudgmentResultProps = {
+  judgment: Mission["judgment"];
+};
+
+const JudgmentResultText = ({ judgment }: JudgmentResultProps) => {
+  const { text, type } = formatJudgmentResult(judgment);
+
+  return (
+    <div className={styles["judgment-result-text"]}>
+      <span>예제 테스트 결과 : </span>
+      <span className={classNames(styles["judgment-result-score"], styles[type])}>{text}</span>
+    </div>
+  );
+};
+
+export default JudgmentResultText;

frontend/src/components/MyApplicationItem/MissionDetail/MissionDetail.tsx

@@ -2,8 +2,7 @@ import { Mission } from "../../../../types/domains/recruitments";
 import { MY_MISSION_TOOLTIP_MESSAGE } from "../../../constants/messages";
 import Tooltip from "../../@common/Tooltip/Tooltip";
 import CommitHash from "../CommitHash/CommitHash";
-import PullRequestUrl from "../PullRequestUrl/PullRequestUrl";
-import TestResult from "../TestResult/TestResult";
+import JudgmentResultText from "../JudgmentResult/JudgmentResult";
 import styles from "./MissionDetail.module.css";
 
 type MissionDetailProps = {
@@ -13,8 +12,7 @@ type MissionDetailProps = {
 const MissionDetail = ({ judgment }: MissionDetailProps) => {
   return (
     <div className={styles["detail-container"]}>
-      <TestResult judgment={judgment} />
-      <PullRequestUrl judgment={judgment} />
+      <JudgmentResultText judgment={judgment} />
       <CommitHash judgment={judgment} />
       <div className={styles["guide-container"]}>
         <p>테스트 코드 실행이 끝나기까지 3 ~ 5분이 걸릴 수 있습니다</p>

frontend/src/components/MyApplicationItem/MyApplicationButtons/JudgmentButton.tsx

@@ -1,10 +1,12 @@
+import { AxiosError } from "axios";
 import classNames from "classnames";
 import { Mission, Recruitment } from "../../../../types/domains/recruitments";
 import { postMyMissionJudgment } from "../../../api/recruitments";
 import { JUDGMENT_STATUS } from "../../../constants/judgment";
 import { MISSION_STATUS } from "../../../constants/recruitment";
 import useTokenContext from "../../../hooks/useTokenContext";
 import Button, { BUTTON_VARIANT } from "../../@common/Button/Button";
+import { isJudgmentTimedOut } from "./../../../utils/validation/judgmentTime";
 import styles from "./ApplicationButtons.module.css";
 
 type JudgmentButtonProps = {
@@ -18,6 +20,13 @@ const JudgmentButton = ({ missionItem, recruitmentId, setMission }: JudgmentButt
   const missionStatus = missionItem.status;
   const judgment = missionItem.judgment;
 
+  const handleJudgeError = async (error: AxiosError, missionId: string) => {
+    if (!error) return;
+
+    const errorMessage = error.response?.data.message;
+    alert(errorMessage);
+  };
+
   const handleJudgeMission = async ({
     missionId,
     recruitmentId,
@@ -27,12 +36,16 @@ const JudgmentButton = ({ missionItem, recruitmentId, setMission }: JudgmentButt
     recruitmentId: string;
     token: string;
   }) => {
-    const response = await postMyMissionJudgment({
-      recruitmentId: Number(recruitmentId),
-      missionId: Number(missionId),
-      token,
-    });
-    setMission({ ...missionItem, judgment: response.data });
+    try {
+      const response = await postMyMissionJudgment({
+        recruitmentId: Number(recruitmentId),
+        missionId: Number(missionId),
+        token,
+      });
+      setMission({ ...missionItem, judgment: response.data });
+    } catch (error) {
+      handleJudgeError(error as AxiosError, missionId);
+    }
   };
 
   return (
@@ -43,7 +56,7 @@ const JudgmentButton = ({ missionItem, recruitmentId, setMission }: JudgmentButt
       cancel={false}
       disabled={
         missionItem.submitted === false ||
-        judgment?.status === JUDGMENT_STATUS.STARTED ||
+        (judgment?.status === JUDGMENT_STATUS.STARTED && !isJudgmentTimedOut(judgment)) ||
         missionStatus === MISSION_STATUS.ENDED ||
         missionStatus === MISSION_STATUS.UNSUBMITTABLE
       }

frontend/src/components/MyApplicationItem/MyApplicationButtons/RefreshButton.tsx

@@ -1,10 +1,12 @@
+import { AxiosError } from "axios";
 import classNames from "classnames";
 import { Mission, Recruitment } from "../../../../types/domains/recruitments";
 import { fetchMyMissionJudgment } from "../../../api";
 import { JUDGMENT_STATUS } from "../../../constants/judgment";
 import { MISSION_STATUS } from "../../../constants/recruitment";
 import useTokenContext from "../../../hooks/useTokenContext";
 import Button, { BUTTON_VARIANT } from "../../@common/Button/Button";
+import { isJudgmentTimedOut } from "./../../../utils/validation/judgmentTime";
 import styles from "./ApplicationButtons.module.css";
 
 type RefreshButtonProps = {
@@ -26,6 +28,10 @@ const RefreshButton = ({ recruitmentId, missionItem, setMission }: RefreshButton
     return null;
   }
 
+  if (isJudgmentTimedOut(missionItem.judgment)) {
+    return null;
+  }
+
   const handleRefreshMission = async ({
     missionId,
     recruitmentId,
@@ -35,13 +41,18 @@ const RefreshButton = ({ recruitmentId, missionItem, setMission }: RefreshButton
     recruitmentId: string;
     token: string;
   }) => {
-    const response = await fetchMyMissionJudgment({
-      recruitmentId: Number(recruitmentId),
-      missionId: Number(missionId),
-      token,
-    });
+    try {
+      const response = await fetchMyMissionJudgment({
+        recruitmentId: Number(recruitmentId),
+        missionId: Number(missionId),
+        token,
+      });
+      setMission({ ...missionItem, judgment: response.data });
 
-    setMission({ ...missionItem, judgment: response.data });
+      alert("새로고침 되었습니다");
+    } catch (error) {
+      alert((error as AxiosError).response?.data.message);
+    }
   };
 
   return (

frontend/src/components/MyApplicationItem/MyApplicationFormItem/MyApplicationFormItem.tsx

@@ -44,7 +44,7 @@ const MyApplicationFormItem = ({ recruitment, submitted }: MyApplicationFormItem
   const isButtonDisabled = isApplicationDisabled(submitted, recruitment.recruitable);
   const buttonLabel = applicationLabel(submitted, recruitment.recruitable);
 
-  const routeToApplicationForm = (recruitment: Recruitment) => () => {
+  const routeToApplicationForm = (recruitment: Recruitment) => {
     navigate(
       {
         pathname: generatePath(PATH.APPLICATION_FORM, {

frontend/src/components/MyApplicationItem/MyMissionItem/MyMissionItem.stories.tsx

@@ -30,8 +30,8 @@ NotSubmittedMission.args = {
   recruitmentId: "1",
 };
 
-export const PendingJudgmentMission = Template.bind({});
-PendingJudgmentMission.args = {
+export const StartedJudgmentMission = Template.bind({});
+StartedJudgmentMission.args = {
   mission: missionsDummy["2"][2],
   recruitmentId: "1",
 };