fix: 병합 충돌 해결

Author: mimizae

package.json

@@ -12,7 +12,8 @@
     "start:json-server": "json-server --watch db.json --port 5000"
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.69.3",
+    "@tanstack/react-query": "^5.70.0",
+    "@tanstack/react-query-devtools": "^5.70.0",
     "@types/styled-components": "^5.1.34",
     "axios": "^1.7.2",
     "dayjs": "^1.11.12",

src/App.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 import Home from '@pages/Home';
 import Login from '@pages/Login';
@@ -33,8 +32,6 @@ import { getUserInfoApi } from '@apis/user';
 import { getCurrentUserId } from '@utils/getCurrentUserId';
 import Loading from '@components/Loading';
 
-const queryClient = new QueryClient();
-
 const ProtectedRoute = ({ children }: { children: JSX.Element }) => {
 	const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
 
@@ -101,24 +98,22 @@ const publicRoutes = [
 
 const App: React.FC = () => {
 	return (
-		<QueryClientProvider client={queryClient}>
-			<BrowserRouter>
-				<Routes>
-					{/* 인증이 필요한 페이지 */}
-					{protectedRoutes.map(({ path, element }) => (
-						<Route key={path} path={path} element={<ProtectedRoute>{element}</ProtectedRoute>} />
-					))}
-
-					{/* 인증이 필요 없는 페이지 */}
-					{publicRoutes.map(({ path, element }) => (
-						<Route key={path} path={path} element={element} />
-					))}
-
-					{/* 없는 페이지에 대한 처리 */}
-					<Route path="*" element={<NotFound />} />
-				</Routes>
-			</BrowserRouter>
-		</QueryClientProvider>
+		<BrowserRouter>
+			<Routes>
+				{/* 인증이 필요한 페이지 */}
+				{protectedRoutes.map(({ path, element }) => (
+					<Route key={path} path={path} element={<ProtectedRoute>{element}</ProtectedRoute>} />
+				))}
+
+				{/* 인증이 필요 없는 페이지 */}
+				{publicRoutes.map(({ path, element }) => (
+					<Route key={path} path={path} element={element} />
+				))}
+
+				{/* 없는 페이지에 대한 처리 */}
+				<Route path="*" element={<NotFound />} />
+			</Routes>
+		</BrowserRouter>
 	);
 };
 

src/apis/post/index.ts

@@ -1,3 +1,5 @@
+import { useQuery } from '@tanstack/react-query';
+
 import { newRequest } from '@apis/core';
 
 import type { EmptySuccessResponse } from '@apis/core/dto';
@@ -43,3 +45,11 @@ export const deletePostApi = (postId: number) => newRequest.delete<EmptySuccessR
 // 대표 게시글 지정
 export const modifyPostRepresentativeStatusApi = (postId: number) =>
 	newRequest.patch<EmptySuccessResponse>(`/post/${postId}/is-representative`);
+
+export const usePostDetail = (postId: number) => {
+	return useQuery({
+		queryKey: ['postDetail', postId],
+		queryFn: () => getPostDetailApi(postId),
+		enabled: !!postId, // postId가 존재할 때만 요청 수행
+	});
+};

src/main.tsx

@@ -1,3 +1,5 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { createRoot } from 'react-dom/client';
 import { RecoilRoot } from 'recoil';
 import { ThemeProvider } from 'styled-components';
@@ -10,13 +12,18 @@ import { SocketProvider } from '@context/SocketProvider';
 
 import App from './App';
 
+const queryClient = new QueryClient();
+
 createRoot(document.getElementById('root')!).render(
 	<ThemeProvider theme={theme}>
-		<GlobalStyle />
-		<RecoilRoot>
-			<SocketProvider>
-				<App />
-			</SocketProvider>
-		</RecoilRoot>
+		<QueryClientProvider client={queryClient}>
+			<GlobalStyle />
+			<RecoilRoot>
+				<SocketProvider>
+					<App />
+					<ReactQueryDevtools initialIsOpen={false} />
+				</SocketProvider>
+			</RecoilRoot>
+		</QueryClientProvider>
 	</ThemeProvider>,
 );