diff --git a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryPanel.jsx b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryPanel.jsx
index dee08c53..e4449cfb 100644
--- a/com.twin.app.shoptime/src/views/CategoryPanel/CategoryPanel.jsx
+++ b/com.twin.app.shoptime/src/views/CategoryPanel/CategoryPanel.jsx
@@ -52,8 +52,10 @@ const TabContainer = SpotlightContainerDecorator(
   "div"
 );
 
+const INDEX_ITEM = 0;
+const INDEX_SHOWS = 1;
 const getButtonTabList = () => {
-  return [$L("SHOWS"), $L("ITEM")];
+  return [$L("ITEM"), $L("SHOWS")];
 };
 
 let buttonTabList = null;
@@ -82,7 +84,7 @@ const CategoryPanel = ({ panelInfo, isOnTop, spotlightId }) => {
     partnerInfos,
   } = categoryDatas || {};
 
-  const [tab, setTab] = useState(panelInfo.tab ? panelInfo.tab : 0);
+  const [tab, setTab] = useState(panelInfo.tab ? panelInfo.tab : INDEX_ITEM);
   const tabRef = usePrevious(tab);
   const categoryDatasRef = usePrevious(categoryDatas);
   const [dropDownTab, setDropDownTab] = useState(
@@ -115,7 +117,7 @@ const CategoryPanel = ({ panelInfo, isOnTop, spotlightId }) => {
 
   useEffect(() => {
     let nowMenu;
-    if (tab === 0) {
+    if (tab === INDEX_SHOWS) {
       if (categoryShowInfos) {
         nowMenu =
           categoryShowInfos?.subCatShowList.length === 0
@@ -124,7 +126,7 @@ const CategoryPanel = ({ panelInfo, isOnTop, spotlightId }) => {
       }
     }
 
-    if (tab === 1) {
+    if (tab === INDEX_ITEM) {
       if (categoryItemInfos) {
         nowMenu =
           categoryItemInfos?.subCatItemList.length === 0
@@ -140,7 +142,7 @@ const CategoryPanel = ({ panelInfo, isOnTop, spotlightId }) => {
 
   useEffect(() => {
     if (isSendedLogGNBExcuted) {
-      const cnttTpNm = tab === 0 ? "Show" : "Item";
+      const cnttTpNm = tab === INDEX_SHOWS ? "Show" : "Item";
       const sortTpNm = dropDownTab === 0 ? "New" : "Popular";
 
       logTimerRef.current = setTimeout(() => {
@@ -170,7 +172,7 @@ const CategoryPanel = ({ panelInfo, isOnTop, spotlightId }) => {
   ]);
 
   const reload = useCallback(() => {
-    const tabType = tabRef.current === 0 ? "CAT00101" : "CAT00102";
+    const tabType = tabRef.current === INDEX_SHOWS ? "CAT00101" : "CAT00102";
     const filterType = dropDownTabRef.current === 0 ? "CAT00202" : "CAT00201";
     const pageSize = "20";
     if (
@@ -207,7 +209,7 @@ const CategoryPanel = ({ panelInfo, isOnTop, spotlightId }) => {
         setContainerLastFocusedElement(null, [
           SpotlightIds.CATEGORY_CONTENTS_BOX,
         ]);
-        setTab(panelInfo.tab ? panelInfo.tab : 0);
+        setTab(panelInfo.tab ? panelInfo.tab : INDEX_ITEM);
         Spotlight.focus("tab-" + panelInfo.tab);
       } else if (panelInfo.currentSpot) {
         Spotlight.focus(panelInfo.currentSpot);
@@ -315,15 +317,10 @@ const CategoryPanel = ({ panelInfo, isOnTop, spotlightId }) => {
   //onScroll* event can't use Callback
   const onScrollStop = useCallback((ev) => {
     const targetContentsBoxId =
-      tabRef.current === 0
-        ? SpotlightIds.SHOW_CONTENTS_BOX
-        : SpotlightIds.CATEGORY_CONTENTS_BOX;
-    const targetKey =
-      tabRef.current === 0 ? "categoryShowInfos" : "categoryItemInfos";
+      tabRef.current === INDEX_SHOWS ? SpotlightIds.SHOW_CONTENTS_BOX : SpotlightIds.CATEGORY_CONTENTS_BOX;
+    const targetKey = tabRef.current === INDEX_SHOWS ? "categoryShowInfos" : "categoryItemInfos";
     const targetData = categoryDatasRef.current[targetKey];
-    const subKey = targetData?.subCatItemList
-      ? "subCatItemList"
-      : "subCatShowList";
+    const subKey = targetData?.subCatItemList ? "subCatItemList" : "subCatShowList";
     const spottableDescendants = getSpottableDescendants(targetContentsBoxId);
 
     const visibleIndexes = [];
@@ -352,10 +349,8 @@ const CategoryPanel = ({ panelInfo, isOnTop, spotlightId }) => {
   }, []);
 
   const showGotoTopButton = useMemo(() => {
-    const targetData = tab === 0 ? categoryShowInfos : categoryItemInfos;
-    const subKey = targetData?.subCatItemList
-      ? "subCatItemList"
-      : "subCatShowList";
+    const targetData = tab === INDEX_SHOWS ? categoryShowInfos : categoryItemInfos;
+    const subKey = targetData?.subCatItemList ? "subCatItemList" : "subCatShowList";
 
     if (!targetData || !targetData[subKey] || targetData.total < 5) {
       return false;
@@ -366,14 +361,10 @@ const CategoryPanel = ({ panelInfo, isOnTop, spotlightId }) => {
   }, [tab, categoryShowInfos, categoryItemInfos]);
 
   const itemCountNumbers = useMemo(() => {
-    if (categoryItemInfos && tab === 1) {
-      return categoryItemInfos.subCatItemList.length > 0
-        ? categoryItemInfos.total
-        : "0";
-    } else if (categoryShowInfos && tab === 0) {
-      return categoryShowInfos.subCatShowList.length > 0
-        ? categoryShowInfos.total
-        : "0";
+    if (categoryItemInfos && tab === INDEX_ITEM) {
+      return categoryItemInfos.subCatItemList.length > 0 ? categoryItemInfos.total : "0";
+    } else if (categoryShowInfos && tab === INDEX_SHOWS) {
+      return categoryShowInfos.subCatShowList.length > 0 ? categoryShowInfos.total : "0";
     } else {
       return;
     }
@@ -447,8 +438,8 @@ const CategoryPanel = ({ panelInfo, isOnTop, spotlightId }) => {
                     </TDropDown>
                   </TabContainer>
                 )}
-              {tab === 0 && <ShowContents onClick={handleItemClick} />}
-              {tab === 1 && <ItemContents onClick={handleItemClick} />}
+              {tab === INDEX_ITEM && <ItemContents onClick={handleItemClick} />}
+              {tab === INDEX_SHOWS && <ShowContents onClick={handleItemClick} />}
             </Container>
             {showGotoTopButton && (
               <TButton