detailPanel getPanelInfo function delete

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

@@ -8,95 +8,68 @@ import {
   getThemeHotelDetailInfo,
 } from "../../actions/homeActions";
 import { getMainCategoryDetail } from "../../actions/mainActions";
-import { popPanel, resetPanels } from "../../actions/panelActions";
+import { popPanel } from "../../actions/panelActions";
+import { finishVideoPreview } from "../../actions/playActions";
 import { clearProductDetail } from "../../actions/productActions";
 import TBody from "../../components/TBody/TBody";
 import THeader from "../../components/THeader/THeader";
 import TPanel from "../../components/TPanel/TPanel";
-import { panel_names } from "../../utils/Config";
 import css from "./DetailPanel.module.less";
 import GroupProduct from "./GroupProduct/GroupProduct";
 import SingleProduct from "./SingleProduct/SingleProduct";
 import ThemeProduct from "./ThemeProduct/ThemeProduct";
 import UnableProduct from "./UnableProduct/UnableProduct";
 import YouMayLike from "./YouMayLike/YouMayLike";
-import { finishVideoPreview } from "../../actions/playActions";
 
-export default function ItemDetail({panelInfo}) {
-  const [selectedPatnrId, setSelectedPatnrId] = useState("");
-  const [selectedPrdtId, setSelectedPrtdId] = useState("");
-  const [selectedCurationId, setSelectedCurationId] = useState("");
-  const [categoryId, setCategoryId] = useState("");
-  const [themeType, setThemeType] = useState("");
-  const [bgImgNo, setBgImgNo] = useState();
+export default function DetailPanel({ panelInfo }) {
+  const [lgCatCd, setLgCatCd] = useState("");
   const [selectedIndex, setSelectedIndex] = useState(0);
-
-  const youmaylikeData = useSelector((state) => state.main.youmaylikeData);
   const productData = useSelector((state) => state.main.productData);
   const themeData = useSelector((state) => state.home.productData);
-  const panels = useSelector((state) => state.panels.panels);
   const hotelData = useSelector((state) => state.home.hotelData);
   const themeProductInfos = useSelector(
     (state) => state.home.themeCurationDetailInfoData
   );
+  const hotelInfos = useSelector(
+    (state) => state.home.themeCurationHotelDetailData
+  );
   const { httpHeader } = useSelector((state) => state.common);
 
   const dispatch = useDispatch();
 
-  const getPanelInfo = () => {
-    if (panels) {
-      for (let i = 0; i < panels.length; i++) {
-        if (panels[i].name === "detailpanel") {
-          setSelectedPatnrId(panels[i].panelInfo.patnrId);
-          setSelectedPrtdId(panels[i].panelInfo.prdtId);
-          setSelectedCurationId(panels[i].panelInfo.curationId);
-          setBgImgNo(panels[i].panelInfo.bgImgNo);
-          setThemeType(panels[i].panelInfo.type);
-          if (panels[0].name === "hotpickpanel") {
-            setSelectedPatnrId(panels[i].panelInfo.patnrId);
-            setSelectedCurationId(panels[i].panelInfo.curationId);
-            setThemeType(panels[i].panelInfo.type);
-            setBgImgNo(panels[i].panelInfo.bgImgNo);
-          }
-        }
-      }
-    }
-  };
+  const { prdtId, patnrId, curationId, type, bgImgNo } = panelInfo;
 
   useEffect(() => {
-    getPanelInfo();
-
-    if (themeType === "hotel") {
+    if (type === "hotel") {
       dispatch(
         getThemeHotelDetailInfo({
-          patnrId: selectedPatnrId,
-          curationId: selectedCurationId,
+          patnrId: patnrId,
+          curationId: curationId,
         })
       );
     }
 
-    if (themeType === "theme") {
+    if (type === "theme") {
       dispatch(
         getThemeCurationDetailInfo({
-          patnrId: selectedPatnrId,
-          curationId: selectedCurationId,
+          patnrId: patnrId,
+          curationId: curationId,
           bgImgNo: bgImgNo,
         })
       );
     }
 
-    if (selectedPrdtId && !selectedCurationId) {
+    if (prdtId && !curationId) {
       dispatch(
         getMainCategoryDetail({
-          patnrId: selectedPatnrId,
-          prdtId: selectedPrdtId,
+          patnrId: patnrId,
+          prdtId: prdtId,
         })
       );
     }
-  }, [dispatch, selectedPatnrId, selectedPrdtId, panels]);
+  }, [dispatch, panelInfo]);
 
   const onClick = useCallback(() => {
-    // dispatch(resetPanels([{ name: panel_names.DETAIL_PANEL, panelInfo: {} }]));
     dispatch(finishVideoPreview());
     dispatch(popPanel());
   }, [dispatch]);
@@ -119,7 +92,7 @@ export default function ItemDetail({panelInfo}) {
     }/${currentDate.getDate()}`;
 
     const existingProductIndex = recentItmes.findIndex((item) => {
-      return item.prdtId === selectedPrdtId;
+      return item.prdtId === patnrId;
     });
 
     if (existingProductIndex !== -1) {
@@ -127,8 +100,8 @@ export default function ItemDetail({panelInfo}) {
     }
 
     recentItmes.push({
-      prdtId: selectedPrdtId,
-      patnrId: selectedPatnrId,
+      prdtId: prdtId,
+      patnrId: patnrId,
       date: formattedDate,
       expireTime: currentDate.getTime() + 1000 * 60 * 60 * 24 * 14,
       cntryCd: httpHeader["X-Device-Country"],
@@ -140,40 +113,40 @@ export default function ItemDetail({panelInfo}) {
     } else {
       window.localStorage.setItem("recentItems", JSON.stringify(recentItmes));
     }
-  }, [panels, selectedPatnrId, selectedPatnrId, httpHeader]);
+  }, [panelInfo, httpHeader]);
 
-  const getCategoryId = useCallback(() => {
-    if (productData && !selectedCurationId) {
-      setCategoryId(productData.catCd);
+  const getlgCatCd = useCallback(() => {
+    if (productData && !curationId) {
+      setLgCatCd(productData.catCd);
     } else if (
       selectedIndex &&
       themeProductInfos[selectedIndex]?.pmtSuptYn === "N" &&
-      selectedCurationId
+      curationId
     ) {
-      setCategoryId(themeProductInfos[selectedIndex]?.catCd);
+      setLgCatCd(themeProductInfos[selectedIndex]?.catCd);
     } else {
-      setCategoryId("");
+      setLgCatCd("");
     }
-  }, [productData, themeProductInfos, selectedIndex, selectedCurationId]);
+  }, [productData, themeProductInfos, selectedIndex, panelInfo]);
 
   useEffect(() => {
-    getCategoryId();
+    getlgCatCd();
   }, [themeProductInfos, productData, selectedIndex]);
 
   useEffect(() => {
-    if (panels && selectedPatnrId && selectedPrdtId) {
+    if (panelInfo && patnrId && prdtId) {
       saveToLocalStorage();
     }
-  }, [selectedPatnrId, selectedPrdtId]);
+  }, [panelInfo]);
 
   return (
-    <TPanel isTabActivated={false} key={selectedPrdtId}>
+    <TPanel isTabActivated={false}>
       <THeader
         className={css.header}
         title={
-          (selectedPrdtId && productData?.prdtNm) ||
-          (themeType === "hotel" && hotelData?.hotelInfo.curationNm) ||
-          (themeType === "theme" && themeData?.themeInfo[0]?.curationNm)
+          (prdtId && productData?.prdtNm) ||
+          (type === "hotel" && hotelData?.hotelInfo.curationNm) ||
+          (type === "theme" && themeData?.themeInfo[0]?.curationNm)
         }
         onBackButton
         onClick={onClick}
@@ -182,10 +155,10 @@ export default function ItemDetail({panelInfo}) {
         {/* 단일상품 영역  */}
         {productData?.pmtSuptYn === "Y" &&
           productData?.grPrdtProcYn === "N" &&
-          selectedPrdtId && (
+          prdtId && (
             <SingleProduct
-              selectedPatnrId={selectedPatnrId}
-              selectedPrdtId={selectedPrdtId}
+              selectedPatnrId={patnrId}
+              selectedPrdtId={prdtId}
               selectedIndex={selectedIndex}
               setSelectedIndex={setSelectedIndex}
               launchedFromPlayer={panelInfo.launchedFromPlayer}
@@ -195,42 +168,43 @@ export default function ItemDetail({panelInfo}) {
         {productData?.pmtSuptYn === "Y" &&
           productData?.grPrdtProcYn === "Y" && (
             <GroupProduct
-              selectedPatnrId={selectedPatnrId}
-              selectedPrdtId={selectedPrdtId}
+              selectedPatnrId={patnrId}
+              selectedPrdtId={prdtId}
               selectedIndex={selectedIndex}
               setSelectedIndex={setSelectedIndex}
               launchedFromPlayer={panelInfo.launchedFromPlayer}
             />
           )}
         {/* 구매불가상품 영역 */}
-        {productData?.pmtSuptYn === "N" && selectedPrdtId && (
+        {productData?.pmtSuptYn === "N" && prdtId && (
           <UnableProduct
-            selectedPatnrId={selectedPatnrId}
-            selectedPrdtId={selectedPrdtId}
+            selectedPatnrId={patnrId}
+            selectedPrdtId={prdtId}
             selectedIndex={selectedIndex}
             setSelectedIndex={setSelectedIndex}
             launchedFromPlayer={panelInfo.launchedFromPlayer}
           />
         )}
         {/* 테마그룹상품 영역*/}
-        {selectedCurationId && (
+        {curationId && (hotelInfos || themeData) && (
           <ThemeProduct
             selectedIndex={selectedIndex}
             setSelectedIndex={setSelectedIndex}
-            selectedCurationId={selectedCurationId}
-            selectedPatnrId={selectedPatnrId}
-            themeType={themeType}
+            selectedCurationId={curationId}
+            selectedPatnrId={patnrId}
+            themeType={type}
             launchedFromPlayer={panelInfo.launchedFromPlayer}
           />
         )}
       </TBody>
-      {(selectedPrdtId || themeType === "theme") && categoryId && (
+      {lgCatCd && (productData || themeProductInfos) && (
         <YouMayLike
           isUnable={
             productData?.pmtSuptYn === "N" ||
-            themeProductInfos[selectedIndex]?.pmtSuptYn === "N"
+            (selectedIndex &&
+              themeProductInfos[selectedIndex]?.pmtSuptYn === "N")
           }
-          lgCatCd={categoryId}
+          lgCatCd={lgCatCd}
         />
       )}
     </TPanel>