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

- 더보기 아이콘 추가.
 - 섹션타이틀 css 변경

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,6 +36,7 @@ const BestSeller = () => {
   const renderItem = useCallback(
     ({ index, ...rest }) => {
       const itemData = bestSellerDatas[index];
+      if (index !== bestSellerDatas.length) {
         return (
           <BestSellerItem
             bestSellerData={bestSellerDatas}
@@ -42,6 +45,14 @@ const BestSeller = () => {
             {...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}

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

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;

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];
+      if (index !== topInfos.length) {
         return (
-        <PopularShowItem topInfosData={topInfos} itemNum={itemData} {...rest} />
+          <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}

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

com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx

@@ -77,7 +77,7 @@ const SubCategory = () => {
   const renderItem = useCallback(
     ({ index, ...rest }) => {
       const itemData = categoryItemInfos[index];
-
+      if (index !== categoryItemInfos.length) {
         return (
           <SubCategoryItem
             subCategoryData={categoryItemInfos}
@@ -87,9 +87,18 @@ const SubCategory = () => {
             {...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}

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