diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/CategoryNav.jsx b/com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/CategoryNav.jsx
index 5b75589d..408654a0 100644
--- a/com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/CategoryNav.jsx
+++ b/com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/CategoryNav.jsx
@@ -21,22 +21,33 @@ const Container = SpotlightContainerDecorator(
 export default function CategoryNav({
   categoryInfos,
   currentCategoryCode,
-  onCategoryNavClick,
+  setCurrentCategoryCode,
   ...rest
 }) {
+  const handleCategoryNavClick = useCallback(
+    (categoryCode) => {
+      if (currentCategoryCode === categoryCode) {
+        return;
+      }
+
+      setCurrentCategoryCode(categoryCode);
+    },
+    [currentCategoryCode]
+  );
+
   const renderItem = useCallback(
     ({ index, ...rest }) => {
       return (
         <CategoryNavItem
           categoryInfos={categoryInfos}
           currentCategoryCode={currentCategoryCode}
-          onCategoryNavClick={onCategoryNavClick}
+          onCategoryNavClick={handleCategoryNavClick}
           index={index}
           {...rest}
         />
       );
     },
-    [categoryInfos, currentCategoryCode, onCategoryNavClick]
+    [categoryInfos, currentCategoryCode, handleCategoryNavClick]
   );
 
   return (
diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx b/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx
index f9dbcce6..c03dbaf6 100644
--- a/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx
+++ b/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 
 import { useDispatch, useSelector } from "react-redux";
 
@@ -22,17 +22,6 @@ export default function OnSalePanel() {
   const [currentCategoryCode, setCurrentCategoryCode] = useState();
   const [targetId, setTargetId] = useState();
 
-  const handleCategoryNavClick = useCallback(
-    (categoryCode) => {
-      if (currentCategoryCode === categoryCode) {
-        return;
-      }
-
-      setCurrentCategoryCode(categoryCode);
-    },
-    [currentCategoryCode]
-  );
-
   useEffect(() => {
     if (categoryInfos && !currentCategoryCode) {
       const initialLgCatCd = categoryInfos[0].lgCatCd;
@@ -60,7 +49,7 @@ export default function OnSalePanel() {
       <CategoryNav
         categoryInfos={categoryInfos}
         currentCategoryCode={currentCategoryCode}
-        onCategoryNavClick={handleCategoryNavClick}
+        setCurrentCategoryCode={setCurrentCategoryCode}
       />
       <TBody className={css.tBody}>
         {saleInfos &&