optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Homepanel] style 수정

Browse Source 
- 각페이지별 스타일 수정
This commit is contained in:
junghoon86.park
2024-02-13 11:25:46 +09:00
parent f75a9657db
commit 43c5716873
11 changed files with 79 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
com.twin.app.shoptime/src/components/TGrid/TGrid.module.less
View File

@@ -7,14 +7,14 @@
gap: 15px; gap: 15px;
&.home { &.home {
margin-top: 20px; padding: 20px 42px 0 60px;
width: calc(100% - 60px);
margin-left: 60px;
justify-content: unset; justify-content: unset;
align-items: unset; align-items: unset;
flex-direction: unset; flex-direction: unset;
overflow: hidden;
height: 478px; height: 478px;
background-color: #f2f2f2;
border: 1px solid #dadada;
} }
&.homeBestSeller { &.homeBestSeller {
overflow: hidden; overflow: hidden;

38
com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx
View File

@@ -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 VirtualGridList from '@enact/sandstone/VirtualList';
import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator"; import {
import Spottable from "@enact/spotlight/Spottable"; SpotlightContainerDecorator,
import ri from "@enact/ui/resolution"; } from '@enact/spotlight/SpotlightContainerDecorator';
import SectionTitle from "../../../components/SectionTitle/SectionTitle"; import SectionTitle from '../../../components/SectionTitle/SectionTitle';
import TGrid from "../../../components/TGrid/TGrid"; import TGrid from '../../../components/TGrid/TGrid';
import { $L } from "../../../utils/helperMethods"; import {
import css from "./BestSeller.module.less"; $L,
import BestSellerItem from "./BestSellerItem/BestSellerItem"; scaleH,
scaleW,
} from '../../../utils/helperMethods';
import css from './BestSeller.module.less';
import BestSellerItem from './BestSellerItem/BestSellerItem';
const Container = SpotlightContainerDecorator( const Container = SpotlightContainerDecorator(
{ enterTo: "last-focused", leaveFor: { left: "", right: "" } }, { enterTo: "last-focused", leaveFor: { left: "", right: "" } },
@@ -50,12 +58,12 @@ const BestSeller = () => {
horizontalScrollbar="hidden" horizontalScrollbar="hidden"
itemRenderer={renderItem} itemRenderer={renderItem}
itemSize={{ itemSize={{
minWidth: ri.scale(324 * 2), minWidth: scaleW(324),
minHeight: ri.scale(438 * 2), minHeight: scaleH(438),
}} }}
noScrollByWheel noScrollByWheel
scrollMode="translate" scrollMode="translate"
spacing={ri.scale(18 * 2)} spacing={scaleW(18)}
/> />
)} )}
</TGrid> </TGrid>

4
com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.module.less
View File

