♻️ Refactor: 서비스 로직 분리 & useFetch 커스텀훅 리팩토링

package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "^2.2.5",
+    "axios": "^1.7.2",
     "next": "14.2.4",
     "react": "^18",
     "react-dom": "^18",

src/hooks/useFetchDashboards.ts

@@ -0,0 +1,25 @@
+import { useQuery } from 'react-query';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { getDashboardsList } from '@/services/getService';
+import { setDashboards } from '@/store/reducers/dashboardsSlice';
+
+const fetchDashboards = async () => {
+  const response = await getDashboardsList();
+
+  if (response.status !== 200) {
+    throw new Error('Failed to fetch dashboards');
+  }
+
+  return response.data;
+};
+
+export const useFetchDashboards = () => {
+  const dispatch = useDispatch();
+
+  return useQuery('dashboards', () => fetchDashboards(), {
+    onSuccess: (data) => {
+      dispatch(setDashboards({ dashboards: data.dashboards, totalCount: data.totalCount }));
+    },
+  });
+};

src/hooks/useFetchData.ts

@@ -1,46 +1,18 @@
-import { useState, useEffect } from "react";
-import { useSelector } from "react-redux";
-import { RootState } from "@/store/store";
-
-const useFetchData = <T>(url: string) => {
-  const [data, setData] = useState<T | null>(null);
-  const [isLoading, setIsLoading] = useState<boolean>(true);
-  const [error, setError] = useState<string | null>(null);
-
-  const accessToken = useSelector((state: RootState) => state.user.accessToken);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const headers: HeadersInit = {};
-
-        if (accessToken) {
-          headers["Authorization"] = `Bearer ${accessToken}`; // 로그인 상태인 경우, 전역상태의 accessToken을 가져와 인증 요청을 할 수 있음
-        }
-
-        const response = await fetch(url, { headers });
-
-        if (!response.ok) {
-          throw new Error(`HTTP error! Status: ${response.status}`);
-        }
-
-        const result: T = await response.json();
-        setData(result);
-      } catch (error) {
-        if (error instanceof Error) {
-          setError(error.message);
-        } else {
-          setError("An unknown error occurred");
-        }
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchData();
-  }, [url, accessToken]);
-
-  return { data, isLoading, error };
+import { useQuery, QueryKey } from 'react-query';
+
+const useFetchData = <T>(queryKey: QueryKey, getService: () => Promise<{ data: T }>) => {
+  const fetchData = async () => {
+    const response = await getService();
+    return response.data;
+  };
+
+  return useQuery<T, Error>({
+    queryKey, // 캐시 키를 임의로 지정할 수 있음
+    queryFn: fetchData, // 비동기 getService 함수 (services/ 에 정의)
+    onError: (error: Error) => {
+      console.error('Error fetching data:', error);
+    },
+  });
 };
 
 export default useFetchData;

src/services/axios.ts

@@ -0,0 +1,19 @@
+import axios from 'axios';
+
+import { store } from '@/store/store';
+
+const instance = axios.create({
+  baseURL: 'https://sp-taskify-api.vercel.app/15',
+});
+
+instance.interceptors.request.use((config) => {
+  const state = store.getState();
+  const { accessToken } = state.user; // 전역 상태에 저장된 accessToken을 가져와 인증요청에 사용
+  if (accessToken) {
+    config.headers.Authorization = `Bearer ${accessToken}`;
+  }
+
+  return config;
+});
+
+export default instance;

src/services/getService.ts

@@ -0,0 +1,15 @@
+import instance from './axios';
+
+// 컬럼 목록 조회
+export async function getColumnsList(id: string) {
+  return await instance.get(`/columns?dashboardId=${id}`);
+}
+
+// 대시보드 목록 조회
+export async function getDashboardsList(
+  navigationMethod: 'infiniteScroll' | 'pagination' = 'infiniteScroll', // navigationMethod는 'infiniteScroll' 또는 'pagination'만 가능. 기본값은 'infiniteScroll'
+  page: number = 1, // 기본값 1
+  size: number = 10, // 기본값 10
+) {
+  return await instance.get(`/dashboards?navigationMethod=${navigationMethod}&page=${page}&size=${size}`);
+}

src/store/reducers/dashboardsSlice.ts

@@ -0,0 +1,28 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+import { Dashboard } from '@/types/Dashboard.interface';
+
+interface DashboardsState {
+  dashboards: Dashboard[];
+  totalCount: number;
+}
+
+const initialState: DashboardsState = {
+  dashboards: [],
+  totalCount: 0,
+};
+
+const dashboardsSlice = createSlice({
+  name: 'dashboards',
+  initialState,
+  reducers: {
+    setDashboards(state, action: PayloadAction<{ dashboards: Dashboard[]; totalCount: number }>) {
+      state.dashboards = action.payload.dashboards;
+      state.totalCount = action.payload.totalCount;
+    },
+  },
+});
+
+export const { setDashboards } = dashboardsSlice.actions;
+
+export default dashboardsSlice.reducer;

src/store/store.ts

@@ -2,22 +2,21 @@ import { configureStore } from '@reduxjs/toolkit';
 import { persistStore, persistReducer } from 'redux-persist';
 import storage from 'redux-persist/lib/storage';
 
+import dashboardsReducer from './reducers/dashboardsSlice';
 import userReducer from './reducers/userSlice';
 
 const persistConfig = {
   key: 'root',
   storage,
 };
-
 const persistedReducer = persistReducer(persistConfig, userReducer);
-
 export const store = configureStore({
   reducer: {
     user: persistedReducer,
+    dashboards: dashboardsReducer,
   },
   devTools: process.env.NODE_ENV !== 'production',
 });
-
 export type RootState = ReturnType<typeof store.getState>;
 export type AppDispatch = typeof store.dispatch;
 export const persistor = persistStore(store);

src/types/Dashboard.interface.ts

@@ -0,0 +1,15 @@
+export interface Dashboard {
+  id: number;
+  title: string;
+  color: string;
+  userId: number;
+  createdAt: string;
+  updatedAt: string;
+  createdByMe: boolean;
+}
+
+export interface DashboardsResponse {
+  dashboards: Dashboard[];
+  totalCount: number;
+  cursorId: number | null;
+}