From db6cb4c2605f22c4e489dd6524a0b6eb05b5c27e Mon Sep 17 00:00:00 2001 From: "junghoon86.park" Date: Tue, 6 Feb 2024 10:30:04 +0900 Subject: [PATCH] =?UTF-8?q?[HomePanel]BestSeller=20VirtualGrid=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9=20=EB=B0=8F=20=EC=A0=84=EC=97=AD=20=EC=84=A4=EC=A0=95?= =?UTF-8?q?=EB=90=98=EC=9E=88=EB=8A=94=20css=20=EB=B3=80=EA=B2=BD=EA=B1=B4?= =?UTF-8?q?.=20=20-=20bestselleritem=EC=83=9D=EC=84=B1=20=20-=20template.m?= =?UTF-8?q?odule.less=20=EC=A0=84=EC=97=AD=EC=84=A4=EC=A0=95=EB=90=98?= =?UTF-8?q?=EC=96=B4=EC=9E=88=EB=8A=94=20=EB=B6=80=EB=B6=84=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/HomePanel/BestSeller/BestSeller.jsx | 61 ++++++---- .../BestSeller/BestSeller.module.less | 1 + .../BestSellerItem/BestSellerItem.jsx | 19 ++++ .../BestSellerItem/BestSellerItem.module.less | 107 ++++++++++++++++++ .../HomePanel/HomeBanner/Template.module.less | 16 ++- 5 files changed, 175 insertions(+), 29 deletions(-) create mode 100644 com.twin.app.shoptime/src/views/HomePanel/BestSellerItem/BestSellerItem.jsx create mode 100644 com.twin.app.shoptime/src/views/HomePanel/BestSellerItem/BestSellerItem.module.less diff --git a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx index 561ff9c5..170f3f75 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx @@ -1,15 +1,18 @@ -import React, { useCallback, useEffect, useState, useRef } from "react"; -import { useSelector } from "react-redux"; -import { $L } from "../../../utils/helperMethods"; -import css from "./BestSeller.module.less"; +import React, { useCallback, useEffect, useRef, useState } from "react"; + import classNames from "classnames"; +import { useSelector } from "react-redux"; -import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; -import Spotlight from "@enact/spotlight"; +import VirtualGridList from "@enact/sandstone/VirtualList"; +import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator"; +import Spottable from "@enact/spotlight/Spottable"; +import ri from "@enact/ui/resolution"; -import TGrid from "../../../components/TGrid/TGrid"; -import TItemCard from "../../../components/TItemCard/TItemCard"; import SectionTitle from "../../../components/SectionTitle/SectionTitle"; +import TGrid from "../../../components/TGrid/TGrid"; +import { $L } from "../../../utils/helperMethods"; +import BestSellerItem from "../BestSellerItem/BestSellerItem"; +import css from "./BestSeller.module.less"; const Container = SpotlightContainerDecorator( { enterTo: "last-focused", leaveFor: { left: "", right: "" } }, @@ -20,23 +23,41 @@ const BestSeller = () => { const bestSellerDatas = useSelector( (state) => state.product.bestSellerData.bestSeller ); + const renderItem = useCallback( + ({ index, ...rest }) => { + const itemData = bestSellerDatas[index]; + return ( + + ); + }, + [bestSellerDatas] + ); + return ( - {bestSellerDatas && - bestSellerDatas.map((bestSeller) => ( - - ))} + {bestSellerDatas && bestSellerDatas.length > 0 && ( + + )} ); diff --git a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.module.less b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.module.less index b0dbf4d4..8a7ebbab 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.module.less +++ b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.module.less @@ -8,5 +8,6 @@ justify-content: unset; align-items: unset; flex-direction: unset; + height: 438px; } } diff --git a/com.twin.app.shoptime/src/views/HomePanel/BestSellerItem/BestSellerItem.jsx b/com.twin.app.shoptime/src/views/HomePanel/BestSellerItem/BestSellerItem.jsx new file mode 100644 index 00000000..d257530b --- /dev/null +++ b/com.twin.app.shoptime/src/views/HomePanel/BestSellerItem/BestSellerItem.jsx @@ -0,0 +1,19 @@ +import React from "react"; + +import TItemCard from "../../../components/TItemCard/TItemCard"; +import css from "../BestSellerItem/BestSellerItem.module.less"; + +export default function ({ bestSellerData, itemData, ...rest }) { + return ( + + ); +} diff --git a/com.twin.app.shoptime/src/views/HomePanel/BestSellerItem/BestSellerItem.module.less b/com.twin.app.shoptime/src/views/HomePanel/BestSellerItem/BestSellerItem.module.less new file mode 100644 index 00000000..93267fb1 --- /dev/null +++ b/com.twin.app.shoptime/src/views/HomePanel/BestSellerItem/BestSellerItem.module.less @@ -0,0 +1,107 @@ +@import "../../../style/CommonStyle.module.less"; +@import "../../../style/utils.module.less"; + +/* vertical type (Thumbnail) */ +.vertical { + /* normal */ + position: relative; + display: flex; + flex-direction: column; + .size(@w: 324px, @h: 438px); + padding: 18px; + border-radius: 12px; + border: solid 1px @COLOR_GRAY02; + background-color: @COLOR_WHITE; + + // top contents (image contetns) + > div:nth-child(1) { + position: relative; + .size(@w: 288px, @h: 288px); + margin-bottom: 12px; + color: @COLOR_WHITE; + + img { + .size(@w: 288px, @h: 288px); + object-fit: contain; + border: solid 1px #f0f0f0; + } + + // discount rate + span { + .position(@position: absolute, @right: 12px, @bottom: 12px); + .size(@w: 60px, @h: 60px); + border-radius: 60px; + background-color: @PRIMARY_COLOR_RED; + .font(@fontFamily: "ArialBold", @fontSize:26px); + text-align: center; + line-height: 60px; + } + + // sold out + > div:nth-child(3) { + .position(@position: absolute, @top: 0, @right: 0); + .flex(); + .size(@w: 288px, @h: 288px); + background-color: rgba(26, 26, 26, 0.6); + .font(@fontFamily: @baseFontBold, @fontSize: 36px); + } + } + + // bottom contents + > div:nth-child(2) { + .flex(@direction: column, @alignCenter: flex-start); + flex-grow: 1; + + h3 { + margin-bottom: 6px; + .font(@fontFamily: @baseFontBold, @fontSize: 24px); + color: @COLOR_GRAY06; + .elip(@clamp:2); + word-break: break-all; + overflow: hidden; + } + + p { + .flex(@justifyCenter: flex-start); + .font(@fontFamily: @baseFontBold, @fontSize: 30px); + color: @PRIMARY_COLOR_RED; + letter-spacing: -1px; + span { + margin-left: 5px; + .font(@fontFamily: @baseFont, @fontSize: 18px); + color: @COLOR_GRAY04; + text-decoration: line-through; + } + } + } + + // best seller + > div:nth-child(3) { + .position(@position: absolute, @top: -1px, @left: 18px); + .flex(@direction: column, @justifyCenter: space-between); + .size(@w: 79px, @h: 102px); + padding: 12px 12px 18px; + background-color: @COLOR_GRAY07; + .font(@fontFamily: @robotoFontBold, @fontSize: 24px); + color: @COLOR_WHITE; + border-bottom-left-radius: 79px; + border-bottom-right-radius: 79px; + + span { + .font(@fontFamily: @arialFontBold, @fontSize: 42px); + font-size: 42px; + } + } + + /* focused */ + &:focus { + &::after { + .focused(@boxShadow:50px, @borderRadius:12px); + } + + // best seller + div:nth-child(3) { + background-color: @PRIMARY_COLOR_RED; + } + } +} 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 903da71e..8365b33b 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 @@ -8,6 +8,13 @@ .homeTemplateBox { margin: 24px 24px 50px; display: flex; + img, + video { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 12px; + } } .leftBannerBox { width: 744px; @@ -157,14 +164,6 @@ display: flex; } -img, -video { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 12px; -} - .mainBox { display: flex; @@ -182,7 +181,6 @@ video { border: 4px solid @PRIMARY_COLOR_RED; box-sizing: border-box; .focusDropShadow(); - border-radius: 12px; } img { width: 100%;