[HomePanel]BestSeller VirtualGrid 적용 및 전역 설정되있는 css 변경건.

- bestselleritem생성 - template.module.less 전역설정되어있는 부분 변경.
2024-02-06 10:30:04 +09:00
parent 167ddd193a
commit db6cb4c260
5 changed files with 175 additions and 29 deletions
--- a/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx
@@ -1,15 +1,18 @@
-import React, { useCallback, useEffect, useState, useRef } from "react";
-import { useSelector } from "react-redux";
-import { $L } from "../../../utils/helperMethods";
-import css from "./BestSeller.module.less";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+
 import classNames from "classnames";
+import { useSelector } from "react-redux";

-import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
-import Spotlight from "@enact/spotlight";
+import VirtualGridList from "@enact/sandstone/VirtualList";
+import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
+import Spottable from "@enact/spotlight/Spottable";
+import ri from "@enact/ui/resolution";

-import TGrid from "../../../components/TGrid/TGrid";
-import TItemCard from "../../../components/TItemCard/TItemCard";
 import SectionTitle from "../../../components/SectionTitle/SectionTitle";
+import TGrid from "../../../components/TGrid/TGrid";
+import { $L } from "../../../utils/helperMethods";
+import BestSellerItem from "../BestSellerItem/BestSellerItem";
+import css from "./BestSeller.module.less";

 const Container = SpotlightContainerDecorator(
  { enterTo: "last-focused", leaveFor: { left: "", right: "" } },
@@ -20,23 +23,41 @@ const BestSeller = () => {
  const bestSellerDatas = useSelector(
    (state) => state.product.bestSellerData.bestSeller
  );
+  const renderItem = useCallback(
+    ({ index, ...rest }) => {
+      const itemData = bestSellerDatas[index];
+      return (
+        <BestSellerItem
+          bestSellerData={bestSellerDatas}
+          itemData={itemData}
+          isBestSeller
+          {...rest}
+        />
+      );
+    },
+    [bestSellerDatas]
+  );
+
  return (
    <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
-            />
-          ))}
+        {bestSellerDatas && bestSellerDatas.length > 0 && (
+          <VirtualGridList
+            dataSize={bestSellerDatas.length}
+            direction="horizontal"
+            horizontalScrollbar="hidden"
+            itemRenderer={renderItem}
+            itemSize={{
+              minWidth: ri.scale(324 * 2),
+              minHeight: ri.scale(438 * 2),
+            }}
+            noScrollByWheel
+            scrollMode="translate"
+            spacing={ri.scale(18 * 2)}
+          />
+        )}
      </TGrid>
    </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
@@ -8,5 +8,6 @@
    justify-content: unset;
    align-items: unset;
    flex-direction: unset;
+    height: 438px;
  }
 }
