refactor: 캐싱 로직 추가 / 다크모드 해제

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', () => {

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();
     },

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'] });
+    },
   });
 };

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(

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}',