[HomePanel] Random,Rolling, TodayDeal 수정

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 classNames from 'classnames';
-import { shallowEqual, useDispatch, useSelector } from "react-redux";
+import {
+  shallowEqual,
+  useDispatch,
+  useSelector,
+} from 'react-redux';
 
-import { Job } from "@enact/core/util";
+import { Job } from '@enact/core/util';
-import Marquee from "@enact/sandstone/Marquee";
+import Marquee from '@enact/sandstone/Marquee';
-import Spotlight from "@enact/spotlight";
+import Spotlight from '@enact/spotlight';
-import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
+import {
-import Spottable from "@enact/spotlight/Spottable";
+  SpotlightContainerDecorator,
+} from '@enact/spotlight/SpotlightContainerDecorator';
+import Spottable from '@enact/spotlight/Spottable';
 
-import CustomImage from "../../../components/CustomImage/CustomImage";
+import CustomImage from '../../../components/CustomImage/CustomImage';
-import Random from "./RandomUnit";
+import Random from './RandomUnit';
-import Rolling from "./RollingUnit";
+import Rolling from './RollingUnit';
-import css from "./Template.module.less";
+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} />
+            <Rolling bannerData={baner2Data} className={css.underBox} />
-          ) : null}
+          ) : 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

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 classNames from 'classnames';
-import { useDispatch, useSelector } from "react-redux";
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';
 
-import { Job } from "@enact/core/util";
+import { Job } from '@enact/core/util';
-import Marquee from "@enact/sandstone/Marquee";
+import Marquee from '@enact/sandstone/Marquee';
-import Spotlight from "@enact/spotlight";
+import Spotlight from '@enact/spotlight';
-import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
+import {
-import Spottable from "@enact/spotlight/Spottable";
+  SpotlightContainerDecorator,
+} from '@enact/spotlight/SpotlightContainerDecorator';
+import Spottable from '@enact/spotlight/Spottable';
 
-import testimg from "../../../../assets/h430054.webp";
+import testimg from '../../../../assets/h430054.webp';
-import banner2 from "../../../../assets/Image/img-home-banner-h-02.png";
+import banner2 from '../../../../assets/Image/img-home-banner-h-02.png';
-import banner4 from "../../../../assets/Image/img-home-banner-v-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 banner3
-import CustomImage from "../../../components/CustomImage/CustomImage";
+  from '../../../../assets/images/mainTemplate/img-home-banner-td-ver.svg';
-import HomeTodayDeal from "../HomeTodayDeal/HomeTodayDeal";
+import CustomImage from '../../../components/CustomImage/CustomImage';
-import Random from "./RandomUnit";
+import HomeTodayDeal from '../HomeTodayDeal/HomeTodayDeal';
-import Rolling from "./RollingUnit";
+import Random from './RandomUnit';
-import css from "./Template.module.less";
+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" ? (
-            // 롤링으로 변경하기 구현 준비 중
+            <Rolling bannerData={baner2Data} />
-            <CustomImage
-              className={""}
-              delay={0}
-              onClickBanner={onClickBanner}
-              onImageLoaded={""}
-              src={replaceBannerVtctp}
-              hide={""}
-            />
           ) : 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={""}

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

@@ -1,35 +1,49 @@
-import React, { useEffect, memo, useState, useRef, useCallback } from "react";
+import React, {
-import TodayDeal from "../HomeTodayDeal/HomeTodayDeal";
+  memo,
-import CustomImage from "../../../components/CustomImage/CustomImage";
+  useCallback,
-import css from "./Template.module.less";
+  useEffect,
-import VideoPlay from "@enact/sandstone/VideoPlayer";
+  useRef,
+  useState,
+} from 'react';
 
