refactor(apply): redesign components of the my application page

frontend/src/api/recruitments.ts

@@ -2,6 +2,7 @@ import axios from "axios";
 import {
   Assignment,
   AssignmentData,
+  Judgment,
   Mission,
   Recruitment,
   RecruitmentItem,
@@ -24,6 +25,8 @@ export type FetchMyMissionJudgmentRequest = RequestWithToken<{
   missionId: number;
 }>;
 
+export type FetchMyMissionJudgmentResponseData = Judgment;
+
 export type FetchMyMissionsResponseData = Mission[];
 
 export type FetchAssignmentRequest = RequestWithToken<{
@@ -73,7 +76,7 @@ export const fetchMyMissionJudgment = ({
   missionId,
   token,
 }: FetchMyMissionJudgmentRequest) =>
-  axios.get(
+  axios.get<FetchMyMissionJudgmentResponseData>(
     `/api/recruitments/${recruitmentId}/missions/${missionId}/judgments/judge-example`,
     headers({ token })
   );

frontend/src/components/@common/Button/Button.tsx

@@ -15,6 +15,7 @@ const Button = ({
   className,
   variant = BUTTON_VARIANT.CONTAINED,
   cancel = false,
+  disabled = false,
   children,
   ...props
 }: ButtonProps) => {
@@ -23,6 +24,7 @@ const Button = ({
       className={classNames(className, styles[variant], styles.button, {
         [styles.cancel]: cancel,
       })}
+      disabled={disabled}
       {...props}
     >
       {children}

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

@@ -6,10 +6,10 @@ import { Recruitment, RecruitmentStatus } from "../../../../types/domains/recrui
 import { PARAM, PATH } from "../../../constants/path";
 import { formatDateTime } from "../../../utils/format/date";
 import { generateQuery } from "../../../utils/route/query";
-import ApplyButton from "../MyApplicationButtons/ApplyButton";
 import styles from "../MyApplicationItem.module.css";
 import RecruitmentDetail from "../RecruitmentDetail/RecruitmentDetail";
 import { BUTTON_LABEL, RECRUITMENT_STATUS } from "./../../../constants/recruitment";
+import Button from "../../@common/Button/Button";
 
 type MyApplicationFormItemProps = {
   recruitment: Recruitment;
@@ -68,19 +68,24 @@ const MyApplicationFormItem = ({ recruitment, submitted }: MyApplicationFormItem
 
   return (
     <div className={classNames(styles["content-box"])}>
-      <div className={styles["text-container"]}>
-        <RecruitmentDetail startDate={formattedStartDateTime} endDate={formattedEndDateTime}>
-          {recruitment.title}
-        </RecruitmentDetail>
+      <div className={styles["content-wrapper"]}>
+        <div className={styles["title-container"]}>
+          <RecruitmentDetail startDate={formattedStartDateTime} endDate={formattedEndDateTime}>
+            {recruitment.title}
+          </RecruitmentDetail>
 
-        <div className={styles["button-container"]}>
-          <ApplyButton
-            isButtonDisabled={isButtonDisabled}
-            onClick={() => {
-              routeToApplicationForm(recruitment);
-            }}
-            label={applyButtonLabel}
-          />
+          <ul className={styles["title-button-list"]}>
+            <li>
+              <Button
+                disabled={isButtonDisabled}
+                onClick={() => {
+                  routeToApplicationForm(recruitment);
+                }}
+              >
+                {applyButtonLabel}
+              </Button>
+            </li>
+          </ul>
         </div>
       </div>
     </div>

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

@@ -1,3 +1,7 @@
+.divider {
+  border: 0.5px solid var(--gray-300);
+}
+
 .content-box {
   position: relative;
   display: flex;
@@ -11,29 +15,41 @@
   border: 1px solid var(--gray-300);
 }
 
-.text-container {
+.content-wrapper {
   display: flex;
   flex-direction: column;
   gap: 0.875rem;
   width: 100%;
 }
 
-.auto-judgment-detail-contour {
-  border: 0.5px solid var(--gray-300);
+.title-container {
+  display: flex;
+  justify-content: space-between;
+}
+
+.title-text {
+  flex: 1;
 }
 
-.button-container {
-  position: absolute;
-  top: 1.25rem;
-  right: 1.5rem;
+ul.title-button-list {
   display: flex;
-  gap: 1rem;
+}
+
+ul.title-button-list > li:not(:last-child) {
+  margin-right: 0.4rem;
 }
 
 @media screen and (max-width: 800px) {
-  .button-container {
-    position: static;
-    gap: 0.4rem;
-    margin-left: auto;
+  .title-container {
+    flex-direction: column;
+    gap: 0.875rem;
+  }
+
+  ul.title-button-list > li {
+    flex: 1;
+  }
+
+  ul.title-button-list > li > button {
+    width: 100%;
   }
 }