DetailPanel 각 아이템 패널이동 기능추가

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

@@ -1,47 +1,51 @@
-import React, {
-  useEffect,
-  useState,
-} from 'react';
+import React, { useEffect, useState } from "react";
 
-import {
-  useDispatch,
-  useSelector,
-} from 'react-redux';
+import { useDispatch, useSelector } from "react-redux";
 
-import { getProductCouponSearch } from '../../actions/couponActions';
-import { getMainCategoryDetail } from '../../actions/mainActions';
-import { popPanel } from '../../actions/panelActions';
-import TBody from '../../components/TBody/TBody';
-import THeader from '../../components/THeader/THeader';
-import TPanel from '../../components/TPanel/TPanel';
-import ProductOption from './container/ProductOption';
-import ProductThumbnail from './container/ProductThumbnail';
-import css from './DetailPanel.module.less';
+import { getProductCouponSearch } from "../../actions/couponActions";
+import { getMainCategoryDetail } from "../../actions/mainActions";
+import { popPanel } from "../../actions/panelActions";
+import TBody from "../../components/TBody/TBody";
+import THeader from "../../components/THeader/THeader";
+import TPanel from "../../components/TPanel/TPanel";
+import ProductOption from "./container/ProductOption";
+import ProductThumbnail from "./container/ProductThumbnail";
+import css from "./DetailPanel.module.less";
 
 export default function ItemDetail() {
   const [productData, setProductData] = useState();
+  const [panelInfo, setPaneInfo] = useState();
   const data = useSelector((state) => state.main.productData);
   const panels = useSelector((state) => state.panels.panels);
 
-  console.log("#panels ", panels);
+  const getPanelInfo = () => {
+    if (panels) {
+      for (let i = 0; i < panels.length; i++) {
+        if (panels[i].name === "detailpanel") {
+          setPaneInfo(panels[i].panelInfo);
+        }
+      }
+    }
+  };
   const dispatch = useDispatch();
 
   useEffect(() => {
-    if (panels) {
+    getPanelInfo();
+    if (panels && panelInfo) {
       dispatch(
         getMainCategoryDetail({
-          patnrId: 1,
-          prdtId: "A523924",
+          patnrId: panelInfo?.patnrId,
+          prdtId: panelInfo?.prdtId,
         })
       );
       dispatch(
         getProductCouponSearch({
-          patnrId: 1,
-          prdtId: "A523924",
+          patnrId: panelInfo?.patnrId,
+          prdtId: panelInfo?.prdtId,
         })
       );
     }
-  }, [dispatch, panels]);
+  }, [dispatch, panelInfo]);
 
   useEffect(() => {
     setProductData(data);
@@ -61,8 +65,8 @@ export default function ItemDetail() {
       <TBody className={css.container} scrollable={false}>
         <ProductThumbnail productData={productData} />
         <ProductOption
-          selectedPatnrId={1}
-          selectedPardtId={"A523924"}
+          selectedPatnrId={panelInfo?.patnrId}
+          selectedPardtId={panelInfo?.prdtId}
         />
       </TBody>
     </TPanel>