[UNI-98] feat : Tanstack Query 도입 및 커스텀 Fetch 모듈 생성

uniro_frontend/eslint.config.js

@@ -4,11 +4,12 @@ import reactHooks from "eslint-plugin-react-hooks";
 import reactRefresh from "eslint-plugin-react-refresh";
 import tseslint from "typescript-eslint";
 import eslintPluginPrettier from "eslint-plugin-prettier";
+import pluginQuery from "@tanstack/eslint-plugin-query";
 
 export default tseslint.config(
 	{ ignores: ["dist"] },
 	{
-		extends: [js.configs.recommended, ...tseslint.configs.recommended],
+		extends: [js.configs.recommended, ...tseslint.configs.recommended, pluginQuery.configs["flat/recommended"]],
 		files: ["**/*.{ts,tsx}"],
 		languageOptions: {
 			ecmaVersion: 2020,

uniro_frontend/package.json

@@ -13,6 +13,7 @@
 		"@googlemaps/js-api-loader": "^1.16.8",
 		"@react-spring/web": "^9.7.5",
 		"@tailwindcss/vite": "^4.0.0",
+		"@tanstack/react-query": "^5.66.0",
 		"framer-motion": "^12.0.6",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
@@ -23,6 +24,7 @@
 	},
 	"devDependencies": {
 		"@eslint/js": "^9.17.0",
+		"@tanstack/eslint-plugin-query": "^5.66.0",
 		"@types/google.maps": "^3.58.1",
 		"@types/react": "^18.3.18",
 		"@types/react-dom": "^18.3.5",

uniro_frontend/src/App.tsx

@@ -9,20 +9,25 @@ import NavigationResultPage from "./pages/navigationResult";
 import ReportRoutePage from "./pages/reportRoute";
 import ReportForm from "./pages/reportForm";
 import ReportHazardPage from "./pages/reportHazard";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
 
 function App() {
 	return (
-		<Routes>
-			<Route path="/" element={<Demo />} />
-			<Route path="/landing" element={<LandingPage />} />
-			<Route path="/university" element={<UniversitySearchPage />} />
-			<Route path="/building" element={<BuildingSearchPage />} />
-			<Route path="/map" element={<MapPage />} />
-			<Route path="/form" element={<ReportForm />} />
-			<Route path="/result" element={<NavigationResultPage />} />
-			<Route path="/report/route" element={<ReportRoutePage />} />
-			<Route path="/report/hazard" element={<ReportHazardPage />} />
-		</Routes>
+		<QueryClientProvider client={queryClient}>
+			<Routes>
+				<Route path="/" element={<Demo />} />
+				<Route path="/landing" element={<LandingPage />} />
+				<Route path="/university" element={<UniversitySearchPage />} />
+				<Route path="/building" element={<BuildingSearchPage />} />
+				<Route path="/map" element={<MapPage />} />
+				<Route path="/form" element={<ReportForm />} />
+				<Route path="/result" element={<NavigationResultPage />} />
+        <Route path="/report/route" element={<ReportRoutePage />} />
+        <Route path="/report/hazard" element={<ReportHazardPage />} />
+			</Routes>
+		</QueryClientProvider>
 	);
 }
 

uniro_frontend/src/pages/demo.tsx

@@ -6,19 +6,53 @@ import Map from "../component/Map";
 import RouteInput from "../components/map/routeSearchInput";
 import OriginIcon from "../assets/map/origin.svg?react";
 import DestinationIcon from "../assets/map/destination.svg?react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import ReportButton from "../components/map/reportButton";
 import { CautionToggleButton, DangerToggleButton } from "../components/map/floatingButtons";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { getFetch, postFetch, putFetch } from "../utils/fetch/fetch";
+
+const getTest = () => {
+	/** https://jsonplaceholder.typicode.com/comments?postId=1 */
+	return getFetch<{ postId: string }>("/comments", {
+		postId: 1,
+	});
+};
+
+const postTest = (): Promise<{ id: string }> => {
+	return postFetch<{ id: string }, string>("/posts", { id: "test" });
+};
+
+const putTest = (): Promise<{ id: string }> => {
+	return putFetch<{ id: string }, string>("/posts/1", { id: "test" });
+};
 
 export default function Demo() {
 	const [FailModal, isFailOpen, openFail, closeFail] = useModal();
 	const [SuccessModal, isSuccessOpen, openSuccess, closeSuccess] = useModal();
 	const [destination, setDestination] = useState<string>("역사관");
 
+	const { data, status } = useQuery({
+		queryKey: ["test"],
+		queryFn: getTest,
+	});
+
+	const { data: postData, mutate: mutatePost } = useMutation<{ id: string }>({
+		mutationFn: postTest,
+	});
+
+	const { data: putData, mutate: mutatePut } = useMutation<{ id: string }>({
+		mutationFn: putTest,
+	});
+
+	useEffect(() => {
+		console.log(data);
+	}, [status]);
+
 	return (
 		<>
 			<div className="flex flex-row">
-				<div className="w-1/3 flex flex-col justify-start space-y-5 p-5 mb-5 rounded-sm border border-dashed border-[#9747FF] ">
+				<div className="w-1/4 flex flex-col justify-start space-y-5 p-5 mb-5 rounded-sm border border-dashed border-[#9747FF] ">
 					<Button onClick={openFail}>버튼</Button>
 					<Button onClick={openSuccess} variant="secondary">
 						버튼
@@ -28,40 +62,48 @@ export default function Demo() {
 					<LandingButton />
 				</div>
 
-				<div className="w-1/3 flex flex-col justify-start space-y-5 p-5 mb-5 rounded-sm border border-dashed border-[#9747FF] ">
+				<div className="w-1/4 flex flex-col justify-start space-y-5 p-5 mb-5 rounded-sm border border-dashed border-[#9747FF] ">
 					<ReportButton />
 					<div className="flex space-x-3 rounded-sm border border-dashed border-[#9747FF] p-3">
-						<DangerToggleButton onClick={() => {}} isActive={false} />
-						<DangerToggleButton onClick={() => {}} isActive={true} />
+						<DangerToggleButton onClick={() => { }} isActive={false} />
+						<DangerToggleButton onClick={() => { }} isActive={true} />
 					</div>
 
 					<div className="flex space-x-3 rounded-sm border border-dashed border-[#9747FF] p-3">
-						<CautionToggleButton onClick={() => {}} isActive={false} />
-						<CautionToggleButton onClick={() => {}} isActive={true} />
+						<CautionToggleButton onClick={() => { }} isActive={false} />
+						<CautionToggleButton onClick={() => { }} isActive={true} />
 					</div>
 				</div>
 
-				<div className="w-1/3 rounded-sm border border-dashed border-[#9747FF] flex flex-col justify-start space-y-5 p-5">
+				<div className="w-1/4 rounded-sm border border-dashed border-[#9747FF] flex flex-col justify-start space-y-5 p-5">
 					<Input
 						placeholder="우리 학교를 검색해보세요"
-						handleVoiceInput={() => {}}
+						handleVoiceInput={() => { }}
 						onLengthChange={(e: string) => {
 							console.log(e);
 						}}
 					/>
-					<RouteInput onClick={() => {}} placeholder="출발지를 입력하세요">
+					<RouteInput onClick={() => { }} placeholder="출발지를 입력하세요">
 						<OriginIcon />
 					</RouteInput>
 
 					<RouteInput
-						onClick={() => {}}
+						onClick={() => { }}
 						placeholder="도착지를 입력하세요"
 						value={destination}
 						onCancel={() => setDestination("")}
 					>
 						<DestinationIcon />
 					</RouteInput>
 				</div>
+				<div className="w-1/4 rounded-sm border border-dashed border-[#9747FF] flex flex-col justify-start space-y-5 p-5">
+					<Button onClick={() => mutatePost()}>
+						{postData?.id ? `${postData.id} : 테스트 결과` : "POST 테스트"}
+					</Button>
+					<Button onClick={() => mutatePut()}>
+						{putData?.id ? `${putData.id} : 테스트 결과` : "PUT 테스트"}
+					</Button>
+				</div>
 				<SuccessModal>
 					<p className="text-kor-body1 font-bold text-primary-500">불편한 길 제보가 완료되었습니다!</p>
 					<div className="space-y-0">

uniro_frontend/src/utils/fetch/fetch.ts

@@ -0,0 +1,54 @@
+export default function Fetch() {
+	const baseURL = import.meta.env.VITE_REACT_SERVER_BASE_URL;
+
+	const get = async <T>(url: string, params?: Record<string, string | number | boolean>): Promise<T> => {
+		const paramsURL = new URLSearchParams(
+			Object.entries(params || {}).map(([key, value]) => [key, String(value)]),
+		).toString();
+
+		const response = await fetch(`${baseURL}${url}?${paramsURL}`, {
+			method: "GET",
+		});
+
+		if (!response.ok) {
+			throw new Error(`${response.status}-${response.statusText}`);
+		}
+
+		return response.json();
+	};
+
+	const post = async <T, K>(url: string, body?: Record<string, K>): Promise<T> => {
+		const response = await fetch(`${baseURL}${url}`, {
+			method: "POST",
+			body: JSON.stringify(body),
+		});
+
+		if (!response.ok) {
+			throw new Error(`${response.status}-${response.statusText}`);
+		}
+
+		return response.json();
+	};
+
+	const put = async <T, K>(url: string, body?: Record<string, K>): Promise<T> => {
+		const response = await fetch(`${baseURL}${url}`, {
+			method: "PUT",
+			body: JSON.stringify(body),
+		});
+
+		if (!response.ok) {
+			throw new Error(`${response.status}-${response.statusText}`);
+		}
+
+		return response.json();
+	};
+
+	return {
+		get,
+		post,
+		put,
+	};
+}
+
+const { get, post, put } = Fetch();
+export { get as getFetch, post as postFetch, put as putFetch };