[홈패널] 롤링 수정

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

@@ -34,6 +34,7 @@ export default function HomeBannerTemplate3() {
   const [bannerInfos, setBannerInfos] = useState([]);
   const [vctpImage, setVctpImage] = useState(null);
   const [wdthImage, setWdthImage] = useState(null);
+  const [onFocus, setOnFocus] = useState(true);
 
   const homeMainContentsBannerInfos = useSelector(
     (state) => state.home.mainContentsData.homeMainContentsBannerInfos
@@ -78,6 +79,15 @@ export default function HomeBannerTemplate3() {
 
   const onClickBanner = useCallback(() => {}, []);
 
+  // 포커스가 들어오면 롤링 중지
+  const _onFocus = useCallback(() => {
+    setOnFocus(true);
+  }, [onFocus]);
+
+  const _onBlur = useCallback(() => {
+    setOnFocus(false);
+  }, [onFocus]);
+
   return (
     <Container className={css.homeTemplateBox}>
       <div className={css.mainBox}>
@@ -87,9 +97,19 @@ export default function HomeBannerTemplate3() {
             bannerInfos.map((item, index) => {
               return item.banrLctnNo === "1" &&
                 item.shptmDspyTpNm == "Rolling" ? (
-                <Rolling bannerData={item} key={index} imageType={false} />
+                <Rolling
+                  bannerData={item}
+                  index={index}
+                  key={index}
+                  imageType={false}
+                />
               ) : item.banrLctnNo === "1" && item.shptmDspyTpNm == "Random" ? (
-                <Random bannerData={item} key={index} imageType={false} />
+                <Random
+                  bannerData={item}
+                  index={index}
+                  key={index}
+                  imageType={false}
+                />
               ) : (
                 <CustomImage
                   key={index}
@@ -102,7 +122,11 @@ export default function HomeBannerTemplate3() {
         </SpottableComponent>
 
         {/* 배너2 */}
-        <SpottableComponent className={css.imgBox}>
+        <SpottableComponent
+          className={css.imgBox}
+          onFocus={_onFocus}
+          onBlur={_onBlur}
+        >
           {bannerInfos &&
             bannerInfos.map((item, index) => {
               return item.banrLctnNo === "2" &&
@@ -112,6 +136,7 @@ export default function HomeBannerTemplate3() {
                   index={index}
                   key={index}
                   imageType={false}
+                  onFocus={onFocus}
                 />
               ) : item.banrLctnNo === "2" && item.shptmDspyTpNm == "Random" ? (
                 <Random
@@ -138,10 +163,20 @@ export default function HomeBannerTemplate3() {
               bannerInfos.map((item, index) => {
                 return item.banrLctnNo === "3" &&
                   item.shptmDspyTpNm == "Rolling" ? (
-                  <Rolling bannerData={item} key={index} imageType={true} />
+                  <Rolling
+                    bannerData={item}
+                    index={index}
+                    key={index}
+                    imageType={true}
+                  />
                 ) : item.banrLctnNo === "3" &&
                   item.shptmDspyTpNm == "Random" ? (
-                  <Random bannerData={item} key={index} imageType={true} />
+                  <Random
+                    bannerData={item}
+                    index={index}
+                    key={index}
+                    imageType={true}
+                  />
                 ) : (
                   <CustomImage
                     key={index}
@@ -161,10 +196,20 @@ export default function HomeBannerTemplate3() {
               bannerInfos.map((item, index) => {
                 return item.banrLctnNo === "4" &&
                   item.shptmDspyTpNm == "Rolling" ? (
-                  <Rolling bannerData={item} key={index} imageType={true} />
+                  <Rolling
+                    bannerData={item}
+                    index={index}
+                    key={index}
+                    imageType={true}
+                  />
                 ) : item.banrLctnNo === "4" &&
                   item.shptmDspyTpNm == "Random" ? (
-                  <Random bannerData={item} key={index} imageType={true} />
+                  <Random
+                    bannerData={item}
+                    index={index}
+                    key={index}
+                    imageType={true}
+                  />
                 ) : (
                   <CustomImage
                     key={index}

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

@@ -6,40 +6,85 @@ import React, {
 
 import VideoPlay from '@enact/sandstone/VideoPlayer';
 
+import image1 from '../../../../assets/Image/img-home-banner-h-01.png';
+import image2 from '../../../../assets/Image/img-home-banner-h-01.png';
+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';
 
-export default function RollingUnit({ bannerData, index, imageType }) {
-  const bannerDetailInfos = bannerData.bannerDetailInfos[index];
-  const [rollingData, setRollingData] = useState();
+// 더미 데이터
+const imgArr = [
+  { img: image1, key: 1 },
+  { img: image2, key: 2 },
+  { img: image3, key: 3 },
+  { img: image4, key: 4 },
+];
+
+export default function RollingUnit({ bannerData, index, imageType, onFocus }) {
+  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();
 
   useEffect(() => {
     if (bannerData) {
       setRollingData(bannerDetailInfos);
-      setShptmBanrTpNm(bannerDetailInfos.shptmBanrTpNm);
+      setDetailLength(bannerDetailInfosLength);
+      setShptmBanrTpNm(bannerDetailInfos[startIndex].shptmBanrTpNm);
+      setLastIndex(bannerDetailInfosLength - 1);
     }
-  }, [bannerData, index]);
+  }, [bannerData, shptmBanrTpNm]);
 
+  // 더미 데이터 테스트용
+  useEffect(() => {
+    // 포커스가 없을 경우에만 롤링
+    if (bannerDetailInfosLength === 1) {
+      return;
+    }
+
+    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 (
     <>
-      {shptmBanrTpNm &&
-        (shptmBanrTpNm === "Image Banner" ? (
-          <CustomImage></CustomImage>
-        ) : shptmBanrTpNm === "LIVE" || shptmBanrTpNm === "VOD" ? (
-          <VideoPlay></VideoPlay>
-        ) : shptmBanrTpNm === "Today's Deals" ? (
-          <HomeTodayDeal
-            imgAlt={rollingData.imgAlt}
-            imageName={rollingData.tmnlImgNm}
-            imgPath={rollingData.tmnlImgPath}
-            priceInfo={rollingData.priceInfo}
-            productId={rollingData.prdtId}
-            productName={rollingData.prdtNm}
-            soldoutFlag={rollingData.soldoutFlag}
-            isHorizontal={imageType} // TRUE, FALSE
-          />
-        ) : null)}
+      {bannerDetailInfos &&
+      bannerDetailInfos[startIndex].shptmBanrTpNm === "Image Banner" ? (
+        <CustomImage></CustomImage>
+      ) : bannerDetailInfos[startIndex].shptmBanrTpNm === "LIVE" ||
+        bannerDetailInfos[startIndex].shptmBanrTpNm === "VOD" ? (
+        <VideoPlay></VideoPlay>
+      ) : bannerDetailInfos[startIndex].shptmBanrTpNm === "Today's Deals" ? (
+        <HomeTodayDeal
+          imgAlt={bannerDetailInfos[startIndex].imgAlt}
+          imageName={bannerDetailInfos[startIndex].tmnlImgNm}
+          imgPath={bannerDetailInfos[startIndex].tmnlImgPath}
+          priceInfo={bannerDetailInfos[startIndex].priceInfo}
+          productId={bannerDetailInfos[startIndex].prdtId}
+          productName={bannerDetailInfos[startIndex].prdtNm}
+          soldoutFlag={bannerDetailInfos[startIndex].soldoutFlag}
+          isHorizontal={imageType} // TRUE, FALSE
+          rolling={bannerDetailInfosLength === 1 ? false : true}
+        />
+      ) : null}
     </>
   );
 }

com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.jsx

@@ -18,6 +18,7 @@ export default function HomeTodayDeal({
   productName,
   soldoutFlag,
   isHorizontal,
+  rolling,
   ...rest
 }) {
   const handleClick = useCallback(
@@ -74,14 +75,14 @@ export default function HomeTodayDeal({
         <img src={imgPath} />
       </div>
 
-      {/* {rolling == true ? (
+      {rolling == true ? (
         <>
           <div className={css.leftBtn}></div>
           <div className={css.rightBtn}></div>
         </>
       ) : (
         <></>
-      )} */}
+      )}
     </div>
   );
 }