Fix: 전체 기능 테스트 보완

src/@types/AuctionDetails.d.ts

@@ -7,6 +7,11 @@ declare module 'AuctionDetails' {
     minPrice: number;
     isSeller: boolean;
     category: string;
+    sellerProfileImageUrl: string;
+    images: {
+      imageId: number;
+      imageUrl: string;
+    }[];
   }
 
   export interface IAuctionDetails extends IAuctionDetailsBase {
@@ -17,16 +22,12 @@ declare module 'AuctionDetails' {
     bidId: number | null;
     bidAmount: number;
     remainingBidCount: number;
-    imageUrls: string[];
+    isCancelled: boolean;
   }
 
   export interface IPreAuctionDetails extends IAuctionDetailsBase {
     updatedAt: string;
     likeCount: number;
     isLiked: boolean;
-    images: {
-      imageId: number;
-      imageUrl: string;
-    }[];
   }
 }

src/components/bid/Bid.test.tsx

@@ -1,11 +1,11 @@
-import { RouterProvider, createMemoryRouter } from 'react-router-dom';
 import { act, render, screen, waitFor } from '@testing-library/react';
+import { RouterProvider, createMemoryRouter } from 'react-router-dom';
 import { describe, expect, test, vi } from 'vitest';
 
 import Bid from '@/pages/Bid';
 import { mockedUseNavigate } from '@/setupTests';
-import { useGetAuctionDetails } from '../details/queries';
 import userEvent from '@testing-library/user-event';
