From c830db9d7ed3c860f0b313b35e47d22c790ef0fb Mon Sep 17 00:00:00 2001 From: "sungmin.in" Date: Mon, 5 Feb 2024 19:32:39 +0900 Subject: [PATCH] =?UTF-8?q?[HomePanel]=20Random,Rolling,=20TodayDeal=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../HomeBanner/HomeBannerTemplate1.jsx | 63 +++++++++----- .../HomeBanner/HomeBannerTemplate3.jsx | 68 +++++++-------- .../views/HomePanel/HomeBanner/RandomUnit.jsx | 80 ++++++++++-------- .../HomePanel/HomeBanner/RollingUnit.jsx | 84 ++++++++++++++++--- .../src/views/HomePanel/HomePanel.jsx | 31 ++++--- .../HomePanel/HomeTodayDeal/HomeTodayDeal.jsx | 80 ++++++++++++------ 6 files changed, 269 insertions(+), 137 deletions(-) diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx index 947f4ae7..9a447e38 100644 --- 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({
{/* 배너1 */} {baner1Data.shptmDspyTpNm == "Rolling" ? ( - + ) : baner1Data.shptmDspyTpNm == "Random" ? ( - + ) : ( )} - {/* 배너2 롤링 테스트 진행중 */} + {/* 배너2 */} {baner2Data.shptmDspyTpNm == "Rolling" ? ( - - ) : null} + + ) : baner2Data.shptmDspyTpNm == "Random" ? ( + + ) : ( + + )}
{/* 배너3 */} {baner3Data.shptmDspyTpNm == "Rolling" ? ( - + ) : baner3Data.shptmDspyTpNm == "Random" ? ( - + ) : ( - + ) : baner4Data.shptmDspyTpNm == "Random" ? ( - + ) : ( {baner1Data.shptmDspyTpNm == "Rolling" ? ( - + ) : baner1Data.shptmDspyTpNm == "Random" ? ( - + ) : ( {baner2Data.shptmDspyTpNm == "Rolling" ? ( - // 롤링으로 변경하기 구현 준비 중 - + ) : baner2Data.shptmDspyTpNm == "Random" ? ( - + ) : ( {baner3Data.shptmDspyTpNm == "Rolling" ? ( - + ) : baner3Data.shptmDspyTpNm == "Random" ? ( - + ) : ( {baner4Data.shptmDspyTpNm == "Rolling" ? ( - + ) : baner4Data.shptmDspyTpNm == "Random" ? ( - + ) : ( { - if(bannerDetailInfos){ - const leng = banerData.bannerDetailInfos.length; - const num = Math.floor(Math.random() * leng); - setRandomData(bannerDetailInfos[num]); - } - }, [banerData]); - - return( - <> - {randomData.shptmBanrTpNm == "Image Banner" ? ( -

TEST

- ) : randomData.shptmBanrTpNm == "LIVE" || randomData.shptmBanrTpNm == "VOD" ? ( -

비디오

- ) : randomData.shptmBanrTpNm == "Today's Deals" || randomData.shptmBanrTpNm == "" ? ( - - ) : null - } - - ) -}; \ No newline at end of file +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" ? ( +

TEST

+ ) : randomData.shptmBanrTpNm == "LIVE" || + randomData.shptmBanrTpNm == "VOD" ? ( +

비디오

+ ) : randomData.shptmBanrTpNm == "Today's Deals" || + randomData.shptmBanrTpNm == "" ? ( + + ) : null} + + ); +} diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RollingUnit.jsx index 94e3a95b..99d90c1b 100644 --- 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( -

TEST

- ) -}; \ No newline at end of file +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 ; + } + if (shptmBanrTpNm === "LIVE" || shptmBanrTpNm === "VOD") { + return ; + } + if (shptmBanrTpNm === "Today's Deals") { + return ( + + ); + } + }, + [bannerData] + ); + + return ( + <> + {bannerData && ( + + )} + + ); +} diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx index 9006a8e4..60198232 100644 --- 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 ( { + 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 ( handleClick(productId)} >
-
{banerData.prdtNm}
+
{productName}
- {salePrice} - {salePrice != originalPrice ? ( + {discountedPrice} + {discountedPrice != originalPrice ? ( {originalPrice} ) : ( <> @@ -45,17 +75,17 @@ export default function HomeTodayDeal({
- +
- {rolling == true ? ( + + {/* {rolling == true ? ( <>
) : ( <> - )} + )} */} - ); }