[HomePanel] 롤링부분 변경건(미완성)

- HomeBannerTemplate3포커스 기본값변경
 - RollingUnit 변경.
 - HomeTodayDeal 좌우버튼 위치변경.
 - RollingUnit 스타일파일생성.

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() {
     <Container className={css.homeTemplateBox} spotlightId="top">
       <div className={css.mainBox}>
         {/* 배너1 */}
+
         <SpottableComponent className={css.imgBox} spotlightId="banner01">
           {bannerInfos &&
             bannerInfos.map((item, index) => {
@@ -155,6 +156,7 @@ export default function HomeBannerTemplate3() {
 
         <div className={css.dualBox}>
           {/* 배너3 */}
+
           <SpottableComponent
             className={classNames(css.videoBox, css.topBox)}
             spotlightId="banner03"

com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx

@@ -1,9 +1,12 @@
 import React, {
   useCallback,
   useEffect,
+  useRef,
   useState,
 } from 'react';
 
+import classNames from 'classnames';
+
 import VideoPlay from '@enact/sandstone/VideoPlayer';
 
 import image1 from '../../../../assets/Image/img-home-banner-h-01.png';
@@ -12,6 +15,7 @@ import image3 from '../../../../assets/Image/img-home-banner-v-01.png';
 import image4 from '../../../../assets/Image/img-home-banner-v-02.png';
 import CustomImage from '../../../components/CustomImage/CustomImage';
 import HomeTodayDeal from '../HomeTodayDeal/HomeTodayDeal';
+import css from './RollingUnit.module.less';
 
 // 더미 데이터
 const imgArr = [
@@ -31,6 +35,46 @@ export default function RollingUnit({ bannerData, index, imageType, onFocus }) {
   const [detailLenghth, setDetailLength] = useState();
   const [startIndex, setStartIndex] = useState(0);
   const [lastIndex, setLastIndex] = useState();
+  const [currentPage, setCurrentPage] = useState(0);
+
+  const handleNext = useCallback(() => {
+    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 (intervalRef.current) {
-    if (bannerDetailInfosLength === 1) {
-      return;
     }
+  }, [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 (
-    <>
+    <div
+      className={classNames(
+        css.container,
+        imageType === true && css.horizontal
+      )}
+      ref={intervalRef}
+    >
+      {currentPage !== 0 && (
+        <div className={css.leftBtn} onClick={handlePrev}></div>
+      )}
       {bannerDetailInfos &&
-      bannerDetailInfos[startIndex].shptmBanrTpNm === "Image Banner" ? (
+      bannerDetailInfos[currentPage].shptmBanrTpNm === "Image Banner" ? (
         <CustomImage></CustomImage>
-      ) : bannerDetailInfos[startIndex].shptmBanrTpNm === "LIVE" ||
+      ) : bannerDetailInfos[currentPage].shptmBanrTpNm === "LIVE" ||
-        bannerDetailInfos[startIndex].shptmBanrTpNm === "VOD" ? (
+        bannerDetailInfos[currentPage].shptmBanrTpNm === "VOD" ? (
         <VideoPlay></VideoPlay>
-      ) : bannerDetailInfos[startIndex].shptmBanrTpNm === "Today's Deals" ? (
+      ) : bannerDetailInfos[currentPage].shptmBanrTpNm === "Today's Deals" ? (
         <HomeTodayDeal
-          imgAlt={bannerDetailInfos[startIndex].imgAlt}
+          imgAlt={bannerDetailInfos[currentPage].imgAlt}
-          imageName={bannerDetailInfos[startIndex].tmnlImgNm}
+          imageName={bannerDetailInfos[currentPage].tmnlImgNm}
-          imgPath={bannerDetailInfos[startIndex].tmnlImgPath}
+          imgPath={bannerDetailInfos[currentPage].tmnlImgPath}
-          priceInfo={bannerDetailInfos[startIndex].priceInfo}
+          priceInfo={bannerDetailInfos[currentPage].priceInfo}
-          productId={bannerDetailInfos[startIndex].prdtId}
+          productId={bannerDetailInfos[currentPage].prdtId}
-          productName={bannerDetailInfos[startIndex].prdtNm}
+          productName={bannerDetailInfos[currentPage].prdtNm}
-          soldoutFlag={bannerDetailInfos[startIndex].soldoutFlag}
+          soldoutFlag={bannerDetailInfos[currentPage].soldoutFlag}
           isHorizontal={imageType} // TRUE, FALSE
-          rolling={bannerDetailInfosLength === 1 ? false : true}
         />
       ) : null}
-    </>
+      {lastIndex !== currentPage && (
+        <div className={css.rightBtn} onClick={handleNext}></div>
+      )}
+    </div>
   );
 }

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");
+      }
+    }
+  }
+}

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 usePriceInfo from "../../../hooks/usePriceInfo";
-
+import css from "./HomeTodayDeal.module.less";
-import css from './HomeTodayDeal.module.less';
-
-const SpottableComponent = Spottable("div");
 
 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 (
     <div
       className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
@@ -74,15 +44,6 @@ export default function HomeTodayDeal({
       <div className={css.itemImgBox}>
         <img src={imgPath} />
       </div>
-
-      {rolling == true ? (
-        <>
-          <div className={css.leftBtn}></div>
-          <div className={css.rightBtn}></div>
-        </>
-      ) : (
-        <></>
-      )}
     </div>
   );
 }