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 ba2de38a..0c5a046f 100644 --- a/com.twin.app.shoptime/src/components/TGrid/TGrid.module.less +++ b/com.twin.app.shoptime/src/components/TGrid/TGrid.module.less @@ -7,14 +7,14 @@ gap: 15px; &.home { - margin-top: 20px; - width: calc(100% - 60px); - margin-left: 60px; + padding: 20px 42px 0 60px; justify-content: unset; align-items: unset; flex-direction: unset; - overflow: hidden; + height: 478px; + background-color: #f2f2f2; + border: 1px solid #dadada; } &.homeBestSeller { overflow: hidden; 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 3febf609..840e4153 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx @@ -1,18 +1,26 @@ -import React, { useCallback, useEffect, useRef, useState } from "react"; +import React, { + useCallback, + useEffect, + useRef, + useState, +} from 'react'; -import classNames from "classnames"; -import { useSelector } from "react-redux"; +import { useSelector } from 'react-redux'; -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 VirtualGridList from '@enact/sandstone/VirtualList'; +import { + SpotlightContainerDecorator, +} from '@enact/spotlight/SpotlightContainerDecorator'; -import SectionTitle from "../../../components/SectionTitle/SectionTitle"; -import TGrid from "../../../components/TGrid/TGrid"; -import { $L } from "../../../utils/helperMethods"; -import css from "./BestSeller.module.less"; -import BestSellerItem from "./BestSellerItem/BestSellerItem"; +import SectionTitle from '../../../components/SectionTitle/SectionTitle'; +import TGrid from '../../../components/TGrid/TGrid'; +import { + $L, + scaleH, + scaleW, +} from '../../../utils/helperMethods'; +import css from './BestSeller.module.less'; +import BestSellerItem from './BestSellerItem/BestSellerItem'; const Container = SpotlightContainerDecorator( { enterTo: "last-focused", leaveFor: { left: "", right: "" } }, @@ -50,12 +58,12 @@ const BestSeller = () => { horizontalScrollbar="hidden" itemRenderer={renderItem} itemSize={{ - minWidth: ri.scale(324 * 2), - minHeight: ri.scale(438 * 2), + minWidth: scaleW(324), + minHeight: scaleH(438), }} noScrollByWheel scrollMode="translate" - spacing={ri.scale(18 * 2)} + spacing={scaleW(18)} /> )} 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 8a7ebbab..1c4790fb 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,7 +1,7 @@ .bestSellerWrap { - padding: 70px 60px 78px; + padding: 60px 0 60px 60px; > h2 { - margin: 0px 0 34px; + margin: 0px 0 20px; font-size: 42px; } > ul { diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.module.less b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.module.less index a3597996..4048e5be 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.module.less +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.module.less @@ -6,14 +6,13 @@ } .homeTemplateBox { - margin: 24px 24px 50px; + margin: 24px 24px 0px; display: flex; img, video { width: 100%; height: 100%; object-fit: cover; - border-radius: 12px; } } .leftBannerBox { @@ -171,10 +170,10 @@ .imgBox { width: 486px; height: 858px; - background: beige; margin-right: 18px; border: 4px solid transparent; border-radius: 12px; + overflow: hidden; &:focus, &:hover, &:focus-within, @@ -183,8 +182,9 @@ box-sizing: border-box; .focusDropShadow(); } - img { - width: 100%; + > img { + width: 486px; + height: 858px; object-fit: contain; } } 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 8365b33b..1cf3f455 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 @@ -6,7 +6,7 @@ } .homeTemplateBox { - margin: 24px 24px 50px; + margin: 24px 24px 0px; display: flex; img, video { @@ -170,7 +170,6 @@ .imgBox { width: 486px; height: 858px; - background: beige; margin-right: 18px; border: 4px solid transparent; border-radius: 12px; diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.module.less b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.module.less index d5357920..3fd7105a 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.module.less +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.module.less @@ -1,9 +1,8 @@ @import "../../../style/CommonStyle.module.less"; .bestSeller { - padding: 60px 0; + padding: 0px 0px 60px 60px; width: 100%; - margin-left: 60px; .subTitle { border-left: 6px solid #c70850; padding-left: 12px; @@ -12,10 +11,12 @@ font-weight: bold; font-family: "LGSmartUIBold"; font-size: 42px; + margin-bottom: 20px; } .grid { height: 300px; + > div { > div { > div { @@ -65,36 +66,5 @@ display: flex; flex-wrap: nowrap; overflow: hidden; - // > div { - // > div { - // > div { - // > div:nth-child(5n + 1) { - // .onSaleItemListBox { - // background-image: linear-gradient(to top, #f485c3, #cc4d92); - // } - // } - // > div:nth-child(5n + 2) { - // .onSaleItemListBox { - // background-image: linear-gradient(to top, #fdbe43, #e47915); - // } - // } - // > div:nth-child(5n + 3) { - // .onSaleItemListBox { - // background-image: linear-gradient(to top, #97ca73, #3e8d18); - // } - // } - // > div:nth-child(5n + 4) { - // .onSaleItemListBox { - // background-image: linear-gradient(to top, #84b0e9, #4282d9); - // } - // } - // > div:nth-child(5n + 5) { - // .onSaleItemListBox { - // background-image: linear-gradient(to top, #a387ea, #7750dc); - // } - // } - // } - // } - // } } } diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.module.less b/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.module.less index 56ca66a1..8776f563 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.module.less +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.module.less @@ -10,14 +10,7 @@ border: 4px solid transparent; border-radius: 12px; position: relative; - &:focus, - &:hover, - &:focus-within, - &:active { - border: 4px solid @PRIMARY_COLOR_RED; - box-sizing: border-box; - .focusDropShadow(); - } + img { width: 100%; object-fit: contain; 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 318d6373..80c76523 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,9 +1,9 @@ @import "../../../style/CommonStyle.module.less"; .popularShow { - padding: 60px 0 0; + padding: 0px 0px 60px 60px; overflow: hidden; - margin-left: 60px; + .subTitle { border-left: 6px solid @PRIMARY_COLOR_RED; padding-left: 12px; @@ -14,7 +14,7 @@ font-size: 42px; } .showList { - margin-top: 20px; + padding-top: 20px; display: flex; overflow: hidden; height: 438px; 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 e3e7b3dd..46d0bd31 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 @@ -7,7 +7,8 @@ border-radius: 12px; border: solid 1px @COLOR_GRAY02; box-sizing: border-box; - + font-weight: bold; + font-family: "LGSmartUIBold"; margin-right: 18px; border: 4px solid transparent; box-sizing: border-box; @@ -50,6 +51,8 @@ margin-right: 18px; border: 4px solid transparent; box-sizing: border-box; + font-weight: bold; + font-family: "LGSmartUIBold"; &:focus, &:hover, &:focus-within, 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 7ddae353..74c36541 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx @@ -1,20 +1,32 @@ -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 VirtualGridList from "@enact/sandstone/VirtualList"; -import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator"; -import Spottable from "@enact/spotlight/Spottable"; -import ri from "@enact/ui/resolution"; +import VirtualGridList from '@enact/sandstone/VirtualList'; +import { + SpotlightContainerDecorator, +} from '@enact/spotlight/SpotlightContainerDecorator'; +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 CategoryNav from "../../HomePanel/SubCategory/CategoryNav/CategoryNav"; -import css from "../../HomePanel/SubCategory/SubCategory.module.less"; -import SubCategoryItem from "./SubCategoryItem/SubCategoryItem"; +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, +} from '../../../utils/helperMethods'; +import CategoryNav from '../../HomePanel/SubCategory/CategoryNav/CategoryNav'; +import css from '../../HomePanel/SubCategory/SubCategory.module.less'; +import SubCategoryItem from './SubCategoryItem/SubCategoryItem'; const SpottableComponent = Spottable("div"); const Container = SpotlightContainerDecorator( @@ -97,8 +109,8 @@ const SubCategory = () => { horizontalScrollbar="hidden" itemRenderer={renderItem} itemSize={{ - minWidth: ri.scale(324 * 2), - minHeight: ri.scale(438 * 2), + minWidth: scaleW(324), + minHeight: scaleH(438), }} noScrollByWheel scrollMode="translate" 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 c41e6d5b..9f893bae 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,12 +1,12 @@ -import React, { useCallback } from "react"; +import React, { useCallback } 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 "./SubCategoryItem.module.less"; +import css from './SubCategoryItem.module.less'; -const SpottableComponent = Spottable("li"); +const SpottableComponent = Spottable("div"); export default function SubCategoryItem({ subCategoryData,