[CategoryPanel] getItemCountNumber 추가

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

@@ -8,14 +8,16 @@ import React, {
 
 import classNames from "classnames";
 import { useDispatch, useSelector } from "react-redux";
+
 import { Job } from "@enact/core/util";
 import Spotlight from "@enact/spotlight";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 import { setContainerLastFocusedElement } from "@enact/spotlight/src/container";
 
 import {
-  getSubCategory,
+  clearSubCategory,
   continueGetSubCategory,
+  getSubCategory,
 } from "../../actions/mainActions";
 import { updatePanel } from "../../actions/panelActions";
 import SectionTitle from "../../components/SectionTitle/SectionTitle";
@@ -25,10 +27,14 @@ import TButtonTab, { LIST_TYPE } from "../../components/TButtonTab/TButtonTab";
 import TDropDown from "../../components/TDropDown/TDropDown";
 import THeader from "../../components/THeader/THeader";
 import TPanel from "../../components/TPanel/TPanel";
+import useLogService from "../../hooks/useLogService";
 import usePrevious from "../../hooks/usePrevious";
 import useScrollTo from "../../hooks/useScrollTo";
-import { LOG_TP_NO, panel_names } from "../../utils/Config";
-import { CATEGORY_DATA_MAX_RESULTS_LIMIT } from "../../utils/Config";
+import {
+  CATEGORY_DATA_MAX_RESULTS_LIMIT,
+  LOG_TP_NO,
+  panel_names,
+} from "../../utils/Config";
 import {
   $L,
   getSpottableDescendants,
@@ -38,7 +44,6 @@ import { SpotlightIds } from "../../utils/SpotlightIds";
 import ItemContents from "./CategoryContents/ItemContents/ItemContents";
 import ShowContents from "./CategoryContents/ShowContents/ShowContents";
 import css from "./CategoryPanel.module.less";
-import useLogService from "../../hooks/useLogService";
 
 const TabContainer = SpotlightContainerDecorator(
   { enterTo: "last-focused" },
@@ -86,6 +91,7 @@ export default function CategoryPanel({ panelInfo, isOnTop }) {
   const dropDownTabRef = usePrevious(dropDownTab);
   const [filterMethods, setFilterMethods] = useState([]);
   const [styleChange, setStyleChange] = useState(false);
+  const [categoryTabType, setCategoryTabType] = useState();
   const spotYoffsetRef = useRef(null);
 
   const reload = useCallback(() => {
@@ -97,6 +103,7 @@ export default function CategoryPanel({ panelInfo, isOnTop }) {
       categoryParams.filterType !== filterType
     ) {
       scrollTop({ animate: false });
+      setCategoryTabType(tabType);
       dispatch(
         getSubCategory(
           {
@@ -110,9 +117,17 @@ export default function CategoryPanel({ panelInfo, isOnTop }) {
     }
   }, [categoryParams, lgCatCd, tab, dropDownTab]);
 
+  useEffect(() => {
+    return () => {
+      console.log("##### UNMOUNTED");
+      dispatch(clearSubCategory());
+    };
+  }, [dispatch]);
+
   //panelInfo changed
   useEffect(() => {
     if (isOnTop) {
+      console.log("#TOP");
       if (panelInfo.dropDownTab !== dropDownTab) {
         setDropDownTab(panelInfo.dropDownTab ? panelInfo.dropDownTab : 0);
       }
@@ -137,6 +152,10 @@ export default function CategoryPanel({ panelInfo, isOnTop }) {
         }
         reload();
       }, 100);
+    } else {
+      console.log("#NOT TOP");
+      console.log("#CLEAR");
+      // dispatch(clearSubCategory());
     }
   }, [panelInfo, isOnTop]);
 
@@ -268,67 +287,84 @@ export default function CategoryPanel({ panelInfo, isOnTop }) {
     }
     return targetData.length >= targetData[0].total;
   }, [tab, categoryShowInfos, categoryItemInfos]);
+
+  const getItemCountNumber = () => {
+    // if (categoryDatas) {
+    if (categoryItemInfos && categoryTabType === "CAT00102") {
+      return categoryItemInfos.length > 0 ? categoryItemInfos[0].total : "0";
+    } else if (categoryShowInfos && categoryTabType === "CAT00101") {
+      return categoryShowInfos.length > 0 ? categoryShowInfos[0].total : "0";
+    }
+    // }
+  };
+
   return (
     <TPanel>
       <THeader title="Category" />
-      <TBody
-        className={css.tBody}
-        cbScrollTo={getScrollTo}
-        onScrollStop={onScrollStop}
-        onScroll={onScroll}
-      >
-        <div className={css.paddingContainer}>
-          {panelInfo && categoryDatas && (
-            <SectionTitle
-              title={lgCatNm}
-              className={css.title}
-              itemCount={
-                categoryItemInfos
-                  ? categoryItemInfos.length > 0
-                    ? categoryItemInfos[0].total
-                    : "0"
-                  : categoryShowInfos.length > 0
-                  ? categoryShowInfos[0].total
-                  : "0"
-              }
-            />
-          )}
-          {buttonTabList && buttonTabList.length > 0 && (
-            <TabContainer className={css.tabContainer}>
-              <TButtonTab
-                contents={buttonTabList}
-                onItemClick={handleButtonTabClick}
-                selectedIndex={tab}
-                listType={LIST_TYPE.medium}
-                scrollTop={scrollTop}
+      {categoryDatas && (
+        <TBody
+          className={css.tBody}
+          cbScrollTo={getScrollTo}
+          onScrollStop={onScrollStop}
+          onScroll={onScroll}
+        >
+          <div className={css.paddingContainer}>
+            {panelInfo && categoryDatas && (
+              <SectionTitle
+                title={lgCatNm}
+                className={css.title}
+                itemCount={
+                  getItemCountNumber()
+                  // categoryItemInfos
+                  //   ? categoryItemInfos.length > 0 &&
+                  //     categoryTabType === "CAT00102"
+                  //     ? "ITEM TOTAL LENGTH"
+                  //     : // categoryItemInfos[0].total
+                  //       "0"
+                  //   : categoryShowInfos.length > 0 &&
+                  //     categoryTabType === "CAT00101"
+                  //   ? categoryShowInfos[0].total
+                  //   : "0"
+                }
               />
-              <TDropDown
-                className={classNames(
-                  css.dropdown,
-                  styleChange === true ? css.categoryDropdown : null
-                )}
-                onSelect={handleSelectFilter}
-                onOpen={handleStyle}
-                onClose={handleStyleOut}
-                selectedIndex={dropDownTab}
-                width="small"
-                scrollTop={scrollTop}
-              >
-                {filterMethods}
-              </TDropDown>
-            </TabContainer>
-          )}
-          {tab === 0 && <ShowContents onClick={handleItemClick} />}
-          {tab === 1 && <ItemContents onClick={handleItemClick} />}
-          {showGotoTopButton && (
-            <TButton
-              type={TYPES.topButton}
-              size={null}
-              onClick={handleTopButtonClick}
-            />
-          )}
-        </div>
-      </TBody>
+            )}
+            {buttonTabList && buttonTabList.length > 0 && (
+              <TabContainer className={css.tabContainer}>
+                <TButtonTab
+                  contents={buttonTabList}
+                  onItemClick={handleButtonTabClick}
+                  selectedIndex={tab}
+                  listType={LIST_TYPE.medium}
+                  scrollTop={scrollTop}
+                />
+                <TDropDown
+                  className={classNames(
+                    css.dropdown,
+                    styleChange === true ? css.categoryDropdown : null
+                  )}
+                  onSelect={handleSelectFilter}
+                  onOpen={handleStyle}
+                  onClose={handleStyleOut}
+                  selectedIndex={dropDownTab}
+                  width="small"
+                  scrollTop={scrollTop}
+                >
+                  {filterMethods}
+                </TDropDown>
+              </TabContainer>
+            )}
+            {tab === 0 && <ShowContents onClick={handleItemClick} />}
+            {tab === 1 && <ItemContents onClick={handleItemClick} />}
+            {showGotoTopButton && (
+              <TButton
+                type={TYPES.topButton}
+                size={null}
+                onClick={handleTopButtonClick}
+              />
+            )}
+          </div>
+        </TBody>
+      )}
     </TPanel>
   );
 }