@@ -1,7 +1,7 @@
.bestSellerWrap { .bestSellerWrap {
padding: 70px 60px 78px; padding: 60px 0 60px 60px;
> h2 { > h2 {
margin: 0px 0 34px; margin: 0px 0 20px;
font-size: 42px; font-size: 42px;
} }
> ul { > ul {

10
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.module.less
View File

@@ -6,14 +6,13 @@
} }
.homeTemplateBox { .homeTemplateBox {
margin: 24px 24px 50px; margin: 24px 24px 0px;
display: flex; display: flex;
img, img,
video { video {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
border-radius: 12px;
} }
} }
.leftBannerBox { .leftBannerBox {
@@ -171,10 +170,10 @@
.imgBox { .imgBox {
width: 486px; width: 486px;
height: 858px; height: 858px;
background: beige;
margin-right: 18px; margin-right: 18px;
border: 4px solid transparent; border: 4px solid transparent;
border-radius: 12px; border-radius: 12px;
overflow: hidden;
&:focus, &:focus,
&:hover, &:hover,
&:focus-within, &:focus-within,
@@ -183,8 +182,9 @@
box-sizing: border-box; box-sizing: border-box;
.focusDropShadow(); .focusDropShadow();
} }
img { > img {
width: 100%; width: 486px;
height: 858px;
object-fit: contain; object-fit: contain;
} }
} }

3
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/Template.module.less
View File

@@ -6,7 +6,7 @@
} }
.homeTemplateBox { .homeTemplateBox {
margin: 24px 24px 50px; margin: 24px 24px 0px;
display: flex; display: flex;
img, img,
video { video {
@@ -170,7 +170,6 @@
.imgBox { .imgBox {
width: 486px; width: 486px;
height: 858px; height: 858px;
background: beige;
margin-right: 18px; margin-right: 18px;
border: 4px solid transparent; border: 4px solid transparent;
border-radius: 12px; border-radius: 12px;

36
com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.module.less
View File

@@ -1,9 +1,8 @@
@import "../../../style/CommonStyle.module.less"; @import "../../../style/CommonStyle.module.less";
.bestSeller { .bestSeller {
padding: 60px 0; padding: 0px 0px 60px 60px;
width: 100%; width: 100%;
margin-left: 60px;
.subTitle { .subTitle {
border-left: 6px solid #c70850; border-left: 6px solid #c70850;
padding-left: 12px; padding-left: 12px;
@@ -12,10 +11,12 @@
font-weight: bold; font-weight: bold;
font-family: "LGSmartUIBold"; font-family: "LGSmartUIBold";
font-size: 42px; font-size: 42px;
margin-bottom: 20px;
} }
.grid { .grid {
height: 300px; height: 300px;
> div { > div {
> div { > div {
> div { > div {
@@ -65,36 +66,5 @@
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
overflow: hidden; 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);
// }
// }
// }
// }
// }
} }
} }

9
com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.module.less
View File

@@ -10,14 +10,7 @@
border: 4px solid transparent; border: 4px solid transparent;
border-radius: 12px; border-radius: 12px;
position: relative; position: relative;
&:focus,
&:hover,
&:focus-within,
&:active {
border: 4px solid @PRIMARY_COLOR_RED;
box-sizing: border-box;
.focusDropShadow();
}
img { img {
width: 100%; width: 100%;
object-fit: contain; object-fit: contain;

6
com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.module.less
View File

@@ -1,9 +1,9 @@
@import "../../../style/CommonStyle.module.less"; @import "../../../style/CommonStyle.module.less";
.popularShow { .popularShow {
padding: 60px 0 0; padding: 0px 0px 60px 60px;
overflow: hidden; overflow: hidden;
margin-left: 60px;
.subTitle { .subTitle {
border-left: 6px solid @PRIMARY_COLOR_RED; border-left: 6px solid @PRIMARY_COLOR_RED;
padding-left: 12px; padding-left: 12px;
@@ -14,7 +14,7 @@
font-size: 42px; font-size: 42px;
} }
.showList { .showList {
margin-top: 20px; padding-top: 20px;
display: flex; display: flex;
overflow: hidden; overflow: hidden;
height: 438px; height: 438px;

5
com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShowItem/PopularShowItem.module.less
View File

@@ -7,7 +7,8 @@
border-radius: 12px; border-radius: 12px;
border: solid 1px @COLOR_GRAY02; border: solid 1px @COLOR_GRAY02;
box-sizing: border-box; box-sizing: border-box;
font-weight: bold;
font-family: "LGSmartUIBold";
margin-right: 18px; margin-right: 18px;
border: 4px solid transparent; border: 4px solid transparent;
box-sizing: border-box; box-sizing: border-box;
@@ -50,6 +51,8 @@
margin-right: 18px; margin-right: 18px;
border: 4px solid transparent; border: 4px solid transparent;
box-sizing: border-box; box-sizing: border-box;
font-weight: bold;
font-family: "LGSmartUIBold";
&:focus, &:focus,
&:hover, &:hover,
&:focus-within, &:focus-within,

44
com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx
View File

@@ -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 VirtualGridList from '@enact/sandstone/VirtualList';
import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator"; import {
import Spottable from "@enact/spotlight/Spottable"; SpotlightContainerDecorator,
import ri from "@enact/ui/resolution"; } from '@enact/spotlight/SpotlightContainerDecorator';
import Spottable from '@enact/spotlight/Spottable';
import { getSubCategory } from "../../../actions/mainActions"; import { getSubCategory } from '../../../actions/mainActions';
import { getOnSaleInfo } from "../../../actions/onSaleActions"; import { getOnSaleInfo } from '../../../actions/onSaleActions';
import TBody from "../../../components/TBody/TBody"; import TBody from '../../../components/TBody/TBody';
import TGrid from "../../../components/TGrid/TGrid"; import TGrid from '../../../components/TGrid/TGrid';
import TItemCard from "../../../components/TItemCard/TItemCard"; import TItemCard from '../../../components/TItemCard/TItemCard';
import CategoryNav from "../../HomePanel/SubCategory/CategoryNav/CategoryNav"; import {
import css from "../../HomePanel/SubCategory/SubCategory.module.less"; scaleH,
import SubCategoryItem from "./SubCategoryItem/SubCategoryItem"; 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 SpottableComponent = Spottable("div");
const Container = SpotlightContainerDecorator( const Container = SpotlightContainerDecorator(
@@ -97,8 +109,8 @@ const SubCategory = () => {
horizontalScrollbar="hidden" horizontalScrollbar="hidden"
itemRenderer={renderItem} itemRenderer={renderItem}
itemSize={{ itemSize={{
minWidth: ri.scale(324 * 2), minWidth: scaleW(324),
minHeight: ri.scale(438 * 2), minHeight: scaleH(438),
}} }}
noScrollByWheel noScrollByWheel
scrollMode="translate" scrollMode="translate"

10
com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategoryItem/SubCategoryItem.jsx
View File

@@ -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({ export default function SubCategoryItem({
subCategoryData, subCategoryData,