Merge branch 'develop' of https://github.com/GU-99/grow-up-fe into fe…

…ature/#80-local-login

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@hello-pangea/dnd": "^16.6.0",
     "@tanstack/react-query": "^5.36.2",
+    "@tanstack/react-query-devtools": "^5.52.2",
     "axios": "^1.6.8",
     "luxon": "^3.4.4",
     "react": "^18.2.0",

src/components/modal/task/ModalTaskForm.tsx

@@ -13,7 +13,7 @@ import CustomMarkdown from '@components/common/CustomMarkdown';
 import DuplicationCheckInput from '@components/common/DuplicationCheckInput';
 import useToast from '@hooks/useToast';
 import useAxios from '@hooks/useAxios';
-import useTaskQuery from '@hooks/query/useTaskQuery';
+import { useTasksQuery } from '@hooks/query/useTaskQuery';
 import useStatusQuery from '@hooks/query/useStatusQuery';
 import { convertBytesToString } from '@utils/converter';
 import { findUserByProject } from '@services/projectService';
@@ -43,7 +43,7 @@ export default function ModalTaskForm({ formId, project, taskId, onSubmit }: Mod
   const [files, setFiles] = useState<CustomFile[]>([]);
 
   const { statusList } = useStatusQuery(projectId, taskId);
-  const { taskNameList } = useTaskQuery(projectId);
+  const { taskNameList } = useTasksQuery(projectId);
   const { data, loading, clearData, fetchData } = useAxios(findUserByProject);
   const { toastInfo, toastWarn } = useToast();
 

src/hooks/errorHandler.ts

@@ -0,0 +1,15 @@
+import axios from 'axios';
+
+// ToDo: useAxios의 에러 처리와 react query의 에러 처리를 담당하도록 만들 것
+export default function errorHandler<T extends Error>(error: T) {
+  // ToDo: AxiosError가 아닌 경우 에러 처리
+  if (!axios.isAxiosError(error)) return;
+
+  if (error.request) {
+    // ToDo: 네트워크 요청을 보냈지만 응답이 없는 경우 에러 처리
+  } else if (error.response) {
+    // ToDo: 요청후 응답을 받았지만 200 이외의 응답 코드인 경우 예외 처리
+  } else {
+    // ToDo: request 설정 오류
+  }
+}

src/hooks/query/queryClient.ts

@@ -0,0 +1,32 @@
+import { MutationCache, QueryCache, QueryClient } from '@tanstack/react-query';
+import { MINUTE } from '@constants/units';
+import errorHandler from '@hooks/errorHandler';
+import type { QueryClientConfig } from '@tanstack/react-query';
+
+// ToDo: 기본 옵션 설정 대화하고 확정하기
+const queryClientOptions: QueryClientConfig = {
+  defaultOptions: {
+    queries: {
+      staleTime: 5 * MINUTE,
+      gcTime: 10 * MINUTE,
+      refetchOnMount: true,
+      refetchOnReconnect: true,
+      refetchOnWindowFocus: true,
+      retry: 3,
+    },
+  },
+  queryCache: new QueryCache({
+    onError: (error) => {
+      console.error(`Query: ${error.name}:${error.message}:${error.stack}`);
+      errorHandler(error);
+    },
+  }),
+  mutationCache: new MutationCache({
+    onError: (error) => {
+      console.error(`Mutation: ${error.name}:${error.message}:${error.stack}`);
+      errorHandler(error);
+    },
+  }),
+};
+
+export const queryClient = new QueryClient(queryClientOptions);

src/hooks/query/useTaskQuery.ts

@@ -1,20 +1,34 @@
-import { TASK_DUMMY } from '@mocks/mockData';
-import { TaskListWithStatus } from '@/types/TaskType';
-import { Project } from '@/types/ProjectType';
+import { useQuery } from '@tanstack/react-query';
+import { findTaskList } from '@services/taskService';
+
+import type { TaskListWithStatus } from '@/types/TaskType';
+import type { Project } from '@/types/ProjectType';
 
 function getTaskNameList(taskList: TaskListWithStatus[]) {
-  return taskList
-    .map((statusTask) => statusTask.tasks)
-    .flat()
-    .map((task) => task.name);
+  return taskList.length > 0
+    ? taskList
+        .map((statusTask) => statusTask.tasks)
+        .flat()
+        .map((task) => task.name)
+    : [];
 }
 
-// Todo: Task Query CRUD로직 작성하기
-// QueryKey: project, projectId, tasks
-export default function useTaskQuery(projectId: Project['projectId']) {
-  const taskList = TASK_DUMMY;
+// Todo: Task Query CUD로직 작성하기
+export function useTasksQuery(projectId: Project['projectId']) {
+  const {
+    data: taskList = [],
+    isLoading: isTaskLoading,
+    isError: isTaskError,
+    error: taskError,
+  } = useQuery({
+    queryKey: ['projects', projectId, 'tasks'],
+    queryFn: async () => {
+      const { data } = await findTaskList(projectId);
+      return data;
+    },
+  });
 
-  const taskNameList = taskList ? getTaskNameList(taskList) : [];
+  const taskNameList = getTaskNameList(taskList);
 
-  return { taskList, taskNameList };
+  return { taskList, taskNameList, isTaskLoading, isTaskError, taskError };
 }

src/hooks/useAxios.ts

@@ -1,5 +1,5 @@
-import axios from 'axios';
 import { useState, useCallback } from 'react';
+import errorHandler from '@hooks/errorHandler';
 import type { AxiosResponse } from 'axios';
 
 type PromiseCallback<T, P extends unknown[]> = (...args: P) => Promise<AxiosResponse<T>>;
@@ -40,16 +40,7 @@ export default function useAxios<T, P extends unknown[]>(fetchCallback: PromiseC
         setData(response.data);
       } catch (error: unknown) {
         setError(error as Error);
-
-        if (!axios.isAxiosError(error)) return;
-
-        if (error.request) {
-          // ToDo: 네트워크 요청을 보냈지만 응답이 없는 경우 에러 처리
-        } else if (error.response) {
-          // ToDo: 요청후 응답을 받았지만 200 이외의 응답 코드인 경우 예외 처리
-        } else {
-          // ToDo: request 설정 오류
-        }
+        errorHandler(error as Error);
       } finally {
         setLoading(false);
       }

src/main.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import '@/globals.css';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import MainRouter from '@routes/MainRouter.tsx';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; // QueryClient와 QueryClientProvider 임포트
+import { queryClient } from '@hooks/query/queryClient';
+import '@/globals.css';
 
 async function enableMocking() {
   if (!import.meta.env.DEV) return;
@@ -11,13 +13,12 @@ async function enableMocking() {
   return worker.start();
 }
 
-const queryClient = new QueryClient();
-
 enableMocking().then(() => {
   ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
       <QueryClientProvider client={queryClient}>
         <MainRouter />
+        <ReactQueryDevtools />
       </QueryClientProvider>
     </React.StrictMode>,
   );

src/mocks/handlers.ts

@@ -1,8 +1,15 @@
 import userServiceHandler from '@mocks/services/userServiceHandler';
 import teamServiceHandler from '@mocks/services/teamServiceHandler';
 import projectServiceHandler from '@mocks/services/projectServiceHandler';
+import taskServiceHandler from '@mocks/services/taskServiceHandler';
 import authServiceHandler from './services/authServiceHandler';
 
-const handlers = [...userServiceHandler, ...teamServiceHandler, ...projectServiceHandler, ...authServiceHandler];
+const handlers = [
+  ...userServiceHandler,
+  ...teamServiceHandler,
+  ...projectServiceHandler,
+  ...taskServiceHandler,
+  ...authServiceHandler,
+];
 
 export default handlers;