쿼리키 활용, 토스트 팝업 기능 추가 (#57)

package.json

@@ -28,6 +28,7 @@
     "react-dom": "^18.2.0",
     "react-kakao-maps-sdk": "^1.1.27",
     "react-responsive": "^10.0.0",
+    "react-toastify": "^10.0.5",
     "tailwind-merge": "^2.3.0"
   },
   "devDependencies": {

public/icon/svg.ts

@@ -12,6 +12,7 @@ export { default as checkbox_circle } from 'public/icon/checkbox_circle.svg';
 export { default as circle_x } from 'public/icon/circle_x.svg';
 export { default as close } from 'public/icon/close.svg';
 export { default as comment } from 'public/icon/comment.svg';
+export { default as error } from 'public/icon/error.svg';
 export { default as filter } from 'public/icon/filter.svg';
 export { default as heart } from 'public/icon/heart.svg';
 export { default as heart_full } from 'public/icon/heart_full.svg';
@@ -21,17 +22,19 @@ export { default as internet } from 'public/icon/internet.svg';
 export { default as logo } from 'public/icon/logo.svg';
 export { default as logo_secondary } from 'public/icon/logo_secondary.svg';
 export { default as menu } from 'public/icon/menu.svg';
+export { default as more } from 'public/icon/more.svg';
 export { default as phone } from 'public/icon/phone.svg';
 export { default as refresh } from 'public/icon/refresh.svg';
-export { default as store } from 'public/icon/refresh.svg';
 export { default as register_logo } from 'public/icon/register_logo.svg';
+export { default as send } from 'public/icon/send.svg';
 export { default as setting } from 'public/icon/setting.svg';
 export { default as share } from 'public/icon/share.svg';
 export { default as star } from 'public/icon/star.svg';
 export { default as star_empty } from 'public/icon/star_empty.svg';
 export { default as star_half } from 'public/icon/star_half.svg';
+export { default as store } from 'public/icon/store.svg';
+export { default as success } from 'public/icon/success.svg';
 export { default as time } from 'public/icon/time.svg';
-export { default as upload } from 'public/icon/upload.svg';
 export { default as user0 } from 'public/icon/user0.svg';
 export { default as user1 } from 'public/icon/user1.svg';
 export { default as user2 } from 'public/icon/user2.svg';

src/api/cafe/index.ts

@@ -30,7 +30,6 @@ export const postCafeList = async ({
   location,
   pagingData,
 }: CafeListReqType) => {
-  // Todo: 쿼리키에 필터 추가
   const { data } = await fetcher.post<CafeListResType>(END_POINT.CAFE.LIST, {
     tags,
     location,

src/api/cafe/queries.ts

@@ -1,4 +1,11 @@
-import { useInfiniteQuery, useMutation, useQuery } from '@tanstack/react-query';
+import {
+  useInfiniteQuery,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from '@tanstack/react-query';
+import { toast } from 'react-toastify';
+import ToastIcon from '@/components/Icon/ToastIcon';
 import { DEFAULT_CURSOR, DEFAULT_SIZE } from '@/constants/api';
 import { CafeLikeReqType, CafeListReqType } from '@/types/cafe';
 import { cafeKeys } from './../queryKeys';
@@ -11,24 +18,32 @@ export function useRecommendedCafeListQuery() {
   });
 }
 
-// Todo: 쿼리키 추가하기
 export function useCafeLikeMutation({
   cafeId,
   isLike,
   setLikeState,
 }: CafeLikeReqType & {
   setLikeState: React.Dispatch<React.SetStateAction<boolean>>;
 }) {
+  const queryClient = useQueryClient();
+
   return useMutation({
     mutationFn: () => patchCafeLike({ cafeId, isLike }),
     onSuccess: (data) => {
-      // Todo: 성공할 경우 토스트 팝업 띄우기
+      toast(data.message, {
+        icon: ToastIcon({ type: 'success' }),
+        className: 'border border-stroke_focused',
+      });
+
       const newLikeState = data.data.isLike;
       setLikeState(newLikeState);
+
+      queryClient.invalidateQueries(cafeKeys.cafeList);
     },
     onError: (error) => {
-      // Todo: 실패할 경우 토스트 팝업 띄우기
-      console.log(error.message);
+      toast(error.message, {
+        icon: ToastIcon({ type: 'error' }),
+      });
     },
   });
 }
@@ -42,7 +57,6 @@ export function useCafeListInfiniteQuery({
   location,
   pageSize = DEFAULT_SIZE,
 }: CafeListQueryType) {
-  // Todo: 쿼리키에 필터 추가
   return useInfiniteQuery({
     ...cafeKeys.cafeList,
     initialPageParam: DEFAULT_CURSOR,

src/api/queryKeys.ts

@@ -2,8 +2,10 @@ import { createQueryKeys } from '@lukemorales/query-key-factory';
 
 export const reviewKeys = createQueryKeys('review', {
   reviewList: { queryKey: ['getReviewList'] },
-  reviewCommentList: { queryKey: ['getReviewList'] },
-  myReviewList: { queryKey: ['getReviewList'] },
+  myReviewList: { queryKey: ['getMyReviewList'] },
+  reviewCommentList: (reviewId: string) => ({
+    queryKey: ['getCommentList', reviewId],
+  }),
 });
 
 export const cafeKeys = createQueryKeys('cafe', {

src/api/review/index.ts

@@ -1,7 +1,13 @@
 import { END_POINT } from '@/constants/api';
 import {
+  ReviewCommentDeleteReqType,
+  ReviewCommentDeleteResType,
   ReviewCommentReqType,
   ReviewCommentResType,
+  ReviewCommentUpdateReqType,
+  ReviewCommentUpdateResType,
+  ReviewCommentWriteReqType,
+  ReviewCommentWriteResType,
   ReviewLikeReqType,
   ReviewLikeResType,
   ReviewListReqType,
@@ -15,7 +21,6 @@ export const postReviewList = async ({
   location,
   pagingData,
 }: ReviewListReqType) => {
-  // Todo: 쿼리키에 필터 추가
   const { data } = await fetcher.post<ReviewListResType>(
     END_POINT.REVIEW.LIST,
     {
@@ -33,7 +38,6 @@ export const postMyReviewList = async ({
   pagingData,
   userId,
 }: Pick<ReviewListReqType, 'pagingData'> & { userId: number }) => {
-  // Todo: 쿼리키에 필터 추가
   const { data } = await fetcher.post<ReviewListResType>(
     END_POINT.REVIEW.MYLIST,
     {
@@ -66,3 +70,52 @@ export const getReviewCommentList = async ({
 
   return data;
 };
+
+export const postReviewComment = async ({
+  reviewId,
+  comment,
+}: ReviewCommentWriteReqType) => {
+  const { data } = await fetcher.post<ReviewCommentWriteResType>(
+    END_POINT.REVIEW.COMMENT_WRITE,
+    {
+      reviewId,
+      comment,
+    }
+  );
+
+  return data;
+};
+
+export const patchReviewComment = async ({
+  reviewId,
+  commentId,
+  comment,
+}: ReviewCommentUpdateReqType) => {
+  const { data } = await fetcher.patch<ReviewCommentUpdateResType>(
+    END_POINT.REVIEW.COMMENT_UPDATE,
+    {
+      reviewId,
+      commentId,
+      comment,
+    }
+  );
+
+  return data;
+};
+
+export const deleteReviewComment = async ({
+  reviewId,
+  commentId,
+}: ReviewCommentDeleteReqType) => {
+  const { data } = await fetcher.delete<ReviewCommentDeleteResType>(
+    END_POINT.REVIEW.COMMENT_DELETE,
+    {
+      data: {
+        reviewId,
+        commentId,
+      },
+    }
+  );
+
+  return data;
+};