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

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 (
+        <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>
+  );
+}

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);
+}

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 (
+    <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>
+  );
+});

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

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 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 ri from '@enact/ui/resolution';
 
-import { getSubCategory } from "../../../actions/mainActions";
+import { getSubCategory } from '../../../actions/mainActions';
-import { getOnSaleInfo } from "../../../actions/onSaleActions";
+import { getOnSaleInfo } from '../../../actions/onSaleActions';
-import TGrid from "../../../components/TGrid/TGrid";
+import TBody from '../../../components/TBody/TBody';
-import TItemCard from "../../../components/TItemCard/TItemCard";
+import TGrid from '../../../components/TGrid/TGrid';
-import css from "../../HomePanel/SubCategory/SubCategory.module.less";
+import TItemCard from '../../../components/TItemCard/TItemCard';
-import CategoryNav from "../../OnSalePanel/CategoryNav/CategoryNav";
+import CategoryNav from '../../HomePanel/SubCategory/CategoryNav';
-import SubCategoryItem from "./SubCategoryItem/SubCategoryItem";
+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>
   );
 };