Merge branch 'develop' of https://github.com/prgrms-web-devcourse/Tea…

…m-12-ReviewRanger-FE into REV-293/프로필-이미지-업로드-기능-구현

package.json

@@ -21,6 +21,7 @@
     "react": "^18.2.0",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.11",
     "react-hook-form": "^7.47.0",
     "react-router-dom": "^6.17.0",
     "rippleui": "^1.12.1",

src/App.tsx

@@ -1,22 +1,41 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import {
+  QueryCache,
+  QueryClient,
+  QueryClientProvider,
+} from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { RouterProvider } from 'react-router-dom'
-import { ThemeProvider } from './components'
-import ToastProvider from './components/Toast/ToastProvider'
+import { ThemeProvider, ToastProvider } from './components'
 import { router } from './routes'
 
-const queryClient = new QueryClient()
+const queryClient = new QueryClient({
+  queryCache: new QueryCache({
+    onError: (error) => {
+      if (error.message.includes('401')) {
+        setTimeout(() => {
+          queryClient.clear()
+        }, 100)
+      }
+    },
+  }),
+  defaultOptions: {
+    queries: {
+      throwOnError: true,
+      retry: false,
+    },
+  },
+})
 
 function App() {
   return (
-    <QueryClientProvider client={queryClient}>
-      <ThemeProvider>
-        <ToastProvider>
+    <ToastProvider>
+      <QueryClientProvider client={queryClient}>
+        <ThemeProvider>
           <RouterProvider router={router} />
-        </ToastProvider>
-      </ThemeProvider>
-      <ReactQueryDevtools initialIsOpen={false} />
-    </QueryClientProvider>
+        </ThemeProvider>
+        <ReactQueryDevtools initialIsOpen={false} />
+      </QueryClientProvider>
+    </ToastProvider>
   )
 }
 

src/apis/hooks/index.ts

@@ -1,16 +1,16 @@
 export { default as useGetAllResponseByResponser } from './useGetAllResponseByResponser'
 export { default as useGetAllResponseByReceiver } from './useGetAllResponseByReceiver'
-export { default as useGetResponseByResponser } from './useGetResponseByResponser'
-export { default as useGetResponseByResponserForReviewReplyPage } from './useGetResponseByResponserForReviewReplyPage'
+export { default as useGetResponseByResponserForCreator } from './useGetResponseByResponserForCreator'
+export { default as useGetResponseByResponserForParticipation } from './useGetResponseByResponserForParticipation'
 export { default as useGetResponseByReceiver } from './useGetResponseByReceiver'
 export { default as useGetReceivedReview } from './useGetReceivedReview'
 export { default as useGetInvitedReview } from './useGetInvitedReview'
 export { default as useGetInvitedReviews } from './useGetInvitedReviews'
 export { default as useGetReceivedReviews } from './useGetReceivedReviews'
 export { default as useGetCreatedReviews } from './useGetCreatedReviews'
 export { default as useGetAllUser } from './useGetAllUser'
-export { default as useGetAllReviews } from './useGetAllReviews'
-export { default as useGetReviewFirst } from './useGetReviewFirst'
+export { default as useGetReviewForCreator } from './useGetReviewForCreator'
+export { default as useGetReviewForParticipation } from './useGetReviewForParticipation'
 export { default as useGetReviewQuestion } from './useGetReviewQuestion'
 export { default as useUser } from './useUser'
 
@@ -32,5 +32,5 @@ export { default as useEditName } from './useEditName'
 export { default as useEditPassword } from './useEditPassword'
 export { default as useEditImage } from './useEditImage'
 
-export { default as useDeleteSurvey } from './useDeleteReview'
+export { default as useDeleteReview } from './useDeleteReview'
 export { default as useUpdateFinalReviewAnswer } from './useUpdateFinalReviewAnswer'

src/apis/hooks/useDeleteReview.ts

@@ -1,12 +1,21 @@
-import { useMutation } from '@tanstack/react-query'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
 import apiClient from '@/apis/apiClient'
 
-const useDeleteSurvey = () => {
-  const deleteSurvey = async ({ surveyId }: { surveyId: string }) => {
-    return await apiClient.delete(`/surveys/${surveyId}`)
-  }
+const deleteReview = async ({ reviewId }: { reviewId: number }) => {
+  return await apiClient.delete(`/reviews/${reviewId}`)
+}
+
+const useDeleteReview = () => {
+  const queryClient = useQueryClient()
 
-  return useMutation({ mutationFn: deleteSurvey })
+  return useMutation({
+    mutationFn: deleteReview,
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['/reviews', '/participation'],
+      })
+    },
+  })
 }
 
-export default useDeleteSurvey
+export default useDeleteReview

src/apis/hooks/useGetCreatedReviews.ts

@@ -14,17 +14,17 @@ interface PageParam {
   pageParam: number | null
 }
 
