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;
&.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;

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 { 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)}
/>
)}
</TGrid>

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

@@ -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 {

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

@@ -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;
}
}

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

@@ -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;

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

@@ -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);
// }
// }
// }
// }
// }
}
}

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

@@ -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;

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

@@ -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;

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

@@ -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,

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 { 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"

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({
subCategoryData,