diff --git a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx index 73b385f4..f4d0a912 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import { useSelector } from "react-redux"; @@ -23,11 +23,15 @@ const BestSeller = () => { const bestSellerDatas = useSelector( (state) => state.product.bestSellerData.bestSeller ); + const [drawChk, setDrawChk] = useState(false); const { getScrollTo, scrollLeft } = useScrollTo(); const { handleScrollReset, handleStopScrolling } = useScrollReset( scrollLeft, true ); + useEffect(() => { + setDrawChk(true); + }, [bestSellerDatas]); return ( @@ -53,7 +57,9 @@ const BestSeller = () => { /> ))} - + {drawChk && ( + + )} ); diff --git a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx index aca563f2..1dd249ee 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import { useSelector } from "react-redux"; @@ -21,13 +21,15 @@ const Container = SpotlightContainerDecorator( const PopularShow = ({ ...rest }) => { const topInfos = useSelector((state) => state.main.top20ShowData.topInfos); - + const [drawChk, setDrawChk] = useState(false); const { getScrollTo, scrollLeft } = useScrollTo(); const { handleScrollReset, handleStopScrolling } = useScrollReset( scrollLeft, true ); - + useEffect(() => { + setDrawChk(true); + }, [topInfos]); return ( @@ -38,24 +40,28 @@ const PopularShow = ({ ...rest }) => { noScrollByWheel > {topInfos && - topInfos.map((item, index) => ( - - ))} + topInfos.map((item, index) => { + return ( + + ); + })} - + {drawChk && ( + + )} ); diff --git a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx index c08334b1..ca163ad5 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx @@ -31,7 +31,7 @@ const SubCategory = () => { (state) => state.main.subCategoryData.categoryItemInfos ); const [currentLgCatCd, setCurrentLgCatCd] = useState(null); - + const [drawChk, setDrawChk] = useState(false); const handleCategoryNav = (lgCatCd, LgCatNm) => { if (currentLgCatCd === lgCatCd) { return; @@ -66,6 +66,7 @@ const SubCategory = () => { false ) ); + setDrawChk(true); } }, [currentLgCatCd, dispatch]); @@ -81,7 +82,6 @@ const SubCategory = () => { className={css.home} direction="horizontal" cbScrollTo={getScrollTo} - noScrollByWheel > {categoryItemInfos && categoryItemInfos.map((item, index) => { @@ -99,7 +99,9 @@ const SubCategory = () => { ); })} - + {drawChk && ( + + )} );