From f9cf379a6a537ed1e869d621fc4c7b6f961d0c82 Mon Sep 17 00:00:00 2001 From: nxnaxx Date: Tue, 4 Feb 2025 23:55:09 +0900 Subject: [PATCH] refactor: update seat review API response to match server changes --- .../components/SeatReview.tsx | 24 ++++------- .../components/SeatReviewItem.tsx | 40 ++++++------------- src/queries/concertHall/useGetSeatReviews.ts | 20 +++++----- src/routes/routes.tsx | 2 +- src/types/concertHall.ts | 15 +++++-- 5 files changed, 44 insertions(+), 57 deletions(-) diff --git a/src/pages/concertHallDetail/components/SeatReview.tsx b/src/pages/concertHallDetail/components/SeatReview.tsx index e4546ad..8976c98 100644 --- 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('CREATED_AT'); + const [sortOrder, setSortOrder] = useState('CREATED_DESC'); const { data: reviews, fetchNextPage, @@ -68,14 +64,14 @@ const SeatReview = () => { setSortOrder('CREATED_AT')} + isActive={sortOrder === 'CREATED_DESC'} + onClick={() => setSortOrder('CREATED_DESC')} > ∙ 최신순 setSortOrder('LIKE_COUNT')} + isActive={sortOrder === 'CREATED_ASC'} + onClick={() => setSortOrder('CREATED_ASC')} > ∙ 오래된순 @@ -86,13 +82,9 @@ const SeatReview = () => { 아직 작성된 리뷰가 없어요 ) : ( - reviews?.pages.map((page, pageIndex) => ( - - {page.map((item) => ( - - ))} - - )) + reviews?.pages.flatMap((page) => + page.map((item) => ) + ) )}
diff --git a/src/pages/concertHallDetail/components/SeatReviewItem.tsx b/src/pages/concertHallDetail/components/SeatReviewItem.tsx index 022c258..3271aeb 100644 --- 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 ( - - {username} + + {nickname} - {isWriter && ( + {writer && ( openModal('bottomSheet', 'list', )}> )} - {concertName} + {concertTitle} {seat} - - {imageUrls.map((url) => ( - - ))} - + {imageUrls?.filter((x) => x !== null).length !== 0 && ( + + {imageUrls.map((url) => ( + + ))} + + )} {content} {formatDotDate(viewDate)} diff --git a/src/queries/concertHall/useGetSeatReviews.ts b/src/queries/concertHall/useGetSeatReviews.ts index a4d1cbd..0bee70e 100644 --- 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({ 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 index 4aeaeaa..ab8b849 100644 --- 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: , handle: { isSharePage: true, diff --git a/src/types/concertHall.ts b/src/types/concertHall.ts index 3231e49..565e1ce 100644 --- 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; export type SeatReviewResponse = ApiResponse;