+import { useGetAuctionDetails } from '../details/queries';
 
 vi.mock('@/components/details/queries');
 vi.mocked(useGetAuctionDetails).mockReturnValue({
@@ -14,7 +14,8 @@ vi.mocked(useGetAuctionDetails).mockReturnValue({
     bidId: null,
     description:
       "서로 다른 출신과 개성을 가진 이들이 모여 밴드 결성까지의 과정을 보여준 ‘Harmony from Discord’부터 멤버들 간의 만남을 동경과 벅차오르는 감성으로 담아낸 ‘MANITO’까지. 성장 서사를 써내려가는 밴드 QWER이 두 번째 EP인 ‘Algorithm’s Blossom’을 선보인다. 이번 앨범에서는 QWER이라는 하나의 팀으로서 새롭게 운명을 개척해나가는 이야기를 ‘알고리즘이 피워낸 꽃’이라는 키워드를 통해 풀어내고자 한다.\n\n\"사랑과 상처, 그 모든 것을 끌어안고 피어나”\n\n무수히 파편적이고 혼란하지만 보여지는 것은 단편적인 곳, 다양한 혼잡함이 가지런히 질서를 이루는 곳. 그런 '알고리즘' 속에서 우리의 이야기를 피워낸다. ‘Algorithm’s Blossom'에서 QWER은 보편적이지 않은 공간에 심겨진 씨앗으로, 동시에 사랑과 상처를 양분삼아 돋아난 싹으로, 세상에 보인 적 없던 새로운 꽃의 모습으로 자신들의 성장과 여정을 그린다.",
-    imageUrls: ['/jgbI75.jpg'],
+    images: [{ imageId: 1, imageUrl: '/jgbI75.jpg' }],
+    isCancelled: false,
     isParticipated: false,
     isSeller: false,
     minPrice: 23000,
@@ -26,7 +27,23 @@ vi.mocked(useGetAuctionDetails).mockReturnValue({
     status: 'PROCEEDING',
     timeRemaining: 25816,
     category: 'ELECTRONICS',
+    sellerProfileImageUrl: ''
   },
+  refetch: vi.fn().mockResolvedValue({ // refetch 추가
+    data: {
+      bidAmount: 1000,
+      bidId: null,
+      description: 'Test auction',
+      imageUrls: ['test-image.jpg'],
+      isParticipated: false,
+      isSeller: false,
+      minPrice: 500,
+      productName: 'Test product',
+      participantCount: 5,
+      sellerProfileImageUrl: 'seller-image.jpg',
+    },
+    error: null,
+  }),
 });
 
 /**

src/components/bid/BidFooter.tsx

@@ -1,46 +1,26 @@
-import Button from '../common/Button';
 import { MAX_BID_COUNT } from '@/constants/bid';
+import Button from '../common/Button';
 
 interface BidFooterProps {
   remain: number;
   check: boolean;
   isSubmitting: boolean;
-  handlePost: (e?: React.BaseSyntheticEvent<object, any, any> | undefined) => Promise<void>;
-  handlePatch: () => void;
+  handlePost: (e: React.BaseSyntheticEvent<object, any, any> | undefined) => Promise<void>;
 }
 
-const BidFooter = ({ remain, check, isSubmitting, handlePost, handlePatch }: BidFooterProps) => {
-  if (remain === MAX_BID_COUNT) {
-    return (
-      <Button
-        type='button'
-        color='cheeseYellow'
-        className='w-full h-full transition-colors rounded text-button active:bg-black'
-        aria-label='제안하기 버튼'
-        onClick={handlePost}
-        disabled={!check || isSubmitting}
-      >
-        제안하기
-      </Button>
-    );
-  }
-
+const BidFooter = ({ remain, check, isSubmitting, handlePost }: BidFooterProps) => {
+  const flag = remain === MAX_BID_COUNT
   return (
-    <>
-      <Button type='button' color='white' className='flex-1 h-full transition-colors rounded text-button active:bg-black' onClick={handlePatch}>
-        참여 취소
-      </Button>
-      <Button
-        type='button'
-        color='cheeseYellow'
-        className='flex-[2] h-full rounded text-button active:bg-black transition-colors'
-        disabled={!check || isSubmitting || remain === 0}
-        onClick={handlePost}
-      >
-        금액 수정
-        {remain !== 0 ? `(${remain}회 가능)` : '(소진)'}
-      </Button>
-    </>
+    <Button
+      type='button'
+      color='cheeseYellow'
+      className='w-full h-full transition-colors rounded text-button active:bg-black'
+      aria-label={flag ? '제안하기' : '수정하기'}
+      onClick={handlePost}
+      disabled={flag ? (!check || isSubmitting) : remain === 0}
+    >
+      {flag ? '제안하기' : `금액 수정 ${remain !== 0 ? `(${remain}회 가능)` : '(소진)'}`}
+    </Button>
   );
 };
 

src/components/bid/BidMain.tsx

@@ -13,16 +13,15 @@ import Layout from "../layout/Layout";
 import { Input } from "../ui/input";
 import BidCaution from "./BidCaution";
 import BidFooter from "./BidFooter";
-import { usePatchBid, usePostBid } from "./queries";
+import { usePostBid } from "./queries";
 
 const BidMain = ({ auctionId }: { auctionId: number }) => {
   const { auctionDetails } = useGetAuctionDetails(auctionId);
   const { mutate: postBid } = usePostBid(auctionId);
-  const { mutate: patchBid } = usePatchBid(auctionId);
   const [check, setCheck] = useState<boolean>(false);
   const toggleCheckBox = () => setCheck((state) => !state);
 
-  const { imageUrls, productName, minPrice, participantCount, remainingBidCount, bidAmount, timeRemaining, isParticipated, bidId } = auctionDetails;
+  const { images, productName, minPrice, participantCount, remainingBidCount, bidAmount, timeRemaining, isParticipated } = auctionDetails;
   const BidSchema = getBidSchema(minPrice);
   type FormFields = z.infer<typeof BidSchema>;
 
@@ -51,16 +50,12 @@ const BidMain = ({ auctionId }: { auctionId: number }) => {
 
     postBid(bidData);
   };
-  const onPatchSubmit = () => {
-    if (bidId) patchBid(bidId);
-  };
-
   return (
     <>
       <Layout.Main>
         <div className='flex flex-col gap-8'>
           <AuctionItem axis='row' label='입찰 상품'>
-            <AuctionItem.Image src={imageUrls[0]} time={timeRemaining} />
+            <AuctionItem.Image src={images[0].imageUrl} time={timeRemaining} />
             <AuctionItem.Main kind='register' name={productName} count={participantCount} price={minPrice} />
           </AuctionItem>
           {isParticipated && (
@@ -92,7 +87,7 @@ const BidMain = ({ auctionId }: { auctionId: number }) => {
         </div>
       </Layout.Main>
       <Layout.Footer type={isParticipated ? 'double' : 'single'}>
-        <BidFooter remain={remainingBidCount} check={check} isSubmitting={isSubmitting} handlePatch={onPatchSubmit} handlePost={handleSubmit(onPostSubmit)} />
+        <BidFooter remain={remainingBidCount} check={check} isSubmitting={isSubmitting} handlePost={handleSubmit(onPostSubmit)} />
       </Layout.Footer>
     </>
   );

src/components/bid/EditBid.test.tsx

@@ -1,11 +1,11 @@
-import { RouterProvider, createMemoryRouter } from 'react-router-dom';
 import { act, render, screen, waitFor } from '@testing-library/react';
+import { RouterProvider, createMemoryRouter } from 'react-router-dom';
 import { describe, expect, test, vi } from 'vitest';
 
 import Bid from '@/pages/Bid';
 import { mockedUseNavigate } from '@/setupTests';
-import { useGetAuctionDetails } from '../details/queries';
 import userEvent from '@testing-library/user-event';
+import { useGetAuctionDetails } from '../details/queries';
 
 vi.mock('@/components/details/queries');
 vi.mocked(useGetAuctionDetails).mockReturnValue({
@@ -14,7 +14,8 @@ vi.mocked(useGetAuctionDetails).mockReturnValue({
     bidId: null,
     description:
       "서로 다른 출신과 개성을 가진 이들이 모여 밴드 결성까지의 과정을 보여준 ‘Harmony from Discord’부터 멤버들 간의 만남을 동경과 벅차오르는 감성으로 담아낸 ‘MANITO’까지. 성장 서사를 써내려가는 밴드 QWER이 두 번째 EP인 ‘Algorithm’s Blossom’을 선보인다. 이번 앨범에서는 QWER이라는 하나의 팀으로서 새롭게 운명을 개척해나가는 이야기를 ‘알고리즘이 피워낸 꽃’이라는 키워드를 통해 풀어내고자 한다.\n\n\"사랑과 상처, 그 모든 것을 끌어안고 피어나”\n\n무수히 파편적이고 혼란하지만 보여지는 것은 단편적인 곳, 다양한 혼잡함이 가지런히 질서를 이루는 곳. 그런 '알고리즘' 속에서 우리의 이야기를 피워낸다. ‘Algorithm’s Blossom'에서 QWER은 보편적이지 않은 공간에 심겨진 씨앗으로, 동시에 사랑과 상처를 양분삼아 돋아난 싹으로, 세상에 보인 적 없던 새로운 꽃의 모습으로 자신들의 성장과 여정을 그린다.",
-    imageUrls: ['/jgbI75.jpg'],
+    images: [{ imageId: 1, imageUrl: '/jgbI75.jpg' }],
+    isCancelled: false,
     isParticipated: false,
     isSeller: false,
     minPrice: 23000,
@@ -26,7 +27,23 @@ vi.mocked(useGetAuctionDetails).mockReturnValue({
     status: 'PROCEEDING',
     timeRemaining: 25816,
     category: 'ELECTRONICS',
+    sellerProfileImageUrl: ''
   },
+  refetch: vi.fn().mockResolvedValue({ // refetch 추가
+    data: {
+      bidAmount: 1000,
+      bidId: null,
+      description: 'Test auction',
+      imageUrls: ['test-image.jpg'],
+      isParticipated: false,
+      isSeller: false,
+      minPrice: 500,
+      productName: 'Test product',
+      participantCount: 5,
+      sellerProfileImageUrl: 'seller-image.jpg',
+    },
+    error: null,
+  }),
 });
 const router = createMemoryRouter(
   [

src/components/bid/queries.ts

@@ -1,10 +1,10 @@
 import { UseMutateFunction, useMutation } from '@tanstack/react-query';
 
-import { API_END_POINT } from '@/constants/api';
 import { httpClient } from '@/api/axios';
-import { toast } from 'sonner';
-import { useNavigate } from 'react-router-dom';
+import { API_END_POINT } from '@/constants/api';
 import { IBidPostData } from 'Bid';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'sonner';
 
 export const usePostBid = (
   auctionId: number
@@ -26,24 +26,3 @@ export const usePostBid = (
 
   return { mutate };
 };
-
-export const usePatchBid = (
-  auctionId: number
-): {
-  mutate: UseMutateFunction<void, Error, number, unknown>;
-} => {
-  const patchBid = async (bidId: number) => {
-    await httpClient.patch(`${API_END_POINT.BID}/${bidId}/cancel`);
-  };
-
-  const navigate = useNavigate();
-  const { mutate } = useMutation({
-    mutationFn: patchBid,
-    onSuccess: () => {
-      toast.success('입찰 수정!');
-      navigate(`/auctions/auction/${auctionId}`);
-    },
-  });
-
-  return { mutate };
-};