[HomePanel] 홈패널 more Btn관련작업

- moreBtn관련 작업

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

@@ -1,26 +1,16 @@
-import React, {
+import React from 'react';
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
 
 import { useSelector } from 'react-redux';
 
-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';
 import TItemCard from '../../../components/TItemCard/TItemCard';
-import {
+import TScroller from '../../../components/TScroller/TScroller';
-  $L,
+import { $L } from '../../../utils/helperMethods';
-  scaleH,
-  scaleW,
-} from '../../../utils/helperMethods';
 import css from './BestSeller.module.less';
 
 const SpottableComponent = Spottable("div");
@@ -33,57 +23,29 @@ const BestSeller = () => {
   const bestSellerDatas = useSelector(
     (state) => state.product.bestSellerData.bestSeller
   );
-  const renderItem = useCallback(
-    ({ index, ...rest }) => {
-      const itemData = bestSellerDatas[index];
-      if (index !== bestSellerDatas.length) {
-        return (
-          <TItemCard
-            key={itemData.rankOrd}
-            imageSource={itemData.imgUrl}
-            imageAlt={itemData.prdtNm}
-            productName={itemData.prdtNm}
-            priceInfo={itemData.priceInfo}
-            rank={itemData.rankOrd}
-            type="vertical"
-            isBestSeller
-            {...rest}
-          />
-        );
-      } else {
-        return (
-          <SpottableComponent
-            className={css.addItem}
-            {...rest}
-          ></SpottableComponent>
-        );
-      }
-    },
-    [bestSellerDatas]
-  );
 
   return (
     <Container className={css.bestSellerWrap}>
       <SectionTitle title={$L(`BEST SELLER`)} />
 
-      <TGrid type="homeBestSeller">
+      <TScroller
-        {bestSellerDatas && bestSellerDatas.length > 0 && (
+        className={css.homeBestSeller}
-          <VirtualGridList
+        focusableScrollbar={true}
-            dataSize={bestSellerDatas.length + 1}
+        direction="horizontal"
-            direction="horizontal"
+      >
-            horizontalScrollbar="hidden"
+        {bestSellerDatas &&
-            itemRenderer={renderItem}
+          bestSellerDatas.map((item, index) => (
-            itemSize={{
+            <TItemCard
-              minWidth: scaleW(324),
+              key={item.prdtId}
-              minHeight: scaleH(438),
+              imageAlt={item.prdtId}
-            }}
+              imageSource={item.imgUrl}
-            noScrollByWheel
+              priceInfo={item.priceInfo}
-            scrollMode="translate"
+              productName={item.prdtNm}
-            spacing={scaleW(24)}
+            />
-            className={css.grid}
+          ))}
-          />
+
-        )}
+        <SpottableComponent className={css.addItem}></SpottableComponent>
-      </TGrid>
+      </TScroller>
     </Container>
   );
 };

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

@@ -2,15 +2,12 @@
 @import "../../../style/utils.module.less";
 
 .bestSellerWrap {
-  padding: 60px 0 0px 60px;
+  margin-top: 30px;
   > h2 {
-    margin: 0px 0 20px;
+    margin-left: 60px;
     font-size: 42px;
   }
   > ul {
-    justify-content: unset;
-    align-items: unset;
-    flex-direction: unset;
     height: 438px;
   }
   .grid {
@@ -22,8 +19,21 @@
       padding-right: 60px;
     }
   }
+  .homeBestSeller {
+    > div {
+      padding: 20px 60px 30px 60px;
+      display: flex;
+      > div {
+        margin-right: 18px;
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+  }
 }
 .addItem {
+  flex: none;
   .size(@w:198px,@h:438px);
   background-color: @COLOR_WHITE;
   border: 1px solid #e4e4e4;
@@ -32,9 +42,11 @@
   background-size: 66px 66px;
   background-position: center center;
   background-repeat: no-repeat;
+  margin-right: 60px;
   &:focus {
-    .focused(@boxShadow: 22px, @borderRadius:12px);
+    border: 4px solid @PRIMARY_COLOR_RED;
-    box-sizing: border-box;
+    box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
+    border-radius: 12px;
     background-image: url("../../../../assets/images/btn/ic-more-sel.svg");
   }
 }

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

@@ -1,8 +1,4 @@
-import React, {
+import React, { useCallback } from 'react';
-  useCallback,
-  useEffect,
-  useState,
-} from 'react';
 
 import classNames from 'classnames';
 import {
@@ -10,18 +6,14 @@ import {
   useSelector,
 } from 'react-redux';
 
-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 {
+import TScroller from '../../../components/TScroller/TScroller';
-  $L,
+import { $L } from '../../../utils/helperMethods';
-  scaleH,
-  scaleW,
-} from '../../../utils/helperMethods';
 import css from '../PopularShow/PopularShow.module.less';
 import PopularShowItem from './PopularShowItem/PopularShowItem';
 
@@ -38,22 +30,9 @@ const PopularShow = ({ ...rest }) => {
   const renderItem = useCallback(
     ({ index, ...rest }) => {
       const itemData = topInfos[index];
-      if (index !== topInfos.length) {
+      return (
-        return (
+        <PopularShowItem topInfosData={topInfos} itemNum={itemData} {...rest} />
-          <PopularShowItem
+      );
-            topInfosData={topInfos}
-            itemNum={itemData}
-            {...rest}
-          />
-        );
-      } else {
-        return (
-          <SpottableComponent
-            className={css.addItem}
-            {...rest}
-          ></SpottableComponent>
-        );
-      }
     },
     [topInfos]
   );
@@ -61,24 +40,38 @@ const PopularShow = ({ ...rest }) => {
   return (
     <Container className={css.popularShow}>
       <SectionTitle className={css.subTitle} title={$L(`POPULAR SHOW`)} />
-      <div className={css.showList}>
+      <TScroller
-        {topInfos && topInfos.length > 0 && (
+        className={css.showList}
-          <VirtualGridList
+        focusableScrollbar={true}
-            dataSize={topInfos.length + 1}
+        direction="horizontal"
-            direction="horizontal"
+      >
-            horizontalScrollbar="hidden"
+        {topInfos &&
-            itemRenderer={renderItem}
+          topInfos.map((item, index) => (
-            itemSize={{
+            <SpottableComponent
-              minWidth: scaleW(546),
+              className={classNames(
-              minHeight: scaleH(438),
+                item.thumbnailUrl960 == item.thumbnailUrl
-            }}
+                  ? css.listItemVertical
-            noScrollByWheel
+                  : css.listItem
-            scrollMode="translate"
+              )}
-            spacing={scaleW(18)}
+              {...rest}
-            className={css.grid}
+            >
-          />
+              <img src={item.thumbnailUrl960} className={css.itemImg} />
-        )}
+              <div
-      </div>
+                className={classNames(
+                  item.thumbnailUrl960 == item.thumbnailUrl
+                    ? css.verticalItem
+                    : css.horizonItem
+                )}
+              >
+                <span className={css.logo}>
+                  <img src={item.patncLogoPath} className={css.logoPath} />
+                </span>
+                <span className={css.showNm}>{item.showNm}</span>
+              </div>
+            </SpottableComponent>
+          ))}
+        <SpottableComponent className={css.addItem}></SpottableComponent>
+      </TScroller>
     </Container>
   );
 };

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

@@ -1,8 +1,10 @@
 @import "../../../style/CommonStyle.module.less";
 @import "../../../style/utils.module.less";
 .popularShow {
-  padding: 60px 0px 0px 60px;
+  > h2 {
-
+    margin: 60px 0 0px 60px;
+    font-size: 42px;
+  }
   .grid {
     height: 438px;
     overflow: unset;
@@ -11,26 +13,117 @@
     }
   }
   .showList {
-    padding-top: 20px;
     display: flex;
-    &:last-child {
+    > div {
-      padding-right: 60px;
+      padding: 20px 60px 30px 60px;
+      display: flex;
+      .addItem {
+        flex: none;
+        .size(@w: 198px, @h: 438px);
+        background-color: @COLOR_WHITE;
+        border: 1px solid #e4e4e4;
+        border-radius: 12px;
+        background-image: url("../../../../assets/images/btn/ic-more-nor.svg");
+        background-size: 66px 66px;
+        background-position: center center;
+        background-repeat: no-repeat;
+        &:focus {
+          box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
+          .border-solid(@size:4px, @color:@PRIMARY_COLOR_RED);
+          border-radius: 12px;
+          background-image: url("../../../../assets/images/btn/ic-more-sel.svg");
+        }
+      }
     }
   }
 }
 
-.addItem {
+.listItem {
-  .size(@w: 198px, @h: 438px);
+  position: relative;
+  .size(@w:546px,@h:438px);
+  padding: 14px;
   background-color: @COLOR_WHITE;
-  border: 1px solid #e4e4e4;
   border-radius: 12px;
-  background-image: url("../../../../assets/images/btn/ic-more-nor.svg");
+  .border-solid(@size:4px,@color:transparent);
-  background-size: 66px 66px;
+  font-weight: bold;
-  background-position: center center;
+  font-family: @baseFontBold;
-  background-repeat: no-repeat;
+  margin-right: 18px;
+
   &:focus {
-    .border-solid(@size:4px, @color:@PRIMARY_COLOR_RED);
+    border: 4px solid @PRIMARY_COLOR_RED;
+    box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
     border-radius: 12px;
-    background-image: url("../../../../assets/images/btn/ic-more-sel.svg");
+  }
+
+  > img {
+    .size(@w:510px,@h:288px);
+    object-fit: contain;
+  }
+  .horizonItem {
+    .size(@w:510px,@h:61px);
+    margin-top: 38px;
+    color: #333;
+    font-size: 24px;
+    .elip(@clamp:2);
+    display: flex;
+  }
+  .logo {
+    display: inline-block;
+    .size(@w:60px,@h:60px);
+    margin-right: 12px;
+    .logoPath {
+      width: 100%;
+      height: auto;
+    }
+  }
+  .showNm {
+    display: inline-block;
+    color: #333;
+    font-size: 24px;
+    .elip(@clamp:2);
+    .size(@w:438px,@h:61px);
+  }
+}
+.listItemVertical {
+  display: flex;
+  .size(@w:546px,@h:438px);
+  padding: 14px;
+  background-color: @COLOR_WHITE;
+  border-radius: 12px;
+  margin-right: 18px;
+  .border-solid(@size:4px,@color:transparent);
+  font-weight: bold;
+  font-family: @baseFontBold;
+  &:focus {
+    border: 4px solid @PRIMARY_COLOR_RED;
+    box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
+    border-radius: 12px;
+  }
+  > img {
+    .size(@w:228px,@h:402px);
+    object-fit: contain;
+  }
+  .verticalItem {
+    margin-left: 11px;
+    color: #333;
+    font-size: 24px;
+    .size(@w:270px,@h:402px);
+    .elip(@clamp:12);
+  }
+  .logo {
+    display: block;
+    .size(@w:60px,@h:60px);
+    margin-right: 12px;
+    .logoPath {
+      width: 100%;
+      height: auto;
+    }
+  }
+  .showNm {
+    margin-left: 11px;
+    color: #333;
+    font-size: 24px;
+    .size(@w:270px,@h:402px);
+    .elip(@clamp:12);
   }
 }

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

@@ -1,16 +1,23 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, {
+  useEffect,
+  useState,
+} from 'react';
 
-import { useDispatch, useSelector } from "react-redux";
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';
 
-import VirtualGridList from "@enact/sandstone/VirtualList";
+import {
-import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
+  SpotlightContainerDecorator,
-import Spottable from "@enact/spotlight/Spottable";
+} from '@enact/spotlight/SpotlightContainerDecorator';
+import Spottable from '@enact/spotlight/Spottable';
 
-import { getSubCategory } from "../../../actions/mainActions";
+import { getSubCategory } from '../../../actions/mainActions';
-import TItemCard from "../../../components/TItemCard/TItemCard";
+import TItemCard from '../../../components/TItemCard/TItemCard';
-import { scaleH, scaleW } from "../../../utils/helperMethods";
+import TScroller from '../../../components/TScroller/TScroller';
-import CategoryNav from "../../HomePanel/SubCategory/CategoryNav/CategoryNav";
+import CategoryNav from '../../HomePanel/SubCategory/CategoryNav/CategoryNav';
-import css from "../../HomePanel/SubCategory/SubCategory.module.less";
+import css from '../../HomePanel/SubCategory/SubCategory.module.less';
 
 const SpottableComponent = Spottable("div");
 const Container = SpotlightContainerDecorator(
@@ -43,7 +50,6 @@ const SubCategory = () => {
     if (categoryInfos && !currentLgCatCd) {
       const initialLgCatCd = categoryInfos[0].lgCatCd;
       setCurrentLgCatCd(initialLgCatCd);
-      console.log("###ttt", currentLgCatCd);
     }
   }, [categoryInfos]);
 
@@ -64,32 +70,6 @@ const SubCategory = () => {
     }
   }, [currentLgCatCd, dispatch]);
 
-  const renderItem = useCallback(
-    ({ index, ...rest }) => {
-      const itemData = categoryItemInfos[index];
-      if (index !== categoryItemInfos.length) {
-        return (
-          <TItemCard
-            key={itemData.prdtId}
-            imageAlt={itemData.prdtId}
-            imageSource={itemData.imgUrl}
-            priceInfo={itemData.priceInfo}
-            productName={itemData.prdtNm}
-            {...rest}
-          />
-        );
-      } else {
-        return (
-          <SpottableComponent
-            className={css.addItem}
-            {...rest}
-          ></SpottableComponent>
-        );
-      }
-    },
-    [categoryItemInfos]
-  );
-
   return (
     <Container>
       <CategoryNav
@@ -98,24 +78,24 @@ const SubCategory = () => {
         onCategoryNavClick={handleCategoryNav}
         type="home"
       />
-      <div className={css.home}>
+      <TScroller
-        {categoryItemInfos && categoryItemInfos.length > 0 && (
+        className={css.home}
-          <VirtualGridList
+        focusableScrollbar={true}
-            dataSize={categoryItemInfos.length + 1}
+        direction="horizontal"
-            direction="horizontal"
+      >
-            horizontalScrollbar="hidden"
+        {categoryItemInfos &&
-            itemRenderer={renderItem}
+          categoryItemInfos.map((item, index) => (
-            itemSize={{
+            <TItemCard
-              minWidth: scaleW(324),
+              key={item.prdtId}
-              minHeight: scaleH(438),
+              imageAlt={item.prdtId}
-            }}
+              imageSource={item.imgUrl}
-            spacing={scaleW(4)}
+              priceInfo={item.priceInfo}
-            noScrollByWheel
+              productName={item.prdtNm}
-            scrollMode="translate"
+            />
-            className={css.grid}
+          ))}
-          />
+
-        )}
+        <SpottableComponent className={css.addItem}></SpottableComponent>
-      </div>
+      </TScroller>
     </Container>
   );
 };

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

@@ -2,43 +2,39 @@
 @import "../../../style/utils.module.less";
 
 .home {
-  padding: 20px 0px 0 60px;
-  justify-content: unset;
-  align-items: unset;
-  flex-direction: unset;
   background-color: @BG_COLOR_02;
   border: 1px solid #dadada;
-  width: 100%;
+  overflow: unset !important;
-}
+  width: 1800px;
-
+  height: 478px;
-.grid {
-  height: 458px;
-  overflow: unset;
   > div {
-    overflow: unset !important;
+    padding: 19px 60px 19px 60px;
+    display: flex;
+    flex-direction: row;
+    overflow-x: auto;
+    overflow-y: unset !important;
+
     > div {
-      > div {
+      flex: 1 1 auto;
-        margin-right: -200px;
+      margin-right: 18px;
+      &.addItem {
+        flex: none;
+        .size(@w: 198px, @h: 438px);
+        background-color: @COLOR_WHITE;
+        .border-solid(@size:1px, @color:#e4e4e4);
+        border-radius: 12px;
+        background-image: url("../../../../assets/images/btn/ic-more-nor.svg");
+        background-size: 66px 66px;
+        background-position: center center;
+        background-repeat: no-repeat;
+
+        &:focus {
+          border: 4px solid @PRIMARY_COLOR_RED;
+          box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
+          border-radius: 12px;
+          background-image: url("../../../../assets/images/btn/ic-more-sel.svg");
+        }
       }
     }
   }
-  &:last-child {
-    padding-right: 31px;
-  }
-}
-
-.addItem {
-  .size(@w: 198px, @h: 438px);
-
-  background-color: @COLOR_WHITE;
-  .border-solid(@size:1px, @color:#e4e4e4);
-  border-radius: 12px;
-  background-image: url("../../../../assets/images/btn/ic-more-nor.svg");
-  background-size: 66px 66px;
-  background-position: center center;
-  background-repeat: no-repeat;
-  &:focus {
-    .focused(@boxShadow: 22px, @borderRadius: 12px);
-    background-image: url("../../../../assets/images/btn/ic-more-sel.svg");
-  }
 }