[홈패널] 스크롤탑 템플릿 적용, 랜돔 시 인디케이터 제거

2024-02-27 16:00:23 +09:00
parent 6fca389dc4
commit 9ced6c7f43
6 changed files with 128 additions and 23 deletions
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx
@@ -8,10 +8,10 @@ import Spottable from "@enact/spotlight/Spottable";

 import { getHomeMainContents } from "../../../actions/homeActions";
 import CustomImage from "../../../components/CustomImage/CustomImage";
+import useScrollReset from "../../../hooks/useScrollReset";
 import css from "./HomeBannerTemplate1.module.less";
 import Random from "./RandomUnit";
 import Rolling from "./RollingUnit";
-import useScrollReset from "../../../hooks/useScrollReset";

 const SpottableComponent = Spottable("div");
 const Container = SpotlightContainerDecorator(
@@ -72,7 +72,13 @@ export default function HomeBannerTemplate1({ scrollTop }) {
      // console.log(homeMainContentsBannerInfos, "메인 컨텐츠");
      // console.log(homeTopDisplayInfos, "탑디스");
    }
-  }, [homeMainContentsBannerInfos, bannerInfos, dispatch, scrollTop]);
+  }, [
+    homeMainContentsBannerInfos,
+    bannerInfos,
+    dispatch,
+    scrollTop,
+    startFocus,
+  ]);

  return (
    <Container className={css.container} spotlightId={"top"}>
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.jsx
@@ -8,6 +8,7 @@ import Spottable from "@enact/spotlight/Spottable";

 import { getHomeMainContents } from "../../../actions/homeActions";
 import CustomImage from "../../../components/CustomImage/CustomImage";
+import useScrollReset from "../../../hooks/useScrollReset";
 import css from "./HomeBannerTemplate2.module.less";
 import Random from "./RandomUnit";
 import Rolling from "./RollingUnit";
@@ -25,9 +26,10 @@ const ContainerBasic = SpotlightContainerDecorator(
  "div"
 );

-export default function HomeBannerTemplate2() {
+export default function HomeBannerTemplate2({ scrollTop }) {
  const dispatch = useDispatch();
  const [bannerInfos, setBannerInfos] = useState([]);
+  const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollTop);

  const homeMainContentsBannerInfos = useSelector(
    (state) => state.home.mainContentsData.homeMainContentsBannerInfos
@@ -74,11 +76,18 @@ export default function HomeBannerTemplate2() {
      const banerInfo = homeMainContentsBannerInfos[0].bannerInfos;
      setBannerInfos(banerInfo);
      dispatch(getHomeMainContents);
+      scrollTop({ animate: false });
      startFocus();
      // console.log(homeMainContentsBannerInfos, "메인 컨텐츠");
      // console.log(homeTopDisplayInfos, "탑디스");
    }
-  }, [homeMainContentsBannerInfos, bannerInfos, dispatch]);
+  }, [
+    homeMainContentsBannerInfos,
+    bannerInfos,
+    dispatch,
+    scrollTop,
+    startFocus,
+  ]);

  return (
    <Container className={css.container} spotlightId="top">
@@ -95,6 +104,8 @@ export default function HomeBannerTemplate2() {
                    key={item.banrLctnNo}
                    imageType={false}
                    spotlightId={"banner01"}
+                    onFocus={handleScrollReset}
+                    onBlur={handleStopScrolling}
                  />
                ) : item.banrLctnNo === "1" &&
                  item.shptmDspyTpNm == "Random" ? (
@@ -103,11 +114,15 @@ export default function HomeBannerTemplate2() {
                    key={item.banrLctnNo}
                    imageType={false}
                    spotlightId={"banner01"}
+                    onFocus={handleScrollReset}
+                    onBlur={handleStopScrolling}
                  />
                ) : (
                  <SpottableComponent
                    spotlightId={"banner01"}
                    key={item.banrLctnNo}
+                    onFocus={handleScrollReset}
+                    onBlur={handleStopScrolling}
                  >
                    <CustomImage delay={0} src={vctpImage1} />
                  </SpottableComponent>
@@ -127,6 +142,8 @@ export default function HomeBannerTemplate2() {
                      key={item.banrLctnNo}
                      imageType={true}
                      spotlightId={"banner02"}
+                      onFocus={handleScrollReset}
+                      onBlur={handleStopScrolling}
                    />
                  ) : item.banrLctnNo === "2" &&
                    item.shptmDspyTpNm == "Random" ? (
@@ -135,11 +152,15 @@ export default function HomeBannerTemplate2() {
                      key={item.banrLctnNo}
                      imageType={true}
                      spotlightId={"banner02"}
+                      onFocus={handleScrollReset}
+                      onBlur={handleStopScrolling}
                    />
                  ) : (
                    <SpottableComponent
                      spotlightId={"banner02"}
                      key={item.banrLctnNo}
+                      onFocus={handleScrollReset}
+                      onBlur={handleStopScrolling}
                    >
                      <CustomImage delay={0} src={wdthImage1} />
                    </SpottableComponent>
@@ -158,6 +179,8 @@ export default function HomeBannerTemplate2() {
                      key={item.banrLctnNo}
                      imageType={true}
                      spotlightId={"banner03"}
+                      onFocus={handleScrollReset}
+                      onBlur={handleStopScrolling}
                    />
                  ) : item.banrLctnNo === "3" &&
                    item.shptmDspyTpNm == "Random" ? (
@@ -166,11 +189,15 @@ export default function HomeBannerTemplate2() {
                      key={item.banrLctnNo}
                      imageType={true}
                      spotlightId={"banner03"}
+                      onFocus={handleScrollReset}
+                      onBlur={handleStopScrolling}
                    />
                  ) : (
                    <SpottableComponent
                      spotlightId={"banner03"}
                      key={item.banrLctnNo}
+                      onFocus={handleScrollReset}
+                      onBlur={handleStopScrolling}
                    >
                      <CustomImage delay={0} src={wdthImage2} />
                    </SpottableComponent>
@@ -190,6 +217,8 @@ export default function HomeBannerTemplate2() {
                    key={item.banrLctnNo}
                    imageType={false}
                    spotlightId={"banner04"}
+                    onFocus={handleScrollReset}
+                    onBlur={handleStopScrolling}
                  />
                ) : item.banrLctnNo === "4" &&
                  item.shptmDspyTpNm == "Random" ? (
@@ -198,11 +227,15 @@ export default function HomeBannerTemplate2() {
                    key={item.banrLctnNo}
                    imageType={false}
                    spotlightId={"banner04"}
+                    onFocus={handleScrollReset}
+                    onBlur={handleStopScrolling}
                  />
                ) : (
                  <SpottableComponent
                    spotlightId={"banner04"}
                    key={item.banrLctnNo}
+                    onFocus={handleScrollReset}
+                    onBlur={handleStopScrolling}
                  >
                    <CustomImage delay={0} src={vctpImage2} />
                  </SpottableComponent>
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.jsx
@@ -9,6 +9,7 @@ import Spottable from "@enact/spotlight/Spottable";

 import { getHomeMainContents } from "../../../actions/homeActions";
 import CustomImage from "../../../components/CustomImage/CustomImage";
+import useScrollReset from "../../../hooks/useScrollReset";
 import css from "./HomeBannerTemplate3.module.less";
 import Random from "./RandomUnit";
 import Rolling from "./RollingUnit";
@@ -26,9 +27,10 @@ const ContainerBasic = SpotlightContainerDecorator(
  "div"
 );

-export default function HomeBannerTemplate3({ ...rest }) {
+export default function HomeBannerTemplate3({ scrollTop }) {
  const dispatch = useDispatch();
  const [bannerInfos, setBannerInfos] = useState([]);
+  const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollTop);

  const homeMainContentsBannerInfos = useSelector(
    (state) => state.home.mainContentsData.homeMainContentsBannerInfos
@@ -75,11 +77,18 @@ export default function HomeBannerTemplate3({ ...rest }) {
      const banerInfo = homeMainContentsBannerInfos[0].bannerInfos;
      setBannerInfos(banerInfo);
      dispatch(getHomeMainContents);
+      scrollTop({ animate: false });
      startFocus();
      // console.log(homeMainContentsBannerInfos, "메인 컨텐츠");
      // console.log(homeTopDisplayInfos, "탑디스");
    }
-  }, [homeMainContentsBannerInfos, bannerInfos, dispatch]);
+  }, [
+    homeMainContentsBannerInfos,
+    bannerInfos,
+    dispatch,
+    scrollTop,
+    startFocus,
+  ]);

  return (
    <Container className={css.homeTemplateBox} spotlightId="top">
@@ -96,6 +105,8 @@ export default function HomeBannerTemplate3({ ...rest }) {
                  key={item.banrLctnNo}
                  imageType={false}
                  spotlightId={"banner01"}
+                  onFocus={handleScrollReset}
+                  onBlur={handleStopScrolling}
                />
              ) : item.banrLctnNo === "1" && item.shptmDspyTpNm == "Random" ? (
                <Random
@@ -103,11 +114,15 @@ export default function HomeBannerTemplate3({ ...rest }) {
                  key={item.banrLctnNo}
                  imageType={false}
                  spotlightId={"banner01"}
+                  onFocus={handleScrollReset}
+                  onBlur={handleStopScrolling}
                />
              ) : (
                <SpottableComponent
                  spotlightId={"banner01"}
                  key={item.banrLctnNo}
+                  onFocus={handleScrollReset}
+                  onBlur={handleStopScrolling}
                >
                  <CustomImage delay={0} src={vctpImage1} />
                </SpottableComponent>
@@ -127,6 +142,8 @@ export default function HomeBannerTemplate3({ ...rest }) {
                  key={item.banrLctnNo}
                  imageType={false}
                  spotlightId={"banner02"}
+                  onFocus={handleScrollReset}
+                  onBlur={handleStopScrolling}
                />
              ) : item.banrLctnNo === "2" && item.shptmDspyTpNm == "Random" ? (
                <Random
@@ -134,11 +151,15 @@ export default function HomeBannerTemplate3({ ...rest }) {
                  key={item.banrLctnNo}
                  imageType={false}
                  spotlightId={"banner02"}
+                  onFocus={handleScrollReset}
+                  onBlur={handleStopScrolling}
                />
              ) : (
                <SpottableComponent
                  spotlightId={"banner02"}
                  key={item.banrLctnNo}
+                  onFocus={handleScrollReset}
+                  onBlur={handleStopScrolling}
                >
                  <CustomImage delay={0} src={vctpImage2} />
                </SpottableComponent>
@@ -159,6 +180,8 @@ export default function HomeBannerTemplate3({ ...rest }) {
                    key={item.banrLctnNo}
                    imageType={true}
                    spotlightId={"banner03"}
+                    onFocus={handleScrollReset}
+                    onBlur={handleStopScrolling}
                  />
                ) : item.banrLctnNo === "3" &&
                  item.shptmDspyTpNm == "Random" ? (
@@ -167,11 +190,15 @@ export default function HomeBannerTemplate3({ ...rest }) {
                    key={item.banrLctnNo}
                    imageType={true}
                    spotlightId={"banner03"}
+                    onFocus={handleScrollReset}
+                    onBlur={handleStopScrolling}
                  />
                ) : (
                  <SpottableComponent
                    spotlightId={"banner03"}
                    key={item.banrLctnNo}
+                    onFocus={handleScrollReset}
+                    onBlur={handleStopScrolling}
                  >
                    <CustomImage delay={0} src={wdthImage1} />
                  </SpottableComponent>
@@ -191,6 +218,8 @@ export default function HomeBannerTemplate3({ ...rest }) {
                    key={item.banrLctnNo}
                    imageType={true}
                    spotlightId={"banner04"}
+                    onFocus={handleScrollReset}
+                    onBlur={handleStopScrolling}
                  />
                ) : item.banrLctnNo === "4" &&
                  item.shptmDspyTpNm == "Random" ? (
@@ -199,11 +228,15 @@ export default function HomeBannerTemplate3({ ...rest }) {
                    key={item.banrLctnNo}
                    imageType={true}
                    spotlightId={"banner04"}
+                    onFocus={handleScrollReset}
+                    onBlur={handleStopScrolling}
                  />
                ) : (
                  <SpottableComponent
                    spotlightId={"banner04"}
                    key={item.banrLctnNo}
+                    onFocus={handleScrollReset}
+                    onBlur={handleStopScrolling}
                  >
                    <CustomImage delay={0} src={wdthImage2} />
                  </SpottableComponent>
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx
@@ -1,14 +1,31 @@
-import React, {
-  useEffect,
-  useState,
-} from 'react';
+import React, { useCallback, useEffect, useState } from "react";

-import HomeTodayDeal from '../HomeTodayDeal/HomeTodayDeal';
-import ImageBanner from './ImageBannerUnit';
+import HomeTodayDeal from "../HomeTodayDeal/HomeTodayDeal";
+import ImageBanner from "./ImageBannerUnit";

-export default function RandomUnit({ bannerData, imageType }) {
+export default function RandomUnit({ bannerData, imageType, spotlightId }) {
  const bannerDetailInfos = bannerData.bannerDetailInfos;
+  const bannerDetailLength = bannerData.bannerDetailInfos.length;
+
+  const [startIndex, setStartIndex] = useState(0);
+  const [lastIndex, setLastIndex] = useState(bannerDetailLength - 1);
  const [randomData, setRandomData] = useState([]);
+  const [onFocus, setOnFocus] = useState(false);
+
+  // 비디오 처리
+  const getIndex = useCallback(
+    (index) => {
+      setStartIndex(index);
+    },
+    [startIndex]
+  );
+
+  const getFocus = useCallback(
+    (focus) => {
+      setOnFocus(focus);
+    },
+    [onFocus]
+  );

  useEffect(() => {
    if (bannerData) {
@@ -33,6 +50,12 @@ export default function RandomUnit({ bannerData, imageType }) {
          patncLogoPath={randomData.patncLogoPath}
          shptmLnkTpNm={randomData.shptmLnkTpNm}
          isHorizontal={imageType} // WIDTH = TRUE / FALSE
+          rolling={false}
+          lastIndex={lastIndex}
+          currentIndex={startIndex}
+          getIndex={getIndex}
+          getFocus={getFocus}
+          spotlightId={spotlightId}
        />
      ) : randomData.shptmBanrTpNm == "LIVE" ||
        randomData.shptmBanrTpNm == "VOD" ? (
@@ -49,6 +72,12 @@ export default function RandomUnit({ bannerData, imageType }) {
          productName={randomData.prdtNm}
          soldoutFlag={randomData.soldoutFlag}
          isHorizontal={imageType} // WIDTH = TRUE / FALSE
+          rolling={false}
+          lastIndex={lastIndex}
+          currentIndex={startIndex}
+          getIndex={getIndex}
+          getFocus={getFocus}
+          spotlightId={spotlightId}
        />
      ) : null}
    </>
--- a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx
@@ -87,9 +87,9 @@ export default function HomePanel({ isOnTop }) {
            (selectTemplate === "DSP00201" ? (
              <HomeBannerTemplate1 scrollTop={scrollTop} />
            ) : selectTemplate === "DSP00202" ? (
-              <HomeBannerTemplate2 />
+              <HomeBannerTemplate2 scrollTop={scrollTop} />
            ) : selectTemplate === "DSP00203" ? (
-              <HomeBannerTemplate3 />
+              <HomeBannerTemplate3 scrollTop={scrollTop} />
            ) : null)}
        </div>
        <SubCategory />
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.jsx
@@ -123,18 +123,20 @@ export default function HomeTodayDeal({
        isHorizontal && css.isHorizontalWrap
      )}
    >
-      {focusDown === true ? (
+      {rolling === true && focusDown === true ? (
        <div
          className={classNames(css.arrow, css.leftBtn)}
          onClick={handlePrev}
        ></div>
-      ) : (
+      ) : rolling === true ? (
        <SpottableComponent
          className={classNames(css.arrow, css.leftBtn)}
          onClick={handlePrev}
          spotlightId={spotlightId + "Prev"}
        ></SpottableComponent>
-      )}
+      ) : rolling === false ? (
+        <></>
+      ) : null}

      <SpottableComponent
        className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
@@ -159,18 +161,20 @@ export default function HomeTodayDeal({
        </div>
      </SpottableComponent>

-      {focusDown === true ? (
+      {rolling === true && focusDown === true ? (
        <div
          className={classNames(css.arrow, css.rightBtn)}
-          onClick={handleNext}
+          onClick={handlePrev}
        ></div>
-      ) : (
+      ) : rolling === true ? (
        <SpottableComponent
          className={classNames(css.arrow, css.rightBtn)}
-          onClick={handleNext}
+          onClick={handlePrev}
          spotlightId={spotlightId + "Next"}
        ></SpottableComponent>
-      )}
+      ) : rolling === false ? (
+        <></>
+      ) : null}
    </Container>
  );
 }