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

[OnSalePanel] CategoryNav 수정

Browse Source 
Detail Notes :

1. CategoryNav의 <Scroller /> → <VirtualGridList /> 교체
2. CategoryNavItem 추가
This commit is contained in:
younghoon100.park
2024-02-01 19:23:43 +09:00
parent 0f61917da3
commit 680eb840b4
5 changed files with 265 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/CategoryNav.jsx
View File

@@ -1,12 +1,11 @@
import React from 'react';
import classNames from 'classnames';
import Scroller from '@enact/sandstone/Scroller';
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 CategoryNavItem from '../CategoryNavItem/CategoryNavItem';
import css from './CategoryNav.module.less';
const Container = SpotlightContainerDecorator(
@@ -14,44 +13,42 @@ const Container = SpotlightContainerDecorator(
"nav"
);
const SpottableComponent = Spottable("li");
export default function CategoryNav({
categoryInfos,
currentLgCatCd,
onCategoryNavClick,
...rest
}) {
const renderItem = ({ index, ...rest }) => {
return (
<CategoryNavItem
categoryInfos={categoryInfos}
currentLgCatCd={currentLgCatCd}
onCategoryNavClick={onCategoryNavClick}
index={index}
{...rest}
/>
);
};
return (
<Container className={css.container} {...rest}>
<Scroller
className={css.scroller}
{categoryInfos && categoryInfos.length > 0 && (
<VirtualGridList
className={css.virtualGridList}
dataSize={categoryInfos.length}
direction="horizontal"
horizontalScrollbar="hidden"
noScrollByWheel={true}
itemRenderer={renderItem}
itemSize={{
minWidth: ri.scale(210 * 2),
minHeight: ri.scale(236 * 2),
}}
noScrollByWheel
scrollMode="translate"
>
<ul>
{categoryInfos &&
categoryInfos.map(({ lgCatNm, lgCatCd }) => {
return (
<SpottableComponent
className={classNames(
css.category,
lgCatCd === currentLgCatCd && css.selected
spacing={ri.scale(30 * 2)}
/>
)}
key={lgCatCd}
onClick={() => onCategoryNavClick(lgCatCd)}
>
<div>
<span className={css[`category-icon-${lgCatCd}`]} />
</div>
<strong>{lgCatNm}</strong>
</SpottableComponent>
);
})}
</ul>
</Scroller>
</Container>
);
}

202
com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/CategoryNav.module.less
View File

@@ -2,208 +2,8 @@
@import "../../../style/utils.module.less";
.container {
.scroller {
display: block;
}
width: 100%;
.size(@w: 100%, @h:236px);
z-index: 10;
background-color: @BG_COLOR_01;
.font(@fontFamily: @baseFontBold, @fontSize: 28px);
ul {
display: flex;
gap: 30px;
margin-top: 50px;
}
.category {
/* normal */
position: relative;
.flex(@direction: column);
min-width: 210px;
color: #1a1a1a;
text-align: center;
div {
.flex();
.size(@w: 94px, @h: 94px);
margin-bottom: 18px;
border-radius: 48px;
background-color: #1a1a1a;
border: 2px solid #1a1a1a;
span {
.size(@w: 80px, @h:80px);
background-position: center;
background-size: cover;
&.category-icon-1017 {
// LG Electronics
background-image: url("../../../../assets/category/ic-category-lgelectronics-nor@3x.png");
}
// Garden and Outdoors
&.category-icon-1008 {
background-image: url("../../../../assets/category/ic-category-garden-nor@3x.png");
}
// Fashion
&.category-icon-1000 {
background-image: url("../../../../assets/category/ic-category-fashion-nor@3x.png");
}
// Beauty
&.category-icon-1003 {
background-image: url("../../../../assets/category/ic-category-beauty-nor@3x.png");
}
// Jewelry
&.category-icon-1004 {
background-image: url("../../../../assets/category/ic-category-jewelry-nor@3x.png");
}
// Home
&.category-icon-1006 {
background-image: url("../../../../assets/category/ic-category-home-nor@3x.png");
}
// Kitchen & Food
&.category-icon-1007 {
background-image: url("../../../../assets/category/ic-category-kitchen-nor@3x.png");
}
// Accessories
&.category-icon-1014 {
background-image: url("../../../../assets/category/ic-category-accessories-nor@3x.png");
}
// Heaclth & Fitness
&.category-icon-1009 {
background-image: url("../../../../assets/category/ic-category-health-nor@3x.png");
}
// Crafts & Sewing
&.category-icon-1011 {
background-image: url("../../../../assets/category/ic-category-cw-nor@3x.png");
}
// Electronics
&.category-icon-1010 {
background-image: url("../../../../assets/category/ic-category-electronics-nor@3x.png");
}
// Clearance
&.category-icon-1013 {
background-image: url("../../../../assets/category/ic-category-clearance-nor@3x.png");
}
}
}
strong {
height: 60px;
margin-bottom: 12px;
}
&::after {
content: "";
position: absolute;
bottom: 0;
display: block;
.size(@w: 100%, @h:6px);
background-color: transparent;
}
/* focused */
&:focus {
// color: #c70850;
div {
background-color: #fff;
border: solid 2px #c70850;
box-shadow: 0 0 25px 0 rgba(2, 3, 3, 0.8);
span {
// LG Electronics
&.category-icon-1017 {
background-image: url("../../../../assets/category/ic-category-lgelectronics-foc@3x.png");
}
// Garden and Outdoors
&.category-icon-1008 {
background-image: url("../../../../assets/category/ic-category-garden-foc@3x.png");
}
// Fashion
&.category-icon-1000 {
background-image: url("../../../../assets/category/ic-category-fashion-foc@3x.png");
}
// Beauty
&.category-icon-1003 {
background-image: url("../../../../assets/category/ic-category-beauty-foc@3x.png");
}
// Jewelry
&.category-icon-1004 {
background-image: url("../../../../assets/category/ic-category-jewelry-foc@3x.png");
}
// Home
&.category-icon-1006 {
background-image: url("../../../../assets/category/ic-category-home-foc@3x.png");
}
// Kitchen & Food
&.category-icon-1007 {
background-image: url("../../../../assets/category/ic-category-kitchen-foc@3x.png");
}
// Accessories
&.category-icon-1014 {
background-image: url("../../../../assets/category/ic-category-accessories-foc@3x.png");
}
// Heaclth & Fitness
&.category-icon-1009 {
background-image: url("../../../../assets/category/ic-category-health-foc@3x.png");
}
// Crafts & Sewing
&.category-icon-1011 {
background-image: url("../../../../assets/category/ic-category-cw-foc@3x.png");
}
// Electronics
&.category-icon-1010 {
background-image: url("../../../../assets/category/ic-category-electronics-foc@3x.png");
}
// Clearance
&.category-icon-1013 {
background-image: url("../../../../assets/category/ic-category-clearance-foc@3x.png");
}
}
}
strong {
color: #c70850;
}
&::after {
background-color: #c70850;
}
}
}
/* selected */
.selected {
div {
background-color: #c70850;
border: solid 2px #c70850;
}
strong {
color: #c70850;
}
}
}

36
com.twin.app.shoptime/src/views/OnSalePanel/CategoryNavItem/CategoryNavItem.jsx Normal file
View File

@@ -0,0 +1,36 @@
import React from 'react';
import classNames from 'classnames';
import Spottable from '@enact/spotlight/Spottable';
import css from './CategoryNavItem.module.less';
const SpottableComponent = Spottable("div");
export default function CategoryNavItem({
categoryInfos,
currentLgCatCd,
onCategoryNavClick,
index,
...rest
}) {
return (
<SpottableComponent
className={classNames(
css.category,
categoryInfos[index].lgCatCd === currentLgCatCd && css.selected
)}
key={categoryInfos[index].lgCatCd}
onClick={() => onCategoryNavClick(categoryInfos[index].lgCatCd)}
{...rest}
>
<div>
<span
className={css[`category-icon-${categoryInfos[index].lgCatCd}`]}
/>
</div>
<strong>{categoryInfos[index].lgCatNm}</strong>
</SpottableComponent>
);
}

191
com.twin.app.shoptime/src/views/OnSalePanel/CategoryNavItem/CategoryNavItem.module.less Normal file
View File

@@ -0,0 +1,191 @@
@import "../../../style/CommonStyle.module.less";
@import "../../../style/utils.module.less";
.category {
/* normal */
position: relative;
.flex(@direction: column);
margin-top: 50px;
color: @COLOR_GRAY08;
text-align: center;
div {
.flex();
.size(@w: 94px, @h: 94px);
margin-bottom: 18px;
border-radius: 48px;
background-color: @COLOR_GRAY08;
border: 2px solid @COLOR_GRAY08;
span {
.size(@w: 80px, @h:80px);
background-position: center;
background-size: cover;
&.category-icon-1017 {
// LG Electronics
background-image: url("../../../../assets/category/ic-category-lgelectronics-nor@3x.png");
}
// Garden and Outdoors
&.category-icon-1008 {
background-image: url("../../../../assets/category/ic-category-garden-nor@3x.png");
}
// Fashion
&.category-icon-1000 {
background-image: url("../../../../assets/category/ic-category-fashion-nor@3x.png");
}
// Beauty
&.category-icon-1003 {
background-image: url("../../../../assets/category/ic-category-beauty-nor@3x.png");
}
// Jewelry
&.category-icon-1004 {
background-image: url("../../../../assets/category/ic-category-jewelry-nor@3x.png");
}
// Home
&.category-icon-1006 {
background-image: url("../../../../assets/category/ic-category-home-nor@3x.png");
}
// Kitchen & Food
&.category-icon-1007 {
background-image: url("../../../../assets/category/ic-category-kitchen-nor@3x.png");
}
// Accessories
&.category-icon-1014 {
background-image: url("../../../../assets/category/ic-category-accessories-nor@3x.png");
}
// Heaclth & Fitness
&.category-icon-1009 {
background-image: url("../../../../assets/category/ic-category-health-nor@3x.png");
}
// Crafts & Sewing
&.category-icon-1011 {
background-image: url("../../../../assets/category/ic-category-cw-nor@3x.png");
}
// Electronics
&.category-icon-1010 {
background-image: url("../../../../assets/category/ic-category-electronics-nor@3x.png");
}
// Clearance
&.category-icon-1013 {
background-image: url("../../../../assets/category/ic-category-clearance-nor@3x.png");
}
}
}
strong {
height: 60px;
margin-bottom: 12px;
}
&::after {
content: "";
position: absolute;
bottom: 0;
display: block;
.size(@w: 100%, @h:6px);
background-color: transparent;
}
/* focused */
&:focus {
div {
background-color: @COLOR_WHITE;
border: solid 2px @PRIMARY_COLOR_RED;
box-shadow: 0 0 25px 0 rgba(2, 3, 3, 0.8);
span {
// LG Electronics
&.category-icon-1017 {
background-image: url("../../../../assets/category/ic-category-lgelectronics-foc@3x.png");
}
// Garden and Outdoors
&.category-icon-1008 {
background-image: url("../../../../assets/category/ic-category-garden-foc@3x.png");
}
// Fashion
&.category-icon-1000 {
background-image: url("../../../../assets/category/ic-category-fashion-foc@3x.png");
}
// Beauty
&.category-icon-1003 {
background-image: url("../../../../assets/category/ic-category-beauty-foc@3x.png");
}
// Jewelry
&.category-icon-1004 {
background-image: url("../../../../assets/category/ic-category-jewelry-foc@3x.png");
}
// Home
&.category-icon-1006 {
background-image: url("../../../../assets/category/ic-category-home-foc@3x.png");
}
// Kitchen & Food
&.category-icon-1007 {
background-image: url("../../../../assets/category/ic-category-kitchen-foc@3x.png");
}
// Accessories
&.category-icon-1014 {
background-image: url("../../../../assets/category/ic-category-accessories-foc@3x.png");
}
// Heaclth & Fitness
&.category-icon-1009 {
background-image: url("../../../../assets/category/ic-category-health-foc@3x.png");
}
// Crafts & Sewing
&.category-icon-1011 {
background-image: url("../../../../assets/category/ic-category-cw-foc@3x.png");
}
// Electronics
&.category-icon-1010 {
background-image: url("../../../../assets/category/ic-category-electronics-foc@3x.png");
}
// Clearance
&.category-icon-1013 {
background-image: url("../../../../assets/category/ic-category-clearance-foc@3x.png");
}
}
}
strong {
color: @PRIMARY_COLOR_RED;
}
&::after {
background-color: @PRIMARY_COLOR_RED;
}
}
}
/* selected */
.selected {
div {
background-color: @PRIMARY_COLOR_RED;
border: solid 2px @PRIMARY_COLOR_RED;
}
strong {
color: @PRIMARY_COLOR_RED;
}
}

6
com.twin.app.shoptime/src/views/OnSalePanel/CategoryNavItem/package.json Normal file
View File

@@ -0,0 +1,6 @@
{
"main": "CategoryNavItem.jsx",
"styles": [
"CategoryNavItem.module.less"
]
}