diff --git a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/CategoryNav/CategoryNav.jsx b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/CategoryNav/CategoryNav.jsx new file mode 100644 index 00000000..34a014d8 --- /dev/null +++ b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/CategoryNav/CategoryNav.jsx @@ -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 ( + + ); + }, + [categoryInfos, currentCategoryCode, onCategoryNavClick] + ); + + return ( + + {categoryInfos && categoryInfos.length > 0 && ( + + )} + + ); +} diff --git a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/CategoryNav/CategoryNav.module.less b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/CategoryNav/CategoryNav.module.less new file mode 100644 index 00000000..6821964a --- /dev/null +++ b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/CategoryNav/CategoryNav.module.less @@ -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); +} diff --git a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/CategoryNav/CategoryNavItem/CategoryNavItem.jsx b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/CategoryNav/CategoryNavItem/CategoryNavItem.jsx new file mode 100644 index 00000000..a3884cd2 --- /dev/null +++ b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/CategoryNav/CategoryNavItem/CategoryNavItem.jsx @@ -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 ( + handleClick(categoryCode)} + {...rest} + > +
+ +
+ {categoryName} + + ); +}); diff --git a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/CategoryNav/CategoryNavItem/CategoryNavItem.module.less b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/CategoryNav/CategoryNavItem/CategoryNavItem.module.less new file mode 100644 index 00000000..55e220c3 --- /dev/null +++ b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/CategoryNav/CategoryNavItem/CategoryNavItem.module.less @@ -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; + } +} 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 0a49fca4..71013afa 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx @@ -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 ( - + { /> )} - + ); };