--- a/com.twin.app.shoptime/src/views/HomePanel/BestSellerItem/BestSellerItem.jsx
+++ b/com.twin.app.shoptime/src/views/HomePanel/BestSellerItem/BestSellerItem.jsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+import TItemCard from "../../../components/TItemCard/TItemCard";
+import css from "../BestSellerItem/BestSellerItem.module.less";
+
+export default function ({ bestSellerData, itemData, ...rest }) {
+  return (
+    <TItemCard
+      key={itemData.rankOrd}
+      imageSource={itemData.imgUrl}
+      imageAlt={itemData.prdtNm}
+      productName={itemData.prdtNm}
+      priceInfo={itemData.priceInfo}
+      rank={itemData.rankOrd}
+      isBestSeller
+      {...rest}
+    />
+  );
+}
--- a/com.twin.app.shoptime/src/views/HomePanel/BestSellerItem/BestSellerItem.module.less
+++ b/com.twin.app.shoptime/src/views/HomePanel/BestSellerItem/BestSellerItem.module.less
@@ -0,0 +1,107 @@
+@import "../../../style/CommonStyle.module.less";
+@import "../../../style/utils.module.less";
+
+/* vertical type (Thumbnail) */
+.vertical {
+  /* normal */
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  .size(@w: 324px, @h: 438px);
+  padding: 18px;
+  border-radius: 12px;
+  border: solid 1px @COLOR_GRAY02;
+  background-color: @COLOR_WHITE;
+
+  // top contents (image contetns)
+  > div:nth-child(1) {
+    position: relative;
+    .size(@w: 288px, @h: 288px);
+    margin-bottom: 12px;
+    color: @COLOR_WHITE;
+
+    img {
+      .size(@w: 288px, @h: 288px);
+      object-fit: contain;
+      border: solid 1px #f0f0f0;
+    }
+
+    // discount rate
+    span {
+      .position(@position: absolute, @right: 12px, @bottom: 12px);
+      .size(@w: 60px, @h: 60px);
+      border-radius: 60px;
+      background-color: @PRIMARY_COLOR_RED;
+      .font(@fontFamily: "ArialBold", @fontSize:26px);
+      text-align: center;
+      line-height: 60px;
+    }
+
+    // sold out
+    > div:nth-child(3) {
+      .position(@position: absolute, @top: 0, @right: 0);
+      .flex();
+      .size(@w: 288px, @h: 288px);
+      background-color: rgba(26, 26, 26, 0.6);
+      .font(@fontFamily: @baseFontBold, @fontSize: 36px);
+    }
+  }
+
+  // bottom contents
+  > div:nth-child(2) {
+    .flex(@direction: column, @alignCenter: flex-start);
+    flex-grow: 1;
+
+    h3 {
+      margin-bottom: 6px;
+      .font(@fontFamily: @baseFontBold, @fontSize: 24px);
+      color: @COLOR_GRAY06;
+      .elip(@clamp:2);
+      word-break: break-all;
+      overflow: hidden;
+    }
+
+    p {
+      .flex(@justifyCenter: flex-start);
+      .font(@fontFamily: @baseFontBold, @fontSize: 30px);
+      color: @PRIMARY_COLOR_RED;
+      letter-spacing: -1px;
+      span {
+        margin-left: 5px;
+        .font(@fontFamily: @baseFont, @fontSize: 18px);
+        color: @COLOR_GRAY04;
+        text-decoration: line-through;
+      }
+    }
+  }
+
+  // best seller
+  > div:nth-child(3) {
+    .position(@position: absolute, @top: -1px, @left: 18px);
+    .flex(@direction: column, @justifyCenter: space-between);
+    .size(@w: 79px, @h: 102px);
+    padding: 12px 12px 18px;
+    background-color: @COLOR_GRAY07;
+    .font(@fontFamily: @robotoFontBold, @fontSize: 24px);
+    color: @COLOR_WHITE;
+    border-bottom-left-radius: 79px;
+    border-bottom-right-radius: 79px;
+
+    span {
+      .font(@fontFamily: @arialFontBold, @fontSize: 42px);
+      font-size: 42px;
+    }
+  }
+
+  /* focused */
+  &:focus {
+    &::after {
+      .focused(@boxShadow:50px, @borderRadius:12px);
+    }
+
+    // best seller
+    div:nth-child(3) {
+      background-color: @PRIMARY_COLOR_RED;
+    }
+  }
+}
--- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/Template.module.less
+++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/Template.module.less
@@ -8,6 +8,13 @@
 .homeTemplateBox {
  margin: 24px 24px 50px;
  display: flex;
+  img,
+  video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 12px;
+  }
 }
 .leftBannerBox {
  width: 744px;
@@ -157,14 +164,6 @@
  display: flex;
 }

-img,
-video {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 12px;
-}
-
 .mainBox {
  display: flex;

@@ -182,7 +181,6 @@ video {
      border: 4px solid @PRIMARY_COLOR_RED;
      box-sizing: border-box;
      .focusDropShadow();
-      border-radius: 12px;
    }
    img {
      width: 100%;