[category] 스팟 관련 처리건.

- 영상 및 디테일 이후 이전페이지로 돌아왔을때  스팟 처리건.

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

@@ -7,7 +7,9 @@ import Spotlight from "@enact/spotlight";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 import { setContainerLastFocusedElement } from "@enact/spotlight/src/container";
 
+import { changeAppStatus } from "../../actions/commonActions";
 import { getSubCategory } from "../../actions/mainActions";
+import { updatePanel } from "../../actions/panelActions";
 import SectionTitle from "../../components/SectionTitle/SectionTitle";
 import TBody from "../../components/TBody/TBody";
 import TButton, { TYPES } from "../../components/TButton/TButton";
@@ -16,6 +18,7 @@ import TDropDown from "../../components/TDropDown/TDropDown";
 import THeader from "../../components/THeader/THeader";
 import TPanel from "../../components/TPanel/TPanel";
 import useScrollTo from "../../hooks/useScrollTo";
+import { panel_names } from "../../utils/Config";
 import { $L } from "../../utils/helperMethods";
 import { SpotlightIds } from "../../utils/SpotlightIds";
 import ItemContents from "./CategoryContents/ItemContents/ItemContents";
@@ -33,7 +36,7 @@ const getButtonTabList = () => {
 
 let buttonTabList = null;
 
-export default function CategoryPanel() {
+export default function CategoryPanel({ panelInfo }) {
   if (!buttonTabList) {
     buttonTabList = getButtonTabList();
   }
@@ -41,6 +44,18 @@ export default function CategoryPanel() {
   const dispatch = useDispatch();
 
   const categoryDatas = useSelector((state) => state.main.subCategoryData);
+  // const categoryStatus = useSelector(
+  //   (state) => state.main.subCategoryData.status
+  // );
+  // console.log("###categoryDatas", categoryDatas);
+  // const isLoading = categoryStatus !== "fulfilled";
+  // useEffect(() => {
+  //   const showLoadingPanel = isLoading
+  //     ? { show: true, type: "wait" }
+  //     : { show: false };
+
+  //   dispatch(changeAppStatus({ showLoadingPanel }));
+  // }, [dispatch, isLoading]);
   const panelInfos = useSelector((state) => state.panels.panels?.[0]);
 
   const { getScrollTo, scrollTop } = useScrollTo();
@@ -57,20 +72,52 @@ export default function CategoryPanel() {
     topShowInfo,
   } = categoryDatas || {};
 
-  const [tab, setTab] = useState(0);
-  const [dropDownTab, setDropDownTab] = useState(0);
+  const [tab, setTab] = useState(panelInfo.tab ? panelInfo.tab : 0);
+  const [dropDownTab, setDropDownTab] = useState(
+    panelInfo.dropDownTab ? panelInfo.dropDownTab : 0
+  );
   const [filterMethods, setFilterMethods] = useState([]);
   const [styleChange, setStyleChange] = useState(false);
+  let tabIdx = null;
+  let dropDownIdx = null;
 
+  const filterType = dropDownTab === 0 ? "CAT00202" : "CAT00201";
+  const tabType = tab === 0 ? "CAT00101" : "CAT00102";
   useEffect(() => {
-    setTab(0);
-    setDropDownTab(0);
+    setTab(tab);
+    setDropDownTab(dropDownTab);
+
     if (panelInfos?.panelInfo) {
-      dispatch(
-        getSubCategory({ lgCatCd, pageSize: "100", filterType: "CAT00202" }, 1)
-      );
+      if (panelInfo.originalCatCd) {
+        dispatch(
+          getSubCategory(
+            {
+              lgCatCd,
+              pageSize: "100",
+              tabType,
+              filterType,
+            },
+            1
+          )
+        );
+      } else {
+        setTab(0);
+        setDropDownTab(dropDownTab);
+        dispatch(
+          getSubCategory(
+            {
+              lgCatCd,
+              pageSize: "100",
+              tabType: "CAT00101",
+              filterType: "CAT00202",
+            },
+            1
+          )
+        );
+      }
     }
   }, [panelInfos, lgCatCd, dispatch]);
+
   useEffect(() => {
     if (categoryDatas) {
       const detailCdNmValues = categoryFilterCd
@@ -85,12 +132,21 @@ export default function CategoryPanel() {
     ({ index }) => {
       if (index === tab) return;
       setTab(index);
+      tabIdx = index; //여기서 넘겨주는거 값 전달.
     },
     [tab]
   );
-
+  useEffect(() => {
+    if (!tabIdx) {
+      tabIdx = panelInfo.tab;
+    }
+    if (!dropDownIdx) {
+      dropDownIdx = panelInfo.dropDownTab;
+    }
+  }, [panelInfo]);
   const handleSelectFilter = useCallback(({ selected }) => {
     setDropDownTab(selected);
+    dropDownIdx = selected; //여기서 넘겨주는거 값 전달.
   }, []);
   const handleStyle = useCallback(() => {
     setStyleChange(true);
@@ -111,7 +167,7 @@ export default function CategoryPanel() {
     setContainerLastFocusedElement(null, [SpotlightIds.TBODY]);
     setContainerLastFocusedElement(null, [SpotlightIds.SHOW_PRODUCTS_BOX]);
     setContainerLastFocusedElement(null, [SpotlightIds.CATEGORY_CONTENTS_BOX]);
-    Spotlight.focus("tab-0");
+    Spotlight.focus(`tab-${tab}`);
   }, [panelInfos]);
 
   useEffect(() => {
@@ -124,6 +180,51 @@ export default function CategoryPanel() {
     Spotlight.focus(`tab-${tab}`);
   }, [scrollTop, tab]);
 
+  useEffect(() => {
+    setTimeout(() => {
+      if (panelInfo.tab) {
+        setTab(panelInfo.tab);
+      }
+      if (panelInfo.dropDownTab) {
+        setDropDownTab(panelInfo.dropDownTab);
+      }
+      setTimeout(() => {
+        if (panelInfo.currentSpot) {
+          Spotlight.focus(panelInfo.currentSpot);
+        }
+      }, 100);
+    }, 500);
+
+    return () => {
+      const c = Spotlight.getCurrent();
+      let targetSpotlightId = null;
+      let tabNum = null;
+      let dropDownNum = null;
+      let originalCatCd = lgCatNm;
+      if (c) {
+        targetSpotlightId = c.getAttribute("data-spotlight-id");
+      }
+      if (tabIdx !== null) {
+        tabNum = tabIdx;
+      }
+
+      if (dropDownIdx !== null) {
+        dropDownNum = dropDownIdx;
+      }
+
+      dispatch(
+        updatePanel({
+          name: panel_names.CATEGORY_PANEL,
+          panelInfo: {
+            currentSpot: targetSpotlightId,
+            tab: tabNum,
+            dropDownTab: dropDownNum,
+            originalCatCd: originalCatCd,
+          },
+        })
+      );
+    };
+  }, []);
   return (
     <TPanel>
       <THeader title="Category" />