diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx index 1238ae6e..e0fc2ed1 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx @@ -1,31 +1,52 @@ -import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; - -// 디버그 모드 설정 - true일 때만 console.log 출력 -const DEBUG_MODE = false; +import React, { + useCallback, + useEffect, + useMemo, + useRef, + useState, +} from 'react'; import classNames from 'classnames'; -import { useDispatch, useSelector } from 'react-redux'; +import { + useDispatch, + useSelector, +} from 'react-redux'; import Spotlight from '@enact/spotlight'; -import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator'; +import SpotlightContainerDecorator + from '@enact/spotlight/SpotlightContainerDecorator'; import Spottable from '@enact/spotlight/Spottable'; import { getContainerId } from '@enact/spotlight/src/container'; import btnPlay from '../../../../assets/images/btn/btn-play-thumb-nor.png'; -import defaultLogoImg from '../../../../assets/images/ic-tab-partners-default@3x.png'; -import emptyHorImage from '../../../../assets/images/img-home-banner-empty-hor.png'; -import emptyVerImage from '../../../../assets/images/img-home-banner-empty-ver.png'; -import defaultImageItem from '../../../../assets/images/img-thumb-empty-product@3x.png'; +import defaultLogoImg + from '../../../../assets/images/ic-tab-partners-default@3x.png'; +import emptyHorImage + from '../../../../assets/images/img-home-banner-empty-hor.png'; +import emptyVerImage + from '../../../../assets/images/img-home-banner-empty-ver.png'; +import defaultImageItem + from '../../../../assets/images/img-thumb-empty-product@3x.png'; import liveShow from '../../../../assets/images/tag-liveshow.png'; import { changeAppStatus } from '../../../actions/commonActions'; -import { updateHomeInfo, setVideoTransitionLock } from '../../../actions/homeActions'; -import { sendLogTopContents, sendLogTotalRecommend } from '../../../actions/logActions'; -import { pushPanel, navigateFromRandomUnit, SOURCE_MENUS } from '../../../actions/panelActions'; +import { + setVideoTransitionLock, + updateHomeInfo, +} from '../../../actions/homeActions'; +import { + sendLogTopContents, + sendLogTotalRecommend, +} from '../../../actions/logActions'; +import { + navigateFromRandomUnit, + pushPanel, + SOURCE_MENUS, +} from '../../../actions/panelActions'; import { finishVideoPreview, + hideModalVideo, startVideoPlayer, startVideoPlayerNew, - hideModalVideo, } from '../../../actions/playActions'; import CustomImage from '../../../components/CustomImage/CustomImage'; import usePriceInfo from '../../../hooks/usePriceInfo'; @@ -36,11 +57,19 @@ import { LOG_TP_NO, panel_names, } from '../../../utils/Config'; -import { selectIsPlaying } from '../../../utils/playerState/playerStateSelectors'; -import { $L, formatGMTString } from '../../../utils/helperMethods'; +import { + $L, + formatGMTString, +} from '../../../utils/helperMethods'; +import { + selectIsPlaying, +} from '../../../utils/playerState/playerStateSelectors'; import { TEMPLATE_CODE_CONF } from '../HomePanel'; import css from './RandomUnit.module.less'; +// 디버그 모드 설정 - true일 때만 console.log 출력 +const DEBUG_MODE = false; + const SpottableComponent = Spottable('div'); const Container = SpotlightContainerDecorator({ enterTo: 'last-focused' }, 'div'); @@ -66,6 +95,7 @@ export default function RandomUnit({ const homeCategory = useSelector((state) => state.home.menuData?.data?.homeCategory); const countryCode = useSelector((state) => state.common.httpHeader.cntry_cd); + const foryouInfos = useSelector((state) => state.foryou.recommendInfo.recommendProduct); // 현재 재생 중인 비디오 배너 ID 가져오기 const currentVideoBannerId = useSelector((state) => { @@ -489,6 +519,14 @@ export default function RandomUnit({ }, }; break; + + case 'DSP00510': + linkInfo = { + name: panel_names.JUST_FOR_YOU_TEST_PANEL, + panelInfo: { + }, + }; + break; default: linkInfo = { @@ -643,6 +681,29 @@ export default function RandomUnit({ // 투데이즈 딜 가격 정보 const { originalPrice, discountedPrice, discountRate, offerInfo } = usePriceInfo(priceInfos) || {}; + + // Just For You 데이터에서 첫 번째 상품 추출 + const justForYouProduct = useMemo(() => { + if (foryouInfos && foryouInfos.length > 0) { + const justForYouShelf = foryouInfos.find( + (shelf) => shelf.recommendTpCd === 'JUSTFORYOU' + ); + if (justForYouShelf && justForYouShelf.productInfos && justForYouShelf.productInfos.length > 0) { + return justForYouShelf.productInfos[0]; + } + } + return null; + }, [foryouInfos]); + + // Just For You 상품의 가격 정보 + const justForYouPriceInfo = usePriceInfo( + justForYouProduct && justForYouProduct.priceInfo ? justForYouProduct.priceInfo : '' + ) || { + originalPrice: '', + discountedPrice: '', + discountRate: null, + offerInfo: '', + }; // 로그 useEffect(() => { @@ -999,7 +1060,72 @@ export default function RandomUnit({ /> - ) : null} + ) + : randomData?.shptmBanrTpNm == "Just For You" ? ( + {/* +
+
{$L("Just For You")}
+
+
+ + {justForYouProduct ? ( + <> + {parseFloat(justForYouPriceInfo.originalPrice?.replace('$', '') || '0') === 0 + ? justForYouProduct.offerInfo + : justForYouPriceInfo.discountRate + ? justForYouPriceInfo.discountedPrice + : justForYouPriceInfo.originalPrice} + {justForYouPriceInfo.discountRate && !isHorizontal && ( + {justForYouPriceInfo.originalPrice} + )} + + ) : ( + <> + {parseFloat(originalPrice?.replace('$', '') || '0') === 0 + ? randomData?.offerInfo + : discountRate + ? discountedPrice + : originalPrice} + {discountRate && !isHorizontal && ( + {originalPrice} + )} + + )} + +
+ {isHorizontal && justForYouProduct && parseFloat(justForYouPriceInfo.originalPrice?.replace('$', '') || '0') !== 0 && ( + {justForYouPriceInfo.originalPrice} + )} +
+ +
+ +
+ */} + ) + : null} ); diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.module.less b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.module.less index 65ab8857..93a2df3d 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.module.less +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.module.less @@ -233,6 +233,165 @@ left: -4px; } } + &.justforyou { + background-image: url(../../../../assets/images/img-home-banner-jfy-ver@3x.png); + background-size: 486px 858px; + background-position: left top; + border-radius: 10px; + padding: 75px 51px 0; + &.ru { + .productInfo { + .justforyouTitle { + font-size: 58px; + line-height: 60px; + font-family: @arialFontBold; + } + } + } + &.de { + .productInfo { + .justforyouTitle { + font-size: 74px !important; + line-height: 63px !important; + letter-spacing: -1px !important; + } + } + } + .productInfo { + margin-bottom: 31px; + .justforyouTitle { + .size(@w:100%,@h:132px); + font-family: Arial; + font-weight: bold; + font-size: 80px; + word-break: break-word; + font-stretch: normal; + color: #151515; + text-align: center; + line-height: 76px; + font-family: @arialFontBold; + } + .textBox { + .size(@w: 100%, @h: 80px); + margin-top: 71px; + .elip(@clamp:2); + font-weight: bold; + font-size: 30px; + color: @COLOR_GRAY06; + line-height: 1.27; + margin-bottom: 6px; + } + .accBox { + width: 100%; + text-align: center; + font-weight: bold; + font-size: 42px; + color: @PRIMARY_COLOR_RED; + line-height: 1.14; + display: inline-block; + .elip(@clamp:1); + > strong { + width: 260px; + font-size: 30px; + line-height: 1.27; + display: block; + .elip(@clamp:2); + } + .saleAccBox { + font-weight: normal; + font-size: 24px; + color: @COLOR_GRAY04; + vertical-align: middle; + text-decoration: line-through; + margin-left: 9px; + display: inline-block; + } + } + } + .itemImgBox { + > img { + .size(@w: 356px, @h: 356px); + border-radius: 12px; + border:6px solid #DCB9A1; + box-sizing: content-box; + } + } + &.isHorizontal { + background-image: url(../../../../assets/images/img-home-banner-jfy-hor@3x.png); + background-size: 744px 420px; + background-position: center center; + display: flex; + padding: 0 30px 0 0; + border-radius: 10px; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + -o-border-radius: 10px; + > div { + flex: none; + } + &.ru { + .productInfo { + .justforyouTitle { + font-size: 58px; + line-height: 60px; + font-family: @arialFontBold; + } + } + } + &.de { + .productInfo { + .justforyouTitle { + font-size: 59px !important; + line-height: 63px !important; + letter-spacing: -2px !important; + } + } + } + .productInfo { + margin-bottom: 0; + .justforyouTitle { + .size(@w:305px,@h:114px); + margin-top: 53px; + margin-left: 49px; + font-size: 66px; + word-break: break-word; + color: #151515; + text-align: left; + line-height: 57px; + font-family: @arialBlack; + } + .textBox { + .size(@w: 294px, @h: 80px); + margin: 67px 0 5px 50px; + text-align: left; + } + .accBox { + .size(@w: 320px, @h: 50px); + margin-left: 50px; + text-align: left; + display: block; + .elip(@clamp:1); + } + .saleAccBox { + color: #767676; + display: block; + text-align: left; + margin: 5px 0 0 55px; + text-decoration: line-through; + } + } + .itemImgBox { + .position(@position: absolute, @top: 47px, @left: 389px); + .size(@w: 326px, @h: 326px); + > img { + .size(@w: inherit, @h: inherit); + border-radius: 12px; + border:6px solid #DCB9A1; + box-sizing: content-box; + } + } + } + } } .arrow {