[홈패널] 이미지 배너 / 상세페이지 연동 테스트

2024-02-21 18:50:26 +09:00
parent 217e1ff2a7
commit c49901c5b6
5 changed files with 308 additions and 25 deletions
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx
@@ -69,8 +69,6 @@ export default function HomeBannerTemplate1({ ...rest }) {
    }
  }, [homeMainContentsBannerInfos, dispatch]);

-  const [startFocus, setStartFocus] = useState();
-
  return (
    <Container {...rest} className={css.container} spotlightId={"top"}>
      <div className={css.homeTemplateBox}>
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/ImageBannerUnit.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/ImageBannerUnit.jsx
@@ -0,0 +1,157 @@
+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 { getHomeMainContents } from '../../../actions/homeActions';
+// import { pushPanel } from '../../../actions/panelActions';
+// import { panel_names } from '../../../utils/Config';
+import css from '../HomeBanner/ImageBannerUnit.module.less';
+
+const Container = SpotlightContainerDecorator(
+  { enterTo: "last-focused" },
+  "div"
+);
+
+const SpottableComponent = Spottable("div");
+
+// 이미지 배너 테스트중
+export default function ImageBannerUnit({
+  children,
+  imageAlt,
+  imgName,
+  imgPath,
+  showUrl,
+  showNm,
+  patncLogoPath,
+  priceInfo,
+  patnrId,
+  prdtId,
+  productId,
+  productName,
+  soldoutFlag,
+  isHorizontal,
+  rolling,
+  startIndex,
+  lastIndex,
+  currentIndex,
+  getIndex,
+  getFocus,
+  spotlightId,
+  startFocus,
+  ...rest
+}) {
+  const homeTopDisplayInfos = useSelector(
+    (state) => state.home.mainContentsData.homeTopDisplayInfos
+  );
+
+  const [vctpImage1, setVctpImage1] = useState();
+  const [vctpImage2, setVctpImage2] = useState();
+  const [wdthImage1, setwdthImage1] = useState();
+  const [wdthImage2, setwdthImage2] = useState();
+
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (homeTopDisplayInfos) {
+      setVctpImage1(homeTopDisplayInfos[0].vtctpImgPath1);
+      setVctpImage2(homeTopDisplayInfos[0].vtctpImgPath2);
+      setwdthImage1(homeTopDisplayInfos[0].wdthtpImgPath1);
+      setwdthImage2(homeTopDisplayInfos[0].wdthtpImgPath2);
+
+      dispatch(getHomeMainContents);
+    }
+  }, [homeTopDisplayInfos, dispatch]);
+
+  const handleClick = useCallback(() => {
+    console.log("파트너ID", patnrId);
+    console.log("상품", prdtId);
+
+    // dispatch(
+    //   pushPanel({
+    //     name: panel_names.DETAIL_PANEL,
+    //     panelInfo: { patnrId: patnrId, prdtId: prdtId },
+    //   })
+    // );
+  }, [dispatch, patnrId, productId]);
+
+  const handlePrev = () => {
+    if (currentIndex === 0) {
+      getIndex(lastIndex);
+      return;
+    }
+    getIndex(currentIndex - 1);
+  };
+
+  const handleNext = () => {
+    if (lastIndex === currentIndex) {
+      getIndex(0);
+      return;
+    }
+    getIndex(currentIndex + 1);
+  };
+
+  const _onFocus = () => {
+    if (rolling === true) {
+      getFocus(true);
+    }
+  };
+
+  const _onBlur = () => {
+    if (rolling === true) {
+      getFocus(false);
+    }
+  };
+
+  // useEffect(() => {
+  //   if (startFocus === false) {
+  //     Spotlight.focus("banner01");
+  //   }
+  // }, [startFocus]);
+
+  return (
+    <Container
+      className={classNames(
+        css.rollingWrap,
+        isHorizontal && css.isHorizontalWrap
+      )}
+    >
+      {rolling === true && (
+        <SpottableComponent
+          className={classNames(css.arrow, css.leftBtn)}
+          onClick={handlePrev}
+        ></SpottableComponent>
+      )}
+      <SpottableComponent
+        className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
+        onClick={handleClick}
+        onFocus={_onFocus}
+        onBlur={_onBlur}
+        spotlightId={spotlightId}
+      >
+        <div>
+          <img src={wdthImage1} />
+        </div>
+      </SpottableComponent>
+
+      {rolling === true && (
+        <SpottableComponent
+          className={classNames(css.arrow, css.rightBtn)}
+          onClick={handleNext}
+        ></SpottableComponent>
+      )}
+    </Container>
+  );
+}
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/ImageBannerUnit.module.less
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/ImageBannerUnit.module.less
@@ -0,0 +1,96 @@
+@import "../../../style/CommonStyle.module.less";
+@import "../../../style/utils.module.less";
+.rollingWrap {
+  position: relative;
+  .itemBox {
+    .size(@w: 486px, @h: 858px);
+    background-image: url("");
+    background-size: 486px 858px;
+    background-position: left top;
+    border-radius: 12px;
+    position: relative;
+    padding: 268px 36px 0;
+    img {
+      width: 100%;
+      object-fit: contain;
+    }
+    text-align: center;
+
+    .itemImgBox {
+      > img {
+        .size(@w: 354px, @h: 354px);
+      }
+    }
+
+    .imgBox {
+      .size(@w: 486px, @h: 858px);
+      > div {
+        position: relative;
+        &:focus {
+          &::after {
+            .focused(@boxShadow:22px, @borderRadius:12px);
+          }
+        }
+        > img {
+          .size(@w: 486px, @h: 858px);
+          border-radius: 12px;
+          object-fit: contain;
+        }
+      }
+    }
+
+    &.isHorizontal {
+      .size(@w: 744px, @h: 420px);
+      background-image: url(../../../../assets/images/img_home_banner_td_hor.png);
+      background-size: 744px 420px;
+      background-position: center center;
+      display: flex;
+      padding: 0 30px 0 0;
+      > div {
+        flex: none;
+      }
+      .accBox {
+        .size(@w: 320px, @h: 50px);
+        margin-left: 50px;
+        text-align: left;
+        .saleAccBox {
+          color: #767676;
+        }
+      }
+      .itemImgBox {
+        margin: 47px 0 0 8px;
+        > img {
+          .size(@w: 324px, @h: 324px);
+        }
+      }
+    }
+    &:focus {
+      &::after {
+        .focused(@boxShadow:22px, @borderRadius: 12px);
+      }
+    }
+  }
+
+  .arrow {
+    z-index: 10;
+    .size(@w: 61px, @h: calc(100% + 2px));
+    background-size: 42px 42px;
+    background-repeat: no-repeat;
+    &.leftBtn {
+      .position(@position: absolute, @top: -1px, @left: -1px);
+      background-image: url("../../../../assets/images/btn/btn_prev_thumb_nor.png");
+      background-position: center right;
+      &:focus {
+        background-image: url("../../../../assets/images/btn/btn_prev_thumb_foc.png");
+      }
+    }
+    &.rightBtn {
+      .position(@position: absolute, @top: -1px, @right: -1px);
+      background-image: url("../../../../assets/images/btn/btn_next_thumb_nor.png");
+      background-position: center left;
+      &:focus {
+        background-image: url("../../../../assets/images/btn/btn_next_thumb_foc.png");
+      }
+    }
+  }
+}
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx
@@ -8,22 +8,19 @@ import VideoPlay from '@enact/sandstone/VideoPlayer';

 import CustomImage from '../../../components/CustomImage/CustomImage';
 import HomeTodayDeal from '../HomeTodayDeal/HomeTodayDeal';
