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

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

@@ -9,12 +9,14 @@ export const BUTTON_VARIANT = {
 export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   variant?: typeof BUTTON_VARIANT[keyof typeof BUTTON_VARIANT];
   cancel?: boolean;
+  disabled?: boolean;
 };
 
 const Button = ({
   className,
   variant = BUTTON_VARIANT.CONTAINED,
   cancel = false,
+  disabled = false,
   children,
   ...props
 }: ButtonProps) => {
@@ -23,6 +25,7 @@ const Button = ({
       className={classNames(className, styles[variant], styles.button, {
         [styles.cancel]: cancel,
       })}
+      disabled={disabled}
       {...props}
     >
       {children}

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

@@ -6,10 +6,27 @@
   word-break: break-all;
 }
 
+.detail-status-container {
+  display: flex;
+  justify-content: space-between;
+}
+
+.detail-status-container ul {
+  display: flex;
+  gap: 0.25rem;
+}
+
 .guide-container {
   display: flex;
   gap: 0.25rem;
   margin-left: auto;
   color: var(--gray-600);
   font-size: 0.815rem;
 }
+
+@media screen and (max-width: 800px) {
+  .title-container {
+    flex-direction: column;
+    gap: 0.875rem;
+  }
+}

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

@@ -1,18 +1,22 @@
+import { PropsWithChildren } from "react";
 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 JudgmentResultText from "../JudgmentResult/JudgmentResult";
 import styles from "./MissionDetail.module.css";
 
-type MissionDetailProps = {
+type MissionDetailProps = PropsWithChildren<{
   judgment: Mission["judgment"];
-};
+}>;
 
-const MissionDetail = ({ judgment }: MissionDetailProps) => {
+const MissionDetail = ({ judgment, children }: MissionDetailProps) => {
   return (
     <div className={styles["detail-container"]}>
-      <JudgmentResultText judgment={judgment} />
+      <div className={styles["detail-status-container"]}>
+        <JudgmentResultText judgment={judgment} />
+        <div>{children}</div>
+      </div>
       <CommitHash judgment={judgment} />
       <div className={styles["guide-container"]}>
         <p>테스트 코드 실행이 끝나기까지 3 ~ 5분이 걸릴 수 있습니다</p>

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;
+.title-button-list {
   display: flex;
-  gap: 1rem;
+}
+
+.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;
+  }
+
+  .title-button-list > li {
+    flex: 1;
+  }
+
+  .title-button-list > li > button {
+    width: 100%;
   }
 }