[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}>
+    <Container className={css.bestSellerWrap}>
-      <div className={css.bestSellerWrap}>
+      <SectionTitle title={$L(`BEST SELLER`)} />
-        <SectionTitle title={$L(`BEST SELLER`)} />
+
-        <Scroller
+      <TGrid type="homeBestSeller">
-          direction="horizontal"
+        {bestSellerDatas &&
-          horizontalScrollbar="hidden"
+          bestSellerDatas.map((bestSeller) => (
-          noScrollByWheel={true}
+            <TItemCard
-          scrollMode="translate"
+              key={bestSeller.rankOrd}
-          className={css.homeScroll}
+              imageSource={bestSeller.imgUrl}
-        >
+              imageAlt={bestSeller.prdtNm}
-          <TGrid type="homeBestSeller">
+              productName={bestSeller.prdtNm}
-            {bestSellerDatas &&
+              priceInfo={bestSeller.priceInfo}
-              bestSellerDatas.map((bestSeller) => (
+              rank={bestSeller.rankOrd}
-                <TItemCard
+              isBestSeller
-                  key={bestSeller.rankOrd}
+              accType
-                  imageSource={bestSeller.imgUrl}
+              offerInfo={bestSeller.offerInfo}
-                  imageAlt={bestSeller.prdtNm}
+            />
-                  productName={bestSeller.prdtNm}
+          ))}
-                  priceInfo={bestSeller.priceInfo}
+      </TGrid>
-                  rank={bestSeller.rankOrd}
-                  isBestSeller
-                  accType
-                  offerInfo={bestSeller.offerInfo}
-                />
-              ))}
-          </TGrid>
-        </Scroller>
-      </div>
     </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" },
+  { enterTo: "last-focused" },
-  "div"
+  "section"
 );
 
 const SpottableComponent = Spottable("li");
@@ -25,38 +25,36 @@ const PopularShow = (...rest) => {
     dispatch(getTop20Show());
   }, []);
   return (
-    <div {...rest} className={css.container}>
+    <Container className={css.popularShow}>
-      <div className={css.popularShow}>
+      <h2 className={css.subTitle}>{$L("POPULAR SHOW")}</h2>
-        <h2 className={css.subTitle}>{$L("POPULAR SHOW")}</h2>
 
-        <ul className={css.showList}>
+      <ul className={css.showList}>
-          {topInfos &&
+        {topInfos &&
-            topInfos.map((item) => {
+          topInfos.map((item) => {
-              return (
+            return (
-                <SpottableComponent
+              <SpottableComponent
-                  key={item.expsOrd}
+                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.verticalItem
-                      : css.listItem
+                      : css.horizonItem
                   )}
                 >
-                  <img src={item.thumbnailUrl960} className={css.itemImg} />
+                  {item.showNm}
-                  <div
+                </div>
-                    className={classNames(
+              </SpottableComponent>
-                      item.thumbnailUrl960 == item.thumbnailUrl
+            );
-                        ? css.verticalItem
+          })}
-                        : css.horizonItem
+      </ul>
-                    )}
+    </Container>
-                  >
-                    {item.showNm}
-                  </div>
-                </SpottableComponent>
-              );
-            })}
-        </ul>
-      </div>
-    </div>
   );
 };
 

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%;
+  width: calc(100% - 60px);
-  overflow-x: auto;
+  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
+      <TGrid type="home">
-        direction="horizontal"
+        {subCategoryData &&
-        horizontalScrollbar="hidden"
+          subCategoryData.slice(0, 9).map((item) => {
-        noScrollByWheel={true}
+            return (
-        scrollMode="translate"
+              <TItemCard
-        className={css.homeScroll}
+                key={item.rankOrd}
-      >
+                imageSource={item.imgUrl}
-        <TGrid type="home">
+                imageAlt={item.prdtNm}
-          {subCategoryData &&
+                productName={item.prdtNm}
-            subCategoryData.slice(0, 9).map((item) => {
+                priceInfo={item.priceInfo}
-              return (
+                accType={true}
-                <TItemCard
+                offerInfo={item.offerInfo}
-                  key={item.rankOrd}
+              />
-                  imageSource={item.imgUrl}
+            );
-                  imageAlt={item.prdtNm}
+          })}
-                  productName={item.prdtNm}
+      </TGrid>
-                  priceInfo={item.priceInfo}
-                  accType={true}
-                  offerInfo={item.offerInfo}
-                />
-              );
-            })}
-        </TGrid>
-      </Scroller>
     </Container>
   );
 };