From e997dc640e7ad37039ffe11b95e6969382aa119d Mon Sep 17 00:00:00 2001 From: "younghoon100.park" Date: Mon, 5 Feb 2024 11:20:23 +0900 Subject: [PATCH] =?UTF-8?q?[OnSalePanel]=20=20OnSalePanel,=20CategoryNav?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Detail Notes : 1. OnSalePanel, targetId 관련 로직 수정 2. CategoryNav, CategoryNavItem 최적화 --- .../OnSalePanel/CategoryNav/CategoryNav.jsx | 52 ++++++++------ .../CategoryNavItem/CategoryNavItem.jsx | 38 +++++++---- .../CategoryNavItem.module.less | 3 +- .../src/views/OnSalePanel/OnSalePanel.jsx | 68 ++++++++++--------- 4 files changed, 90 insertions(+), 71 deletions(-) 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 2423e1c5..19548e7b 100644 --- a/com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/CategoryNav.jsx +++ b/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 ( - - ); - }; + const renderItem = useCallback( + ({ index, ...rest }) => { + return ( + + ); + }, + [categoryInfos, currentCategoryCode, onCategoryNavClick] + ); return ( @@ -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)} /> )} diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/CategoryNavItem/CategoryNavItem.jsx b/com.twin.app.shoptime/src/views/OnSalePanel/CategoryNavItem/CategoryNavItem.jsx index bcc9bde4..a3884cd2 100644 --- a/com.twin.app.shoptime/src/views/OnSalePanel/CategoryNavItem/CategoryNavItem.jsx +++ b/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 ( onCategoryNavClick(categoryInfos[index].lgCatCd)} + key={categoryCode} + onClick={() => handleClick(categoryCode)} {...rest} >
- +
- {categoryInfos[index].lgCatNm} + {categoryName} ); -} +}); diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/CategoryNavItem/CategoryNavItem.module.less b/com.twin.app.shoptime/src/views/OnSalePanel/CategoryNavItem/CategoryNavItem.module.less index e45dc2a2..71f6ff1b 100644 --- a/com.twin.app.shoptime/src/views/OnSalePanel/CategoryNavItem/CategoryNavItem.module.less +++ b/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; diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx b/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx index bf77df1a..0a419650 100644 --- a/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx +++ b/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 (