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

[홈패널] 서브카테고리 수정

Browse Source
This commit is contained in:
sungmin.in
2024-02-10 16:28:35 +09:00
parent 3e46293677
commit e398fa9a82
5 changed files with 333 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
com.twin.app.shoptime/src/views/HomePanel/SubCategory/CategoryNav/CategoryNav.jsx Normal file
View File

@@ -0,0 +1,63 @@
import React, { useCallback } from 'react';
import { VirtualGridList } from '@enact/sandstone/VirtualList';
import SpotlightContainerDecorator
from '@enact/spotlight/SpotlightContainerDecorator';
import ri from '@enact/ui/resolution';
import CategoryNavItem from '../CategoryNav/CategoryNavItem/CategoryNavItem';
import css from './CategoryNav.module.less';
const LIST_ITEM_CONF = {
ITEM_WIDTH: 210 * 2,
ITEM_HEIGHT: 236 * 2,
SAPCING: 30 * 2,
};
const Container = SpotlightContainerDecorator(
{ leaveFor: { right: "" }, enterTo: "last-focused" },
"nav"
);
export default function CategoryNav({
categoryInfos,
currentCategoryCode,
onCategoryNavClick,
...rest
}) {
const renderItem = useCallback(
({ index, ...rest }) => {
return (
<CategoryNavItem
categoryInfos={categoryInfos}
currentCategoryCode={currentCategoryCode}
onCategoryNavClick={onCategoryNavClick}
index={index}
{...rest}
/>
);
},
[categoryInfos, currentCategoryCode, onCategoryNavClick]
);
return (
<Container className={css.container} {...rest}>
{categoryInfos && categoryInfos.length > 0 && (
<VirtualGridList
className={css.virtualGridList}
dataSize={categoryInfos.length}
direction="horizontal"
horizontalScrollbar="hidden"
itemRenderer={renderItem}
itemSize={{
minWidth: ri.scale(LIST_ITEM_CONF.ITEM_WIDTH),
minHeight: ri.scale(LIST_ITEM_CONF.ITEM_HEIGHT),
}}
noScrollByWheel
scrollMode="translate"
spacing={ri.scale(LIST_ITEM_CONF.SAPCING)}
/>
)}
</Container>
);
}

9
com.twin.app.shoptime/src/views/HomePanel/SubCategory/CategoryNav/CategoryNav.module.less Normal file
View File

@@ -0,0 +1,9 @@
@import "../../../../style/CommonStyle.module.less";
@import "../../../../style/utils.module.less";
.container {
.size(@w: 100%, @h:236px);
z-index: 10;
background-color: @BG_COLOR_01;
.font(@fontFamily: @baseFontBold, @fontSize: 28px);
}

46
com.twin.app.shoptime/src/views/HomePanel/SubCategory/CategoryNav/CategoryNavItem/CategoryNavItem.jsx Normal file
View File

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

190
com.twin.app.shoptime/src/views/HomePanel/SubCategory/CategoryNav/CategoryNavItem/CategoryNavItem.module.less Normal file
View File

@@ -0,0 +1,190 @@
@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(@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;
}
}

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

@@ -1,19 +1,29 @@
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 ri from '@enact/ui/resolution';
import { getSubCategory } from "../../../actions/mainActions";
import { getOnSaleInfo } from "../../../actions/onSaleActions";
import TGrid from "../../../components/TGrid/TGrid";
import TItemCard from "../../../components/TItemCard/TItemCard";
import css from "../../HomePanel/SubCategory/SubCategory.module.less";
import CategoryNav from "../../OnSalePanel/CategoryNav/CategoryNav";
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 CategoryNav from '../../HomePanel/SubCategory/CategoryNav';
import css from '../../HomePanel/SubCategory/SubCategory.module.less';
import SubCategoryItem from './SubCategoryItem/SubCategoryItem';
const SpottableComponent = Spottable("div");
const Container = SpotlightContainerDecorator(
@@ -80,7 +90,7 @@ const SubCategory = () => {
[categoryItemInfos]
);
return (
<SpottableComponent>
<Container>
<CategoryNav
categoryInfos={categoryInfos}
currentCategoryCode={currentLgCatCd}
@@ -104,7 +114,7 @@ const SubCategory = () => {
/>
)}
</TGrid>
</SpottableComponent>
</Container>
);
};