+import ImageBanner from './ImageBannerUnit';

 export default function RollingUnit({ bannerData, imageType, spotlightId }) {
  const bannerDetailInfos = bannerData.bannerDetailInfos;
  const bannerDetailInfosLength = bannerData.bannerDetailInfos.length;

-  const [shptmBanrTpNm, setShptmBanrTpNm] = useState();
  const [count, setCount] = useState(10);
-  const [detailLenghth, setDetailLength] = useState();
  const [startIndex, setStartIndex] = useState(0);
-  const [lastIndex, setLastIndex] = useState();
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const [onFocus, setOnFocus] = useState(false);
+  const [lastIndex, setLastIndex] = useState(null);
  const [startFocus, setStartFocus] = useState(false);
+  const [onFocus, setOnFocus] = useState(false);

  const getIndex = (index) => {
-    setCurrentIndex(index);
    setStartIndex(index);
  };

@@ -33,8 +30,6 @@ export default function RollingUnit({ bannerData, imageType, spotlightId }) {

  useEffect(() => {
    if (bannerData) {
-      setDetailLength(bannerDetailInfosLength);
-      setShptmBanrTpNm(bannerDetailInfos[startIndex].shptmBanrTpNm);
      setLastIndex(bannerDetailInfosLength - 1);
    }
  }, [bannerData, startIndex]);
@@ -70,17 +65,42 @@ export default function RollingUnit({ bannerData, imageType, spotlightId }) {
    <>
      {bannerDetailInfos &&
      bannerDetailInfos[startIndex].shptmBanrTpNm === "Image Banner" ? (
-        <CustomImage />
+        /* <ImageBanner
+          imgAlt={bannerDetailInfos[startIndex].tmnlImgAlt}
+          imageName={bannerDetailInfos[startIndex].tmnlImgNm}
+          imgPath={bannerDetailInfos[startIndex].tmnlImgPath}
+          patnrId={bannerDetailInfos[startIndex].patnrId}
+          prdtId={bannerDetailInfos[startIndex].prdtId}
+          productName={bannerDetailInfos[startIndex].prdtNm}
+          showUrl={bannerDetailInfos[startIndex].showUrl}
+          showNm={bannerDetailInfos[startIndex].showNm}
+          patncLogoPath={bannerDetailInfos[startIndex].patncLogoPath}
+          shptmLnkTpNm={bannerDetailInfos[startIndex].shptmLnkTpNm}
+          isHorizontal={imageType} // WIDTH = TRUE / FALSE
+          rolling={bannerDetailInfosLength === 1 ? false : true}
+          lastIndex={lastIndex}
+          currentIndex={startIndex}
+          getIndex={getIndex}
+          getFocus={getFocus}
+          spotlightId={spotlightId}
+          startFocus={startFocus}
+        /> */
+        <>
+          <p>이미지 배너 테스트</p>
+        </>
      ) : bannerDetailInfos[startIndex].shptmBanrTpNm === "LIVE" ||
        bannerDetailInfos[startIndex].shptmBanrTpNm === "VOD" ? (
-        (setStartFocus(true), (<VideoPlay />))
+        <>
+          <p>비디오 테스트</p>
+        </>
      ) : bannerDetailInfos[startIndex].shptmBanrTpNm === "Today's Deals" ? (
        <HomeTodayDeal
-          imgAlt={bannerDetailInfos[startIndex].imgAlt}
+          imgAlt={bannerDetailInfos[startIndex].tmnlImgAlt}
          imageName={bannerDetailInfos[startIndex].tmnlImgNm}
          imgPath={bannerDetailInfos[startIndex].tmnlImgPath}
          priceInfo={bannerDetailInfos[startIndex].priceInfo}
-          productId={bannerDetailInfos[startIndex].prdtId}
+          patnrId={bannerDetailInfos[startIndex].patnrId}
+          prdtId={bannerDetailInfos[startIndex].prdtId}
          productName={bannerDetailInfos[startIndex].prdtNm}
          soldoutFlag={bannerDetailInfos[startIndex].soldoutFlag}
          isHorizontal={imageType} // WIDTH = TRUE / FALSE
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.jsx
@@ -5,12 +5,15 @@ import React, {
 } from 'react';

 import classNames from 'classnames';
+import { useDispatch } from 'react-redux';

 import Spotlight from '@enact/spotlight';
 import SpotlightContainerDecorator
  from '@enact/spotlight/SpotlightContainerDecorator';
 import Spottable from '@enact/spotlight/Spottable';

+import { pushPanel } from '../../../actions/panelActions';
+import { panel_names } from '../../../utils/Config';
 import css from './HomeTodayDeal.module.less';

 const Container = SpotlightContainerDecorator(
@@ -26,6 +29,8 @@ export default function HomeTodayDeal({
  imgName,
  imgPath,
  priceInfo,
+  patnrId,
+  prdtId,
  productId,
  productName,
  soldoutFlag,
@@ -40,10 +45,19 @@ export default function HomeTodayDeal({
  startFocus,
  ...rest
 }) {
-  const handleClick = () => {
-    let proId = productId;
-    console.log("상품ID : ", proId);
-  };
+  const dispatch = useDispatch();
+
+  const handleClick = useCallback(() => {
+    console.log("파트너ID", patnrId);
+    console.log("상품", prdtId);
+
+    // dispatch(
+    //   pushPanel({
+    //     name: panel_names.DETAIL_PANEL,
+    //     panelInfo: { patnrId: patnrId, prdtId: prdtId },
+    //   })
+    // );
+  }, [dispatch, patnrId, productId]);

  const handlePrev = () => {
    if (currentIndex === 0) {
@@ -100,13 +114,11 @@ export default function HomeTodayDeal({
  const { originalPrice, discountedPrice, discountRate } =
    parsePriceInfo(priceInfo);

-  useEffect(() => {
-    if (startFocus === false) {
-      Spotlight.focus("banner01");
-    }
-  }, [startFocus]);
-
-  let temp = useEffect(() => {}, []);
+  // useEffect(() => {
+  //   if (startFocus === false) {
+  //     Spotlight.focus("banner01");
+  //   }
+  // }, [startFocus]);

  return (
    <Container