fix: API 요청에 헤더 토큰 추가 및 레벨 이름 변환 함수 개선

Author: minsgy

src/routes/my/index.tsx

@@ -5,6 +5,7 @@ import { Dialog } from "radix-ui";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { DialogLevelDescriptionContent } from "@/components/dialog-level-description-content/DialogLevelDescriptionContent";
 import { getAttempts } from "@/generated/attempts/attempts";
+import { getHeaderToken } from "@/utils/cookie";
 import { MyInfo } from "./-components/MyInfo";
 import { MyScore } from "./-components/MyScore";
 import { VideoCard } from "./-components/VideoCard";
@@ -36,12 +37,17 @@ function RouteComponent() {
   }): Promise<{ items: VideoItem[]; nextPage?: number }> => {
     const gymId = selectedTab ? Number(selectedTab) : undefined;
 
-    const response = await getAttempts({
-      page: pageParam,
-      size: PAGE_SIZE,
-      gymId,
-      success: true,
-    });
+    const response = await getAttempts(
+      {
+        page: pageParam,
+        size: PAGE_SIZE,
+        gymId,
+        success: true,
+      },
+      {
+        headers: getHeaderToken(),
+      }
+    );
 
     const items: VideoItem[] = (response.data?.content ?? []).map(
       (attempt) => ({

src/routes/onboarding/level/-components/LevelRadioButton.tsx

@@ -12,7 +12,7 @@ export const LevelRadioButton = ({
     <RadioGroup.Item
       {...props}
       className={cn(
-        "flex-center flex-1 max-w-14 max-h-14 min-w-10 min-h-10 rounded-[16px] overflow-hidden mt-auto shrink-0 bg-neutral-300 text-neutral-400",
+        "flex-center w-14 h-14 rounded-[16px] overflow-hidden mt-auto shrink-0 bg-neutral-300 text-neutral-400 t-p-14-sb",
         "data-[state=checked]:bg-neutral-600 data-[state=checked]:text-neutral-100",
         "aspect-square"
       )}

src/routes/onboarding/level/index.tsx

@@ -1,18 +1,22 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { camelCase, upperFirst } from "es-toolkit/compat";
 import { AnimatePresence, motion } from "motion/react";
 import { AspectRatio, RadioGroup } from "radix-ui";
 import { useEffect, useState } from "react";
-import { match } from "ts-pattern";
+import { match, P } from "ts-pattern";
 import Button from "@/components/Button";
 import { Tag, type TagVariant } from "@/components/tag/Tag";
-
 import { getBrandLevels1 } from "@/generated/brand/brand";
 import type { GymLevelResponse } from "@/generated/model";
 import { setLevel } from "@/generated/onboarding/onboarding";
 import { getHeaderToken } from "@/utils/cookie";
 import { LevelRadioButton } from "./-components/LevelRadioButton";
 
+const convertPascalCase = (value: string) => {
+  return upperFirst(camelCase(value));
+};
+
 export const Route = createFileRoute("/onboarding/level/")({
   component: OnboardingLevelComponent,
 });
@@ -69,11 +73,9 @@ function OnboardingLevelComponent() {
 
   const selectedLabel = match(selectedLevel)
     .with(null, () => "")
-    .with({ gymLevelName: "ORANGE" }, () => "주황")
-    .with({ gymLevelName: "GREEN" }, () => "초록")
-    .with({ gymLevelName: "BLUE" }, () => "파랑")
-    .with({ gymLevelName: "RED" }, () => "빨강")
-    .with({ gymLevelName: "PURPLE" }, () => "보라")
+    .with({ gymLevelName: P.string }, (level) =>
+      convertPascalCase(level.gymLevelName)
+    )
     .otherwise(() => "");
 
   useEffect(
@@ -143,13 +145,7 @@ function OnboardingLevelComponent() {
             value={level.id?.toString() ?? ""}
             checked={level.id === selectedLevel?.id}
           >
-            {match(level.gymLevelName)
-              .with("ORANGE", () => "주황")
-              .with("GREEN", () => "초록")
-              .with("BLUE", () => "파랑")
-              .with("RED", () => "빨강")
-              .with("PURPLE", () => "보라")
-              .otherwise(() => level.gymLevelName)}
+            {level.gymLevelName && convertPascalCase(level.gymLevelName)}
           </LevelRadioButton>
         ))}
       </RadioGroup.Root>