Feat / 좋아요한 사전경매 삭제

src/components/heart/queries.ts

@@ -1,9 +1,10 @@
 import { UseMutateFunction, useMutation, useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
 
-import { API_END_POINT } from '@/constants/api';
 import { httpClient } from '@/api/axios';
+import { API_END_POINT } from '@/constants/api';
 import { queryKeys } from '@/constants/queryKeys';
 import { IPreAuctionItem } from 'AuctionItem';
+import { toast } from 'sonner';
 
 export const useGetPreAuctionHeartList = () => {
   const getPreAuctionHeartList = async (): Promise<IPreAuctionItem[]> => {
@@ -21,21 +22,20 @@ export const useGetPreAuctionHeartList = () => {
 };
 
 export const useDeletePreAuctionHeart = (): {
-  mutate: UseMutateFunction<IPreAuctionItem[], Error, number, unknown>;
+  mutate: UseMutateFunction<void, Error, number, unknown>;
 } => {
   const queryClient = useQueryClient();
-  const deletePreAuctionHeart = async (id: number) => {
-    const response = await httpClient.delete(`${API_END_POINT.PRE_AUCTION}/${id}`);
-    return response.data.data;
+  const deletePreAuctionHeart = async (productId: number) => {
+    await httpClient.post(`${API_END_POINT.PRE_AUCTION}/${productId}/likes`);
   };
 
   const { mutate } = useMutation({
     mutationFn: deletePreAuctionHeart,
-    onSuccess: (data: IPreAuctionItem[]) => {
-      queryClient.setQueryData([queryKeys.PRE_AUCTION_HEART_LIST], data);
+    onSuccess: () => {
       queryClient.invalidateQueries({
         queryKey: [queryKeys.PRE_AUCTION_HEART_LIST],
       });
+      toast.success('좋아요 취소되었습니다.');
     },
   });
 

src/constants/queryKeys.ts

@@ -16,7 +16,8 @@ export const queryKeys = Object.freeze({
   AUCTION_LOST: 'AUCTION_LOST',
   AUCTION_DETAILS: 'DETAILS',
   PRE_AUCTION_DETAILS: 'PRE_AUCTION_DETAILS',
-  NOTIFICATIONS: 'NOTIFICATIONS',
   PRE_AUCTION_HEART_LIST: 'PRE_AUCTION_HEART_LIST',
+  PRE_AUCTION: 'PRE_AUCTION',
+  NOTIFICATIONS: 'NOTIFICATIONS',
   BIDDER_LIST: 'BIDDER_LIST',
 });

src/main.tsx

@@ -1,11 +1,11 @@
 import './index.css';
 
-import App from './App';
-import { Provider } from 'react-redux';
+import { store } from '@/store';
 import ReactDOM from 'react-dom/client';
-import ReactQueryProvider from './provider/queryProvider';
+import { Provider } from 'react-redux';
 import { Toaster } from 'sonner';
-import { store } from '@/store';
+import App from './App';
+import ReactQueryProvider from './provider/queryProvider';
 import { storeLogin } from './store/authSlice';
 
 // async function enableMocking(): Promise<void> {
@@ -26,7 +26,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
   <ReactQueryProvider showDevTools>
     <Provider store={store}>
       <App />
-      <Toaster richColors />
+      <Toaster richColors position='top-right' />
     </Provider>
   </ReactQueryProvider>
 );

src/mocks/data/notificationData.ts

@@ -11,7 +11,7 @@ export const notificationData: INotification[] = [
     message: '좋아요를 누른 사전 등록 제품의 경매가 시작되었습니다!',
     createdAt: '2024-09-09T08:57:30.944646',
     isRead: false,
-    imgUrl: JordanBlue,
+    imageUrl: JordanBlue,
     auctionId: 59,
   },
   {
@@ -20,7 +20,7 @@ export const notificationData: INotification[] = [
     message: '경매에 올린 제품이 낙찰되었습니다!',
     createdAt: '2024-09-08T22:57:30.944646',
     isRead: true,
-    imgUrl: NewBalance,
+    imageUrl: NewBalance,
     auctionId: 59,
   },
   {
@@ -29,15 +29,15 @@ export const notificationData: INotification[] = [
     message: '경매에 올린 제품이 유찰되었습니다.',
     createdAt: '2024-09-08T14:57:30.944646',
     isRead: true,
-    imgUrl: JordanRed,
+    imageUrl: JordanRed,
   },
   {
     notificationId: 3,
     type: 'AUCTION_WINNER',
     message: '축하합니다! 입찰에 참여한 경매의 낙찰자로 선정되었습니다!',
     createdAt: '2024-09-08T07:57:30.944646',
     isRead: true,
-    imgUrl: Adidas,
+    imageUrl: Adidas,
     auctionId: 59,
   },
   {
@@ -46,14 +46,14 @@ export const notificationData: INotification[] = [
     message: '안타깝지만 입찰에 참여한 경매에 낙찰되지 못했습니다.',
     createdAt: '2024-09-01T22:57:30.944646',
     isRead: true,
-    imgUrl: JordanBlue,
+    imageUrl: JordanBlue,
   },
   {
     notificationId: 5,
     type: 'PRE_AUCTION_CANCELED',
     message: '좋아요를 누른 사전 등록 제품이 판매자에 의해 취소되었습니다.',
     createdAt: '2024-08-24T16:57:30.944646',
     isRead: true,
-    imgUrl: NewBalance,
+    imageUrl: NewBalance,
   },
 ];

src/pages/Heart.tsx

@@ -1,8 +1,8 @@
 import { useDeletePreAuctionHeart, useGetPreAuctionHeartList } from '@/components/heart/queries';
 
-import AuctionItem from '@/components/common/item/AuctionItem';
 import Button from '@/components/common/Button';
 import EmptyBoundary from '@/components/common/EmptyBoundary';
+import AuctionItem from '@/components/common/item/AuctionItem';
 import type { IPreAuctionItem } from 'AuctionItem';
 import { useNavigate } from 'react-router-dom';
 
@@ -15,15 +15,15 @@ const Heart = () => {
 
   return (
     <EmptyBoundary dataLength={preAuctionHeartList.length} type='heart'>
-      <ul className='grid items-center justify-center grid-cols-2 gap-4 px-10 py-5'>
+      <ul className='grid items-center justify-center grid-cols-2 gap-4'>
         {preAuctionHeartList.map((el: IPreAuctionItem) => (
           <li key={el.productId} onClick={() => navigate(`/product/${el.productId}`)} className='cursor-pointer'>
             <AuctionItem axis='column' label='좋아요 한 사전 경매 상품'>
               <AuctionItem.Image src={el.imageUrl} />
               <AuctionItem.Main name={el.productName} count={el.likeCount} price={el.minPrice} kind='pre-register' />
               <AuctionItem.Button>
                 <Button onClick={() => handleDelete(el.productId)} type='button' color='black' hoverColor='black' className='w-full'>
-                  좋아요
+                  좋아요 취소
                 </Button>
               </AuctionItem.Button>
             </AuctionItem>