[mainPanel] spot관련 처리

com.twin.app.shoptime/src/components/TGrid/TGrid.module.less

@@ -13,8 +13,10 @@
     justify-content: unset;
     align-items: unset;
     flex-direction: unset;
+    overflow: hidden;
   }
   &.homeBestSeller {
+    overflow: hidden;
     justify-content: unset;
   }
 }

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

@@ -6,7 +6,6 @@ import classNames from "classnames";
 
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 import Spotlight from "@enact/spotlight";
-import Scroller from "@enact/sandstone/Scroller";
 
 import TGrid from "../../../components/TGrid/TGrid";
 import TItemCard from "../../../components/TItemCard/TItemCard";
@@ -22,34 +21,25 @@ const BestSeller = () => {
     (state) => state.product.bestSellerData.bestSeller
   );
   return (
-    <Container className={css.noDataWrap}>
-      <div className={css.bestSellerWrap}>
-        <SectionTitle title={$L(`BEST SELLER`)} />
-        <Scroller
-          direction="horizontal"
-          horizontalScrollbar="hidden"
-          noScrollByWheel={true}
-          scrollMode="translate"
-          className={css.homeScroll}
-        >
-          <TGrid type="homeBestSeller">
-            {bestSellerDatas &&
-              bestSellerDatas.map((bestSeller) => (
-                <TItemCard
-                  key={bestSeller.rankOrd}
-                  imageSource={bestSeller.imgUrl}
-                  imageAlt={bestSeller.prdtNm}
-                  productName={bestSeller.prdtNm}
-                  priceInfo={bestSeller.priceInfo}
-                  rank={bestSeller.rankOrd}
-                  isBestSeller
-                  accType
-                  offerInfo={bestSeller.offerInfo}
-                />
-              ))}
-          </TGrid>
-        </Scroller>
-      </div>
+    <Container className={css.bestSellerWrap}>
+      <SectionTitle title={$L(`BEST SELLER`)} />
+
+      <TGrid type="homeBestSeller">
+        {bestSellerDatas &&
+          bestSellerDatas.map((bestSeller) => (
+            <TItemCard
+              key={bestSeller.rankOrd}
+              imageSource={bestSeller.imgUrl}
+              imageAlt={bestSeller.prdtNm}
+              productName={bestSeller.prdtNm}
+              priceInfo={bestSeller.priceInfo}
+              rank={bestSeller.rankOrd}
+              isBestSeller
+              accType
+              offerInfo={bestSeller.offerInfo}
+            />
+          ))}
+      </TGrid>
     </Container>
   );
 };

com.twin.app.shoptime/src/views/HomePanel/OnSale/OnSale.module.less

@@ -18,7 +18,7 @@
     height: 300px;
     display: flex;
     flex-wrap: nowrap;
-    overflow-x: auto;
+    overflow: hidden;
     .onSaleItemList {
       flex: none;
       width: 630px;

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

@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { $L } from "../../../utils/helperMethods";
 import { Job } from "@enact/core/util";
 import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
-import Spotlight from "@enact/spotlight";
+
 import Spottable from "@enact/spotlight/Spottable";
 import Scroller from "@enact/sandstone/Scroller";
 import { getTop20Show } from "../../../features/main/mainSlice";
@@ -11,8 +11,8 @@ import classNames from "classnames";
 import css from "../PopularShow/PopularShow.module.less";
 
 const Container = SpotlightContainerDecorator(
-  { leaveFor: { left: "", right: "" }, enterTo: "last-focused" },
-  "div"
+  { enterTo: "last-focused" },
+  "section"
 );
 
 const SpottableComponent = Spottable("li");
@@ -25,38 +25,36 @@ const PopularShow = (...rest) => {
     dispatch(getTop20Show());
   }, []);
   return (
-    <div {...rest} className={css.container}>
-      <div className={css.popularShow}>
-        <h2 className={css.subTitle}>{$L("POPULAR SHOW")}</h2>
+    <Container className={css.popularShow}>
+      <h2 className={css.subTitle}>{$L("POPULAR SHOW")}</h2>
 
-        <ul className={css.showList}>
-          {topInfos &&
-            topInfos.map((item) => {
-              return (
-                <SpottableComponent
-                  key={item.expsOrd}
+      <ul className={css.showList}>
+        {topInfos &&
+          topInfos.map((item) => {
+            return (
+              <SpottableComponent
+                key={item.expsOrd}
+                className={classNames(
+                  item.thumbnailUrl960 == item.thumbnailUrl
+                    ? css.listItemVertical
+                    : css.listItem
+                )}
+              >
+                <img src={item.thumbnailUrl960} className={css.itemImg} />
+                <div
                   className={classNames(
                     item.thumbnailUrl960 == item.thumbnailUrl
-                      ? css.listItemVertical
-                      : css.listItem
+                      ? css.verticalItem
+                      : css.horizonItem
                   )}
                 >
-                  <img src={item.thumbnailUrl960} className={css.itemImg} />
-                  <div
-                    className={classNames(
-                      item.thumbnailUrl960 == item.thumbnailUrl
-                        ? css.verticalItem
-                        : css.horizonItem
-                    )}
-                  >
-                    {item.showNm}
-                  </div>
-                </SpottableComponent>
-              );
-            })}
-        </ul>
-      </div>
-    </div>
+                  {item.showNm}
+                </div>
+              </SpottableComponent>
+            );
+          })}
+      </ul>
+    </Container>
   );
 };
 

