diff --git a/src/components/main/weeklyTravel/WeeklyPopular.test.tsx b/src/components/main/weeklyTravel/WeeklyPopular.test.tsx index cd94a133..b85e0706 100644 --- a/src/components/main/weeklyTravel/WeeklyPopular.test.tsx +++ b/src/components/main/weeklyTravel/WeeklyPopular.test.tsx @@ -11,6 +11,7 @@ jest.mock('@tanstack/react-query', () => ({ mutate: jest.fn(), onError: jest.fn(), }), + useQueryClient: jest.fn(), })); describe('WeeklyPopular', () => { diff --git a/src/queries/review/useCreateReview.ts b/src/queries/review/useCreateReview.ts index 37852674..a43a116d 100644 --- a/src/queries/review/useCreateReview.ts +++ b/src/queries/review/useCreateReview.ts @@ -1,11 +1,12 @@ import { createReview } from '@/api/review/createReview'; import useCreateReviewStore from '@/store/useCreateReview'; -import { useMutation } from '@tanstack/react-query'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; import { useRouter } from 'next/navigation'; import { useQueryErrorHandler } from '../common/errorHandler'; export const useCreateReview = () => { const router = useRouter(); + const queryClient = useQueryClient(); const { travelId, @@ -22,6 +23,8 @@ export const useCreateReview = () => { const mutation = useMutation({ mutationFn: (formData: FormData) => createReview(formData), onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ['myReview'] }); + queryClient.invalidateQueries({ queryKey: ['review', 'listPage'] }); resetStore(); router.back(); }, diff --git a/src/queries/travel/useBookmarkTravel.ts b/src/queries/travel/useBookmarkTravel.ts index 0b1f1fc0..9683065c 100644 --- a/src/queries/travel/useBookmarkTravel.ts +++ b/src/queries/travel/useBookmarkTravel.ts @@ -1,20 +1,30 @@ -import { useMutation } from '@tanstack/react-query'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; import { QueryError } from '@/@types/query'; import { deleteTravelBookMark, postTravelBookMark } from '@/api/travel/travels'; import { useQueryErrorHandler } from '../common/errorHandler'; export const useBookmarkTravel = () => { + const queryClient = useQueryClient(); const handleError = useQueryErrorHandler(); + return useMutation({ mutationFn: postTravelBookMark, onError: (error: QueryError) => handleError(error), + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ['checkedTravel'] }); + }, }); }; export const useDeleteBookmarkTravel = () => { + const queryClient = useQueryClient(); const handleError = useQueryErrorHandler(); + return useMutation({ mutationFn: deleteTravelBookMark, onError: (error: QueryError) => handleError(error), + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ['checkedTravel'] }); + }, }); }; diff --git a/src/queries/travel/useCreateTravel.ts b/src/queries/travel/useCreateTravel.ts index c324abb6..acdd2b21 100644 --- a/src/queries/travel/useCreateTravel.ts +++ b/src/queries/travel/useCreateTravel.ts @@ -1,4 +1,4 @@ -import { useMutation } from '@tanstack/react-query'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; import { createTravel } from '@/api/travel/createTravel'; import { QueryError } from '@/@types/query'; import useModal from '@/hooks/useModal'; @@ -9,9 +9,11 @@ import { clearIndexedDB } from '@/utils/travelIndexedDB'; import useGetUser from '@/queries/user/useGetUser'; const useCreateTravel = () => { + const queryClient = useQueryClient(); const router = useRouter(); const { showModal } = useModal(); const { data: user } = useGetUser(); + return useMutation({ mutationFn: createTravel, onError: (error: QueryError) => { @@ -49,6 +51,9 @@ const useCreateTravel = () => { } }, onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ['upcommingTravel'] }); + queryClient.invalidateQueries({ queryKey: ['travels'] }); + if (user) { const { nickname } = user; showModal( diff --git a/tailwind.config.ts b/tailwind.config.ts index 60864df2..d115c582 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -2,6 +2,7 @@ import type { Config } from 'tailwindcss'; import plugin from 'tailwindcss/plugin'; export default { + darkMode: 'class', content: [ './src/components/**/*.{js,ts,jsx,tsx,mdx}', './src/app/**/*.{js,ts,jsx,tsx,mdx}',