DetailPanel redux cleanup

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

@@ -2,19 +2,17 @@ import React, { useCallback, useEffect, useState } from "react";
 
 import { useDispatch, useSelector } from "react-redux";
 
-import Spotlight from "@enact/spotlight";
-
 import {
+  clearThemeDetail,
   getThemeCurationDetailInfo,
   getThemeHotelDetailInfo,
 } from "../../actions/homeActions";
 import { getMainCategoryDetail } from "../../actions/mainActions";
 import { popPanel, resetPanels } from "../../actions/panelActions";
-import { getProductGroup } from "../../actions/productActions";
+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";
@@ -22,7 +20,7 @@ import ThemeProduct from "./ThemeProduct/ThemeProduct";
 import UnableProduct from "./UnableProduct/UnableProduct";
 import YouMayLike from "./YouMayLike/YouMayLike";
 
-export default function ItemDetail() {
+export default function DetailPanel() {
   const [selectedPatnrId, setSelectedPatnrId] = useState("");
   const [selectedPrdtId, setSelectedPrtdId] = useState("");
   const [selectedCurationId, setSelectedCurationId] = useState("");
@@ -99,8 +97,14 @@ export default function ItemDetail() {
     dispatch(popPanel());
   }, [dispatch]);
 
+  useEffect(() => {
+    return () => {
+      dispatch(clearProductDetail());
+      // dispatch(clearThemeDetail());
+    };
+  }, [dispatch]);
+
   const saveToLocalStorage = useCallback(() => {
-    // recentlyViewed localstorage
     const recentItmes =
       JSON.parse(window.localStorage.getItem("recentItems")) || [];
 
@@ -138,6 +142,7 @@ export default function ItemDetail() {
     if (productData && !selectedCurationId) {
       setCategoryId(productData.catCd);
     } else if (
+      selectedIndex &&
       themeProductInfos[selectedIndex]?.pmtSuptYn === "N" &&
       selectedCurationId
     ) {
@@ -158,7 +163,7 @@ export default function ItemDetail() {
   }, [selectedPatnrId, selectedPrdtId]);
 
   return (
-    <TPanel isTabActivated={false}>
+    <TPanel isTabActivated={false} key={selectedPrdtId}>
       <THeader
         className={css.header}
         title={