Merge pull request #384 from boostcampwm-2024/Feat/383

[Feat] 서버 상태 관리를 위한 Tanstack Query 도입

Author: seungheon123

apps/client/.eslintrc

@@ -3,6 +3,7 @@
 
   "parserOptions": {
     "project": ["./tsconfig.json"],
+    "tsconfigRootDir": "./apps/client",
     "ecmaVersion": 12,
     "sourceType": "module",
     "ecmaFeatures": {
@@ -15,16 +16,20 @@
     "es2021": true
   },
 
-  "extends": ["airbnb", "airbnb/hooks", "plugin:@typescript-eslint/recommended", "prettier"],
+  "extends": [
+    "airbnb",
+    "airbnb/hooks",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@tanstack/query/recommended",
+    "prettier"
+  ],
 
   "settings": {
     "react": {
       "version": "detect"
     }
   },
 
-  "plugins": ["prettier"],
-
   "rules": {
     // React 관련 규칙
     "react/react-in-jsx-scope": "off",
@@ -59,6 +64,10 @@
     // 접근성 관련 규칙
     "jsx-a11y/media-has-caption": "off",
 
+    // tanstack query 관련 규칙
+    "@tanstack/query/exhaustive-deps": "error",
+    "@tanstack/query/stable-query-client": "error",
+
     // 기타 규칙
     "no-param-reassign": [
       "warn",

apps/client/package.json

@@ -16,6 +16,8 @@
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.2",
+    "@tanstack/react-query": "^5.66.0",
+    "@tanstack/react-query-devtools": "^5.66.0",
     "axios": "^1.7.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
@@ -31,6 +33,7 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
+    "@tanstack/eslint-plugin-query": "^5.66.1",
     "@types/node": "^20.3.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",

apps/client/src/app/App.tsx

@@ -0,0 +1,15 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { RouterProvider } from 'react-router-dom';
+import { router } from './routes';
+
+const queryClient = new QueryClient();
+
+export function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+      <ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-left" position="right" />
+    </QueryClientProvider>
+  );
+}

apps/client/src/app/index.ts

@@ -0,0 +1,2 @@
+export { App } from './App';
+export { Providers } from './providers';

apps/client/src/entities/attendance/api/attendanceApi.ts

@@ -0,0 +1,10 @@
+import { axiosInstance } from '@/shared/api';
+import { AttendanceData, AttendanceResponse } from '../model/types';
+
+export const fetchAttendance = async (): Promise<AttendanceData[]> => {
+  const { data } = await axiosInstance.get<AttendanceResponse>('/v1/members/attendance');
+  if (!data.success) {
+    throw new Error(data.message || '출석부 조회에 실패했습니다.');
+  }
+  return data.data.attendances;
+};

apps/client/src/entities/attendance/index.ts

@@ -0,0 +1,3 @@
+export type { AttendanceData, AttendanceResponse } from './model/types';
+export { useAttendanceList } from './model/queries';
+export { fetchAttendance } from './api/attendanceApi';

apps/client/src/entities/attendance/model/queries.ts

@@ -0,0 +1,21 @@
+import { useQuery } from '@tanstack/react-query';
+import { fetchAttendance } from '@/entities/attendance/api/attendanceApi';
+import { AttendanceData } from './types';
+
+export const useAttendanceList = () => {
+  const {
+    data: attendanceList,
+    error,
+    isLoading,
+  } = useQuery<AttendanceData[], Error>({
+    queryKey: ['attendance'],
+    queryFn: fetchAttendance,
+    staleTime: 1000 * 60,
+  });
+
+  return {
+    attendanceList,
+    error,
+    isLoading,
+  };
+};

apps/client/src/entities/attendance/model/types.ts

@@ -0,0 +1,17 @@
+export type AttendanceData = {
+  attendanceId: number;
+  date: string;
+  startTime: string;
+  endTime: string;
+  isAttendance: boolean;
+};
+
+export type AttendanceResponse = {
+  success: boolean;
+  status: string;
+  message: string;
+  data: {
+    memberId: number;
+    attendances: AttendanceData[];
+  };
+};

apps/client/src/entities/record/api/recordApi.ts

@@ -0,0 +1,14 @@
+import { axiosInstance } from '@/shared/api';
+
+export const getRecordList = async (attendanceId: string | undefined) => {
+  if (!attendanceId) {
+    throw new Error('attendanceId가 없습니다.');
+  }
+
+  const response = await axiosInstance.get(`/v1/records/${attendanceId}`);
+
+  if (!response.data.success) {
+    throw new Error(response.data.message);
+  }
+  return response.data.data;
+};

apps/client/src/entities/record/index.ts

@@ -0,0 +1,2 @@
+export type { RecordData } from './model/types';
+export { useRecordList } from './model/useRecordList';