[HomePanel] Random,Rolling, TodayDeal 수정

2024-02-05 19:32:39 +09:00
parent 8b84a25552
commit c830db9d7e
6 changed files with 269 additions and 137 deletions
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx
@@ -1,18 +1,28 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';

-import classNames from "classnames";
-import { shallowEqual, useDispatch, useSelector } from "react-redux";
+import classNames from 'classnames';
+import {
+  shallowEqual,
+  useDispatch,
+  useSelector,
+} from 'react-redux';

-import { Job } from "@enact/core/util";
-import Marquee from "@enact/sandstone/Marquee";
-import Spotlight from "@enact/spotlight";
-import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
-import Spottable from "@enact/spotlight/Spottable";
+import { Job } from '@enact/core/util';
+import Marquee from '@enact/sandstone/Marquee';
+import Spotlight from '@enact/spotlight';
+import {
+  SpotlightContainerDecorator,
+} from '@enact/spotlight/SpotlightContainerDecorator';
+import Spottable from '@enact/spotlight/Spottable';

-import CustomImage from "../../../components/CustomImage/CustomImage";
-import Random from "./RandomUnit";
-import Rolling from "./RollingUnit";
-import css from "./Template.module.less";
+import CustomImage from '../../../components/CustomImage/CustomImage';
+import Random from './RandomUnit';
+import Rolling from './RollingUnit';
+import css from './Template.module.less';

 const SpottableComponent = Spottable("div");

