[OnSalePanel] CategoryNav 수정

Detail Notes :

1. CategoryNav의 <Scroller /> → <VirtualGridList /> 교체
2. CategoryNavItem 추가

com.twin.app.shoptime/src/views/OnSalePanel/CategoryNav/CategoryNav.jsx

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

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

@@ -2,208 +2,8 @@
 @import "../../../style/utils.module.less";
 
 .container {
-  .scroller {
+  .size(@w: 100%, @h:236px);
-    display: block;
-  }
-  width: 100%;
   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;
-    }
-  }
 }

com.twin.app.shoptime/src/views/OnSalePanel/CategoryNavItem/CategoryNavItem.jsx

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

com.twin.app.shoptime/src/views/OnSalePanel/CategoryNavItem/CategoryNavItem.module.less

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

com.twin.app.shoptime/src/views/OnSalePanel/CategoryNavItem/package.json

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