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

- moreBtn관련 작업
2024-02-20 09:44:26 +09:00
parent 3d2f2289a6
commit 48c91c0703
6 changed files with 248 additions and 212 deletions
--- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx
@@ -1,26 +1,16 @@
-import React, {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import React 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 {
-  $L,
-  scaleH,
-  scaleW,
-} from '../../../utils/helperMethods';
+import TScroller from '../../../components/TScroller/TScroller';
+import { $L } 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">
-        {bestSellerDatas && bestSellerDatas.length > 0 && (
-          <VirtualGridList
-            dataSize={bestSellerDatas.length + 1}
-            direction="horizontal"
-            horizontalScrollbar="hidden"
-            itemRenderer={renderItem}
-            itemSize={{
-              minWidth: scaleW(324),
-              minHeight: scaleH(438),
-            }}
-            noScrollByWheel
-            scrollMode="translate"
-            spacing={scaleW(24)}
-            className={css.grid}
-          />
-        )}
-      </TGrid>
+      <TScroller
+        className={css.homeBestSeller}
+        focusableScrollbar={true}
+        direction="horizontal"
+      >
+        {bestSellerDatas &&
+          bestSellerDatas.map((item, index) => (
+            <TItemCard
+              key={item.prdtId}
+              imageAlt={item.prdtId}
+              imageSource={item.imgUrl}
+              priceInfo={item.priceInfo}
+              productName={item.prdtNm}
+            />
+          ))}
+
+        <SpottableComponent className={css.addItem}></SpottableComponent>
+      </TScroller>
    </Container>
  );
 };
--- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.module.less
+++ b/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);
-    box-sizing: border-box;
+    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");
  }
 }
--- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.jsx
@@ -1,8 +1,4 @@
-import React, {
-  useCallback,
-  useEffect,
-  useState,
-} from 'react';
+import React, { useCallback } 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 {
-  $L,
-  scaleH,
-  scaleW,
-} from '../../../utils/helperMethods';
+import TScroller from '../../../components/TScroller/TScroller';
+import { $L } 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 (
-          <PopularShowItem
-            topInfosData={topInfos}
-            itemNum={itemData}
-            {...rest}
-          />
-        );
-      } else {
-        return (
-          <SpottableComponent
-            className={css.addItem}
-            {...rest}
-          ></SpottableComponent>
-        );
-      }
+      return (
+        <PopularShowItem topInfosData={topInfos} itemNum={itemData} {...rest} />
+      );
    },
    [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}>
-        {topInfos && topInfos.length > 0 && (
-          <VirtualGridList
-            dataSize={topInfos.length + 1}
-            direction="horizontal"
-            horizontalScrollbar="hidden"
-            itemRenderer={renderItem}
-            itemSize={{
-              minWidth: scaleW(546),
-              minHeight: scaleH(438),
-            }}
-            noScrollByWheel
-            scrollMode="translate"
-            spacing={scaleW(18)}
-            className={css.grid}
-          />
-        )}
-      </div>
+      <TScroller
+        className={css.showList}
+        focusableScrollbar={true}
+        direction="horizontal"
+      >
+        {topInfos &&
+          topInfos.map((item, index) => (
+            <SpottableComponent
+              className={classNames(
+                item.thumbnailUrl960 == item.thumbnailUrl
+                  ? css.listItemVertical
+                  : css.listItem
+              )}
+              {...rest}
+            >
+              <img src={item.thumbnailUrl960} className={css.itemImg} />
+              <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>
  );
 };
--- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.module.less
+++ b/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 {
-      padding-right: 60px;
+    > div {
+      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 {
-  .size(@w: 198px, @h: 438px);
+.listItem {
+  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");
-  background-size: 66px 66px;
-  background-position: center center;
-  background-repeat: no-repeat;
+  .border-solid(@size:4px,@color:transparent);
+  font-weight: bold;
+  font-family: @baseFontBold;
+  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);
  }
 }
--- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx
+++ b/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 { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
-import Spottable from "@enact/spotlight/Spottable";
+import {
+  SpotlightContainerDecorator,
+} from '@enact/spotlight/SpotlightContainerDecorator';
+import Spottable from '@enact/spotlight/Spottable';

-import { getSubCategory } from "../../../actions/mainActions";
-import TItemCard from "../../../components/TItemCard/TItemCard";
-import { scaleH, scaleW } from "../../../utils/helperMethods";
-import CategoryNav from "../../HomePanel/SubCategory/CategoryNav/CategoryNav";
-import css from "../../HomePanel/SubCategory/SubCategory.module.less";
+import { getSubCategory } from '../../../actions/mainActions';
+import TItemCard from '../../../components/TItemCard/TItemCard';
+import TScroller from '../../../components/TScroller/TScroller';
+import CategoryNav from '../../HomePanel/SubCategory/CategoryNav/CategoryNav';
+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}>
-        {categoryItemInfos && categoryItemInfos.length > 0 && (
-          <VirtualGridList
-            dataSize={categoryItemInfos.length + 1}
-            direction="horizontal"
-            horizontalScrollbar="hidden"
-            itemRenderer={renderItem}
-            itemSize={{
-              minWidth: scaleW(324),
-              minHeight: scaleH(438),
-            }}
-            spacing={scaleW(4)}
-            noScrollByWheel
-            scrollMode="translate"
-            className={css.grid}
-          />
-        )}
-      </div>
+      <TScroller
+        className={css.home}
+        focusableScrollbar={true}
+        direction="horizontal"
+      >
+        {categoryItemInfos &&
+          categoryItemInfos.map((item, index) => (
+            <TItemCard
+              key={item.prdtId}
+              imageAlt={item.prdtId}
+              imageSource={item.imgUrl}
+              priceInfo={item.priceInfo}
+              productName={item.prdtNm}
+            />
+          ))}
+
+        <SpottableComponent className={css.addItem}></SpottableComponent>
+      </TScroller>
    </Container>
  );
 };
--- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.module.less
+++ b/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%;
-}
-
-.grid {
-  height: 458px;
-  overflow: unset;
+  overflow: unset !important;
+  width: 1800px;
+  height: 478px;
  > div {
-    overflow: unset !important;
+    padding: 19px 60px 19px 60px;
+    display: flex;
+    flex-direction: row;
+    overflow-x: auto;
+    overflow-y: unset !important;
+
    > div {
-      > div {
-        margin-right: -200px;
+      flex: 1 1 auto;
+      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");
-  }
 }