fix: 미션카드 랜덤 라벨 노출

Author: JKyEun

src/constants/mission.ts

@@ -1 +1,23 @@
 export const MISSION_GUIDE_COMPLETED_KEY = "MISSION_GUIDE_COMPLETED";
+
+export const MISSION_STATUS_MESSAGES = {
+  success: [
+    "방금 그 루트 멋지게 완등했어요!",
+    "이 정도면 다음 루트도 충분해요",
+    "깔끔하게 올라왔네요",
+    "조금씩 성장하고 있어요",
+    "방금 루트 좋았어요!",
+  ],
+  failed: [
+    "시도 자체가 멋져요",
+    "다음엔 더 잘할 수 있어요",
+    "아쉽지만 괜찮아요",
+    "다음 도전도 기대돼요",
+    "이 정도면 절반은 성공!",
+  ],
+  not_tried: [
+    "이 루트가 궁금하지 않으신가요?",
+    "내 레벨에 맞는 추천 루트에요",
+    "내 실력 상승에 좋은 루트에요",
+  ],
+} as const;

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

@@ -1,7 +1,9 @@
 import { Link } from "@tanstack/react-router";
+import { sample } from "es-toolkit/compat";
 import { Tooltip } from "radix-ui";
 import Button from "@/components/Button";
 import { Tag } from "@/components/tag/Tag";
+import { MISSION_STATUS_MESSAGES } from "@/constants/mission";
 import { cn } from "@/utils/cn";
 import { convertPascalCase } from "@/utils/convert";
 import { getDiffFromNow } from "@/utils/date";
@@ -141,7 +143,7 @@ export default function MissionGridCard({
                 <div className="flex items-center gap-1">
                   {status === "not_tried" ? (
                     <div className="t-p-14-m text-neutral-100">
-                      이 루트 궁금하지 않으신가요?
+                      {sample(MISSION_STATUS_MESSAGES.not_tried)}
                     </div>
                   ) : (
                     <>
@@ -152,8 +154,8 @@ export default function MissionGridCard({
                       )}
                       <div className="t-p-14-m">
                         {status === "success"
-                          ? "완등 ! 대단히 상당히 멋져요!"
-                          : "한 번 더 도전해보세요!"}
+                          ? sample(MISSION_STATUS_MESSAGES.success)
+                          : sample(MISSION_STATUS_MESSAGES.failed)}
                       </div>
                     </>
                   )}

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

@@ -1,4 +1,6 @@
 import { Link } from "@tanstack/react-router";
+import { sample } from "es-toolkit/compat";
+import { MISSION_STATUS_MESSAGES } from "@/constants/mission";
 import { cn } from "@/utils/cn";
 import { convertPascalCase } from "@/utils/convert";
 
@@ -90,9 +92,9 @@ export default function MissionListCard({
           {convertPascalCase(difficulty)}
         </div>
         <div className="t-p-12-m text-neutral-600 mb-1">
-          {status === "not_tried" && "이 루트가 궁금하지 않으신가요?"}
-          {status === "success" && "완등 ! 대단히 상당히 멋져요!"}
-          {status === "failed" && "한 번 더 도전해보세요!"}
+          {status === "not_tried" && sample(MISSION_STATUS_MESSAGES.not_tried)}
+          {status === "success" && sample(MISSION_STATUS_MESSAGES.success)}
+          {status === "failed" && sample(MISSION_STATUS_MESSAGES.failed)}
         </div>
         <div className="flex items-center gap-1 t-p-10-sb text-neutral-400">
           <span className="w-1 h-1 rounded-full bg-neutral-400" />