merge to main

.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.env

package.json

@@ -47,6 +47,6 @@
     "stylelint-order": "^6.0.4",
     "typescript": "~5.6.2",
     "vite": "^5.4.10",
-    "vite-tsconfig-paths": "^5.1.2"
+    "vite-tsconfig-paths": "^5.1.3"
   }
 }

src/App.tsx

@@ -1,13 +1,19 @@
 import { Global, ThemeProvider } from '@emotion/react';
+
 import Route from '@route/Route';
 import GLOBALSTYLE from '@styles/global';
 import Theme from '@styles/theme';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+const queryClient = new QueryClient();
 
 const App = () => (
-	<ThemeProvider theme={Theme}>
-		<Global styles={GLOBALSTYLE} />
-		<Route />
-	</ThemeProvider>
+	<QueryClientProvider client={queryClient}>
+		<ThemeProvider theme={Theme}>
+			<Global styles={GLOBALSTYLE} />
+			<Route />
+		</ThemeProvider>
+	</QueryClientProvider>
 );
 
 export default App;

src/apis/instance.ts

@@ -0,0 +1,10 @@
+import axios from 'axios';
+
+const instance = axios.create({
+	baseURL: import.meta.env.VITE_APP_BASE_URL,
+	headers: {
+		'Content-Type': 'application/json',
+	},
+});
+
+export default instance;

src/apis/productPage/product/getProduct.ts

@@ -0,0 +1,29 @@
+import instance from '@apis/instance';
+
+interface ProductResponse {
+	productId: number;
+	productImage: string;
+	detail: string;
+	priceOriginal: number;
+	percent: number;
+	priceDiscount: number;
+	isCoupon: boolean;
+	categoryName: string;
+	reviewCount: number;
+	rating: number;
+}
+
+interface RelatedProductsResponse {
+	success: boolean;
+	data: {
+		products: ProductResponse[];
+	};
+	error: string | null;
+}
+
+const fetchRelatedProducts = async (productId: number): Promise<ProductResponse[]> => {
+	const response = await instance.get<RelatedProductsResponse>(`/api/products/${productId}/related`);
+	return response.data.data.products;
+};
+
+export default fetchRelatedProducts;

src/apis/productPage/product/productQueries.ts

@@ -0,0 +1,12 @@
+import { useQuery } from '@tanstack/react-query';
+import fetchRelatedProducts from './getProduct';
+
+const useRelatedProducts = (productId: number) => {
+	return useQuery({
+		queryKey: ['relatedProducts', productId],
+		queryFn: () => fetchRelatedProducts(productId),
+		initialData: [],
+	});
+};
+
+export default useRelatedProducts;