feat: 사이트맵 하드코딩 -> api 요청으로 받아오도록 변경

Author: pepperdad

apps/ticket/src/app/(pages)/event/[eventId]/time-table/site-map/_clientBoundary/SiteMapClient/index.tsx

@@ -7,7 +7,7 @@ import { Navigation, Pagination } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
 
 import { Button, Flex, Typography } from "@permit/design-system";
-import { useTimetablesSuspenseQuery } from "@/data/events/getTimetables/queries";
+import { useSiteMapSuspenseQuery } from "@/data/events/getSiteMap/queries";
 
 import "swiper/css";
 import "swiper/css/navigation";
@@ -21,17 +21,10 @@ type Props = {
   eventId: string;
 };
 
-// TODO: 임시 하드코딩
-const siteMapImages = [
-  "https://d3c0v2xj3fc363.cloudfront.net/events/testEventId/images/sitemap1.jpg",
-  "https://d3c0v2xj3fc363.cloudfront.net/events/testEventId/images/sitemap2.jpg",
-  "https://d3c0v2xj3fc363.cloudfront.net/events/testEventId/images/sitemap0.jpg",
-];
-
 export const SiteMapClient = ({ eventId }: Props) => {
   const router = useRouter();
 
-  const { data: timetablesData } = useTimetablesSuspenseQuery({
+  const { data: timetablesData } = useSiteMapSuspenseQuery({
     eventId,
     options: {
       refetchOnWindowFocus: true,
@@ -74,7 +67,7 @@ export const SiteMapClient = ({ eventId }: Props) => {
           loop={true}
           className={cx("swiper")}
         >
-          {siteMapImages.map((imageUrl, index) => (
+          {timetablesData.siteMapImages.map(({ imageUrl }, index) => (
             <SwiperSlide key={index} className={cx("swiper_slide")}>
               <div className={cx("image_container")}>
                 <Image

apps/ticket/src/app/(pages)/event/[eventId]/time-table/site-map/page.tsx

@@ -1,7 +1,7 @@
 import { Suspense } from "react";
 import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
 
-import { timetablesOptions } from "@/data/events/getTimetables/queries";
+import { siteMapOptions } from "@/data/events/getSiteMap/queries";
 import { getQueryClient } from "@/lib/queryClient/helpers/getQueryClient";
 import { LoadingWithLayout } from "@/shared/components/LoadingWithLayout";
 
@@ -17,7 +17,7 @@ export default async function SiteMapPage({ params }: Props) {
 
   const qc = getQueryClient();
 
-  qc.prefetchQuery(timetablesOptions({ eventId }));
+  qc.prefetchQuery(siteMapOptions({ eventId }));
 
   return (
     <SiteMapErrorBoundary>

apps/ticket/src/data/constants.ts

@@ -32,6 +32,8 @@ export const API_URL = {
     TIMETABLE_LIKE: "/api/events/timetables/likes/:blockId",
     /** 행사 타임테이블 좋아요 삭제 API */
     TIMETABLE_UNLIKE: "/api/events/timetables/likes/:blockId",
+    /** 행사 사이트맵 조회 API */
+    SITE_MAP: "/api/events/:eventId/sitemap",
   },
 
   // 예매 관련 API

apps/ticket/src/data/events/getSiteMap/queries.ts

@@ -0,0 +1,46 @@
+import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
+
+import { API_URL } from "@/data/constants";
+import { instance } from "@/lib/axios";
+import { getPathUrl } from "@/shared/helpers/getPathUrl";
+import {
+  OptionsObject,
+  PermitQueryOptions,
+  UsePermitQueryOptions,
+  UsePermitSuspenseQueryOptions,
+} from "@/shared/types/queryOptions";
+
+import { EVENT_QUERY_KEYS } from "../queryKeys";
+import { SiteMapParams, SiteMapResponse } from "./types";
+
+/** 행사 사이트맵 조회 API */
+export const siteMapOptions = (params: SiteMapParams): PermitQueryOptions<SiteMapResponse> => {
+  const url = getPathUrl(API_URL.EVENT.SITE_MAP, { eventId: params.eventId });
+
+  return {
+    queryKey: [EVENT_QUERY_KEYS.SITE_MAP, params.eventId],
+    queryFn: () => {
+      return instance.get<SiteMapResponse>(url).then((res) => res.data);
+    },
+  };
+};
+
+export const useSiteMapQuery = ({
+  eventId,
+  options,
+}: SiteMapParams & OptionsObject<UsePermitQueryOptions<SiteMapResponse>>) => {
+  return useQuery({
+    ...siteMapOptions({ eventId }),
+    ...options,
+  });
+};
+
+export const useSiteMapSuspenseQuery = ({
+  eventId,
+  options,
+}: SiteMapParams & OptionsObject<UsePermitSuspenseQueryOptions<SiteMapResponse>>) => {
+  return useSuspenseQuery({
+    ...siteMapOptions({ eventId }),
+    ...options,
+  });
+};

apps/ticket/src/data/events/getSiteMap/types.ts

@@ -0,0 +1,8 @@
+export type SiteMapParams = {
+  eventId: string;
+};
+
+export type SiteMapResponse = {
+  eventName: string;
+  siteMapImages: { imageUrl: string }[];
+};

apps/ticket/src/data/events/queryKeys.ts

@@ -4,4 +4,5 @@ export const EVENT_QUERY_KEYS = {
   TICKETS: "eventTickets",
   TIMETABLES: "timetables",
   TIMETABLE_DETAIL: "timetableDetail",
+  SITE_MAP: "siteMap",
 } as const;