From 565433197a0451c6246bc27140425fefb5c9412f Mon Sep 17 00:00:00 2001
From: kangbyeonghyeon <rkdqudgus9806@gmail.com>
Date: Fri, 19 Jul 2024 23:10:29 +0900
Subject: [PATCH] refactor: add useProductData hooks

---
 .../features/Product/ProductInfo/index.tsx    |  1 -
 .../features/Product/ProductOrder/index.tsx   |  2 --
 src/pages/Product/hooks/useProductData.ts     | 26 +++++++++++++++++++
 src/pages/Product/index.tsx                   | 17 ++----------
 4 files changed, 28 insertions(+), 18 deletions(-)
 create mode 100644 src/pages/Product/hooks/useProductData.ts

diff --git a/src/components/features/Product/ProductInfo/index.tsx b/src/components/features/Product/ProductInfo/index.tsx
index 5b19e575..32469471 100644
--- a/src/components/features/Product/ProductInfo/index.tsx
+++ b/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;
diff --git a/src/components/features/Product/ProductOrder/index.tsx b/src/components/features/Product/ProductOrder/index.tsx
index 046e5a1b..5cc66dbd 100644
--- a/src/components/features/Product/ProductOrder/index.tsx
+++ b/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);
diff --git a/src/pages/Product/hooks/useProductData.ts b/src/pages/Product/hooks/useProductData.ts
new file mode 100644
index 00000000..8dd80c58
--- /dev/null
+++ b/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 };
+}
diff --git a/src/pages/Product/index.tsx b/src/pages/Product/index.tsx
index ae0fa98f..47bfc0fc 100644
--- a/src/pages/Product/index.tsx
+++ b/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">