refactor: add useProductData hooks

src/components/features/Product/ProductInfo/index.tsx

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import React from 'react';
 import { Image } from '@chakra-ui/react';
-
 import { Container } from '@components/common';
 
 const IMAGE_SIZE = 450;

src/components/features/Product/ProductOrder/index.tsx

@@ -15,8 +15,6 @@ export default function ProductOrder({ name, giftOrderLimit }: ProductOrderProps
   const { isAuthenticated } = useAuth();
   const navigate = useNavigate();
 
-  console.info(giftOrderLimit);
-
   const handleOrderClick = () => {
     const targetPath = isAuthenticated ? ROUTE_PATH.ORDER : ROUTE_PATH.LOGIN;
     navigate(targetPath);

src/pages/Product/hooks/useProductData.ts

@@ -0,0 +1,26 @@
+import { useQuery } from '@tanstack/react-query';
+import { useParams } from 'react-router-dom';
+import { getProductsDetail, getProductsOptions } from '@apis/products';
+import { ProductDetailResponse, ProductOptionResponse } from '@internalTypes/responseTypes';
+import { AxiosError } from 'axios';
+
+interface UseProductDataResult {
+  productDetailData?: ProductDetailResponse;
+  productOptionData?: ProductOptionResponse;
+}
+
+export default function useProductData(): UseProductDataResult {
+  const { productId } = useParams<{ productId: string }>();
+
+  const { data: productDetailData } = useQuery<ProductDetailResponse, AxiosError>({
+    queryKey: ['productDetail', productId],
+    queryFn: () => getProductsDetail({ productId }),
+  });
+
+  const { data: productOptionData } = useQuery<ProductOptionResponse, AxiosError>({
+    queryKey: ['productOption', productId],
+    queryFn: () => getProductsOptions({ productId }),
+  });
+
+  return { productDetailData, productOptionData };
+}

src/pages/Product/index.tsx

@@ -6,25 +6,12 @@ import ProductInfo from '@components/features/Product/ProductInfo';
 import ProductOrder from '@components/features/Product/ProductOrder';
 import { ROUTE_PATH } from '@routes/path';
 import useRedirectIfNoParam from '@hooks/useRedirectIfNoParam';
-import { useQuery } from '@tanstack/react-query';
-import { useParams } from 'react-router-dom';
-import { getProductsDetail, getProductsOptions } from '@apis/products';
-import { ProductDetailResponse, ProductOptionResponse } from '@internalTypes/responseTypes';
-import { AxiosError } from 'axios';
+import useProductData from './hooks/useProductData';
 
 export default function Product() {
-  const { productId } = useParams<{ productId: string }>();
-  const { data: productDetailData } = useQuery<ProductDetailResponse, AxiosError>({
-    queryKey: ['productDetail', productId],
-    queryFn: () => getProductsDetail({ productId }),
-  });
+  const { productDetailData, productOptionData } = useProductData();
   useRedirectIfNoParam('productId', ROUTE_PATH.HOME);
 
-  const { data: productOptionData } = useQuery<ProductOptionResponse, AxiosError>({
-    queryKey: ['productOption', productId],
-    queryFn: () => getProductsOptions({ productId }),
-  });
-
   return (
     <Layout>
       <CenteredContainer maxWidth="lg">