[홈패널] 스크롤탑 오류 수정, VOD ,LIVE 방송 콤포넌트 추가

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

@@ -36,6 +36,11 @@ export default function HomeBannerTemplate1({ scrollTop }) {
   const [banner03Data, setBanner03Data] = useState();
   const [banner04Data, setBanner04Data] = useState();
 
+  const banner01ScrollTop = scrollTop;
+  const banner02ScrollTop = scrollTop;
+  const banner03ScrollTop = scrollTop;
+  const banner04ScrollTop = scrollTop;
+
   const homeMainContentsBannerInfos = useSelector(
     (state) => state.home.mainContentsData.homeMainContentsBannerInfos
   );
@@ -56,13 +61,13 @@ export default function HomeBannerTemplate1({ scrollTop }) {
     (state) => state.home.mainContentsData.homeTopDisplayInfos[0].wdthtpImgPath2
   );
 
-  const startFocus = () => {
+  // const startFocus = () => {
-    if (Spotlight.focus("banner01Prev")) {
+  //   if (Spotlight.focus("banner01Prev")) {
-      Spotlight.focus("banner01Prev");
+  //     Spotlight.focus("banner01Prev");
-    } else {
+  //   } else {
-      Spotlight.focus("banner01");
+  //     Spotlight.focus("banner01");
-    }
+  //   }
-  };
+  // };
 
   useEffect(() => {
     if (!homeTopDisplayInfos || !homeMainContentsBannerInfos) {
@@ -90,8 +95,8 @@ export default function HomeBannerTemplate1({ scrollTop }) {
 
       dispatch(getHomeMainContents);
       scrollTop({ animate: false });
-      startFocus();
+      // startFocus();
-      console.log(homeMainContentsBannerInfos, "메인 컨텐츠");
+      // console.log(homeMainContentsBannerInfos, "메인 컨텐츠");
       // console.log(homeTopDisplayInfos, "탑디스");
     }
   }, [homeMainContentsBannerInfos, bannerInfos, dispatch, scrollTop]);
@@ -108,16 +113,14 @@ export default function HomeBannerTemplate1({ scrollTop }) {
                   bannerData={banner01Data}
                   imageType={true}
                   spotlightId={"banner01"}
-                  onFocus={handleScrollReset}
+                  scrollTop={banner01ScrollTop}
-                  onBlur={handleStopScrolling}
                 />
               ) : banner01DataType === "Random" ? (
                 <Random
                   bannerData={banner01Data}
                   imageType={true}
                   spotlightId={"banner01"}
-                  onFocus={handleScrollReset}
+                  scrollTop={banner01ScrollTop}
-                  onBlur={handleStopScrolling}
                 />
               ) : (
                 <SpottableComponent
@@ -137,16 +140,14 @@ export default function HomeBannerTemplate1({ scrollTop }) {
                   bannerData={banner02Data}
                   imageType={true}
                   spotlightId={"banner02"}
-                  onFocus={handleScrollReset}
+                  scrollTop={banner02ScrollTop}
-                  onBlur={handleStopScrolling}
                 />
               ) : banner02DataType === "Random" ? (
                 <Random
                   bannerData={banner02Data}
                   imageType={true}
                   spotlightId={"banner02"}
-                  onFocus={handleScrollReset}
+                  scrollTop={banner02ScrollTop}
-                  onBlur={handleStopScrolling}
                 />
               ) : (
                 <SpottableComponent
@@ -167,16 +168,14 @@ export default function HomeBannerTemplate1({ scrollTop }) {
                 bannerData={banner03Data}
                 imageType={false}
                 spotlightId={"banner03"}
-                onFocus={handleScrollReset}
+                scrollTop={banner03ScrollTop}
-                onBlur={handleStopScrolling}
               />
             ) : banner03DataType === "Random" ? (
               <Random
                 bannerData={banner03Data}
                 imageType={false}
                 spotlightId={"banner03"}
-                onFocus={handleScrollReset}
+                scrollTop={banner03ScrollTop}
-                onBlur={handleStopScrolling}
               />
             ) : (
               <SpottableComponent
@@ -189,23 +188,29 @@ export default function HomeBannerTemplate1({ scrollTop }) {
             )}
           </div>
 
+          {/* 베너 데이터 확인 필요 : 티비 데이터 2개 03.07 */}
           {/* 배너4 */}
           <div className={css.imgBox}>
             {banner04DataType === "Rolling" ? (
-              <Rolling
+              /* <Rolling
                 bannerData={banner04Data}
                 imageType={false}
+                spotlightId={"banner04"}
+                scrollTop={banner04ScrollTop}
+              /> */
+              <SpottableComponent
                 spotlightId={"banner04"}
                 onFocus={handleScrollReset}
                 onBlur={handleStopScrolling}
-              />
+              >
+                <CustomImage delay={0} src={vctpImage2} />
+              </SpottableComponent>
             ) : banner04DataType === "Random" ? (
               <Random
                 bannerData={banner04Data}
                 imageType={false}
                 spotlightId={"banner04"}
-                onFocus={handleScrollReset}
+                scrollTop={banner04ScrollTop}
-                onBlur={handleStopScrolling}
               />
             ) : (
               <SpottableComponent

com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.module.less

@@ -22,6 +22,7 @@
         .size(@w: 744px, @h: 420px);
         border-radius: 12px;
         position: relative;
+        overflow: hidden;
         > div {
           position: relative;
           > img {
@@ -38,6 +39,8 @@
 
     .imgBox {
       .size(@w: 486px, @h: 858px);
+      border-radius: 12px;
+      overflow: hidden;
       > div {
         position: relative;
         &:focus {

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

@@ -8,6 +8,7 @@ import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDeco
 import Spottable from "@enact/spotlight/Spottable";
 
 import { pushPanel } from "../../../actions/panelActions";
+import useScrollReset from "../../../hooks/useScrollReset";
 import { panel_names } from "../../../utils/Config";
 import css from "../HomeBanner/ImageBannerUnit.module.less";
 
@@ -41,9 +42,11 @@ export default function ImageBannerUnit({
   getIndex,
   getFocus,
   spotlightId,
+  scrollTop,
   ...rest
 }) {
   const dispatch = useDispatch();
+  const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollTop);
 
   const handleClick = useCallback(() => {
     console.log("파트너ID", patnrId);
@@ -104,11 +107,13 @@ export default function ImageBannerUnit({
 
   const onFocus = useCallback(() => {
     getFocus(true);
+    handleScrollReset();
   }, []);
 
   const onBlur = useCallback(() => {
     setFocusDown(false);
     getFocus(false);
+    handleStopScrolling();
   }, []);
 
   const onKeyDown = useCallback(
@@ -136,6 +141,8 @@ export default function ImageBannerUnit({
         <SpottableComponent
           className={classNames(css.arrow, css.leftBtn)}
           onClick={handlePrev}
+          onFocus={onFocus}
+          onBlur={onBlur}
           spotlightId={spotlightId + "Prev"}
         ></SpottableComponent>
       ) : rolling === false ? (
@@ -167,6 +174,8 @@ export default function ImageBannerUnit({
         <SpottableComponent
           className={classNames(css.arrow, css.rightBtn)}
           onClick={handleNext}
+          onFocus={onFocus}
+          onBlur={onBlur}
           spotlightId={spotlightId + "Next"}
         ></SpottableComponent>
       ) : rolling === false ? (

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

@@ -0,0 +1,153 @@
+import React, { useCallback, useEffect, useState } from "react";
+
+import classNames from "classnames";
+import { useDispatch, useSelector } from "react-redux";
+
+import Spotlight from "@enact/spotlight";
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import Spottable from "@enact/spotlight/Spottable";
+
+import liveShow from "../../../../assets/images/tag-liveshow.png";
+import { pushPanel } from "../../../actions/panelActions";
+import { VideoPlayer } from "../../../components/VideoPlayer/VideoPlayer";
+import useScrollReset from "../../../hooks/useScrollReset";
+import { panel_names } from "../../../utils/Config";
+import css from "./LiveUnit.module.less";
+
+const Container = SpotlightContainerDecorator(
+  { enterTo: "last-focused" },
+  "div"
+);
+
+const SpottableComponent = Spottable("div");
+
+export default function LiveUnit({
+  children,
+  imageAlt,
+  imgName,
+  imgPath,
+  showUrl,
+  showNm,
+  patncLogoPath,
+  priceInfo,
+  patnrId,
+  prdtId,
+  productId,
+  productName,
+  soldoutFlag,
+  isHorizontal,
+  shptmLnkTpNm,
+  rolling,
+  startIndex,
+  lastIndex,
+  currentIndex,
+  getIndex,
+  getFocus,
+  spotlightId,
+  scrollTop,
+  ...rest
+}) {
+  const dispatch = useDispatch();
+  const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollTop);
+
+  // 비디오 클릭
+  const handleClick = useCallback(() => {
+    dispatch(
+      pushPanel({
+        name: panel_names.PLAYER_PANEL,
+      })
+    );
+  }, [dispatch]);
+
+  // 화살표 아래키 누를시, 아래로 포커스
+  const [focusDown, setFocusDown] = useState(false);
+
+  const handlePrev = useCallback(() => {
+    if (currentIndex === 0) {
+      getIndex(lastIndex);
+      return;
+    }
+    getIndex(currentIndex - 1);
+  }, [getIndex]);
+
+  const handleNext = useCallback(() => {
+    if (lastIndex === currentIndex) {
+      getIndex(0);
+      return;
+    }
+    getIndex(currentIndex + 1);
+  }, [getIndex]);
+
+  const onFocus = useCallback(() => {
+    getFocus(true);
+    handleScrollReset();
+  }, []);
+
+  const onBlur = useCallback(() => {
+    setFocusDown(false);
+    getFocus(false);
+    handleStopScrolling();
+  }, []);
+
+  const onKeyDown = useCallback(
+    (event) => {
+      if (event.key === "ArrowDown") {
+        setFocusDown(true);
+      }
+    },
+    [focusDown]
+  );
+
+  return (
+    <Container
+      className={classNames(
+        css.rollingWrap,
+        isHorizontal && css.isHorizontalWrap
+      )}
+    >
+      <SpottableComponent
+        className={classNames(css.arrow, css.leftBtn)}
+        onClick={handlePrev}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        spotlightId={spotlightId + "Prev"}
+      />
+
+      <SpottableComponent
+        className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
+        onClick={handleClick}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        onKeyDown={onKeyDown}
+        spotlightId={spotlightId}
+      >
+        <p className={css.liveIcon}>
+          <img src={liveShow} />
+        </p>
+
+        <VideoPlayer disabled={true} noAutoPlay={false} spotlightDisabled>
+          <source src={showUrl} type="application/mpegurl" />
+        </VideoPlayer>
+
+        {/* <VideoPlayer disabled={true} noAutoPlay={false} spotlightDisabled>
+          <source
+            src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
+            type="video/mp4"
+          />
+        </VideoPlayer> */}
+
+        <p className={css.brandIcon}>
+          <img src={patncLogoPath} />
+        </p>
+      </SpottableComponent>
+
+      <SpottableComponent
+        className={classNames(css.arrow, css.rightBtn)}
+        onClick={handleNext}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        spotlightId={spotlightId + "Next"}
+      ></SpottableComponent>
+    </Container>
+  );
+}

com.twin.app.shoptime/src/views/HomePanel/HomeBanner/LiveUnit.module.less

@@ -0,0 +1,90 @@
+@import "../../../style/CommonStyle.module.less";
+@import "../../../style/utils.module.less";
+
+.videoMain {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  right: 0;
+  background-color: black;
+  video {
+    width: 100%;
+    height: 100%;
+    background-color: transparent;
+    object-fit: contain;
+    position: absolute;
+  }
+}
+
+.rollingWrap {
+  position: relative;
+  .itemBox {
+    .size(@w: 486px, @h: 858px);
+    position: relative;
+    .imgBanner {
+      > img {
+        border-radius: 12px;
+        .size(@w: 486px, @h: 858px);
+      }
+    }
+    &.isHorizontal {
+      .size(@w: 744px, @h: 420px);
+      .imgBanner {
+        > img {
+          .size(@w: 744px, @h: 420px);
+        }
+      }
+    }
+    &:focus {
+      &::after {
+        .focused(@boxShadow:22px, @borderRadius: 12px);
+      }
+    }
+    .brandIcon {
+      overflow: hidden;
+      position: absolute;
+      right: 30px;
+      bottom: 30px;
+    }
+    .liveIcon {
+      z-index: 2;
+      position: absolute;
+      left: 18px;
+      top: 18px;
+    }
+  }
+
+  .arrow {
+    z-index: 10;
+    .size(@w: 42px, @h: 42px);
+    background-size: 42px 42px;
+    background-position: center center;
+    &.leftBtn {
+      .position(@position: absolute, @top: 429px, @left: 18px);
+      background-image: url("../../../../assets/images/btn/btn_prev_thumb_nor.png");
+      &:focus {
+        background-image: url("../../../../assets/images/btn/btn_prev_thumb_foc.png");
+      }
+    }
+    &.rightBtn {
+      .position(@position: absolute, @top: 429px, @right: 18px);
+      background-image: url("../../../../assets/images/btn/btn_next_thumb_nor.png");
+      &:focus {
+        background-image: url("../../../../assets/images/btn/btn_next_thumb_foc.png");
+      }
+    }
+  }
+
+  &.isHorizontalWrap {
+    .arrow {
+      &.leftBtn {
+        .position(@position: absolute, @top: 189px, @left: 18px);
+      }
+      &.rightBtn {
+        .position(@position: absolute, @top: 189px, @right: 18px);
+      }
+    }
+  }
+}

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

@@ -1,17 +1,27 @@
 import React, { useCallback, useEffect, useState } from "react";
 
+import classNames from "classnames";
 import { useDispatch } from "react-redux";
 
-import VideoPlayer from "@enact/sandstone/VideoPlayer";
+import Spotlight from "@enact/spotlight";
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 import Spottable from "@enact/spotlight/Spottable";
 
 import { pushPanel } from "../../../actions/panelActions";
+import { VideoPlayer } from "../../../components/VideoPlayer/VideoPlayer";
 import { panel_names } from "../../../utils/Config";
 import HomeTodayDeal from "../HomeTodayDeal/HomeTodayDeal";
 import ImageBanner from "./ImageBannerUnit";
+import Live from "./LiveUnit";
 import css from "./RollingUnit.module.less";
+import Vod from "./VodUnit";
 
-export default function RollingUnit({ bannerData, imageType, spotlightId }) {
+export default function RollingUnit({
+  bannerData,
+  imageType,
+  spotlightId,
+  scrollTop,
+}) {
   const rollingData = bannerData.bannerDetailInfos;
   const rollingDataLength = bannerData.bannerDetailInfos.length;
 
@@ -19,8 +29,15 @@ export default function RollingUnit({ bannerData, imageType, spotlightId }) {
   const [startIndex, setStartIndex] = useState(0);
   const [lastIndex, setLastIndex] = useState(rollingDataLength - 1);
   const [onFocus, setOnFocus] = useState(false);
+  const [videoFocus, setVidoFocus] = useState(false);
+
+  const Container = SpotlightContainerDecorator(
+    { enterTo: "last-focused" },
+    "div"
+  );
 
   const SpottableComponent = Spottable("div");
+
   const dispatch = useDispatch();
 
   const getIndex = useCallback(
@@ -37,14 +54,9 @@ export default function RollingUnit({ bannerData, imageType, spotlightId }) {
     [onFocus]
   );
 
-  // 비디오 클릭
+  const onBlur = useCallback(() => {
-  const handleClick = useCallback(() => {
+    getFocus(false);
-    dispatch(
+  }, []);
-      pushPanel({
-        name: panel_names.PLAYER_PANEL,
-      })
-    );
-  }, [dispatch]);
 
   // useEffect(() => {
   //   if (rollingDataLength === 1) {
@@ -95,27 +107,48 @@ export default function RollingUnit({ bannerData, imageType, spotlightId }) {
           getIndex={getIndex}
           getFocus={getFocus}
           spotlightId={spotlightId}
+          scrollTop={scrollTop}
         />
-      ) : rollingData[startIndex].shptmBanrTpNm === "LIVE" ||
+      ) : rollingData[startIndex].shptmBanrTpNm === "LIVE" ? (
-        rollingData[startIndex].shptmBanrTpNm === "VOD" ? (
+        <Live
-        <SpottableComponent
+          imgAlt={rollingData[startIndex].tmnlImgAlt}
-          className={css.videoMain}
+          imageName={rollingData[startIndex].tmnlImgNm}
+          imgPath={rollingData[startIndex].tmnlImgPath}
+          patnrId={rollingData[startIndex].patnrId}
+          prdtId={rollingData[startIndex].prdtId}
+          productName={rollingData[startIndex].prdtNm}
+          showUrl={rollingData[startIndex].showUrl}
+          showNm={rollingData[startIndex].showNm}
+          patncLogoPath={rollingData[startIndex].patncLogoPath}
+          shptmLnkTpNm={rollingData[startIndex].shptmLnkTpNm}
+          isHorizontal={imageType} // WIDTH = TRUE / FALSE
+          rolling={rollingDataLength === 1 ? false : true}
+          lastIndex={lastIndex}
+          currentIndex={startIndex}
+          getIndex={getIndex}
+          getFocus={getFocus}
           spotlightId={spotlightId}
-          onClick={handleClick}
+          scrollTop={scrollTop}
-        >
+        />
-          {/* <VideoPlayer>
+      ) : rollingData[startIndex].shptmBanrTpNm === "VOD" ? (
-            <source
+        <Vod
-              src={rollingData[startIndex].showUrl}
+          imgAlt={rollingData[startIndex].tmnlImgAlt}
-              type="application/mpegurl"
+          imageName={rollingData[startIndex].tmnlImgNm}
-            />
+          imgPath={rollingData[startIndex].tmnlImgPath}
-          </VideoPlayer> */}
+          priceInfo={rollingData[startIndex].priceInfo}
-          <VideoPlayer disabled={true}>
+          patnrId={rollingData[startIndex].patnrId}
-            <source
+          prdtId={rollingData[startIndex].prdtId}
-              src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
+          productName={rollingData[startIndex].prdtNm}
-              type="video/mp4"
+          soldoutFlag={rollingData[startIndex].soldoutFlag}
-            />
+          isHorizontal={imageType} // WIDTH = TRUE / FALSE
-          </VideoPlayer>
+          rolling={rollingDataLength === 1 ? false : true}
-        </SpottableComponent>
+          lastIndex={lastIndex}
+          currentIndex={startIndex}
+          getIndex={getIndex}
+          getFocus={getFocus}
+          spotlightId={spotlightId}
+          scrollTop={scrollTop}
+        />
       ) : rollingData[startIndex].shptmBanrTpNm === "Today's Deals" ? (
         <HomeTodayDeal
           imgAlt={rollingData[startIndex].tmnlImgAlt}
@@ -133,6 +166,7 @@ export default function RollingUnit({ bannerData, imageType, spotlightId }) {
           getIndex={getIndex}
           getFocus={getFocus}
           spotlightId={spotlightId}
+          scrollTop={scrollTop}
         />
       ) : null}
     </>

com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.module.less

@@ -17,74 +17,74 @@
     position: absolute;
   }
 }
-.playLogBg {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  margin: 0;
-  transition: opacity 500ms ease-in-out;
-  &.hide {
-    opacity: 0;
-  }
-}
-.hide {
-  visibility: hidden;
-}
-.localGuide {
-  position: absolute;
-  top: 50px;
-  color: red;
-  left: 50%;
-  transform: translateX(-50%);
-}
 
-.exitBtnPosition {
+.rollingWrap {
-  position: fixed;
+  position: relative;
-  left: 80px;
+  .itemBox {
-  top: 80px;
+    .size(@w: 486px, @h: 858px);
-  &.lt {
+    position: relative;
-    left: initial;
+    .imgBanner {
-    right: 80px;
+      > img {
+        border-radius: 12px;
+        .size(@w: 486px, @h: 858px);
+      }
+    }
+    &.isHorizontal {
+      .size(@w: 744px, @h: 420px);
+      .imgBanner {
+        > img {
+          .size(@w: 744px, @h: 420px);
+        }
+      }
+    }
+    &:focus {
+      &::after {
+        .focused(@boxShadow:22px, @borderRadius: 12px);
+      }
+    }
+    .brandIcon {
+      overflow: hidden;
+      position: absolute;
+      right: 30px;
+      bottom: 30px;
+    }
+    .liveIcon {
+      z-index: 2;
+      position: absolute;
+      left: 18px;
+      top: 18px;
+    }
   }
-}
-.autoSwitch {
-  display: flex;
-  align-items: center;
-  > div:first-child {
-    font-family: Pretendard;
-    font-size: 32px;
-    font-weight: 500;
-    letter-spacing: -0.96px;
-    color: rgba(255, 255, 255, 0.7);
-  }
-  > div {
-    margin: 0;
-    padding: 0;
-  }
-}
 
-.bleNotiPopup {
+  .arrow {
-  width: 652px !important;
+    z-index: 10;
-  height: 450px !important;
+    .size(@w: 42px, @h: 42px);
-  margin-bottom: 300px !important;
+    background-size: 42px 42px;
-  > div > div > div > div > div:nth-child(2) {
+    background-position: center center;
-    padding: 30px 0 50px 0 !important;
+    &.leftBtn {
+      .position(@position: absolute, @top: 429px, @left: 18px);
+      background-image: url("../../../../assets/images/btn/btn_prev_thumb_nor.png");
+      &:focus {
+        background-image: url("../../../../assets/images/btn/btn_prev_thumb_foc.png");
+      }
+    }
+    &.rightBtn {
+      .position(@position: absolute, @top: 429px, @right: 18px);
+      background-image: url("../../../../assets/images/btn/btn_next_thumb_nor.png");
+      &:focus {
+        background-image: url("../../../../assets/images/btn/btn_next_thumb_foc.png");
+      }
+    }
   }
-  .title {
+
-    font-size: 40px !important;
+  &.isHorizontalWrap {
-    font-weight: bold;
+    .arrow {
-    letter-spacing: -0.8px;
+      &.leftBtn {
-    margin-bottom: 30px;
+        .position(@position: absolute, @top: 189px, @left: 18px);
-  }
+      }
-  .detailLimited {
+      &.rightBtn {
-    width: 382px !important;
+        .position(@position: absolute, @top: 189px, @right: 18px);
-    height: 67px !important;
+      }
-    margin: -20px auto !important;
+    }
-    font-size: 25px !important;
-    padding-top: 20px !important;
-    letter-spacing: -0.75px !important;
-    background-color: white !important;
-    color: #909090 !important;
-    line-height: 35px !important;
   }
 }

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

@@ -0,0 +1,146 @@
+import React, { useCallback, useEffect, useState } from "react";
+
+import classNames from "classnames";
+import { useDispatch, useSelector } from "react-redux";
+
+import Spotlight from "@enact/spotlight";
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import Spottable from "@enact/spotlight/Spottable";
+
+import liveShow from "../../../../assets/images/tag-liveshow.png";
+import { pushPanel } from "../../../actions/panelActions";
+import { VideoPlayer } from "../../../components/VideoPlayer/VideoPlayer";
+import useScrollReset from "../../../hooks/useScrollReset";
+import { panel_names } from "../../../utils/Config";
+import css from "./VodUnit.module.less";
+
+const Container = SpotlightContainerDecorator(
+  { enterTo: "last-focused" },
+  "div"
+);
+
+const SpottableComponent = Spottable("div");
+
+export default function VodUnit({
+  children,
+  imageAlt,
+  imgName,
+  imgPath,
+  showUrl,
+  showNm,
+  patncLogoPath,
+  priceInfo,
+  patnrId,
+  prdtId,
+  productId,
+  productName,
+  soldoutFlag,
+  isHorizontal,
+  shptmLnkTpNm,
+  rolling,
+  startIndex,
+  lastIndex,
+  currentIndex,
+  getIndex,
+  getFocus,
+  spotlightId,
+  scrollTop,
+  ...rest
+}) {
+  const dispatch = useDispatch();
+  const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollTop);
+
+  // 비디오 클릭
+  const handleClick = useCallback(() => {
+    dispatch(
+      pushPanel({
+        name: panel_names.PLAYER_PANEL,
+      })
+    );
+  }, [dispatch]);
+
+  // 화살표 아래키 누를시, 아래로 포커스
+  const [focusDown, setFocusDown] = useState(false);
+
+  const handlePrev = useCallback(() => {
+    if (currentIndex === 0) {
+      getIndex(lastIndex);
+      return;
+    }
+    getIndex(currentIndex - 1);
+  }, [getIndex]);
+
+  const handleNext = useCallback(() => {
+    if (lastIndex === currentIndex) {
+      getIndex(0);
+      return;
+    }
+    getIndex(currentIndex + 1);
+  }, [getIndex]);
+
+  const onFocus = useCallback(() => {
+    getFocus(true);
+    handleScrollReset();
+  }, []);
+
+  const onBlur = useCallback(() => {
+    setFocusDown(false);
+    getFocus(false);
+    handleStopScrolling();
+  }, []);
+
+  const onKeyDown = useCallback(
+    (event) => {
+      if (event.key === "ArrowDown") {
+        setFocusDown(true);
+      }
+    },
+    [focusDown]
+  );
+
+  return (
+    <Container
+      className={classNames(
+        css.rollingWrap,
+        isHorizontal && css.isHorizontalWrap
+      )}
+    >
+      <SpottableComponent
+        className={classNames(css.arrow, css.leftBtn)}
+        onClick={handlePrev}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        spotlightId={spotlightId + "Prev"}
+      />
+
+      <SpottableComponent
+        className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
+        onClick={handleClick}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        onKeyDown={onKeyDown}
+        spotlightId={spotlightId}
+      >
+        <p className={css.liveIcon}>
+          <img src={liveShow} />
+        </p>
+
+        <VideoPlayer disabled={true} noAutoPlay={false} spotlightDisabled>
+          <source src={showUrl} type="application/mpegurl" />
+        </VideoPlayer>
+
+        <p className={css.brandIcon}>
+          <img src={patncLogoPath} />
+        </p>
+      </SpottableComponent>
+
+      <SpottableComponent
+        className={classNames(css.arrow, css.rightBtn)}
+        onClick={handleNext}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        spotlightId={spotlightId + "Next"}
+      ></SpottableComponent>
+    </Container>
+  );
+}

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

@@ -65,15 +65,13 @@ export default function HomePanel({ isOnTop }) {
   }, [dispatch]);
 
   const handleTopButtonClick = useCallback(() => {
-    scrollTop();
-
     let spotId = "";
     if (Spotlight.focus("banner01Prev")) {
       spotId = "banner01Prev";
     } else {
       spotId = "banner01";
     }
-
+    scrollTop();
     Spotlight.focus(spotId);
   }, [scrollTop]);
 

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

@@ -8,6 +8,7 @@ import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDeco
 import Spottable from "@enact/spotlight/Spottable";
 
 import { pushPanel } from "../../../actions/panelActions";
+import useScrollReset from "../../../hooks/useScrollReset";
 import { panel_names } from "../../../utils/Config";
 import css from "./HomeTodayDeal.module.less";
 
@@ -37,10 +38,13 @@ export default function HomeTodayDeal({
   getIndex,
   getFocus,
   spotlightId,
+  scrollTop,
   ...rest
 }) {
   const dispatch = useDispatch();
 
+  const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollTop);
+
   const handleClick = useCallback(() => {
     console.log("파트너ID", patnrId);
     console.log("상품", prdtId);
@@ -73,11 +77,13 @@ export default function HomeTodayDeal({
 
   const onFocus = useCallback(() => {
     getFocus(true);
+    handleScrollReset();
   }, []);
 
   const onBlur = useCallback(() => {
     setFocusDown(false);
     getFocus(false);
+    handleStopScrolling();
   }, []);
 
   const onKeyDown = useCallback(
@@ -133,6 +139,8 @@ export default function HomeTodayDeal({
           className={classNames(css.arrow, css.leftBtn)}
           onClick={handlePrev}
           spotlightId={spotlightId + "Prev"}
+          onFocus={onFocus}
+          onBlur={onBlur}
         ></SpottableComponent>
       ) : rolling === false ? (
         <></>
@@ -170,6 +178,8 @@ export default function HomeTodayDeal({
         <SpottableComponent
           className={classNames(css.arrow, css.rightBtn)}
           onClick={handleNext}
+          onFocus={onFocus}
+          onBlur={onBlur}
           spotlightId={spotlightId + "Next"}
         ></SpottableComponent>
       ) : rolling === false ? (