[OnSalePanel] OnSalePanel, CategoryNav 수정

Detail Notes :

1. OnSalePanel, targetId 관련 로직 수정
2. CategoryNav, CategoryNavItem 최적화

com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/CategoryNav.jsx

@@ -1,12 +1,17 @@
-import React from 'react';
+import React, { useCallback } from "react";
 
-import VirtualGridList from '@enact/sandstone/VirtualList';
-import SpotlightContainerDecorator
-  from '@enact/spotlight/SpotlightContainerDecorator';
-import ri from '@enact/ui/resolution';
+import { VirtualGridList } from "@enact/sandstone/VirtualList";
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import ri from "@enact/ui/resolution";
 
-import CategoryNavItem from '../CategoryNavItem/CategoryNavItem';
-import css from './CategoryNav.module.less';
+import CategoryNavItem from "../CategoryNavItem/CategoryNavItem";
+import css from "./CategoryNav.module.less";
+
+const LIST_ITEM_CONF = {
+  ITEM_WIDTH: 210 * 2,
+  ITEM_HEIGHT: 236 * 2,
+  SAPCING: 30 * 2,
+};
 
 const Container = SpotlightContainerDecorator(
   { leaveFor: { right: "" }, enterTo: "last-focused" },
@@ -15,21 +20,24 @@ const Container = SpotlightContainerDecorator(
 
 export default function CategoryNav({
   categoryInfos,
-  currentLgCatCd,
+  currentCategoryCode,
   onCategoryNavClick,
   ...rest
 }) {
-  const renderItem = ({ index, ...rest }) => {
-    return (
-      <CategoryNavItem
-        categoryInfos={categoryInfos}
-        currentLgCatCd={currentLgCatCd}
-        onCategoryNavClick={onCategoryNavClick}
-        index={index}
-        {...rest}
-      />
-    );
-  };
+  const renderItem = useCallback(
+    ({ index, ...rest }) => {
+      return (
+        <CategoryNavItem
+          categoryInfos={categoryInfos}
+          currentCategoryCode={currentCategoryCode}
+          onCategoryNavClick={onCategoryNavClick}
+          index={index}
+          {...rest}
+        />
+      );
+    },
+    [categoryInfos, currentCategoryCode, onCategoryNavClick]
+  );
 
   return (
     <Container className={css.container} {...rest}>
@@ -41,12 +49,12 @@ export default function CategoryNav({
           horizontalScrollbar="hidden"
           itemRenderer={renderItem}
           itemSize={{
-            minWidth: ri.scale(210 * 2),
-            minHeight: ri.scale(236 * 2),
+            minWidth: ri.scale(LIST_ITEM_CONF.ITEM_WIDTH),
+            minHeight: ri.scale(LIST_ITEM_CONF.ITEM_HEIGHT),
           }}
           noScrollByWheel
           scrollMode="translate"
-          spacing={ri.scale(30 * 2)}
+          spacing={ri.scale(LIST_ITEM_CONF.SAPCING)}
         />
       )}
     </Container>

com.twin.app.shoptime/src/views/OnSalePanel/CategoryNavItem/CategoryNavItem.jsx

@@ -1,36 +1,46 @@
-import React from 'react';
+import React, { memo, useCallback } from "react";
 
-import classNames from 'classnames';
+import classNames from "classnames";
 
-import Spottable from '@enact/spotlight/Spottable';
+import Spottable from "@enact/spotlight/Spottable";
 
-import css from './CategoryNavItem.module.less';
+import css from "./CategoryNavItem.module.less";
 
 const SpottableComponent = Spottable("div");
 
-export default function CategoryNavItem({
+export default memo(function CategoryNavItem({
   categoryInfos,
-  currentLgCatCd,
+  currentCategoryCode,
   onCategoryNavClick,
   index,
   ...rest
 }) {
+  const {
+    lgCatCd: categoryCode,
+    lgCatNm: categoryName, //
+  } = categoryInfos[index];
+
+  const handleClick = useCallback(
+    (categoryCode) => {
+      onCategoryNavClick && onCategoryNavClick(categoryCode);
+    },
+    [categoryCode, currentCategoryCode]
+  );
+
   return (
     <SpottableComponent
       className={classNames(
         css.category,
-        categoryInfos[index].lgCatCd === currentLgCatCd && css.selected
+        categoryCode === currentCategoryCode && css.selected
       )}
-      key={categoryInfos[index].lgCatCd}
-      onClick={() => onCategoryNavClick(categoryInfos[index].lgCatCd)}
+      key={categoryCode}
+      onClick={() => handleClick(categoryCode)}
       {...rest}
     >
       <div>
-        <span
-          className={css[`category-icon-${categoryInfos[index].lgCatCd}`]}
-        />
+        <span className={css[`category-icon-${categoryCode}`]} />
       </div>
-      <strong>{categoryInfos[index].lgCatNm}</strong>
+      <strong>{categoryName}</strong>
     </SpottableComponent>
   );
-}
+});

com.twin.app.shoptime/src/views/OnSalePanel/CategoryNavItem/CategoryNavItem.module.less

@@ -91,8 +91,7 @@
 
   &::after {
     content: "";
-    position: absolute;
-    bottom: 0;
+    .position(@position: absolute, @bottom: 0);
     display: block;
     .size(@w: 100%, @h:6px);
     background-color: transparent;

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

@@ -1,23 +1,16 @@
-import React, {
-  useEffect,
-  useState,
-} from 'react';
+import React, { useCallback, useEffect, useState } from "react";
 
-import {
-  useDispatch,
-  useSelector,
-} from 'react-redux';
+import { useDispatch, useSelector } from "react-redux";
 
-import { getOnSaleInfo } from '../../actions/onSaleActions';
-import TBody from '../../components/TBody/TBody';
-import TItemCard from '../../components/TItemCard/TItemCard';
-import TopButton from '../../components/TopButton/TopButton';
-import TPanel from '../../components/TPanel/TPanel';
-import { SpotlightIds } from '../../utils/SpotlightIds';
-import CategoryNav from '../OnSalePanel/CategoryNav/CategoryNav';
-import OnSaleProductsGrid
-  from '../OnSalePanel/OnSaleProductsGrid/OnSaleProductsGrid';
-import css from './OnSalePanel.module.less';
+import { getOnSaleInfo } from "../../actions/onSaleActions";
+import TBody from "../../components/TBody/TBody";
+import TItemCard from "../../components/TItemCard/TItemCard";
+import TopButton from "../../components/TopButton/TopButton";
+import TPanel from "../../components/TPanel/TPanel";
+import { SpotlightIds } from "../../utils/SpotlightIds";
+import CategoryNav from "../OnSalePanel/CategoryNav/CategoryNav";
+import OnSaleProductsGrid from "../OnSalePanel/OnSaleProductsGrid/OnSaleProductsGrid";
+import css from "./OnSalePanel.module.less";
 
 export default function OnSalePanel() {
   const dispatch = useDispatch();
@@ -27,38 +20,47 @@ export default function OnSalePanel() {
   );
   const saleInfos = useSelector((state) => state.onSale.onSaleData.saleInfos);
 
-  const [currentLgCatCd, setCurrentLgCatCd] = useState();
+  const [currentCategoryCode, setCurrentCategoryCode] = useState();
+  const [targetId, setTargetId] = useState();
 
-  const targetId = saleInfos[0].saleProductInfos[0].prdtId;
+  const handleCategoryNavClick = useCallback(
+    (categoryCode) => {
+      if (currentCategoryCode === categoryCode) {
+        return;
+      }
 
-  const handleCategoryNavClick = (lgCatCd) => {
-    if (currentLgCatCd === lgCatCd) {
-      return;
-    }
-
-    setCurrentLgCatCd(lgCatCd);
-  };
+      setCurrentCategoryCode(categoryCode);
+    },
+    [currentCategoryCode]
+  );
 
   useEffect(() => {
-    if (categoryInfos && !currentLgCatCd) {
+    if (categoryInfos && !currentCategoryCode) {
       const initialLgCatCd = categoryInfos[0].lgCatCd;
-      setCurrentLgCatCd(initialLgCatCd);
+      setCurrentCategoryCode(initialLgCatCd);
     }
   }, []);
 
   useEffect(() => {
-    if (currentLgCatCd) {
+    if (currentCategoryCode) {
       dispatch(
-        getOnSaleInfo({ categoryIncFlag: "Y", lgCatCd: currentLgCatCd })
+        getOnSaleInfo({ categoryIncFlag: "Y", lgCatCd: currentCategoryCode })
       );
     }
-  }, [currentLgCatCd]);
+  }, [currentCategoryCode, dispatch]);
+
+  useEffect(() => {
+    if (saleInfos) {
+      const id = saleInfos[0].saleProductInfos[0].prdtId;
+      setTargetId(id);
+    }
+  }, [dispatch, saleInfos]);
 
   return (
     <TPanel className={css.container}>
       <CategoryNav
         categoryInfos={categoryInfos}
-        currentLgCatCd={currentLgCatCd}
+        currentCategoryCode={currentCategoryCode}
         onCategoryNavClick={handleCategoryNavClick}
       />
       <TBody className={css.tBody}>