refactor: update seat review API response to match server changes

ALLREVA · Feb 5, 2025 · f9cf379 · f9cf379
1 parent 598b4ca
commit f9cf379
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 57 deletions.
diff --git a/src/pages/concertHallDetail/components/SeatReview.tsx b/src/pages/concertHallDetail/components/SeatReview.tsx
@@ -36,14 +36,10 @@ const EmptySeatReview = styled.div`
   padding: 8rem 0;
 `;
 
-const SeatReviewList = styled.ul`
-  list-style: none;
-`;
-
 const SeatReview = () => {
   const { id } = useParams();
   const { isLoggedIn } = useAuthStore(['isLoggedIn']);
-  const [sortOrder, setSortOrder] = useState<SeatReviewSort>('CREATED_AT');
+  const [sortOrder, setSortOrder] = useState<SeatReviewSort>('CREATED_DESC');
   const {
     data: reviews,
     fetchNextPage,
@@ -68,14 +64,14 @@ const SeatReview = () => {
     <SeatReviewContainer>
       <ReviewFilterWrapper>
         <ReviewFilter
-          isActive={sortOrder === 'CREATED_AT'}
-          onClick={() => setSortOrder('CREATED_AT')}
+          isActive={sortOrder === 'CREATED_DESC'}
+          onClick={() => setSortOrder('CREATED_DESC')}
         >
           ∙ 최신순
         </ReviewFilter>
         <ReviewFilter
-          isActive={sortOrder === 'LIKE_COUNT'}
-          onClick={() => setSortOrder('LIKE_COUNT')}
+          isActive={sortOrder === 'CREATED_ASC'}
+          onClick={() => setSortOrder('CREATED_ASC')}
         >
           ∙ 오래된순
         </ReviewFilter>
@@ -86,13 +82,9 @@ const SeatReview = () => {
           <BodyRegularText>아직 작성된 리뷰가 없어요</BodyRegularText>
         </EmptySeatReview>
       ) : (
-        reviews?.pages.map((page, pageIndex) => (
-          <SeatReviewList key={pageIndex}>
-            {page.map((item) => (
-              <SeatReviewItem key={item.reviewId} {...item} />
-            ))}
-          </SeatReviewList>
-        ))
+        reviews?.pages.flatMap((page) =>
+          page.map((item) => <SeatReviewItem key={item.reviewId} {...item} />)
+        )
       )}
       <div ref={targetRef} />
     </SeatReviewContainer>

diff --git a/src/pages/concertHallDetail/components/SeatReviewItem.tsx b/src/pages/concertHallDetail/components/SeatReviewItem.tsx
@@ -98,49 +98,35 @@ const ReviewContent = styled.div`
   color: ${({ theme }) => theme.colors.dark[200]};
 `;
 
-const dummyData = {
-  profileImg: 'https://img.danawa.com/prod_img/500000/253/439/img/18439253_1.jpg?_v=20221207094826',
-  username: '포차코',
-  isWriter: true,
-  concertName: 'DAY6 3RD WORLD TOUR, FOREVER YOUNG [인천]',
-  seatName: '3층 309구역 G열 05번',
-  images: [
-    'https://pbs.twimg.com/media/GK9TqisboAAeWIk.jpg:large',
-    'https://i.ytimg.com/vi/drfGUB9-qTc/hq720.jpg?sqp=-oaymwEhCK4FEIIDSFryq4qpAxMIARUAAAAAGAElAADIQj0AgKJD&rs=AOn4CLCQa7Viw4-buaWVlPAX5SJGxw0R3g',
-    'https://mblogthumb-phinf.pstatic.net/MjAyNDA0MTNfMTEx/MDAxNzEyOTgwNjgwOTUw.QsQuXUDj3u9UicILmMebvnMTwTmXWRI1yw9nxzbRnu0g.zmC3tgzLnNzoz31fK-jBG8m0-1aRvnkRQCwloQXYRQMg.JPEG/SE-247ff122-9c18-4390-906f-97f95880747d.jpg?type=w400',
-  ],
-  content: '생각보다 잘 보여요',
-  date: '2025-01-14',
-};
-
 const SeatReviewItem = (props: SeatReview) => {
-  const { profileImg, username, isWriter, concertName } = dummyData;
-  const { seat, imageUrls, content, viewDate } = props;
-
   const { openModal } = useModalStore(['openModal']);
+  const { seat, concertTitle, content, imageUrls, viewDate, profileImageUrl, nickname, writer } =
+    props;
 
   return (
     <SeatReviewItemContainer>
       <ReviewInfo>
         <ReviewTop>
           <RevierProfile>
-            <ProfileImg src={profileImg} />
-            <BodyRegularText>{username}</BodyRegularText>
+            <ProfileImg src={profileImageUrl} />
+            <BodyRegularText>{nickname}</BodyRegularText>
           </RevierProfile>
-          {isWriter && (
+          {writer && (
             <MoreButton onClick={() => openModal('bottomSheet', 'list', <SeatReviewSheet />)}>
               <TbDots size={20} />
             </MoreButton>
           )}
         </ReviewTop>
-        <ConcertName>{concertName}</ConcertName>
+        <ConcertName>{concertTitle}</ConcertName>
         <SeatName>{seat}</SeatName>
       </ReviewInfo>
-      <ReviewImageWrapper>
-        {imageUrls.map((url) => (
-          <ReviewImage key={url} src={url} />
-        ))}
-      </ReviewImageWrapper>
+      {imageUrls?.filter((x) => x !== null).length !== 0 && (
+        <ReviewImageWrapper>
+          {imageUrls.map((url) => (
+            <ReviewImage key={url} src={url} />
+          ))}
+        </ReviewImageWrapper>
+      )}
       <ReviewContent>
         <BodyRegularText>{content}</BodyRegularText>
         <BodyRegularText>{formatDotDate(viewDate)}</BodyRegularText>

diff --git a/src/queries/concertHall/useGetSeatReviews.ts b/src/queries/concertHall/useGetSeatReviews.ts
@@ -2,29 +2,31 @@ import { useInfiniteQuery } from '@tanstack/react-query';
 
 import { requestGetSeatReviews } from 'api';
 import { useAuthStore } from 'stores';
-import type { SeatReview, SeatReviewSort } from 'types';
+import type { SeatReview, SeatReviewParams, SeatReviewSort } from 'types';
 
 export const useGetSeatReviews = (hallId: string, sortType: SeatReviewSort) => {
   const { isLoggedIn } = useAuthStore(['isLoggedIn']);
 
-  const fetchSeatReviews = async (lastId: number | null) => {
+  const fetchSeatReviews = async (params: SeatReviewParams) => {
     if (!isLoggedIn) return [];
 
-    const query = `${lastId ? `lastId=${lastId}&` : ''}size=3&sortType=${sortType}&hallId=${hallId}`;
+    const { lastId, lastCreatedAt } = params;
+    const query = `${lastId && lastCreatedAt ? `lastId=${lastId}&lastCreatedAt=${lastCreatedAt}&` : ''}size=3&sortType=${sortType}&hallId=${hallId}`;
+
     const { data } = await requestGetSeatReviews(query);
     return data.result;
   };
 
   return useInfiniteQuery<SeatReview[]>({
     queryKey: ['seatReviews', hallId, sortType],
-    queryFn: ({ pageParam }) => {
-      const param = pageParam as number | null;
-      return fetchSeatReviews(param);
-    },
-    initialPageParam: null,
+    queryFn: ({ pageParam }) => fetchSeatReviews(pageParam as SeatReviewParams),
+    initialPageParam: { lastId: null, lastCreatedAt: null },
     getNextPageParam: (lastPage) => {
       const lastData = lastPage[lastPage.length - 1];
-      return lastPage.length > 0 ? lastData.reviewId : null;
+      return lastPage.length > 0
+        ? { lastId: lastData.reviewId, lastCreatedAt: lastData.createdAt }
+        : undefined;
     },
+    staleTime: 5 * 60 * 1000,
   });
 };
diff --git a/src/routes/routes.tsx b/src/routes/routes.tsx
@@ -110,7 +110,7 @@ export const router = createBrowserRouter([
             },
           },
           {
-            path: '/concert-hall/:id',
+            path: '/concert-halls/:id',
             element: <ConcertHallDetail />,
             handle: {
               isSharePage: true,

diff --git a/src/types/concertHall.ts b/src/types/concertHall.ts
@@ -29,18 +29,25 @@ export interface ConcertHallDetail {
 export interface SeatReview {
   reviewId: number;
   seat: string;
+  concertTitle: string;
   content: string;
   star: number;
   memberId: number;
   hallId: string;
   viewDate: string;
   createdAt: string;
-  imageUrls: string[];
-  likeCount: number;
-  liked: boolean;
+  imageUrls: string[] | [];
+  profileImageUrl: string;
+  nickname: string;
+  writer: boolean;
 }
 
-export type SeatReviewSort = 'CREATED_AT' | 'LIKE_COUNT';
+export interface SeatReviewParams {
+  lastId: number | null;
+  lastCreatedAt: string | null;
+}
+
+export type SeatReviewSort = 'CREATED_ASC' | 'CREATED_DESC';
 
 export type HallDetailResponse = ApiResponse<ConcertHallDetail>;
 export type SeatReviewResponse = ApiResponse<SeatReview[]>;