fix: 미션 소팅, 홀드 노출

Author: JKyEun

src/routes/mission/-components/MissionGridCard.tsx

@@ -129,11 +129,11 @@ export default function MissionGridCard({
               )}
             </div>
             {status !== "not_tried" && (
-              <div className="flex justify-center items-center py-2 xs:py-3">
+              <div className="flex justify-center items-center max-h-[180px] max-w-[180px] w-full h-full mx-auto">
                 <img
                   src={holdImageUrl}
                   alt="mission-image"
-                  className="w-[140px] h-[140px] xs:w-[180px] xs:h-[180px] object-cover"
+                  className="object-contain w-full h-full"
                 />
               </div>
             )}

src/routes/mission/-components/MissionListCard.tsx

@@ -43,7 +43,7 @@ export default function MissionListCard({
           <img
             src={holdImageUrl}
             alt=""
-            className="w-full h-full rounded-[20px] object-cover"
+            className="w-full h-full rounded-[20px] object-contain"
           />
         )}
       </div>

src/routes/mission/index.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
-import { countBy } from "es-toolkit/compat";
+import { countBy, sample } from "es-toolkit/compat";
 import { useCallback, useState } from "react";
 import GridIcon from "@/components/icons/GridIcon";
 import { MISSION_GUIDE_COMPLETED_KEY } from "@/constants/mission";
@@ -69,13 +69,13 @@ const createMissionCardProps = (
       return {
         ...baseProps,
         completedAt: mission.attempts?.[0]?.createdAt,
-        holdImageUrl: mission.imageUrl,
+        holdImageUrl: sample(mission.gymLevel?.imageUrls ?? []),
       };
     case "failed":
       return {
         ...baseProps,
         removedAt: mission.removedAt,
-        holdImageUrl: mission.imageUrl,
+        holdImageUrl: sample(mission.gymLevel?.imageUrls ?? []),
       };
     default:
       return baseProps;
@@ -97,10 +97,15 @@ function Mission() {
       getRouteMissionRecommendations({ headers: getHeaderToken() }),
     select: (data) => {
       const missions = data.data ?? [];
-      return missions.map((mission) => ({
-        ...mission,
-        status: calculateMissionStatus(mission.attempts),
-      }));
+      return missions
+        .map((mission) => ({
+          ...mission,
+          status: calculateMissionStatus(mission.attempts),
+        }))
+        .sort((a, b) => {
+          const statusOrder = { not_tried: 0, failed: 1, success: 2 };
+          return statusOrder[a.status] - statusOrder[b.status];
+        });
     },
     enabled: isSessionStarted,
   });