-const useGetCreatedReviews = () => {
-  const getCreatedReview = async ({ pageParam }: PageParam) => {
-    const response = await apiClient.get<CreatedReviewResponse>('/reviews', {
-      params: { cursorId: pageParam, size: 12 },
-    })
+const getCreatedReview = async ({ pageParam }: PageParam) => {
+  const response = await apiClient.get<CreatedReviewResponse>('/reviews', {
+    params: { cursorId: pageParam, size: 12 },
+  })
 
-    return response.data.data
-  }
+  return response.data.data
+}
 
+const useGetCreatedReviews = () => {
   return useSuspenseInfiniteQuery({
-    queryKey: ['/reviews'],
+    queryKey: ['reviews', '/reviews'],
     queryFn: ({ pageParam }) => getCreatedReview({ pageParam }),
     initialPageParam: null as number | null,
     getNextPageParam: (lastPage) => {
@@ -37,7 +37,6 @@ const useGetCreatedReviews = () => {
       return content[content.length - 1].reviewId
     },
     refetchOnWindowFocus: false,
-    refetchOnMount: false,
     refetchInterval: 5000,
     refetchIntervalInBackground: false,
   })

src/apis/hooks/useGetInvitedReviews.ts

@@ -14,20 +14,20 @@ interface PageParam {
   pageParam: number | null
 }
 
-const useGetInvitedReviews = () => {
-  const getInvitedReview = async ({ pageParam }: PageParam) => {
-    const response = await apiClient.get<InvitedReviewResponse>(
-      '/participation',
-      {
-        params: { cursorId: pageParam, size: 12 },
-      },
-    )
-
-    return response.data.data
-  }
+const getInvitedReview = async ({ pageParam }: PageParam) => {
+  const response = await apiClient.get<InvitedReviewResponse>(
+    '/participation',
+    {
+      params: { cursorId: pageParam, size: 12 },
+    },
+  )
 
+  return response.data.data
+}
+
+const useGetInvitedReviews = () => {
   return useSuspenseInfiniteQuery({
-    queryKey: ['/participation'],
+    queryKey: ['reviews', '/participation'],
     queryFn: ({ pageParam }) => getInvitedReview({ pageParam }),
     initialPageParam: null as number | null,
     getNextPageParam: (lastPage) => {
@@ -40,7 +40,6 @@ const useGetInvitedReviews = () => {
       return content[content.length - 1].participationId
     },
     refetchOnWindowFocus: false,
-    refetchOnMount: false,
     refetchInterval: 5000,
     refetchIntervalInBackground: false,
   })

src/apis/hooks/useGetReceivedReviews.ts

@@ -14,20 +14,20 @@ interface PageParam {
   pageParam: number | null
 }
 
-const useGetReceivedReviews = () => {
-  const getReceivedReview = async ({ pageParam }: PageParam) => {
-    const response = await apiClient.get<ReceivedReviewResponse>(
-      '/final-results',
-      {
-        params: { cursorId: pageParam, size: 12 },
-      },
-    )
-
-    return response.data.data
-  }
+const getReceivedReview = async ({ pageParam }: PageParam) => {
+  const response = await apiClient.get<ReceivedReviewResponse>(
+    '/final-results',
+    {
+      params: { cursorId: pageParam, size: 12 },
+    },
+  )
 
+  return response.data.data
+}
+
+const useGetReceivedReviews = () => {
   return useSuspenseInfiniteQuery({
-    queryKey: ['/final-results'],
+    queryKey: ['reviews', '/final-results'],
     queryFn: ({ pageParam }) => getReceivedReview({ pageParam }),
     initialPageParam: null as number | null,
     getNextPageParam: (lastPage) => {
@@ -40,7 +40,6 @@ const useGetReceivedReviews = () => {
       return content[content.length - 1].id
     },
     refetchOnWindowFocus: false,
-    refetchOnMount: false,
     refetchInterval: 5000,
     refetchIntervalInBackground: false,
   })

src/apis/hooks/useGetResponseByResponserForCreator.ts

@@ -0,0 +1,27 @@
+//NOTE - 작성자별 응답 결과 단일 조회
+import { useSuspenseQuery } from '@tanstack/react-query'
+import apiClient from '@/apis/apiClient'
+import { Response } from './useGetResponseByReceiver'
+
+//NOTE - 참여 ID
+const useGetResponseByResponser = ({
+  responserId,
+  reviewId,
+}: {
+  responserId: string
+  reviewId: string
+}) => {
+  const getResponse = async () => {
+    const singleAuthorResponse = await apiClient.get<Response>(
+      `/reviews/${reviewId}/responser/${responserId}/creator`,
+    )
+
+    return singleAuthorResponse.data
+  }
+
+  return useSuspenseQuery({
+    queryKey: [`/reviews/${reviewId}/responser/${responserId}/creator`],
+    queryFn: getResponse,
+  })
+}
+export default useGetResponseByResponser