com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.module.less

@@ -1,8 +1,8 @@
 @import "../../../style/CommonStyle.module.less";
 .popularShow {
   padding: 60px 0 0;
-  width: 100%;
-  overflow-x: auto;
+  width: calc(100% - 60px);
+  overflow: hidden;
   margin-left: 60px;
   .subTitle {
     border-left: 6px solid @PRIMARY_COLOR_RED;
@@ -16,7 +16,7 @@
   .showList {
     margin-top: 20px;
     display: flex;
-    overflow: auto;
+    overflow: hidden;
     > li:nth-child(1n) {
       margin-right: 18px;
       border: 4px solid transparent;

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

@@ -5,7 +5,7 @@ import Spotlight from "@enact/spotlight";
 import Spottable from "@enact/spotlight/Spottable";
 import { useDispatch, useSelector } from "react-redux";
 import css from "./SubCategory.module.less";
-import Scroller from "@enact/sandstone/Scroller";
+
 import { getOnSaleInfo } from "../../../features/onSale/onSaleSlice";
 import testimg from "../../../../assets/icon/nor/ic-category-home-nor@3x.png";
 import testimg2 from "../../../../assets/icon/nor/ic-category-gift-nor@3x.png";
@@ -15,6 +15,7 @@ import OnSaleProductCard from "../../OnSalePanel/OnSaleProductCard/OnSaleProduct
 import OnSaleProductsGrid from "../../OnSalePanel/OnSaleProductsGrid/OnSaleProductsGrid";
 import TGrid from "../../../components/TGrid/TGrid";
 import TItemCard from "../../../components/TItemCard/TItemCard";
+import TScroller from "../../../components/TScroller/TScroller";
 
 import { getSubCategory } from "../../../features/main/mainSlice";
 import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
@@ -24,8 +25,10 @@ const Container = SpotlightContainerDecorator(
     leaveFor: { left: "", right: "" },
     enterTo: "last-focused",
   },
-  "div"
+  "section"
 );
+
+const SpottableComponent = Spottable("li");
 const SubCategory = () => {
   const dispatch = useDispatch();
 
@@ -86,30 +89,22 @@ const SubCategory = () => {
         type="home"
       />
 
-      <Scroller
-        direction="horizontal"
-        horizontalScrollbar="hidden"
-        noScrollByWheel={true}
-        scrollMode="translate"
-        className={css.homeScroll}
-      >
-        <TGrid type="home">
-          {subCategoryData &&
-            subCategoryData.slice(0, 9).map((item) => {
-              return (
-                <TItemCard
-                  key={item.rankOrd}
-                  imageSource={item.imgUrl}
-                  imageAlt={item.prdtNm}
-                  productName={item.prdtNm}
-                  priceInfo={item.priceInfo}
-                  accType={true}
-                  offerInfo={item.offerInfo}
-                />
-              );
-            })}
-        </TGrid>
-      </Scroller>
+      <TGrid type="home">
+        {subCategoryData &&
+          subCategoryData.slice(0, 9).map((item) => {
+            return (
+              <TItemCard
+                key={item.rankOrd}
+                imageSource={item.imgUrl}
+                imageAlt={item.prdtNm}
+                productName={item.prdtNm}
+                priceInfo={item.priceInfo}
+                accType={true}
+                offerInfo={item.offerInfo}
+              />
+            );
+          })}
+      </TGrid>
     </Container>
   );
 };