Merge pull request #205 from DevKor-github/fix/pick-detail

핔 디테일 페이지 좀 변경

Author: halionaz

src/features/pick/apis/useGetPickDetail.ts

@@ -1,6 +1,6 @@
 import client from '@/common/utils/client';
 import { QUERY_KEYS } from '@/libs/queryKeys';
-import type { ProductType, TradeMethods, TransactionType } from '@/libs/types/item';
+import type { Color, ProductType, Quality, Size, TradeMethods, TransactionType } from '@/libs/types/item';
 import type { PickStatus } from '@/libs/types/pick';
 import { useQuery } from '@tanstack/react-query';
 
@@ -9,12 +9,16 @@ interface GetPickDetailResponse {
   data: {
     appointmentId: number;
     itemId: number;
+    chatRoomId: number;
     requesterId: number;
     ownerId: number;
     imageUrl: string;
     title: string;
     description: string;
     productTypes: ProductType[];
+    quality: Quality;
+    size: Size;
+    color: Color;
     rentalDate: string;
     returnDate: string | null;
     rentalLocation: string;
@@ -25,6 +29,8 @@ interface GetPickDetailResponse {
     type: TransactionType;
     tradeMethod: TradeMethods;
     isCreator: boolean;
+    opponentNickname: string;
+    isReviewed: boolean;
   };
 }
 

src/features/pick/apis/usePatchCancelPick.ts

@@ -12,6 +12,7 @@ export const usePatchCancelPick = () => {
     mutationFn: patchCancelPick,
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.PICK_DETAIL] });
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.ITEM_STATUS] });
     },
   });
 };

src/features/pick/apis/usePatchConfirmPick.ts

@@ -13,6 +13,7 @@ export const usePatchConfirmPick = () => {
     mutationFn: patchConfirmPick,
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.PICK_DETAIL] });
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.ITEM_STATUS] });
     },
   });
 };

src/features/pick/components/DetailBottom/index.tsx

@@ -3,6 +3,7 @@ import * as s from './style.css';
 import { usePatchConfirmPick } from '@/features/pick/apis/usePatchConfirmPick';
 import type { PickStatus } from '@/libs/types/pick';
 import { useNavigate } from 'react-router';
+import { useToast } from '@/common/hooks/useToast';
 
 const PICK_EXPIRED_MESSAGE: Record<Exclude<PickStatus, 'PENDING' | 'CONFIRMED'>, string> = {
   CANCELLED: '취소된 PICK이에요',
@@ -16,24 +17,29 @@ interface Props {
   itemId: number;
   isCreator: boolean;
   pickState: PickStatus;
+  chatRoomId: number;
 }
-const DetailBottom = ({ id, itemId, isCreator, pickState }: Props) => {
+const DetailBottom = ({ id, itemId, isCreator, pickState, chatRoomId }: Props) => {
   const navigate = useNavigate();
   const { mutate: cancel } = usePatchCancelPick();
   const { mutate: confirm } = usePatchConfirmPick();
+  const { openToast } = useToast();
 
   const cancelPick = () => {
     cancel(id, {
       onSuccess: () => {
-        navigate(`/detail/${itemId}`);
+        navigate(`/detail/${itemId}`, { replace: true });
+        openToast({ message: 'PICK이 취소되었어요' });
       },
     });
   };
+
   const confirmPick = () => {
     confirm(id, {
       onSuccess: () => {
         // TODO: 채팅방 이동
-        navigate(`/chat`);
+        navigate(`/chatroom/${chatRoomId}`, { replace: true });
+        openToast({ message: 'PICK이 확정되었어요' });
       },
     });
   };

src/pages/PickDetailPage/index.tsx

@@ -54,7 +54,7 @@ const PickDetailPage = () => {
           <div className={s.InfoText}>
             {data.isCreator
               ? `내가 요청한 ${isSale ? '판매' : '대여'} 정보예요 🔥`
-              : `${data.requesterId} 님께서 요청하신 ${isSale ? '판매' : '대여'} 정보예요 🔥`}
+              : `${data.opponentNickname}님께서 요청하신 ${isSale ? '판매' : '대여'} 정보예요 🔥`}
           </div>
           <div className={s.Contents}>
             <div className={s.PickInfo}>
@@ -111,7 +111,13 @@ const PickDetailPage = () => {
             )}
           </div>
         </div>
-        <DetailBottom id={id} itemId={data.itemId} isCreator={data.isCreator} pickState={data.state} />
+        <DetailBottom
+          id={id}
+          itemId={data.itemId}
+          isCreator={data.isCreator}
+          pickState={data.state}
+          chatRoomId={data.chatRoomId}
+        />
       </div>
     </SafeArea>
   );