[홈패널] 이미지 배너 추가

2024-02-22 13:44:48 +09:00
parent e85764ed7e
commit 92092f4454
6 changed files with 46 additions and 97 deletions
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx
@@ -4,7 +4,6 @@ import React, {
  useState,
 } from 'react';

-import classNames from 'classnames';
 import {
  useDispatch,
  useSelector,
@@ -32,7 +31,7 @@ const ContainerBasic = SpotlightContainerDecorator(
  "div"
 );

-export default function HomeBannerTemplate1({ ...rest }) {
+export default function HomeBannerTemplate1() {
  const dispatch = useDispatch();
  const [bannerInfos, setBannerInfos] = useState([]);
  const [vctpImage1, setVctpImage1] = useState();
@@ -54,6 +53,7 @@ export default function HomeBannerTemplate1({ ...rest }) {
      setVctpImage2(homeTopDisplayInfos[0].vtctpImgPath2);
      setwdthImage1(homeTopDisplayInfos[0].wdthtpImgPath1);
      setwdthImage2(homeTopDisplayInfos[0].wdthtpImgPath2);
+      Spotlight.focus("banner01");

      dispatch(getHomeMainContents);
    }
@@ -70,7 +70,7 @@ export default function HomeBannerTemplate1({ ...rest }) {
  }, [homeMainContentsBannerInfos, dispatch]);

  return (
-    <Container {...rest} className={css.container} spotlightId={"top"}>
+    <Container className={css.container} spotlightId={"top"}>
      <div className={css.homeTemplateBox}>
        <div className={css.mainBox}>
          <ContainerBasic className={css.dualBox}>
@@ -82,7 +82,6 @@ export default function HomeBannerTemplate1({ ...rest }) {
                    item.shptmDspyTpNm == "Rolling" ? (
                    <Rolling
                      bannerData={item}
-                      index={index}
                      key={item.banrLctnNo}
                      imageType={true}
                      spotlightId={"banner01"}
@@ -114,7 +113,6 @@ export default function HomeBannerTemplate1({ ...rest }) {
                    item.shptmDspyTpNm == "Rolling" ? (
                    <Rolling
                      bannerData={item}
-                      index={index}
                      key={item.banrLctnNo}
                      imageType={true}
                      spotlightId={"banner02"}
@@ -147,7 +145,6 @@ export default function HomeBannerTemplate1({ ...rest }) {
                  item.shptmDspyTpNm == "Rolling" ? (
                  <Rolling
                    bannerData={item}
-                    index={index}
                    key={item.banrLctnNo}
                    imageType={false}
                    spotlightId={"banner03"}
@@ -176,7 +173,6 @@ export default function HomeBannerTemplate1({ ...rest }) {
                  item.shptmDspyTpNm == "Rolling" ? (
                  <Rolling
                    bannerData={item}
-                    index={index}
                    key={item.banrLctnNo}
                    imageType={false}
                    spotlightId={"banner04"}
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.jsx
@@ -4,7 +4,6 @@ import React, {
  useState,
 } from 'react';

-import classNames from 'classnames';
 import {
  useDispatch,
  useSelector,
@@ -84,7 +83,6 @@ export default function HomeBannerTemplate2({ ...rest }) {
                  item.shptmDspyTpNm == "Rolling" ? (
                  <Rolling
                    bannerData={item}
-                    index={index}
                    key={item.banrLctnNo}
                    imageType={false}
                    spotlightId={"banner01"}
@@ -117,7 +115,6 @@ export default function HomeBannerTemplate2({ ...rest }) {
                    item.shptmDspyTpNm == "Rolling" ? (
                    <Rolling
                      bannerData={item}
-                      index={index}
                      key={item.banrLctnNo}
                      imageType={true}
                      spotlightId={"banner02"}
@@ -149,7 +146,6 @@ export default function HomeBannerTemplate2({ ...rest }) {
                    item.shptmDspyTpNm == "Rolling" ? (
                    <Rolling
                      bannerData={item}
-                      index={index}
                      key={item.banrLctnNo}
                      imageType={true}
                      spotlightId={"banner03"}
@@ -182,7 +178,6 @@ export default function HomeBannerTemplate2({ ...rest }) {
                  item.shptmDspyTpNm == "Rolling" ? (
                  <Rolling
                    bannerData={item}
-                    index={index}
                    key={item.banrLctnNo}
                    imageType={false}
                    spotlightId={"banner04"}
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/ImageBannerUnit.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/ImageBannerUnit.jsx
@@ -15,7 +15,6 @@ 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';
@@ -53,39 +52,16 @@ export default function ImageBannerUnit({
  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]);
+  }, [patnrId, productId]);

  const handlePrev = () => {
    if (currentIndex === 0) {
@@ -141,9 +117,13 @@ export default function ImageBannerUnit({
        onBlur={_onBlur}
        spotlightId={spotlightId}
      >
-        <div>
-          <img src={wdthImage1} />
+        <div className={css.imgBanner}>
+          <img src={imgPath} />
        </div>
+
+        <p className={css.brandIcon}>
+          <img src={patncLogoPath} />
+        </p>
      </SpottableComponent>

      {rolling === true && (
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/ImageBannerUnit.module.less
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/ImageBannerUnit.module.less
@@ -4,63 +4,18 @@
  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 {
+    .imgBanner {
      > img {
-        .size(@w: 354px, @h: 354px);
+        border-radius: 12px;
+        .size(@w: 486px, @h: 858px);
      }
    }
-
-    .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;
+      .imgBanner {
        > img {
-          .size(@w: 324px, @h: 324px);
+          .size(@w: 744px, @h: 420px);
        }
      }
    }
@@ -69,6 +24,18 @@
        .focused(@boxShadow:22px, @borderRadius: 12px);
      }
    }
+    .brandIcon {
+      border-radius: 50%;
+      overflow: hidden;
+      border: 1px solid #fff;
+      position: absolute;
+      right: 30px;
+      bottom: 30px;
+      > img {
+        border-radius: 50%;
+        .size(@w:60px, @h:60px);
+      }
+    }
  }

  .arrow {
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx
@@ -4,6 +4,7 @@ import React, {
 } from 'react';

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

 export default function RandomUnit({ bannerData, imageType }) {
  const bannerDetailInfos = bannerData.bannerDetailInfos;
@@ -20,7 +21,19 @@ export default function RandomUnit({ bannerData, imageType }) {
  return (
    <>
      {randomData.shptmBanrTpNm == "Image Banner" ? (
-        <p>이미지 배너</p>
+        <ImageBanner
+          imgAlt={randomData.tmnlImgAlt}
+          imageName={randomData.tmnlImgNm}
+          imgPath={randomData.tmnlImgPath}
+          patnrId={randomData.patnrId}
+          prdtId={randomData.prdtId}
+          productName={randomData.prdtNm}
+          showUrl={randomData.showUrl}
+          showNm={randomData.showNm}
+          patncLogoPath={randomData.patncLogoPath}
+          shptmLnkTpNm={randomData.shptmLnkTpNm}
+          isHorizontal={imageType} // WIDTH = TRUE / FALSE
+        />
      ) : randomData.shptmBanrTpNm == "LIVE" ||
        randomData.shptmBanrTpNm == "VOD" ? (
        <p>비디오/LIVE</p>
@@ -30,11 +43,12 @@ export default function RandomUnit({ bannerData, imageType }) {
          imgAlt={randomData.imgAlt}
          imageName={randomData.tmnlImgNm}
          imgPath={randomData.tmnlImgPath}
+          patnrId={randomData.patnrId}
+          prdtId={randomData.prdtId}
          priceInfo={randomData.priceInfo}
-          productId={randomData.prdtId}
          productName={randomData.prdtNm}
          soldoutFlag={randomData.soldoutFlag}
-          isHorizontal={imageType}
+          isHorizontal={imageType} // WIDTH = TRUE / FALSE
        />
      ) : null}
    </>
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx
@@ -65,7 +65,7 @@ export default function RollingUnit({ bannerData, imageType, spotlightId }) {
    <>
      {bannerDetailInfos &&
      bannerDetailInfos[startIndex].shptmBanrTpNm === "Image Banner" ? (
-        /* <ImageBanner
+        <ImageBanner
          imgAlt={bannerDetailInfos[startIndex].tmnlImgAlt}
          imageName={bannerDetailInfos[startIndex].tmnlImgNm}
          imgPath={bannerDetailInfos[startIndex].tmnlImgPath}
@@ -84,10 +84,7 @@ export default function RollingUnit({ bannerData, imageType, spotlightId }) {
          getFocus={getFocus}
          spotlightId={spotlightId}
          startFocus={startFocus}
-        /> */
-        <>
-          <p>이미지 배너 테스트</p>
-        </>
+        />
      ) : bannerDetailInfos[startIndex].shptmBanrTpNm === "LIVE" ||
        bannerDetailInfos[startIndex].shptmBanrTpNm === "VOD" ? (
        <>