diff --git a/com.twin.app.shoptime/src/components/TGrid/TGrid.module.less b/com.twin.app.shoptime/src/components/TGrid/TGrid.module.less index 0c5a046f..8b89ee5a 100644 --- a/com.twin.app.shoptime/src/components/TGrid/TGrid.module.less +++ b/com.twin.app.shoptime/src/components/TGrid/TGrid.module.less @@ -7,7 +7,7 @@ gap: 15px; &.home { - padding: 20px 42px 0 60px; + padding: 20px 0px 0 60px; justify-content: unset; align-items: unset; flex-direction: unset; @@ -17,8 +17,7 @@ border: 1px solid #dadada; } &.homeBestSeller { - overflow: hidden; - justify-content: unset; + padding-right: 24px; } &.onSaleItem { margin-top: 20px; @@ -28,9 +27,5 @@ overflow: hidden; } &.showList { - margin-top: 20px; - display: flex; - overflow: hidden; - height: 438px; } } diff --git a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx index 3cbe4918..9b1293e9 100644 --- a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx +++ b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.jsx @@ -1,13 +1,16 @@ -import React, { memo, useCallback } from "react"; +import React, { + memo, + useCallback, +} from 'react'; -import classNames from "classnames"; +import classNames from 'classnames'; -import Spottable from "@enact/spotlight/Spottable"; +import Spottable from '@enact/spotlight/Spottable'; -import usePriceInfo from "../../hooks/usePriceInfo"; -import { $L } from "../../utils/helperMethods"; -import { SpotlightIds } from "../../utils/SpotlightIds"; -import css from "./TItemCard.module.less"; +import usePriceInfo from '../../hooks/usePriceInfo'; +import { $L } from '../../utils/helperMethods'; +import { SpotlightIds } from '../../utils/SpotlightIds'; +import css from './TItemCard.module.less'; const SpottableComponent = Spottable("div"); @@ -46,7 +49,8 @@ export default memo(function TItemCard({ {...rest} className={classNames( type === TYPE_HORIZONTAL && css.horizontal, - type === TYPE_VERTICAL && css.vertical + type === TYPE_VERTICAL && css.vertical, + isBestSeller === true && css.homeBestSeller )} onClick={() => handleClick(productId)} spotlightId={SpotlightIds.TITEM_CARD + productId} 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 840e4153..c1e0fa0e 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx @@ -63,7 +63,8 @@ const BestSeller = () => { }} noScrollByWheel scrollMode="translate" - spacing={scaleW(18)} + spacing={scaleW(24)} + className={css.grid} /> )} 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 1c4790fb..0ff34c86 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 @@ -1,5 +1,5 @@ .bestSellerWrap { - padding: 60px 0 60px 60px; + padding: 60px 0 0px 60px; > h2 { margin: 0px 0 20px; font-size: 42px; @@ -10,4 +10,13 @@ flex-direction: unset; height: 438px; } + .grid { + overflow: unset; + > div { + overflow: unset !important; + } + &:last-child { + padding-right: 60px; + } + } } diff --git a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSellerItem/BestSellerItem.jsx b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSellerItem/BestSellerItem.jsx index 36cc3a6c..864ee03d 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSellerItem/BestSellerItem.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSellerItem/BestSellerItem.jsx @@ -1,7 +1,7 @@ -import React from "react"; +import React from 'react'; -import TItemCard from "../../../../components/TItemCard/TItemCard"; -import css from "../BestSellerItem/BestSellerItem.module.less"; +import TItemCard from '../../../../components/TItemCard/TItemCard'; +import css from '../BestSellerItem/BestSellerItem.module.less'; export default function ({ bestSellerData, itemData, ...rest }) { return ( @@ -12,6 +12,7 @@ export default function ({ bestSellerData, itemData, ...rest }) { productName={itemData.prdtNm} priceInfo={itemData.priceInfo} rank={itemData.rankOrd} + type="vertical" isBestSeller {...rest} /> diff --git a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSellerItem/BestSellerItem.module.less b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSellerItem/BestSellerItem.module.less index 740f1cdf..accd63ee 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSellerItem/BestSellerItem.module.less +++ b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSellerItem/BestSellerItem.module.less @@ -1,107 +1,2 @@ @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/HomeOnSale/HomeOnSale.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx index 954e72de..6e99c7ab 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx @@ -1,15 +1,20 @@ -import React, { useCallback } from "react"; +import React, { useCallback } from 'react'; -import { useDispatch, useSelector } from "react-redux"; +import { + useDispatch, + useSelector, +} from 'react-redux'; -import { VirtualGridList } from "@enact/sandstone/VirtualList"; -import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator"; -import ri from "@enact/ui/resolution"; +import { VirtualGridList } from '@enact/sandstone/VirtualList'; +import { + SpotlightContainerDecorator, +} from '@enact/spotlight/SpotlightContainerDecorator'; +import ri from '@enact/ui/resolution'; -import TGrid from "../../../components/TGrid/TGrid"; -import { $L } from "../../../utils/helperMethods"; -import css from "./HomeOnSale.module.less"; -import HomeOnSaleItem from "./HomeOnSaleItem/HomeOnSaleItem"; +import SectionTitle from '../../../components/SectionTitle/SectionTitle'; +import { $L } from '../../../utils/helperMethods'; +import css from './HomeOnSale.module.less'; +import HomeOnSaleItem from './HomeOnSaleItem/HomeOnSaleItem'; const SALE_ITEM_CONF = { ITEM_WIDTH: 630 * 2, @@ -47,7 +52,7 @@ const HomeOnSale = ({ ...rest }) => { return (
-

{$L("ON SALE")}

+
{homeOnSaleInfos && homeOnSaleInfos.length > 0 && ( div { + overflow: unset !important; + } + &:last-child { + padding-right: 60px; + } > div { > div { > div { &:nth-child(5n + 1) { > div { > div { - background: linear-gradient(to top, #f485c3, #cc4d92); + background: linear-gradient(0.4turn, #f485c3, #cc4d92); } } } &:nth-child(5n + 2) { > div { > div { - background: linear-gradient(to top, #fdbe43, #e47915); + background: linear-gradient(0.4turn, #fdbe43, #e47915); } } } &:nth-child(5n + 3) { > div { > div { - background: linear-gradient(to top, #97ca73, #3e8d18); + background: linear-gradient(0.4turn, #97ca73, #3e8d18); } } } &:nth-child(5n + 4) { > div { > div { - background: linear-gradient(to top, #84b0e9, #4282d9); + background: linear-gradient(0.4turn, #84b0e9, #4282d9); } } } &:nth-child(5n + 5) { > div { > div { - background: linear-gradient(to top, #a387ea, #7750dc); + background: linear-gradient(0.4turn, #a387ea, #7750dc); } } } diff --git a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx index f03f1abb..cf73a7da 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx @@ -1,16 +1,28 @@ -import React, { useCallback, useEffect, useState } from "react"; +import React, { + useCallback, + useEffect, + useState, +} from 'react'; -import classNames from "classnames"; -import { useDispatch, useSelector } from "react-redux"; +import classNames from 'classnames'; +import { + useDispatch, + useSelector, +} from 'react-redux'; -import { VirtualGridList } from "@enact/sandstone/VirtualList"; -import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator"; -import ri from "@enact/ui/resolution"; +import { VirtualGridList } from '@enact/sandstone/VirtualList'; +import { + SpotlightContainerDecorator, +} from '@enact/spotlight/SpotlightContainerDecorator'; -import TGrid from "../../../components/TGrid/TGrid"; -import { $L } from "../../../utils/helperMethods"; -import css from "../PopularShow/PopularShow.module.less"; -import PopularShowItem from "./PopularShowItem/PopularShowItem"; +import SectionTitle from '../../../components/SectionTitle/SectionTitle'; +import { + $L, + scaleH, + scaleW, +} from '../../../utils/helperMethods'; +import css from '../PopularShow/PopularShow.module.less'; +import PopularShowItem from './PopularShowItem/PopularShowItem'; const Container = SpotlightContainerDecorator( { enterTo: "last-focused" }, @@ -33,9 +45,8 @@ const PopularShow = ({ ...rest }) => { return ( -

{$L("POPULAR SHOW")}

- - + +
{topInfos && topInfos.length > 0 && ( { horizontalScrollbar="hidden" itemRenderer={renderItem} itemSize={{ - minWidth: ri.scale(546 * 2), - minHeight: ri.scale(438 * 2), + minWidth: scaleW(546), + minHeight: scaleH(438), }} noScrollByWheel scrollMode="translate" - spacing={ri.scale(18 * 2)} + spacing={scaleW(18)} + className={css.grid} /> )} - +
); }; diff --git a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.module.less b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.module.less index 80c76523..4b37f4b2 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.module.less +++ b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.module.less @@ -1,8 +1,6 @@ @import "../../../style/CommonStyle.module.less"; .popularShow { - padding: 0px 0px 60px 60px; - - overflow: hidden; + padding: 60px 0px 0px 60px; .subTitle { border-left: 6px solid @PRIMARY_COLOR_RED; @@ -13,10 +11,19 @@ font-family: "LGSmartUIBold"; font-size: 42px; } + + .grid { + height: 438px; + overflow: unset; + > div { + overflow: unset !important; + } + } .showList { padding-top: 20px; display: flex; - overflow: hidden; - height: 438px; + &:last-child { + padding-right: 60px; + } } } diff --git a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShowItem/PopularShowItem.jsx b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShowItem/PopularShowItem.jsx index 2ad08bef..9a07bdce 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShowItem/PopularShowItem.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShowItem/PopularShowItem.jsx @@ -1,10 +1,10 @@ -import React from "react"; +import React 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 "./PopularShowItem.module.less"; +import css from './PopularShowItem.module.less'; const SpottableComponent = Spottable("li"); @@ -26,7 +26,10 @@ export default function PopularShowItem({ topInfosData, itemNum, ...rest }) { : css.horizonItem )} > - {itemNum.showNm} + + + + {itemNum.showNm}
); diff --git a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShowItem/PopularShowItem.module.less b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShowItem/PopularShowItem.module.less index 46d0bd31..0be18bc7 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShowItem/PopularShowItem.module.less +++ b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShowItem/PopularShowItem.module.less @@ -12,6 +12,7 @@ margin-right: 18px; border: 4px solid transparent; box-sizing: border-box; + &:focus, &:hover, &:focus-within, @@ -28,7 +29,7 @@ } .horizonItem { width: 510px; - height: 60px; + height: 61px; margin-top: 38px; color: #333; font-size: 24px; @@ -37,6 +38,29 @@ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; + display: flex; + } + .logo { + display: inline-block; + width: 60px; + height: 60px; + margin-right: 12px; + .logoPath { + width: 100%; + height: auto; + } + } + .showNm { + display: inline-block; + color: #333; + font-size: 24px; + text-overflow: ellipsis; + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + width: 438px; + height: 61px; } } .listItemVertical { @@ -78,4 +102,26 @@ -webkit-box-orient: vertical; -webkit-line-clamp: 12; } + .logo { + display: block; + width: 60px; + height: 60px; + margin-right: 12px; + .logoPath { + width: 100%; + height: auto; + } + } + .showNm { + margin-left: 11px; + color: #333; + font-size: 24px; + width: 270px; + height: 402px; + text-overflow: ellipsis; + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 12; + } } diff --git a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx index 74c36541..c6244393 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx @@ -16,10 +16,8 @@ import { import Spottable from '@enact/spotlight/Spottable'; import { getSubCategory } from '../../../actions/mainActions'; -import { getOnSaleInfo } from '../../../actions/onSaleActions'; import TBody from '../../../components/TBody/TBody'; import TGrid from '../../../components/TGrid/TGrid'; -import TItemCard from '../../../components/TItemCard/TItemCard'; import { scaleH, scaleW, @@ -100,10 +98,9 @@ const SubCategory = () => { onCategoryNavClick={handleCategoryNav} type="home" /> - +
{categoryItemInfos && categoryItemInfos.length > 0 && ( { minWidth: scaleW(324), minHeight: scaleH(438), }} + spacing={scaleW(0)} noScrollByWheel scrollMode="translate" + className={css.grid} /> )} - +
); }; diff --git a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.module.less b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.module.less index ef0f8e01..a3c78be6 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.module.less +++ b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.module.less @@ -1 +1,21 @@ @import "../../../style/CommonStyle.module.less"; +.home { + padding: 20px 0px 0 60px; + justify-content: unset; + align-items: unset; + flex-direction: unset; + background-color: #f2f2f2; + border: 1px solid #dadada; + width: 100%; +} + +.grid { + height: 478px; + overflow: unset; + > div { + overflow: unset !important; + } + &:last-child { + padding-right: 60px; + } +} diff --git a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategoryItem/SubCategoryItem.jsx b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategoryItem/SubCategoryItem.jsx index 9f893bae..761d9aed 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategoryItem/SubCategoryItem.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategoryItem/SubCategoryItem.jsx @@ -1,7 +1,5 @@ import React, { useCallback } from 'react'; -import classNames from 'classnames'; - import Spottable from '@enact/spotlight/Spottable'; import css from './SubCategoryItem.module.less';