From a61479e77301472a138ebe5d50eab0186d278145 Mon Sep 17 00:00:00 2001 From: "junghoon86.park" Date: Mon, 5 Feb 2024 14:22:43 +0900 Subject: [PATCH] =?UTF-8?q?[HomePanel]=ED=99=88=EB=B0=B0=EB=84=88=20?= =?UTF-8?q?=EB=B6=80=EB=B6=84=20=EB=94=94=EC=9E=90=EC=9D=B8=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=20-=20css=20=EC=88=98=EC=A0=95=EC=9E=85=EB=8B=88?= =?UTF-8?q?=EB=8B=A4.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../HomeBanner/HomeBannerTemplate1.jsx | 139 ++++++++------- .../HomeBanner/HomeBannerTemplate2.jsx | 62 ++++++- .../HomeBanner/HomeBannerTemplate3.jsx | 163 +++++++++--------- .../HomePanel/HomeBanner/Template.module.less | 80 +++++---- .../src/views/HomePanel/HomePanel.jsx | 89 +++++----- 5 files changed, 293 insertions(+), 240 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 4daa0929..947f4ae7 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx @@ -1,15 +1,18 @@ import React, { useCallback, useEffect, useState } from "react"; -import { Job } from "@enact/core/util"; -import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator"; +import classNames from "classnames"; import { shallowEqual, useDispatch, useSelector } from "react-redux"; -import Spotlight from "@enact/spotlight"; + +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 css from "./Template.module.less"; import Random from "./RandomUnit"; import Rolling from "./RollingUnit"; +import css from "./Template.module.less"; const SpottableComponent = Spottable("div"); @@ -20,7 +23,15 @@ const Container = SpotlightContainerDecorator( "div" ); -export default function HomeBannerTemplate1 ({ isOnTop, spotlightId, onScrollTop, onScrollShelf, homeMainContentsBannerInfos, homeTopDisplayInfos, ...rest }) { +export default function HomeBannerTemplate1({ + isOnTop, + spotlightId, + onScrollTop, + onScrollShelf, + homeMainContentsBannerInfos, + homeTopDisplayInfos, + ...rest +}) { const dispatch = useDispatch(); const [bannerImageLoaded, setBannerImageLoaded] = useState(false); @@ -40,45 +51,46 @@ export default function HomeBannerTemplate1 ({ isOnTop, spotlightId, onScrollTop const replaceBannerVtctp = useCallback(() => { let imgPath = ""; - if(homeTopDisplayInfos[0].vtctpImgPath1 == "" || homeTopDisplayInfos[0].vtctpImgPath1 == null){ + if ( + homeTopDisplayInfos[0].vtctpImgPath1 == "" || + homeTopDisplayInfos[0].vtctpImgPath1 == null + ) { imgPath = homeTopDisplayInfos[0].vtctpImgPath2; - }else{ + } else { imgPath = homeTopDisplayInfos[0].vtctpImgPath1; } - return imgPath; - },[]); + return imgPath; + }, []); // 배너가 없는 경우, 대체용 배너 [수평] const replaceBannerWdth = useCallback(() => { let imgPath = ""; - if(homeTopDisplayInfos[0].wdthtpImgPath1 == "" || homeTopDisplayInfos[0].wdthtpImgPath1 == null){ + if ( + homeTopDisplayInfos[0].wdthtpImgPath1 == "" || + homeTopDisplayInfos[0].wdthtpImgPath1 == null + ) { imgPath = homeTopDisplayInfos[0].wdthtpImgPath2; - }else{ + } else { imgPath = homeTopDisplayInfos[0].wdthtpImgPath1; } - return imgPath; - },[]); - - const onClickBanner = useCallback(() => { - + return imgPath; }, []); + const onClickBanner = useCallback(() => {}, []); + useEffect(() => { bannerInfos.forEach((el, index) => { - if(el.banrLctnNo == "1"){ + if (el.banrLctnNo == "1") { setBaner1Data(el); setBaner1Index(index); - } - else if(el.banrLctnNo == "2"){ + } else if (el.banrLctnNo == "2") { setBaner2Data(el); setBaner2Index(index); - } - else if(el.banrLctnNo == "3"){ + } else if (el.banrLctnNo == "3") { setBaner3Data(el); setBaner3Index(index); - } - else if(el.banrLctnNo == "4"){ + } else if (el.banrLctnNo == "4") { setBaner4Data(el); setBaner4Index(index); } @@ -90,47 +102,36 @@ export default function HomeBannerTemplate1 ({ isOnTop, spotlightId, onScrollTop return ( -
+
{/* 배너1 */} {baner1Data.shptmDspyTpNm == "Rolling" ? ( - - ) : baner1Data.shptmDspyTpNm == "Random" ? ( - - ) : + + ) : baner1Data.shptmDspyTpNm == "Random" ? ( + + ) : ( - } + )} {/* 배너2 롤링 테스트 진행중 */} {baner2Data.shptmDspyTpNm == "Rolling" ? ( - - ) : null - } + + ) : null}
{/* 배너3 */} {baner3Data.shptmDspyTpNm == "Rolling" ? ( - - ) : baner3Data.shptmDspyTpNm == "Random" ? ( - - ) : + + ) : baner3Data.shptmDspyTpNm == "Random" ? ( + + ) : ( - } + )} - {/* 배너4 */} - {baner4Data.shptmDspyTpNm == "Rolling" ? ( - - - + {/* 배너4 */} + {baner4Data.shptmDspyTpNm == "Rolling" ? ( + + + ) : baner4Data.shptmDspyTpNm == "Random" ? ( - - ) : - - - - } + + ) : ( + + + + )}
); -} \ No newline at end of file +} diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.jsx index dcdf7365..af4d96a0 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.jsx @@ -1,12 +1,58 @@ -import React, {useCallback, useEffect, useState, useMemo,useRef ,memo} from "react"; +import React, { + memo, + useCallback, + useEffect, + useMemo, + useRef, + useState, +} from "react"; -export default function HomeBannerTemplate2 ({isOnTop, spotlightId, onScrollTop, onScrollShelf, homeMainContentsBannerInfos, homeTopDisplayInfos, ...rest}) { +import classNames from "classnames"; - useEffect(() => { +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 HomeTodayDeal from "../HomeTodayDeal/HomeTodayDeal"; +import css from "./Template.module.less"; - return( -

템플릿2

- ) -} \ No newline at end of file +const SpottableComponent = Spottable("div"); + +const Container = SpotlightContainerDecorator( + { + enterTo: "default-element", + }, + "div" +); +export default function HomeBannerTemplate2({ + isOnTop, + spotlightId, + onScrollTop, + onScrollShelf, + homeMainContentsBannerInfos, + homeTopDisplayInfos, + ...rest +}) { + return ( + + + + + +
+ +
+
+ +
+ + + + + + ); +} diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.jsx index 937b718d..694d6697 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.jsx @@ -1,21 +1,23 @@ import React, { useCallback, useEffect, useState } from "react"; +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 Spotlight from "@enact/spotlight"; -import { useDispatch, useSelector } from "react-redux"; -import Marquee from "@enact/sandstone/Marquee"; -import CustomImage from "../../../components/CustomImage/CustomImage"; -import css from "./Template.module.less"; -import Random from "./RandomUnit"; -import Rolling from "./RollingUnit"; 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"); @@ -26,7 +28,15 @@ const Container = SpotlightContainerDecorator( "div" ); -export default function HomeBannerTemplate3({ isOnTop, spotlightId, onScrollTop, onScrollShelf, homeMainContentsBannerInfos, homeTopDisplayInfos, ...rest }) { +export default function HomeBannerTemplate3({ + isOnTop, + spotlightId, + onScrollTop, + onScrollShelf, + homeMainContentsBannerInfos, + homeTopDisplayInfos, + ...rest +}) { const dispatch = useDispatch(); const [bannerImageLoaded, setBannerImageLoaded] = useState(false); @@ -46,45 +56,46 @@ export default function HomeBannerTemplate3({ isOnTop, spotlightId, onScrollTop, const replaceBannerVtctp = useCallback(() => { let imgPath = ""; - if(homeTopDisplayInfos[0].vtctpImgPath1 == "" || homeTopDisplayInfos[0].vtctpImgPath1 == null){ + if ( + homeTopDisplayInfos[0].vtctpImgPath1 == "" || + homeTopDisplayInfos[0].vtctpImgPath1 == null + ) { imgPath = homeTopDisplayInfos[0].vtctpImgPath2; - }else{ + } else { imgPath = homeTopDisplayInfos[0].vtctpImgPath1; } - return imgPath; - },[]); + return imgPath; + }, []); // 배너가 없는 경우, 대체용 배너 [수직] const replaceBannerWdth = useCallback(() => { let imgPath = ""; - if(homeTopDisplayInfos[0].wdthtpImgPath1 == "" || homeTopDisplayInfos[0].wdthtpImgPath1 == null){ + if ( + homeTopDisplayInfos[0].wdthtpImgPath1 == "" || + homeTopDisplayInfos[0].wdthtpImgPath1 == null + ) { imgPath = homeTopDisplayInfos[0].wdthtpImgPath2; - }else{ + } else { imgPath = homeTopDisplayInfos[0].wdthtpImgPath1; } - return imgPath; - },[]); - - const onClickBanner = useCallback(() => { - + return imgPath; }, []); + const onClickBanner = useCallback(() => {}, []); + useEffect(() => { bannerInfos.forEach((el, index) => { - if(el.banrLctnNo == "1"){ + if (el.banrLctnNo == "1") { setBaner1Data(el); setBaner1Index(index); - } - else if(el.banrLctnNo == "2"){ + } else if (el.banrLctnNo == "2") { setBaner2Data(el); setBaner2Index(index); - } - else if(el.banrLctnNo == "3"){ + } else if (el.banrLctnNo == "3") { setBaner3Data(el); setBaner3Index(index); - } - else if(el.banrLctnNo == "4"){ + } else if (el.banrLctnNo == "4") { setBaner4Data(el); setBaner4Index(index); } @@ -93,20 +104,16 @@ export default function HomeBannerTemplate3({ isOnTop, spotlightId, onScrollTop, console.log(homeMainContentsBannerInfos, "메인 컨텐츠"); console.log(homeTopDisplayInfos, "탑디스"); }, [homeMainContentsBannerInfos]); - + return (
{baner1Data.shptmDspyTpNm == "Rolling" ? ( - - ) : baner1Data.shptmDspyTpNm == "Random" ? ( - - ) : + + ) : baner1Data.shptmDspyTpNm == "Random" ? ( + + ) : ( - } + )} {baner2Data.shptmDspyTpNm == "Rolling" ? ( - // 롤링으로 변경하기 구현 준비 중 + // 롤링으로 변경하기 구현 준비 중 ) : baner2Data.shptmDspyTpNm == "Random" ? ( - + ) : ( + - ) : - - } + )}
- + {baner3Data.shptmDspyTpNm == "Rolling" ? ( - - ) : baner3Data.shptmDspyTpNm == "Random" ? ( - - ) : + + ) : baner3Data.shptmDspyTpNm == "Random" ? ( + + ) : ( - } + )} - + {baner4Data.shptmDspyTpNm == "Rolling" ? ( - - ) : baner4Data.shptmDspyTpNm == "Random" ? ( - - ) : + + ) : baner4Data.shptmDspyTpNm == "Random" ? ( + + ) : ( - } + )}
); -} \ No newline at end of file +} diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/Template.module.less b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/Template.module.less index 2d0276b1..903da71e 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/Template.module.less +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/Template.module.less @@ -13,6 +13,41 @@ width: 744px; height: 858px; margin-right: 18px; + &.dualBox { + .topBox { + width: 744px; + height: 420px; + + margin-bottom: 18px; + border: 4px solid transparent; + border-radius: 12px; + &:focus, + &:hover, + &:focus-within, + &:active { + border: 4px solid @PRIMARY_COLOR_RED; + box-sizing: border-box; + .focusDropShadow(); + border-radius: 12px; + } + } + .underBox { + width: 744px; + height: 420px; + + border: 4px solid transparent; + border-radius: 12px; + &:focus, + &:hover, + &:focus-within, + &:active { + border: 4px solid @PRIMARY_COLOR_RED; + box-sizing: border-box; + .focusDropShadow(); + border-radius: 12px; + } + } + } } .videoBox { width: 744px; @@ -26,6 +61,7 @@ border: 4px solid @PRIMARY_COLOR_RED; box-sizing: border-box; .focusDropShadow(); + border-radius: 12px; } .videoPlayer { width: 744px; @@ -48,6 +84,7 @@ border: 4px solid @PRIMARY_COLOR_RED; box-sizing: border-box; .focusDropShadow(); + border-radius: 12px; } } @@ -80,6 +117,7 @@ border: 4px solid @PRIMARY_COLOR_RED; box-sizing: border-box; .focusDropShadow(); + border-radius: 12px; } } @@ -119,9 +157,12 @@ display: flex; } -img { +img, +video { width: 100%; - object-fit: contain; + height: 100%; + object-fit: cover; + border-radius: 12px; } .mainBox { @@ -141,44 +182,11 @@ img { border: 4px solid @PRIMARY_COLOR_RED; box-sizing: border-box; .focusDropShadow(); + border-radius: 12px; } img { width: 100%; object-fit: contain; } } - - .dualBox { - .videoBox { - width: 744px; - height: 420px; - background: chocolate; - margin-bottom: 18px; - border: 4px solid transparent; - border-radius: 12px; - &:focus, - &:hover, - &:focus-within, - &:active { - border: 4px solid @PRIMARY_COLOR_RED; - box-sizing: border-box; - .focusDropShadow(); - } - } - .slideBox { - width: 744px; - height: 420px; - background: skyblue; - border: 4px solid transparent; - border-radius: 12px; - &:focus, - &:hover, - &:focus-within, - &:active { - border: 4px solid @PRIMARY_COLOR_RED; - box-sizing: border-box; - .focusDropShadow(); - } - } - } } diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx index 4bb368c3..9006a8e4 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomePanel.jsx @@ -1,16 +1,16 @@ -import React, {useCallback, useEffect, useState} from "react"; +import React, { useCallback, useEffect, useState } from "react"; 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 HomeBannerTemplate1 from "../HomePanel/HomeBanner/HomeBannerTemplate1"; -import HomeBannerTemplate2 from "../HomePanel/HomeBanner/HomeBannerTemplate2"; -import HomeBannerTemplate3 from "../HomePanel/HomeBanner/HomeBannerTemplate3"; export default function HomePanel() { const dispatch = useDispatch(); @@ -25,74 +25,77 @@ export default function HomePanel() { const [select, setSelect] = useState(null); const [homeLayoutInfoDetail, setHomeLayoutInfoDetail] = useState([]); // 추후 스위치 select 로 변경 : 스팟라이트 테스트 중 - const selectSwitch = () =>{ - switch ("DSP00203") { + const selectSwitch = () => { + switch ("DSP00201") { case "DSP00201": - return( + return ( - ) + /> + ); case "DSP00202": - return( + return ( - ) + ); case "DSP00203": - return( + return ( - ) + ); default: return null; } - } + }; useEffect(() => { - if(homeTopDisplayInfos){ + if (homeTopDisplayInfos) { setSelect(homeTopDisplayInfos[0].shptmTmplCd); } - if(homeLayoutInfo){ + if (homeLayoutInfo) { setHomeLayoutInfoDetail(homeLayoutInfo.homeLayoutInfo); } selectSwitch(); - }, [homeTopDisplayInfos, homeMainContentsBannerInfos, homeLayoutInfo, select]); + }, [ + homeTopDisplayInfos, + homeMainContentsBannerInfos, + homeLayoutInfo, + select, + ]); return ( - {homeLayoutInfoDetail && - homeLayoutInfoDetail.map((item, index)=> { - return( - item.shptmApphmDspyOptCd == "DSP00101" ? ( - selectSwitch() - ) : item.shptmApphmDspyOptCd == "DSP00102" ? ( - - ) : item.shptmApphmDspyOptCd == "DSP00105" ? ( - - ) : item.shptmApphmDspyOptCd == "DSP00103" ? ( - - ) : item.shptmApphmDspyOptCd == "DSP00104" ? ( - - ) : null - )}) - } + {homeLayoutInfoDetail && + homeLayoutInfoDetail.map((item, index) => { + return item.shptmApphmDspyOptCd == "DSP00101" ? ( + selectSwitch() + ) : item.shptmApphmDspyOptCd == "DSP00102" ? ( + + ) : item.shptmApphmDspyOptCd == "DSP00105" ? ( + + ) : item.shptmApphmDspyOptCd == "DSP00103" ? ( + + ) : item.shptmApphmDspyOptCd == "DSP00104" ? ( + + ) : null; + })} ); -} \ No newline at end of file +}