diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx index f7f52f1d..f030c7c9 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx @@ -33,7 +33,6 @@ const Container = SpotlightContainerDecorator( export default function HomeBannerTemplate1() { const dispatch = useDispatch(); const [bannerInfos, setBannerInfos] = useState([]); - const [onFocus, setOnFocus] = useState(true); const [vctpImage1, setVctpImage1] = useState(); const [vctpImage2, setVctpImage2] = useState(); const [wdthImage1, setwdthImage1] = useState(); @@ -68,10 +67,6 @@ export default function HomeBannerTemplate1() { } }, [homeMainContentsBannerInfos, dispatch]); - const keyDown = useCallback(() => {}, []); - - const onClickBanner = useCallback(() => {}, []); - return (
@@ -99,12 +94,7 @@ export default function HomeBannerTemplate1() { /> ) : ( - + ); })} @@ -127,12 +117,7 @@ export default function HomeBannerTemplate1() { ) : ( - + ); })} @@ -149,7 +134,7 @@ export default function HomeBannerTemplate1() { bannerData={item} index={index} key={index} - imageType={true} + imageType={false} /> ) : item.banrLctnNo === "3" && item.shptmDspyTpNm == "Random" ? ( @@ -157,16 +142,11 @@ export default function HomeBannerTemplate1() { bannerData={item} index={index} key={index} - imageType={true} + imageType={false} /> ) : ( - + ); })} @@ -182,7 +162,7 @@ export default function HomeBannerTemplate1() { bannerData={item} index={index} key={index} - imageType={true} + imageType={false} /> ) : item.banrLctnNo === "4" && item.shptmDspyTpNm == "Random" ? ( @@ -190,16 +170,11 @@ export default function HomeBannerTemplate1() { bannerData={item} index={index} key={index} - imageType={true} + imageType={false} /> ) : ( - + ); })} diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.jsx index 22e1d2ae..69146afe 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.jsx @@ -33,7 +33,6 @@ const Container = SpotlightContainerDecorator( export default function HomeBannerTemplate2() { const dispatch = useDispatch(); const [bannerInfos, setBannerInfos] = useState([]); - const [onFocus, setOnFocus] = useState(true); const [vctpImage1, setVctpImage1] = useState(); const [vctpImage2, setVctpImage2] = useState(); const [wdthImage1, setwdthImage1] = useState(); @@ -68,7 +67,6 @@ export default function HomeBannerTemplate2() { } }, [homeMainContentsBannerInfos, dispatch]); - const onClickBanner = useCallback(() => {}, []); return (
@@ -95,12 +93,7 @@ export default function HomeBannerTemplate2() { /> ) : ( - + ); })} @@ -129,12 +122,7 @@ export default function HomeBannerTemplate2() { /> ) : ( - + ); })} @@ -162,12 +150,7 @@ export default function HomeBannerTemplate2() { /> ) : ( - + ); })} @@ -196,12 +179,7 @@ export default function HomeBannerTemplate2() { /> ) : ( - + ); })} diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.jsx index 9ea42a4e..68577fa3 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.jsx @@ -33,7 +33,6 @@ const Container = SpotlightContainerDecorator( export default function HomeBannerTemplate3() { const dispatch = useDispatch(); const [bannerInfos, setBannerInfos] = useState([]); - const [onFocus, setOnFocus] = useState(false); const [vctpImage1, setVctpImage1] = useState(); const [vctpImage2, setVctpImage2] = useState(); const [wdthImage1, setwdthImage1] = useState(); @@ -47,10 +46,6 @@ export default function HomeBannerTemplate3() { (state) => state.home.mainContentsData.homeTopDisplayInfos ); - useEffect(() => { - Spotlight.focus("banner01"); - }, []); - useEffect(() => { if (homeTopDisplayInfos) { setVctpImage1(homeTopDisplayInfos[0].vtctpImgPath1); @@ -72,19 +67,6 @@ export default function HomeBannerTemplate3() { } }, [homeMainContentsBannerInfos, dispatch]); - const onClickBanner = useCallback(() => { - console.log("클릭"); - }, []); - - // 포커스가 들어오면 롤링 중지 - const _onFocus = useCallback(() => { - setOnFocus(true); - }, [onFocus]); - - const _onBlur = useCallback(() => { - setOnFocus(false); - }, [onFocus]); - return (
@@ -109,24 +91,14 @@ export default function HomeBannerTemplate3() { /> ) : ( - + ); })}
{/* 배너2 */} -
+
{bannerInfos && bannerInfos.map((item, index) => { return item.banrLctnNo === "2" && @@ -136,7 +108,6 @@ export default function HomeBannerTemplate3() { index={index} key={index} imageType={false} - onFocus={onFocus} /> ) : item.banrLctnNo === "2" && item.shptmDspyTpNm == "Random" ? ( ) : ( - + ); })} @@ -181,12 +147,7 @@ export default function HomeBannerTemplate3() { /> ) : ( - + ); })} @@ -214,12 +175,7 @@ export default function HomeBannerTemplate3() { /> ) : ( - + ); })} diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx index 346cb683..2ac2f911 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx @@ -9,50 +9,54 @@ import VideoPlay from '@enact/sandstone/VideoPlayer'; import CustomImage from '../../../components/CustomImage/CustomImage'; import HomeTodayDeal from '../HomeTodayDeal/HomeTodayDeal'; -export default function RollingUnit({ bannerData, index, imageType, onFocus }) { +export default function RollingUnit({ bannerData, imageType }) { const bannerDetailInfos = bannerData.bannerDetailInfos; const bannerDetailInfosLength = bannerData.bannerDetailInfos.length; - const [rollingData, setRollingData] = useState([]); const [shptmBanrTpNm, setShptmBanrTpNm] = useState(); const [count, setCount] = useState(10); const [detailLenghth, setDetailLength] = useState(); const [startIndex, setStartIndex] = useState(0); const [lastIndex, setLastIndex] = useState(); const [currentIndex, setCurrentIndex] = useState(0); - const [number, setNumber] = useState(0); + const [onFocus, setOnFocus] = useState(false); const getIndex = (index) => { setCurrentIndex(index); setStartIndex(index); }; + const getFocus = (focus) => { + setOnFocus(focus); + }; + useEffect(() => { if (bannerData) { - setRollingData(bannerDetailInfos); setDetailLength(bannerDetailInfosLength); setShptmBanrTpNm(bannerDetailInfos[startIndex].shptmBanrTpNm); setLastIndex(bannerDetailInfosLength - 1); } - - console.log(startIndex, "useEffect HOOK"); }, [bannerData, startIndex]); useEffect(() => { - // 포커스가 없을 경우에만 롤링 if (bannerDetailInfosLength === 1) { return; } - if (true) { + if (onFocus === false) { const id = setInterval(() => { setCount((count) => count - 1); }, 1000); if (count === 0) { + if (startIndex > lastIndex) { + setStartIndex(0); + } + setStartIndex(startIndex + 1); setCount(10); clearInterval(id); + if (startIndex === lastIndex) { setStartIndex(0); } @@ -82,8 +86,8 @@ export default function RollingUnit({ bannerData, index, imageType, onFocus }) { rolling={bannerDetailInfosLength === 1 ? false : true} lastIndex={lastIndex} currentIndex={startIndex} - number={number} getIndex={getIndex} + getFocus={getFocus} /> ) : null} diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.jsx index d3891570..7d538358 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.jsx @@ -26,16 +26,14 @@ export default function HomeTodayDeal({ startIndex, lastIndex, currentIndex, - number, getIndex, + getFocus, ...rest }) { - const handleClick = () => ( - (productId) => { - console.log("상세 페이지 이동"); - }, - [productId] - ); + const handleClick = () => { + let proId = productId; + console.log("상품ID : ", proId); + }; const handlePrev = () => { if (currentIndex === 0) { @@ -51,6 +49,16 @@ export default function HomeTodayDeal({ getIndex(currentIndex + 1); }; + const _onFocus = () => { + console.log("포커스 온"); + getFocus(true); + }; + + const _onBlur = () => { + console.log("포커스 오프"); + getFocus(false); + }; + const parsePriceInfo = useCallback( (priceInfo) => { const priceParts = priceInfo @@ -93,9 +101,11 @@ export default function HomeTodayDeal({ )} handleClick(productId)} + onClick={handleClick} + onFocus={_onFocus} + onBlur={_onBlur} > -
handleClick(productId)}> +
{productName}
{discountedPrice}