From 2aa6f0de256ea1d16b602ee00e9ff9d3da479d3c Mon Sep 17 00:00:00 2001 From: "junghoon86.park" Date: Thu, 15 Feb 2024 18:58:09 +0900 Subject: [PATCH] =?UTF-8?q?[HomePanel]=20=EB=A1=A4=EB=A7=81=EB=B6=80?= =?UTF-8?q?=EB=B6=84=20=EB=B3=80=EA=B2=BD=EA=B1=B4(=EB=AF=B8=EC=99=84?= =?UTF-8?q?=EC=84=B1)=20=20-=20HomeBannerTemplate3=ED=8F=AC=EC=BB=A4?= =?UTF-8?q?=EC=8A=A4=20=EA=B8=B0=EB=B3=B8=EA=B0=92=EB=B3=80=EA=B2=BD=20=20?= =?UTF-8?q?-=20RollingUnit=20=EB=B3=80=EA=B2=BD.=20=20-=20HomeTodayDeal=20?= =?UTF-8?q?=EC=A2=8C=EC=9A=B0=EB=B2=84=ED=8A=BC=20=EC=9C=84=EC=B9=98?= =?UTF-8?q?=EB=B3=80=EA=B2=BD.=20=20-=20RollingUnit=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=ED=8C=8C=EC=9D=BC=EC=83=9D=EC=84=B1.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../HomeBanner/HomeBannerTemplate3.jsx | 4 +- .../HomePanel/HomeBanner/RollingUnit.jsx | 106 ++++++++++++------ .../HomeBanner/RollingUnit.module.less | 66 +++++++++++ .../HomePanel/HomeTodayDeal/HomeTodayDeal.jsx | 49 +------- 4 files changed, 145 insertions(+), 80 deletions(-) create mode 100644 com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.module.less 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 581972c8..5f3adac1 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.jsx @@ -32,7 +32,7 @@ const Container = SpotlightContainerDecorator( export default function HomeBannerTemplate3() { const dispatch = useDispatch(); const [bannerInfos, setBannerInfos] = useState([]); - const [onFocus, setOnFocus] = useState(true); + const [onFocus, setOnFocus] = useState(false); const [vctpImage1, setVctpImage1] = useState(); const [vctpImage2, setVctpImage2] = useState(); const [wdthImage1, setwdthImage1] = useState(); @@ -88,6 +88,7 @@ export default function HomeBannerTemplate3() {
{/* 배너1 */} + {bannerInfos && bannerInfos.map((item, index) => { @@ -155,6 +156,7 @@ export default function HomeBannerTemplate3() {
{/* 배너3 */} + { + setCurrentPage((currentPage) => currentPage + 1); + }, [currentPage]); + + const handlePrev = useCallback(() => { + setCurrentPage((currentPage) => + currentPage > 0 ? currentPage - 1 : currentPage + ); + }, [currentPage]); + + const [customInterval, setCustomeInterval] = useState(10000); + const intervalRef = useRef(null); + const useInterval = (callback, delay) => { + const savedCallback = useRef(); + useEffect(() => { + savedCallback.current = callback; + }, [callback]); + + useEffect(() => { + function tick() { + savedCallback.current(); + } + if (delay !== null) { + let id = setInterval(tick, delay); + return () => clearInterval(id); + } + }, [delay]); + }; + + useInterval(() => { + if (onFocus === false) { + if (currentPage === lastIndex) { + setCurrentPage(0); + } else { + setCurrentPage(currentPage + 1); + } + } + }, customInterval); useEffect(() => { if (bannerData) { @@ -40,51 +84,43 @@ export default function RollingUnit({ bannerData, index, imageType, onFocus }) { setLastIndex(bannerDetailInfosLength - 1); } }, [bannerData, shptmBanrTpNm]); - - // 더미 데이터 테스트용 useEffect(() => { - // 포커스가 없을 경우에만 롤링 - if (bannerDetailInfosLength === 1) { - return; + if (intervalRef.current) { } + }, [intervalRef]); - if (onFocus === false) { - const id = setInterval(() => { - setCount((count) => count - 1); - }, 1000); - - if (count === 0) { - setStartIndex(startIndex + 1); - setCount(10); - clearInterval(id); - if (startIndex === lastIndex) { - setStartIndex(0); - } - } - return () => clearInterval(id); - } - }, [count, onFocus]); return ( - <> +
+ {currentPage !== 0 && ( +
+ )} {bannerDetailInfos && - bannerDetailInfos[startIndex].shptmBanrTpNm === "Image Banner" ? ( + bannerDetailInfos[currentPage].shptmBanrTpNm === "Image Banner" ? ( - ) : bannerDetailInfos[startIndex].shptmBanrTpNm === "LIVE" || - bannerDetailInfos[startIndex].shptmBanrTpNm === "VOD" ? ( + ) : bannerDetailInfos[currentPage].shptmBanrTpNm === "LIVE" || + bannerDetailInfos[currentPage].shptmBanrTpNm === "VOD" ? ( - ) : bannerDetailInfos[startIndex].shptmBanrTpNm === "Today's Deals" ? ( + ) : bannerDetailInfos[currentPage].shptmBanrTpNm === "Today's Deals" ? ( ) : null} - + {lastIndex !== currentPage && ( +
+ )} +
); } diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.module.less b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.module.less new file mode 100644 index 00000000..031ed959 --- /dev/null +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.module.less @@ -0,0 +1,66 @@ +@import "../../../style/CommonStyle.module.less"; +@import "../../../style/utils.module.less"; + +.container { + position: relative; + .leftBtn { + .position(@position: absolute, @top: 408px, @right: auto, @bottom: auto, @left: 18px); + .size(@w: 42px, @h: 42px); + background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_nor.png"); + background-size: 42px 42px; + background-position: center center; + cursor: pointer; + z-index: 1; + &:focus, + &:focus-within, + &:hover, + &:active { + background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_foc.png"); + } + } + .rightBtn { + .position(@position: absolute, @top: 408px, @right: 18px, @bottom: auto, @left: auto); + .size(@w: 42px, @h: 42px); + background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_nor.png"); + background-size: 42px 42px; + background-position: center center; + cursor: pointer; + z-index: 1; + &:focus, + &:focus-within, + &:hover, + &:active { + background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_foc.png"); + } + } + &.horizontal { + .leftBtn { + .position(@position: absolute, @top: 189px, @right: auto, @bottom: auto, @left: 18px); + .size(@w: 42px, @h: 42px); + background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_nor.png"); + background-size: 42px 42px; + background-position: center center; + z-index: 1; + &:focus, + &:focus-within, + &:hover, + &:active { + background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_foc.png"); + } + } + .rightBtn { + .position(@position: absolute, @top: 189px, @right: 18px, @bottom: auto, @left:auto); + .size(@w: 42px, @h: 42px); + background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_nor.png"); + background-size: 42px 42px; + background-position: center center; + z-index: 1; + &:focus, + &:focus-within, + &:hover, + &:active { + background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_foc.png"); + } + } + } +} 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 2bddcfbb..a456cfee 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.jsx @@ -1,12 +1,9 @@ -import React, { useCallback } from 'react'; +import React, { useCallback } from "react"; -import classNames from 'classnames'; +import classNames from "classnames"; -import Spottable from '@enact/spotlight/Spottable'; - -import css from './HomeTodayDeal.module.less'; - -const SpottableComponent = Spottable("div"); +import usePriceInfo from "../../../hooks/usePriceInfo"; +import css from "./HomeTodayDeal.module.less"; export default function HomeTodayDeal({ children, @@ -18,7 +15,6 @@ export default function HomeTodayDeal({ productName, soldoutFlag, isHorizontal, - rolling, ...rest }) { const handleClick = useCallback( @@ -27,34 +23,8 @@ export default function HomeTodayDeal({ }, [productId] ); - - const parsePriceInfo = useCallback( - (priceInfo) => { - const priceParts = priceInfo - .split("|") - .filter((part) => part !== "N") - .map((item) => item.trim()); - - let originalPrice, discountedPrice, discountRate; - if (priceParts.length === 4) { - [originalPrice, discountedPrice, , discountRate] = priceParts; - } else if (priceParts.length === 2) { - [originalPrice, discountedPrice] = priceParts; - discountRate = null; - } else { - originalPrice = null; - discountedPrice = null; - discountRate = null; - } - - return { originalPrice, discountedPrice, discountRate }; - }, - [priceInfo] - ); - const { originalPrice, discountedPrice, discountRate } = - parsePriceInfo(priceInfo); - + usePriceInfo(priceInfo); return (
- - {rolling == true ? ( - <> -
-
- - ) : ( - <> - )}
); }