찜 등록 및 조회

com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx

@@ -1,65 +1,72 @@
-import React, {
-  useEffect,
-  useState,
-} from 'react';
+import React, { useCallback, useEffect, useState } from "react";
 
+import { useDispatch, useSelector } from "react-redux";
+
+import { getProductCouponSearch } from "../../actions/couponActions";
 import {
-  useDispatch,
-  useSelector,
-} from 'react-redux';
-
-import { getProductCouponSearch } from '../../actions/couponActions';
-import { getMainCategoryDetail } from '../../actions/mainActions';
-import { popPanel } from '../../actions/panelActions';
-import { getProductGroup } from '../../actions/productActions';
-import TBody from '../../components/TBody/TBody';
-import THeader from '../../components/THeader/THeader';
-import TPanel from '../../components/TPanel/TPanel';
-import ProductOption from './components/ProductOption';
-import ProductThumbnail from './components/ProductThumbnail';
-import GroupProduct from './container/GroupProduct';
-import SingleProduct from './container/SingleProduct';
-import ThemeProduct from './container/ThemeProduct';
-import UnableProduct from './container/UnableProduct';
-import YouMayLike from './container/YouMayLike';
-import css from './DetailPanel.module.less';
+  getMainCategoryDetail,
+  getMyFavoriteFlag,
+} from "../../actions/mainActions";
+import { popPanel } from "../../actions/panelActions";
+import { getProductGroup } from "../../actions/productActions";
+import TBody from "../../components/TBody/TBody";
+import THeader from "../../components/THeader/THeader";
+import TPanel from "../../components/TPanel/TPanel";
+import ProductOption from "./components/ProductOption";
+import ProductThumbnail from "./components/ProductThumbnail";
+import GroupProduct from "./container/GroupProduct";
+import SingleProduct from "./container/SingleProduct";
+import ThemeProduct from "./container/ThemeProduct";
+import UnableProduct from "./container/UnableProduct";
+import YouMayLike from "./container/YouMayLike";
+import css from "./DetailPanel.module.less";
 
 export default function ItemDetail() {
-  const [panelInfo, setPaneInfo] = useState();
+  const [selectedPatnrId, setSelectedPatnrId] = useState();
+  const [selectedPrdtId, setSelectedPrtdId] = useState();
   const productData = useSelector((state) => state.main.productData);
-  const isGroupOption = useSelector((state) => state.main.productGroupYn);
   const panels = useSelector((state) => state.panels.panels);
+  const groupInfos = useSelector((state) => state.product.groupInfo);
 
   const dispatch = useDispatch();
-  const getPanelInfo = () => {
+  const getPanelInfo = useCallback(() => {
     if (panels) {
       for (let i = 0; i < panels.length; i++) {
         if (panels[i].name === "detailpanel") {
-          setPaneInfo(panels[i].panelInfo);
+          setSelectedPatnrId(panels[i].panelInfo.patnrId);
+          setSelectedPrtdId(panels[i].panelInfo.prdtId);
         }
       }
     }
-  };
+  }, [panels]);
 
   useEffect(() => {
     getPanelInfo();
 
-    if (panels && panelInfo) {
-      dispatch(
-        getMainCategoryDetail({
-          patnrId: panelInfo?.patnrId,
-          prdtId: panelInfo?.prdtId,
-        })
-      );
+    dispatch(
+      getMainCategoryDetail({
+        patnrId: selectedPatnrId,
+        prdtId: selectedPrdtId,
+      })
+    );
 
-      dispatch(
-        getProductGroup({
-          patnrId: panelInfo?.patnrId,
-          prdtId: panelInfo?.prdtId,
-        })
-      );
-    }
-  }, [dispatch, panels, panelInfo]);
+    dispatch(
+      getProductGroup({
+        patnrId: selectedPatnrId,
+        prdtId: selectedPrdtId,
+      })
+    );
+    dispatch(
+      getProductGroup({
+        patnrId: selectedPatnrId,
+        prdtId: selectedPrdtId,
+      })
+    );
+
+    dispatch(
+      getMyFavoriteFlag({ patnrId: selectedPatnrId, prdtId: selectedPrdtId })
+    );
+  }, [dispatch, panels, selectedPatnrId, selectedPrdtId]);
 
   const onClick = () => {
     dispatch(popPanel());
@@ -75,22 +82,26 @@ export default function ItemDetail() {
       <TBody className={css.container} scrollable={false}>
         {/* 단일상품 영역  */}
         {productData?.pmtSuptYn === "Y" && (
-          <SingleProduct selectedPatnrId={"11"} selectedPrdtId={"7280567"} />
-        )}
-        {/* 그룹상품 영역 */}
-        {isGroupOption && isGroupOption === "Y" && (
-          <GroupProduct
-            selectedPatnrId={panelInfo?.patnrId}
-            selectedPrdtId={panelInfo?.prdtId}
+          <SingleProduct
+            selectedPatnrId={selectedPatnrId}
+            selectedPrdtId={selectedPrdtId}
           />
         )}
         {/* 구매불가상품 영역 */}
         {productData?.pmtSuptYn === "N" && (
           <UnableProduct
-            selectedPatnrId={panelInfo?.patnrId}
-            selectedPrdtId={panelInfo?.prdtId}
+            selectedPatnrId={selectedPatnrId}
+            selectedPrdtId={selectedPrdtId}
           />
         )}
+        {/* 그룹상품 영역 */}
+        {groupInfos && (
+          <GroupProduct
+            selectedPatnrId={selectedPatnrId}
+            selectedPrdtId={selectedPrdtId}
+          />
+        )}
+
         {/* 테마그룹상품 영역*/}
         {/* <ThemeProduct
           selectedPatnrId={panelInfo?.patnrId}