fix: 공연소식 전체탭 api 분리 적용 (#439)

Author: goodsmell

src/feature/performanceNews/performanceMain/api.ts

@@ -1,8 +1,23 @@
-// src/features/performanceMain/api.ts
-import { api } from '@/api/api';
-import type { PerformanceMainResponse } from './types';
+import { api } from "@/api/api";
+import type { PerformanceMainResponse } from "./types";
 
-export const getPerformanceMain = async (): Promise<PerformanceMainResponse> => {
-  const res = await api.get('/performance/main');
+type Params = { isUsed?: boolean };
+
+export const getPerformanceMainOngoing = async (
+  params?: Params
+): Promise<PerformanceMainResponse> => {
+  const res = await api.get("/performance/main/ongoing", { params });
+  return res.data;
+};
+
+export const getPerformanceMainUpComing = async (
+  params?: Params
+): Promise<PerformanceMainResponse> => {
+  const res = await api.get("/performance/main/upcoming", { params });
+  return res.data;
+};
+
+export const getPerformanceMainPast = async (params?: Params): Promise<PerformanceMainResponse> => {
+  const res = await api.get("/performance/main/past", { params });
   return res.data;
-};
+};

src/feature/performanceNews/performanceMain/queries.ts

@@ -1,19 +1,108 @@
-// src/feature/performanceNews/performanceMain/queries.ts
-import { useQuery } from '@tanstack/react-query';
-import { getPerformanceMain } from './api';
+// src/features/performanceMain/queries.ts
+import { useMemo } from "react";
+import { useQueries } from "@tanstack/react-query";
+import {
+  getPerformanceMainOngoing,
+  getPerformanceMainPast,
+  getPerformanceMainUpComing,
+} from "./api";
+
+type SectionParams = { isUsed?: boolean };
+type MainSectionParams = {
+  ongoing?: SectionParams;
+  upcoming?: SectionParams;
+  past?: SectionParams;
+};
 
 export const performanceMainKeys = {
-  all: ['performanceMain'] as const,
+  all: ["performanceMain"] as const,
+
+  ongoing: (params: SectionParams) => [...performanceMainKeys.all, "ongoing", params] as const,
+
+  upcoming: (params: SectionParams) => [...performanceMainKeys.all, "upcoming", params] as const,
+
+  past: (params: SectionParams) => [...performanceMainKeys.all, "past", params] as const,
 };
 
-export const usePerformanceMain = () => {
-  return useQuery({
-    queryKey: performanceMainKeys.all,
-    queryFn: getPerformanceMain,
-    staleTime: Infinity,            // 탭 이동/리렌더로 재요청 X
-    gcTime: 1000 * 60 * 60,         // 1시간 동안 캐시 유지(원하면 더 늘려도 됨)
-    refetchOnMount: false,
-    refetchOnWindowFocus: false,
-    refetchOnReconnect: false,
+const commonQueryOptions = {
+  staleTime: Infinity,
+  gcTime: 1000 * 60 * 60,
+  refetchOnMount: false,
+  refetchOnWindowFocus: false,
+  refetchOnReconnect: false,
+} as const;
+
+export const usePerformanceMainSections = (params: MainSectionParams = {}) => {
+  const ongoingParams = params.ongoing ?? {};
+  const upcomingParams = params.upcoming ?? {};
+  const pastParams = params.past ?? {};
+
+  const results = useQueries({
+    queries: [
+      {
+        queryKey: performanceMainKeys.ongoing(ongoingParams),
+        queryFn: () => getPerformanceMainOngoing(ongoingParams),
+        ...commonQueryOptions,
+      },
+      {
+        queryKey: performanceMainKeys.upcoming(upcomingParams),
+        queryFn: () => getPerformanceMainUpComing(upcomingParams),
+        ...commonQueryOptions,
+      },
+      {
+        queryKey: performanceMainKeys.past(pastParams),
+        queryFn: () => getPerformanceMainPast(pastParams),
+        ...commonQueryOptions,
+      },
+    ],
   });
+
+  const [ongoing, upcoming, past] = results;
+
+  return useMemo(
+    () => ({
+      ongoing: ongoing.data ?? [],
+      upcoming: upcoming.data ?? [],
+      past: past.data ?? [],
+
+      section: {
+        ongoing: {
+          isLoading: ongoing.isLoading,
+          isFetching: ongoing.isFetching,
+          isError: ongoing.isError,
+          error: ongoing.error,
+        },
+        upcoming: {
+          isLoading: upcoming.isLoading,
+          isFetching: upcoming.isFetching,
+          isError: upcoming.isError,
+          error: upcoming.error,
+        },
+        past: {
+          isLoading: past.isLoading,
+          isFetching: past.isFetching,
+          isError: past.isError,
+          error: past.error,
+        },
+      },
+    }),
+    [
+      ongoing.data,
+      upcoming.data,
+      past.data,
+      ongoing.isLoading,
+      upcoming.isLoading,
+      past.isLoading,
+      ongoing.isFetching,
+      upcoming.isFetching,
+      past.isFetching,
+      ongoing.isError,
+      upcoming.isError,
+      past.isError,
+      ongoing.error,
+      upcoming.error,
+      past.error,
+      results,
+    ]
+  );
 };

src/feature/performanceNews/performanceMain/types.ts

@@ -1,4 +1,4 @@
-export type PerformanceMainFilter = 'all' | 'podo';
+export type PerformanceMainFilter = "all" | "podo";
 
 export type PerformanceMainQuery = {
   ongoingUsed: boolean;
@@ -11,14 +11,12 @@ export type PerformanceMainItem = {
   posterPath: string;
   title: string;
   place: string;
-  startDate: string; // YYYY-MM-DD
-  endDate: string; // YYYY-MM-DD
-  isUsed: boolean; // 포도상점 여부(전체 호출 시 true/false 섞임)
-  link?:string;
+  startDate: string;
+  endDate: string;
+  isUsed: boolean;
+  isOwner: boolean;
+  link: string;
 };
 
-export type PerformanceMainResponse = {
-  ongoing: PerformanceMainItem[];
-  upcoming: PerformanceMainItem[];
-  past: PerformanceMainItem[];
-};
+
+export type PerformanceMainResponse = PerformanceMainItem[];