[HomePanel] 더보기 버튼 관련 처리

- 더보기 아이콘 추가. - 섹션타이틀 css 변경
2024-02-14 09:36:33 +09:00
parent cbbe434954
commit 1b8f8cbaf7
7 changed files with 122 additions and 45 deletions
--- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx
@@ -11,6 +11,7 @@ import VirtualGridList from '@enact/sandstone/VirtualList';
 import {
  SpotlightContainerDecorator,
 } from '@enact/spotlight/SpotlightContainerDecorator';
+import Spottable from '@enact/spotlight/Spottable';

 import SectionTitle from '../../../components/SectionTitle/SectionTitle';
 import TGrid from '../../../components/TGrid/TGrid';
@@ -22,6 +23,7 @@ import {
 import css from './BestSeller.module.less';
 import BestSellerItem from './BestSellerItem/BestSellerItem';

+const SpottableComponent = Spottable("div");
 const Container = SpotlightContainerDecorator(
  { enterTo: "last-focused", leaveFor: { left: "", right: "" } },
  "div"
@@ -34,14 +36,23 @@ const BestSeller = () => {
  const renderItem = useCallback(
    ({ index, ...rest }) => {
      const itemData = bestSellerDatas[index];
-      return (
-        <BestSellerItem
-          bestSellerData={bestSellerDatas}
-          itemData={itemData}
-          isBestSeller
-          {...rest}
-        />
-      );
+      if (index !== bestSellerDatas.length) {
+        return (
+          <BestSellerItem
+            bestSellerData={bestSellerDatas}
+            itemData={itemData}
+            isBestSeller
+            {...rest}
+          />
+        );
+      } else {
+        return (
+          <SpottableComponent
+            className={css.addItem}
+            {...rest}
+          ></SpottableComponent>
+        );
+      }
    },
    [bestSellerDatas]
  );
@@ -53,7 +64,7 @@ const BestSeller = () => {
      <TGrid type="homeBestSeller">
        {bestSellerDatas && bestSellerDatas.length > 0 && (
          <VirtualGridList
-            dataSize={bestSellerDatas.length}
+            dataSize={bestSellerDatas.length + 1}
            direction="horizontal"
            horizontalScrollbar="hidden"
            itemRenderer={renderItem}
--- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.module.less
+++ b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.module.less
@@ -1,3 +1,4 @@
+@import "../../../style/CommonStyle.module.less";
 .bestSellerWrap {
  padding: 60px 0 0px 60px;
  > h2 {
@@ -20,3 +21,23 @@
    }
  }
 }
+.addItem {
+  width: 198px;
+  height: 438px;
+  background-color: #fff;
+  border: 1px solid #e4e4e4;
+  border-radius: 12px;
+  background-image: url("../../../../assets/icon/button_icon/ic-more-nor.svg");
+  background-size: 66px 66px;
+  background-position: center center;
+  background-repeat: no-repeat;
+  &:focus,
+  &:hover,
+  &:focus-within,
+  &:active {
+    border: 4px solid @PRIMARY_COLOR_RED;
+    box-sizing: border-box;
+    border-radius: 12px;
+    background-image: url("../../../../assets/icon/button_icon/ic-more-sel.svg");
+  }
+}
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.module.less
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.module.less
@@ -3,17 +3,6 @@
  padding: 60px 0px 0px 60px;
  width: 100%;

-  .subTitle {
-    border-left: 6px solid #c70850;
-    padding-left: 12px;
-    box-sizing: border-box;
-    color: #1a1a1a;
-    font-weight: bold;
-    font-family: "LGSmartUIBold";
-    font-size: 42px;
-    margin-bottom: 20px;
-  }
-
  .grid {
    height: 300px;
    overflow: unset;
--- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx
@@ -14,6 +14,7 @@ import { VirtualGridList } from '@enact/sandstone/VirtualList';
 import {
  SpotlightContainerDecorator,
 } from '@enact/spotlight/SpotlightContainerDecorator';
+import Spottable from '@enact/spotlight/Spottable';

 import SectionTitle from '../../../components/SectionTitle/SectionTitle';
 import {
@@ -24,6 +25,7 @@ import {
 import css from '../PopularShow/PopularShow.module.less';
 import PopularShowItem from './PopularShowItem/PopularShowItem';

+const SpottableComponent = Spottable("div");
 const Container = SpotlightContainerDecorator(
  { enterTo: "last-focused" },
  "div"
@@ -36,9 +38,22 @@ const PopularShow = ({ ...rest }) => {
  const renderItem = useCallback(
    ({ index, ...rest }) => {
      const itemData = topInfos[index];
-      return (
-        <PopularShowItem topInfosData={topInfos} itemNum={itemData} {...rest} />
-      );
+      if (index !== topInfos.length) {
+        return (
+          <PopularShowItem
+            topInfosData={topInfos}
+            itemNum={itemData}
+            {...rest}
+          />
+        );
+      } else {
+        return (
+          <SpottableComponent
+            className={css.addItem}
+            {...rest}
+          ></SpottableComponent>
+        );
+      }
    },
    [topInfos]
  );
@@ -49,7 +64,7 @@ const PopularShow = ({ ...rest }) => {
      <div className={css.showList}>
        {topInfos && topInfos.length > 0 && (
          <VirtualGridList
-            dataSize={topInfos.length}
+            dataSize={topInfos.length + 1}
            direction="horizontal"
            horizontalScrollbar="hidden"
            itemRenderer={renderItem}
--- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.module.less
+++ b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.module.less
@@ -2,16 +2,6 @@
 .popularShow {
  padding: 60px 0px 0px 60px;

-  .subTitle {
-    border-left: 6px solid @PRIMARY_COLOR_RED;
-    padding-left: 12px;
-    box-sizing: border-box;
-    color: #1a1a1a;
-    font-weight: bold;
-    font-family: "LGSmartUIBold";
-    font-size: 42px;
-  }
-
  .grid {
    height: 438px;
    overflow: unset;
@@ -27,3 +17,24 @@
    }
  }
 }
+
+.addItem {
+  width: 198px;
+  height: 438px;
+  background-color: #fff;
+  border: 1px solid #e4e4e4;
+  border-radius: 12px;
+  background-image: url("../../../../assets/icon/button_icon/ic-more-nor.svg");
+  background-size: 66px 66px;
+  background-position: center center;
+  background-repeat: no-repeat;
+  &:focus,
+  &:hover,
+  &:focus-within,
+  &:active {
+    border: 4px solid @PRIMARY_COLOR_RED;
+    box-sizing: border-box;
+    border-radius: 12px;
+    background-image: url("../../../../assets/icon/button_icon/ic-more-sel.svg");
+  }
+}
--- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx
@@ -77,19 +77,28 @@ const SubCategory = () => {
  const renderItem = useCallback(
    ({ index, ...rest }) => {
      const itemData = categoryItemInfos[index];
-
-      return (
-        <SubCategoryItem
-          subCategoryData={categoryItemInfos}
-          currentLgCatCd={currentLgCatCd}
-          itemNum={itemData}
-          key={itemData.rankOrd}
-          {...rest}
-        />
-      );
+      if (index !== categoryItemInfos.length) {
+        return (
+          <SubCategoryItem
+            subCategoryData={categoryItemInfos}
+            currentLgCatCd={currentLgCatCd}
+            itemNum={itemData}
+            key={itemData.rankOrd}
+            {...rest}
+          />
+        );
+      } else {
+        return (
+          <SpottableComponent
+            className={css.addItem}
+            {...rest}
+          ></SpottableComponent>
+        );
+      }
    },
    [categoryItemInfos]
  );
+
  return (
    <Container>
      <CategoryNav
@@ -101,7 +110,7 @@ const SubCategory = () => {
      <div className={css.home}>
        {categoryItemInfos && categoryItemInfos.length > 0 && (
          <VirtualGridList
-            dataSize={categoryItemInfos.length}
+            dataSize={categoryItemInfos.length + 1}
            direction="horizontal"
            horizontalScrollbar="hidden"
            itemRenderer={renderItem}
--- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.module.less
+++ b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.module.less
@@ -19,3 +19,24 @@
    padding-right: 31px;
  }
 }
+
+.addItem {
+  width: 198px;
+  height: 438px;
+  background-color: #fff;
+  border: 1px solid #e4e4e4;
+  border-radius: 12px;
+  background-image: url("../../../../assets/icon/button_icon/ic-more-nor.svg");
+  background-size: 66px 66px;
+  background-position: center center;
+  background-repeat: no-repeat;
+  &:focus,
+  &:hover,
+  &:focus-within,
+  &:active {
+    border: 4px solid @PRIMARY_COLOR_RED;
+    box-sizing: border-box;
+    border-radius: 12px;
+    background-image: url("../../../../assets/icon/button_icon/ic-more-sel.svg");
+  }
+}