[categoryPanel] 카테고리 변경 시 기존 데이터 남아있는 현상 수정

com.twin.app.shoptime/src/actions/mainActions.js

@@ -1,8 +1,8 @@
-import { URLS } from "../api/apiConfig";
-import { TAxios } from "../api/TAxios";
-import { CATEGORY_DATA_MAX_RESULTS_LIMIT } from "../utils/Config";
-import * as HelperMethods from "../utils/helperMethods";
-import { types } from "./actionTypes";
+import { URLS } from '../api/apiConfig';
+import { TAxios } from '../api/TAxios';
+import { CATEGORY_DATA_MAX_RESULTS_LIMIT } from '../utils/Config';
+import * as HelperMethods from '../utils/helperMethods';
+import { types } from './actionTypes';
 
 export const getMainLiveShow = (props) => (dispatch, getState) => {
   const onSuccess = (response) => {
@@ -171,6 +171,7 @@ export const getSubCategory =
       onFail
     );
   };
+
 export const continueGetSubCategory =
   (key, pageNo = 2) =>
   (dispatch, getState) => {
@@ -194,6 +195,10 @@ export const continueGetSubCategory =
     );
   };
 
+export const clearSubCategory = () => ({
+  type: types.CLEAR_SUB_CATEGORY,
+});
+
 // TOP20 영상 목록 조회 IF-LGSP-069
 export const getTop20Show = () => (dispatch, getState) => {
   const onSuccess = (response) => {

com.twin.app.shoptime/src/reducers/mainReducer.js

@@ -1,5 +1,5 @@
-import { types } from "../actions/actionTypes";
-import { CATEGORY_DATA_MAX_RESULTS_LIMIT } from "../utils/Config";
+import { types } from '../actions/actionTypes';
+import { CATEGORY_DATA_MAX_RESULTS_LIMIT } from '../utils/Config';
 
 const initialState = {
   subCategoryData: {},
@@ -134,13 +134,18 @@ export const mainReducer = (state = initialState, action) => {
       };
     }
     case types.CLEAR_SHOPNOW_INFO:
-      {
-      }
       return {
         ...state,
         showDetailInfo: [],
         showNowInfo: null,
       };
+
+    case types.CLEAR_SUB_CATEGORY:
+      return {
+        ...state,
+        subCategoryData: {},
+      };
+
     default:
       return state;
   }

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

@@ -4,46 +4,51 @@ import React, {
   useMemo,
   useRef,
   useState,
-} from "react";
+} from 'react';
 
-import classNames from "classnames";
-import { useDispatch, useSelector } from "react-redux";
+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 { Job } from '@enact/core/util';
+import Spotlight from '@enact/spotlight';
+import SpotlightContainerDecorator
+  from '@enact/spotlight/SpotlightContainerDecorator';
+import { setContainerLastFocusedElement } from '@enact/spotlight/src/container';
 
 import {
+  clearSubCategory,
   continueGetSubCategory,
   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";
-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";
+} 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';
+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 {
   CATEGORY_DATA_MAX_RESULTS_LIMIT,
   LOG_MENU,
   LOG_TP_NO,
   panel_names,
-} from "../../utils/Config";
+} from '../../utils/Config';
 import {
   $L,
   getSpottableDescendants,
   isElementInContainer,
-} from "../../utils/helperMethods";
-import { SpotlightIds } from "../../utils/SpotlightIds";
-import ItemContents from "./CategoryContents/ItemContents/ItemContents";
-import ShowContents from "./CategoryContents/ShowContents/ShowContents";
-import css from "./CategoryPanel.module.less";
+} from '../../utils/helperMethods';
+import { SpotlightIds } from '../../utils/SpotlightIds';
+import ItemContents from './CategoryContents/ItemContents/ItemContents';
+import ShowContents from './CategoryContents/ShowContents/ShowContents';
+import css from './CategoryPanel.module.less';
 
 const TabContainer = SpotlightContainerDecorator(
   { enterTo: "last-focused" },
@@ -146,6 +151,7 @@ export default function CategoryPanel({ panelInfo, isOnTop }) {
       categoryParams.pageSize !== pageSize
     ) {
       scrollTop({ animate: false });
+      dispatch(clearSubCategory());
       dispatch(
         getSubCategory(
           {