-export default function RandomUnit({ banerData }) {
+import VideoPlay from '@enact/sandstone/VideoPlayer';
-    
-    const bannerDetailInfos = banerData.bannerDetailInfos;
-    const [randomData, setRandomData] = useState([]);
 
-    useEffect(()=> {
+import CustomImage from '../../../components/CustomImage/CustomImage';
-        if(bannerDetailInfos){
+import HomeTodayDeal from '../HomeTodayDeal/HomeTodayDeal';
-         const leng = banerData.bannerDetailInfos.length;
+import css from './Template.module.less';
-         const num = Math.floor(Math.random() * leng);
+
-         setRandomData(bannerDetailInfos[num]);
+export default function RandomUnit({ bannerData }) {
-        }
+  const bannerDetailInfos = bannerData.bannerDetailInfos;
-    }, [banerData]);
+  const [randomData, setRandomData] = useState([]);
-    
+
-    return(
+  useEffect(() => {
-        <>
+    if (bannerData) {
-        {randomData.shptmBanrTpNm == "Image Banner" ? (
+      const leng = bannerData.bannerDetailInfos.length;
-          <p>TEST</p>
+      const num = Math.floor(Math.random() * leng);
-          ) : randomData.shptmBanrTpNm == "LIVE" ||  randomData.shptmBanrTpNm == "VOD" ? (
+      setRandomData(bannerDetailInfos[num]);
-                <p>비디오</p>
+    }
-          ) : randomData.shptmBanrTpNm == "Today's Deals" || randomData.shptmBanrTpNm == "" ? (
+  }, [bannerData]);
-                <TodayDeal
+
-                    banerData={randomData}
+  return (
-                    isHorizontal={true}
+    <>
-                />
+      {randomData.shptmBanrTpNm == "Image Banner" ? (
-          ) : null
+        <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}
+    </>
+  );
+}

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

@@ -1,16 +1,74 @@
-import React, { useEffect, memo, useState, useRef } from "react";
+import React, {
-import CustomImage from "../../../components/CustomImage/CustomImage";
+  memo,
-import banerImage3 from "../../../../assets/Image/img-home-banner-v-01.png";
+  useCallback,
-import css from "./Template.module.less";
+  useEffect,
-import VideoPlay from "@enact/sandstone/VideoPlayer";
+  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(
+const LIST_ITEM_CONF = {
-        <p>TEST</p>
+  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
+        />
+      )}
+    </>
+  );
+}

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 TPanel from '../../components/TPanel/TPanel';
-import BestSeller from "../HomePanel/BestSeller/BestSeller";
+import BestSeller from '../HomePanel/BestSeller/BestSeller';
-import HomeBannerTemplate1 from "../HomePanel/HomeBanner/HomeBannerTemplate1";
+import HomeBannerTemplate1 from '../HomePanel/HomeBanner/HomeBannerTemplate1';
-import HomeBannerTemplate2 from "../HomePanel/HomeBanner/HomeBannerTemplate2";
+import HomeBannerTemplate2 from '../HomePanel/HomeBanner/HomeBannerTemplate2';
-import HomeBannerTemplate3 from "../HomePanel/HomeBanner/HomeBannerTemplate3";
+import HomeBannerTemplate3 from '../HomePanel/HomeBanner/HomeBannerTemplate3';
-import HomeOnSale from "../HomePanel/HomeOnSale/HomeOnSale";
+import HomeOnSale from '../HomePanel/HomeOnSale/HomeOnSale';
-import css from "../HomePanel/HomePanel.module.less";
+import css from '../HomePanel/HomePanel.module.less';
-import PopularShow from "../HomePanel/PopularShow/PopularShow";
+import PopularShow from '../HomePanel/PopularShow/PopularShow';
-import SubCategory from "../HomePanel/SubCategory/SubCategory";
+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

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 parsePriceInfo = useCallback(
-  const [originalPrice, setOriginalPrice] = useState("");
+    (priceInfo) => {
+      const priceParts = priceInfo
+        .split("|")
+        .filter((part) => part !== "N")
+        .map((item) => item.trim());
 
-  useEffect(() => {
+      let originalPrice, discountedPrice, discountRate;
-    if(banerData){
+      if (priceParts.length === 4) {
-      const priceInfo = banerData.priceInfo;
+        [originalPrice, discountedPrice, , discountRate] = priceParts;
-      setOriginalPrice(priceInfo.split("|")[0]);    
+      } else if (priceParts.length === 2) {
-      if (priceInfo.split("|")[3] == "") {
+        [originalPrice, discountedPrice] = priceParts;
-        setSalePrice(priceInfo.split("|")[1]);
+        discountRate = null;
-      }      
+      } else {
-    }    
+        originalPrice = null;
-  }, [banerData]);
+        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}
+          {discountedPrice}
-          {salePrice != originalPrice ? (
+          {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>
-
   );
 }