fix: 마이페이지 카테고리 필터에 하드코딩 제거, 데이터 호출

Author: JKyEun

src/routes/my/-components/VideoTab.tsx

@@ -1,38 +1,36 @@
+import { useQuery } from "@tanstack/react-query";
 import { motion } from "motion/react";
+import { getAllGyms } from "@/generated/climbing-gym/climbing-gym";
+import type { GymResponse } from "@/generated/model";
+import { ALL_TAB_ID } from "..";
 
-const TABS = [
-  {
-    id: null,
-    name: "전체",
-  },
-  {
-    id: "1",
-    name: "강남점",
-  },
-  {
-    id: "2",
-    name: "논현점",
-  },
-] as const;
-
-export type VideoTabId = (typeof TABS)[number]["id"];
+export type VideoTabId = GymResponse["id"];
 
 interface VideoTabProps {
   selectedTab: VideoTabId;
   setSelectedTab: (tabId: VideoTabId) => void;
 }
 
 export const VideoTab = ({ selectedTab, setSelectedTab }: VideoTabProps) => {
+  const { data: gyms = [{ id: ALL_TAB_ID, branchName: "전체" }] } = useQuery({
+    queryKey: ["gyms"],
+    queryFn: () => getAllGyms(),
+    select: (data) => [
+      { id: ALL_TAB_ID, branchName: "전체" },
+      ...(data.data ?? []),
+    ],
+  });
+
   return (
     <div className="flex items-center gap-2">
-      {TABS.map(({ id, name }) => (
+      {gyms?.map(({ id, branchName }) => (
         <button
           type="button"
           className="relative flex-center px-4 py-2"
           key={id}
           onClick={() => setSelectedTab(id)}
         >
-          <span className="t-p-14-sb text-neutral-500 z-10">{name}</span>
+          <span className="t-p-14-sb text-neutral-500 z-10">{branchName}</span>
           {selectedTab === id && (
             <motion.div
               layoutId="video-tab-indicator"

src/routes/my/index.tsx

@@ -19,8 +19,10 @@ export const Route = createFileRoute("/my/")({
 const PAGE_SIZE = 10;
 const GOOGLE_FORM_URL = "https://forms.gle/btXobhr7sAHsXjMg9";
 
+export const ALL_TAB_ID = 0;
+
 function RouteComponent() {
-  const [selectedTab, setSelectedTab] = useState<VideoTabId>(null);
+  const [selectedTab, setSelectedTab] = useState<VideoTabId>(ALL_TAB_ID);
   const [openIndex, setOpenIndex] = useState<number | null>(null);
 
   const fetchVideos = async ({ pageParam = 0 }: { pageParam?: number }) => {