feat: integrate API for hall-related concerts

src/api/concertHallApi.ts

@@ -1,5 +1,5 @@
 import { endPoint } from 'constants/endPoint';
-import type { HallDetailResponse, SeatReviewResponse } from 'types';
+import type { HallDetailResponse, RelateConcertResponse, SeatReviewResponse } from 'types';
 import { publicAxios, tokenAxios } from 'utils';
 
 export const requestGetHallDetails = async (id: string) => {
@@ -9,3 +9,7 @@ export const requestGetHallDetails = async (id: string) => {
 export const requestGetSeatReviews = async (query: string) => {
   return await tokenAxios.get<SeatReviewResponse>(`${endPoint.GET_SEAT_REVIEW}?${query}`);
 };
+
+export const requestGetRelateConcerts = async (query: string) => {
+  return await publicAxios.get<RelateConcertResponse>(`${endPoint.GET_RELATE_CONCERT}?${query}`);
+};

src/constants/endPoint.ts

@@ -51,6 +51,7 @@ export const endPoint = {
   GET_CONCERT_HALL_LIST: '/concert-halls/list',
   GET_CONCERT_HALL: (hallCode: string) => `/concert-halls/${hallCode}`,
   GET_SEAT_REVIEW: '/seat-review',
+  GET_RELATE_CONCERT: '/concert-halls/relate/list',
 
   // Search API
   GET_CONCERT_SEARCH: '/search/concert',

src/pages/concertHallDetail/ConcertHallDetail.tsx

@@ -188,7 +188,7 @@ const ConcertHallDetail = () => {
       <TabBar onTabClick={handleActiveTab} selectedTab={activeTab} tabList={tabMap['concertTab']} />
       <TabContent>
         {activeTab === '좌석 리뷰' && <SeatReview />}
-        {activeTab === '관련 공연' && <RelatedConcert />}
+        {activeTab === '관련 공연' && <RelatedConcert hallCode={id as string} />}
       </TabContent>
       <BottomButtonWrapper>
         <BaseButton

src/pages/concertHallDetail/components/RelatedConcert.tsx

@@ -1,8 +1,14 @@
 import styled from '@emotion/styled';
+import { useNavigate } from 'react-router-dom';
 
+import { useGetRelateConcert } from 'queries/concertHall';
 import { ChipText, SmallText } from 'styles/Typography';
 import { formatDateRange } from 'utils';
 
+interface RelatedConcertProps {
+  hallCode: string;
+}
+
 const RelatedConcertContainer = styled.div`
   width: 100%;
   padding: 1.6rem 0 0 2.4rem;
@@ -41,16 +47,20 @@ const ConcertItem = styled.div`
   &:hover,
   &:active {
     text-decoration: underline;
+    cursor: pointer;
+  }
+
+  &:nth-last-of-type(1) {
+    margin-right: 1.6rem;
   }
 `;
 
 const PosterContainer = styled.div`
   position: relative;
   overflow: hidden;
-  width: 100%;
-  height: 0;
+  width: 15rem;
+  height: 20rem;
   margin-bottom: 1.2rem;
-  padding-top: 133%;
   border-radius: 4px;
 `;
 
@@ -77,38 +87,24 @@ const ConcertDate = styled(SmallText)`
   color: ${({ theme }) => theme.colors.dark[200]};
 `;
 
-const dummyData = [
-  {
-    poster: 'https://tkfile.yes24.com/upload2/PerfBlog/202501/20250108/20250108-52123.jpg',
-    concertName: 'DAY6 3RD WORLD TOUR 〈FOREVER YOUNG〉in BUSAN',
-    stDate: '2025-02-01',
-    edDate: '2025-02-02',
-  },
-  {
-    poster: 'https://ticketimage.interpark.com/Play/image/large/25/25000325_p.gif',
-    concertName: '2025 LEECHANGSUB SOLO CONCERT 〈The Wayfarer〉 ENCORE',
-    stDate: '2025-02-07',
-    edDate: '2025-02-09',
-  },
-  {
-    poster: 'https://ticketimage.interpark.com/Play/image/large/24/24017908_p.gif',
-    concertName: '[2024-25 Theatre 이문세］ - 울산',
-    stDate: '2025-03-07',
-    edDate: '2025-03-08',
-  },
-];
-
-const RelatedConcert = () => {
+const RelatedConcert = ({ hallCode }: RelatedConcertProps) => {
+  const { data } = useGetRelateConcert(hallCode);
+  const navigate = useNavigate();
+
+  const handleConcertClick = (concertId: number) => {
+    navigate(`/concerts/${concertId}`);
+  };
+
   return (
     <RelatedConcertContainer>
       <ConcertList>
-        {dummyData.map((concert) => (
-          <ConcertItem key={concert.concertName}>
+        {data?.map((concert) => (
+          <ConcertItem key={concert.id} onClick={() => handleConcertClick(concert.id)}>
             <PosterContainer>
-              <PosterImg alt={concert.concertName} src={concert.poster} />
+              <PosterImg alt={concert.title} src={concert.imageUrl} />
             </PosterContainer>
-            <ConcertName>{concert.concertName}</ConcertName>
-            <ConcertDate>{formatDateRange(concert.stDate, concert.edDate)}</ConcertDate>
+            <ConcertName>{concert.title}</ConcertName>
+            <ConcertDate>{formatDateRange(concert.startDate, concert.endDate)}</ConcertDate>
           </ConcertItem>
         ))}
       </ConcertList>

src/queries/concertHall/index.ts

@@ -1,2 +1,3 @@
 export * from './useGetConcertHallDetail';
 export * from './useGetSeatReviews';
+export * from './useGetRelateConcert';

src/queries/concertHall/useGetRelateConcert.ts

@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { requestGetRelateConcerts } from 'api';
+import type { RelateConcert } from 'types';
+
+export const useGetRelateConcert = (hallCode: string) => {
+  const fetchRelateConcerts = async () => {
+    const { data } = await requestGetRelateConcerts(`hallCode=${hallCode}&pageSize=10`);
+    return data.result;
+  };
+
+  return useQuery<RelateConcert[]>({
+    queryKey: ['relateConcerts', hallCode],
+    queryFn: fetchRelateConcerts,
+    staleTime: 5 * 60 * 1000,
+  });
+};

src/types/concertHall.ts

@@ -26,6 +26,7 @@ export interface ConcertHallDetail {
   location: ConcertHallLocation;
 }
 
+// Seat Review
 export interface SeatReview {
   reviewId: number;
   seat: string;
@@ -49,5 +50,16 @@ export interface SeatReviewParams {
 
 export type SeatReviewSort = 'CREATED_ASC' | 'CREATED_DESC';
 
+// Relate Concert
+export interface RelateConcert {
+  id: number;
+  title: string;
+  startDate: string;
+  endDate: string;
+  imageUrl: string;
+  viewCount: number;
+}
+
 export type HallDetailResponse = ApiResponse<ConcertHallDetail>;
 export type SeatReviewResponse = ApiResponse<SeatReview[]>;
+export type RelateConcertResponse = ApiResponse<RelateConcert[]>;