@@ -105,9 +115,9 @@ export default function HomeBannerTemplate1({
        <div className={classNames(css.leftBannerBox, css.dualBox)}>
          {/* 배너1 */}
          {baner1Data.shptmDspyTpNm == "Rolling" ? (
-            <Rolling banerData={baner2Data} className={css.topBox} />
+            <Rolling bannerData={baner2Data} className={css.topBox} />
          ) : baner1Data.shptmDspyTpNm == "Random" ? (
-            <Random banerData={baner3Data} className={css.topBox} />
+            <Random bannerData={baner3Data} className={css.topBox} />
          ) : (
            <CustomImage
              delay={0}
@@ -118,19 +128,30 @@ export default function HomeBannerTemplate1({
              className={css.topBox}
            />
          )}
-          {/* 배너2 롤링 테스트 진행중 */}
+          {/* 배너2 */}
          {baner2Data.shptmDspyTpNm == "Rolling" ? (
-            <Random banerData={baner2Data} className={css.underBox} />
-          ) : null}
+            <Rolling bannerData={baner2Data} className={css.underBox} />
+          ) : baner2Data.shptmDspyTpNm == "Random" ? (
+            <Random bannerData={baner2Data} className={css.underBox} />
+          ) : (
+            <CustomImage
+              delay={0}
+              onClickBanner={onClickBanner}
+              onImageLoaded={""}
+              src={replaceBannerWdth}
+              hide={""}
+              className={css.topBox}
+            />
+          )}
        </div>
      </SpottableComponent>

      <div className={css.bannerFlexRow}>
        {/* 배너3 */}
        {baner3Data.shptmDspyTpNm == "Rolling" ? (
-          <Rolling banerData={baner3Data} />
+          <Rolling bannerData={baner3Data} />
        ) : baner3Data.shptmDspyTpNm == "Random" ? (
-          <Random banerData={baner3Data} />
+          <Random bannerData={baner3Data} />
        ) : (
          <SpottableComponent>
            <CustomImage
@@ -147,10 +168,10 @@ export default function HomeBannerTemplate1({
        {/* 배너4 */}
        {baner4Data.shptmDspyTpNm == "Rolling" ? (
          <SpottableComponent>
-            <Rolling banerData={baner4Data} />
+            <Rolling bannerData={baner4Data} />
          </SpottableComponent>
        ) : baner4Data.shptmDspyTpNm == "Random" ? (
-          <Random banerData={baner4Data} />
+          <Random bannerData={baner4Data} />
        ) : (
          <SpottableComponent>
            <CustomImage
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.jsx
@@ -1,23 +1,33 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';

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

-import { Job } from "@enact/core/util";
-import Marquee from "@enact/sandstone/Marquee";
-import Spotlight from "@enact/spotlight";
-import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
-import Spottable from "@enact/spotlight/Spottable";
+import { Job } from '@enact/core/util';
+import Marquee from '@enact/sandstone/Marquee';
+import Spotlight from '@enact/spotlight';
+import {
+  SpotlightContainerDecorator,
+} from '@enact/spotlight/SpotlightContainerDecorator';
+import Spottable from '@enact/spotlight/Spottable';

-import testimg from "../../../../assets/h430054.webp";
-import banner2 from "../../../../assets/Image/img-home-banner-h-02.png";
-import banner4 from "../../../../assets/Image/img-home-banner-v-02.png";
-import banner3 from "../../../../assets/images/mainTemplate/img-home-banner-td-ver.svg";
-import CustomImage from "../../../components/CustomImage/CustomImage";
-import HomeTodayDeal from "../HomeTodayDeal/HomeTodayDeal";
-import Random from "./RandomUnit";
-import Rolling from "./RollingUnit";
-import css from "./Template.module.less";
+import testimg from '../../../../assets/h430054.webp';
+import banner2 from '../../../../assets/Image/img-home-banner-h-02.png';
+import banner4 from '../../../../assets/Image/img-home-banner-v-02.png';
+import banner3
+  from '../../../../assets/images/mainTemplate/img-home-banner-td-ver.svg';
+import CustomImage from '../../../components/CustomImage/CustomImage';
+import HomeTodayDeal from '../HomeTodayDeal/HomeTodayDeal';
+import Random from './RandomUnit';
+import Rolling from './RollingUnit';
+import css from './Template.module.less';

 const SpottableComponent = Spottable("div");

@@ -110,9 +120,9 @@ export default function HomeBannerTemplate3({
      <div class={css.mainBox}>
        <SpottableComponent className={css.imgBox}>
          {baner1Data.shptmDspyTpNm == "Rolling" ? (
-            <Rolling banerData={baner1Data} />
+            <Rolling bannerData={baner1Data} />
          ) : baner1Data.shptmDspyTpNm == "Random" ? (
-            <Random banerData={baner1Data} />
+            <Random bannerData={baner1Data} />
          ) : (
            <CustomImage
              className={""}
@@ -127,17 +137,9 @@ export default function HomeBannerTemplate3({

        <SpottableComponent className={css.imgBox}>
          {baner2Data.shptmDspyTpNm == "Rolling" ? (
-            // 롤링으로 변경하기 구현 준비 중
-            <CustomImage
-              className={""}
-              delay={0}
-              onClickBanner={onClickBanner}
-              onImageLoaded={""}
-              src={replaceBannerVtctp}
-              hide={""}
-            />
+            <Rolling bannerData={baner2Data} />
          ) : baner2Data.shptmDspyTpNm == "Random" ? (
-            <Random banerData={baner2Data} />
+            <Random bannerData={baner2Data} />
          ) : (
            <CustomImage
              className={""}
@@ -153,9 +155,9 @@ export default function HomeBannerTemplate3({
        <div className={css.dualBox}>
          <SpottableComponent className={classNames(css.videoBox, css.topBox)}>
            {baner3Data.shptmDspyTpNm == "Rolling" ? (
-              <Rolling banerData={baner3Data} />
+              <Rolling bannerData={baner3Data} />
            ) : baner3Data.shptmDspyTpNm == "Random" ? (
-              <Random banerData={baner3Data} />
+              <Random bannerData={baner3Data} />
            ) : (
              <CustomImage
                className={""}
@@ -172,9 +174,9 @@ export default function HomeBannerTemplate3({
            className={classNames(css.videoBox, css.underBox)}
          >
            {baner4Data.shptmDspyTpNm == "Rolling" ? (
-              <Rolling banerData={baner4Data} />
+              <Rolling bannerData={baner4Data} />
            ) : baner4Data.shptmDspyTpNm == "Random" ? (
-              <Random banerData={baner4Data} />
+              <Random bannerData={baner4Data} />
            ) : (
              <CustomImage
                className={""}
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx
@@ -1,35 +1,49 @@
-import React, { useEffect, memo, useState, useRef, useCallback } from "react";
-import TodayDeal from "../HomeTodayDeal/HomeTodayDeal";
-import CustomImage from "../../../components/CustomImage/CustomImage";
-import css from "./Template.module.less";
-import VideoPlay from "@enact/sandstone/VideoPlayer";
+import React, {
+  memo,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';

-export default function RandomUnit({ banerData }) {
-    
-    const bannerDetailInfos = banerData.bannerDetailInfos;
-    const [randomData, setRandomData] = useState([]);
+import VideoPlay from '@enact/sandstone/VideoPlayer';

-    useEffect(()=> {
-        if(bannerDetailInfos){
-         const leng = banerData.bannerDetailInfos.length;
-         const num = Math.floor(Math.random() * leng);
-         setRandomData(bannerDetailInfos[num]);
-        }
-    }, [banerData]);
-    
-    return(
-        <>
-        {randomData.shptmBanrTpNm == "Image Banner" ? (
-          <p>TEST</p>
-          ) : randomData.shptmBanrTpNm == "LIVE" ||  randomData.shptmBanrTpNm == "VOD" ? (
-                <p>비디오</p>
-          ) : randomData.shptmBanrTpNm == "Today's Deals" || randomData.shptmBanrTpNm == "" ? (
-                <TodayDeal
-                    banerData={randomData}
-                    isHorizontal={true}
-                />
-          ) : null
-        }
-        </>
-    )
-};
+import CustomImage from '../../../components/CustomImage/CustomImage';
+import HomeTodayDeal from '../HomeTodayDeal/HomeTodayDeal';
+import css from './Template.module.less';
+
+export default function RandomUnit({ bannerData }) {
+  const bannerDetailInfos = bannerData.bannerDetailInfos;
+  const [randomData, setRandomData] = useState([]);
+
+  useEffect(() => {
+    if (bannerData) {
+      const leng = bannerData.bannerDetailInfos.length;
+      const num = Math.floor(Math.random() * leng);
+      setRandomData(bannerDetailInfos[num]);
+    }
+  }, [bannerData]);
+
+  return (
+    <>
+      {randomData.shptmBanrTpNm == "Image Banner" ? (
+        <p>TEST</p>
+      ) : randomData.shptmBanrTpNm == "LIVE" ||
+        randomData.shptmBanrTpNm == "VOD" ? (
+        <p>비디오</p>
+      ) : randomData.shptmBanrTpNm == "Today's Deals" ||
+        randomData.shptmBanrTpNm == "" ? (
+        <HomeTodayDeal
+          imgAlt={randomData.imgAlt}
+          imageName={randomData.tmnlImgNm}
+          imgPath={randomData.tmnlImgPath}
+          priceInfo={randomData.priceInfo}
+          productId={randomData.prdtId}
+          productName={randomData.prdtNm}
+          soldoutFlag={randomData.soldoutFlag}
+          isHorizontal={true}
+        />
+      ) : null}
+    </>
+  );
+}
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx
@@ -1,16 +1,74 @@
-import React, { useEffect, memo, useState, useRef } from "react";
-import CustomImage from "../../../components/CustomImage/CustomImage";
-import banerImage3 from "../../../../assets/Image/img-home-banner-v-01.png";
-import css from "./Template.module.less";
-import VideoPlay from "@enact/sandstone/VideoPlayer";
+import React, {
+  memo,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';

-export default function RollingUnit({ banerData }) {
+import VideoPlay from '@enact/sandstone/VideoPlayer';
+import VideoPlayer from '@enact/sandstone/VideoPlayer';
+import { VirtualGridList } from '@enact/sandstone/VirtualList';
+import ri from '@enact/ui/resolution';

-    useEffect(()=> {
-        
-    }, []);
+import CustomImage from '../../../components/CustomImage/CustomImage';
+import HomeTodayDeal from '../HomeTodayDeal/HomeTodayDeal';
+import css from './Template.module.less';

-    return(
-        <p>TEST</p>
-    )
-};
+const LIST_ITEM_CONF = {
+  ITEM_WIDTH: 561 * 2,
+  ITEM_HEIGHT: 150 * 2,
+  SPACING: 30 * 2,
+};
+
+export default function RollingUnit({ bannerData }) {
+  const renderItem = useCallback(
+    ({ index, ...rest }) => {
+      //   const itemData = itemDatas[index];
+      const shptmBanrTpNm = bannerData.bannerDetailInfos[index].shptmBanrTpNm;
+
+      if (shptmBanrTpNm === "Image Banner") {
+        return <CustomImage></CustomImage>;
+      }
+      if (shptmBanrTpNm === "LIVE" || shptmBanrTpNm === "VOD") {
+        return <VideoPlay></VideoPlay>;
+      }
+      if (shptmBanrTpNm === "Today's Deals") {
+        return (
+          <HomeTodayDeal
+            imgAlt={bannerData.bannerDetailInfos[index].imgAlt}
+            imageName={bannerData.bannerDetailInfos[index].tmnlImgNm}
+            imgPath={bannerData.bannerDetailInfos[index].tmnlImgPath}
+            priceInfo={bannerData.bannerDetailInfos[index].priceInfo}
+            productId={bannerData.bannerDetailInfos[index].prdtId}
+            productName={bannerData.bannerDetailInfos[index].prdtNm}
+            soldoutFlag={bannerData.bannerDetailInfos[index].soldoutFlag}
+            // isHorizontal={true}
+          />
+        );
+      }
+    },
+    [bannerData]
+  );
+
+  return (
+    <>
+      {bannerData && (
+        <VirtualGridList
+          className={""}
+          dataSize={bannerData.bannerDetailInfos.length}
+          direction="horizontal"
+          itemRenderer={renderItem}
+          itemSize={{
+            minWidth: ri.scale(LIST_ITEM_CONF.ITEM_WIDTH),
+            minHeight: ri.scale(LIST_ITEM_CONF.ITEM_HEIGHT),
+          }}
+          spacing={ri.scale(LIST_ITEM_CONF.SPACING)}
+          scrollMode="translate"
+          horizontalScrollbar="hidden"
+          noScrollByWheel
+        />
+      )}
+    </>
+  );
+}
--- a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx
@@ -1,16 +1,23 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';

-import { useDispatch, useSelector } from "react-redux";
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';

-import TPanel from "../../components/TPanel/TPanel";
-import BestSeller from "../HomePanel/BestSeller/BestSeller";
-import HomeBannerTemplate1 from "../HomePanel/HomeBanner/HomeBannerTemplate1";
-import HomeBannerTemplate2 from "../HomePanel/HomeBanner/HomeBannerTemplate2";
-import HomeBannerTemplate3 from "../HomePanel/HomeBanner/HomeBannerTemplate3";
-import HomeOnSale from "../HomePanel/HomeOnSale/HomeOnSale";
-import css from "../HomePanel/HomePanel.module.less";
-import PopularShow from "../HomePanel/PopularShow/PopularShow";
-import SubCategory from "../HomePanel/SubCategory/SubCategory";
+import TPanel from '../../components/TPanel/TPanel';
+import BestSeller from '../HomePanel/BestSeller/BestSeller';
+import HomeBannerTemplate1 from '../HomePanel/HomeBanner/HomeBannerTemplate1';
+import HomeBannerTemplate2 from '../HomePanel/HomeBanner/HomeBannerTemplate2';
+import HomeBannerTemplate3 from '../HomePanel/HomeBanner/HomeBannerTemplate3';
+import HomeOnSale from '../HomePanel/HomeOnSale/HomeOnSale';
+import css from '../HomePanel/HomePanel.module.less';
+import PopularShow from '../HomePanel/PopularShow/PopularShow';
+import SubCategory from '../HomePanel/SubCategory/SubCategory';

 export default function HomePanel() {
  const dispatch = useDispatch();
@@ -26,7 +33,7 @@ export default function HomePanel() {
  const [homeLayoutInfoDetail, setHomeLayoutInfoDetail] = useState([]);
  // 추후 스위치 select 로 변경 : 스팟라이트 테스트 중
  const selectSwitch = () => {
-    switch ("DSP00201") {
+    switch ("DSP00203") {
      case "DSP00201":
        return (
          <HomeBannerTemplate1
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.jsx
@@ -1,43 +1,73 @@
-import React, { useEffect, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';

-import classNames from "classnames";
+import classNames from 'classnames';

-import Spottable from "@enact/spotlight/Spottable";
+import Spottable from '@enact/spotlight/Spottable';

-import css from "./HomeTodayDeal.module.less";
+import css from './HomeTodayDeal.module.less';

 const SpottableComponent = Spottable("div");

 export default function HomeTodayDeal({
-  homeMainContentsBannerInfos,
+  children,
+  imageAlt,
+  imgName,
+  imgPath,
+  priceInfo,
+  productId,
+  productName,
+  soldoutFlag,
  isHorizontal,
-  rolling,
-  banerData,
  ...rest
 }) {
+  const handleClick = useCallback(
+    (productId) => {
+      console.log("상세 페이지 이동");
+    },
+    [productId]
+  );

-  const [salePrice, setSalePrice] = useState("");
-  const [originalPrice, setOriginalPrice] = useState("");
+  const parsePriceInfo = useCallback(
+    (priceInfo) => {
+      const priceParts = priceInfo
+        .split("|")
+        .filter((part) => part !== "N")
+        .map((item) => item.trim());

-  useEffect(() => {
-    if(banerData){
-      const priceInfo = banerData.priceInfo;
-      setOriginalPrice(priceInfo.split("|")[0]);    
-      if (priceInfo.split("|")[3] == "") {
-        setSalePrice(priceInfo.split("|")[1]);
-      }      
-    }    
-  }, [banerData]);
+      let originalPrice, discountedPrice, discountRate;
+      if (priceParts.length === 4) {
+        [originalPrice, discountedPrice, , discountRate] = priceParts;
+      } else if (priceParts.length === 2) {
+        [originalPrice, discountedPrice] = priceParts;
+        discountRate = null;
+      } else {
+        originalPrice = null;
+        discountedPrice = null;
+        discountRate = null;
+      }
+
+      return { originalPrice, discountedPrice, discountRate };
+    },
+    [priceInfo]
+  );
+
+  const { originalPrice, discountedPrice, discountRate } =
+    parsePriceInfo(priceInfo);

  return (
    <SpottableComponent
      className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
+      onClick={() => handleClick(productId)}
    >
      <div>
-        <div className={css.textBox}>{banerData.prdtNm}</div>
+        <div className={css.textBox}>{productName}</div>
        <div className={css.accBox}>
-          {salePrice}
-          {salePrice != originalPrice ? (
+          {discountedPrice}
+          {discountedPrice != originalPrice ? (
            <span className={css.saleAccBox}>{originalPrice}</span>
          ) : (
            <></>
@@ -45,17 +75,17 @@ export default function HomeTodayDeal({
        </div>
      </div>
      <div className={css.itemImgBox}>
-        <img src={banerData.tmnlImgNm} />
+        <img src={imgPath} />
      </div>
-      {rolling == true ? (
+
+      {/* {rolling == true ? (
        <>
          <div className={css.leftBtn}></div>
          <div className={css.rightBtn}></div>
        </>
      ) : (
        <></>
-      )}
+      )} */}
    </SpottableComponent>
-
  );
 }