[onSalePanel] CategoryNav, 함수 추가 및 props 변경

Detail Notes :

1. OnSalePanel.jsx, handleCategoryNavClick 삭제
2. CategoryNav.jsx, props 변경, handleCategoryNavClick 추가
This commit is contained in:
younghoon100.park
2024-02-13 09:55:14 +09:00
parent 8c760b0844
commit f75a9657db
2 changed files with 16 additions and 16 deletions

View File

@@ -21,22 +21,33 @@ const Container = SpotlightContainerDecorator(
export default function CategoryNav({ export default function CategoryNav({
categoryInfos, categoryInfos,
currentCategoryCode, currentCategoryCode,
onCategoryNavClick, setCurrentCategoryCode,
...rest ...rest
}) { }) {
const handleCategoryNavClick = useCallback(
(categoryCode) => {
if (currentCategoryCode === categoryCode) {
return;
}
setCurrentCategoryCode(categoryCode);
},
[currentCategoryCode]
);
const renderItem = useCallback( const renderItem = useCallback(
({ index, ...rest }) => { ({ index, ...rest }) => {
return ( return (
<CategoryNavItem <CategoryNavItem
categoryInfos={categoryInfos} categoryInfos={categoryInfos}
currentCategoryCode={currentCategoryCode} currentCategoryCode={currentCategoryCode}
onCategoryNavClick={onCategoryNavClick} onCategoryNavClick={handleCategoryNavClick}
index={index} index={index}
{...rest} {...rest}
/> />
); );
}, },
[categoryInfos, currentCategoryCode, onCategoryNavClick] [categoryInfos, currentCategoryCode, handleCategoryNavClick]
); );
return ( return (

View File

@@ -1,4 +1,4 @@
import React, { useCallback, useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
@@ -22,17 +22,6 @@ export default function OnSalePanel() {
const [currentCategoryCode, setCurrentCategoryCode] = useState(); const [currentCategoryCode, setCurrentCategoryCode] = useState();
const [targetId, setTargetId] = useState(); const [targetId, setTargetId] = useState();
const handleCategoryNavClick = useCallback(
(categoryCode) => {
if (currentCategoryCode === categoryCode) {
return;
}
setCurrentCategoryCode(categoryCode);
},
[currentCategoryCode]
);
useEffect(() => { useEffect(() => {
if (categoryInfos && !currentCategoryCode) { if (categoryInfos && !currentCategoryCode) {
const initialLgCatCd = categoryInfos[0].lgCatCd; const initialLgCatCd = categoryInfos[0].lgCatCd;
@@ -60,7 +49,7 @@ export default function OnSalePanel() {
<CategoryNav <CategoryNav
categoryInfos={categoryInfos} categoryInfos={categoryInfos}
currentCategoryCode={currentCategoryCode} currentCategoryCode={currentCategoryCode}
onCategoryNavClick={handleCategoryNavClick} setCurrentCategoryCode={setCurrentCategoryCode}
/> />
<TBody className={css.tBody}> <TBody className={css.tBody}>
{saleInfos && {saleInfos &&