[trendingNow]전달을 위한 용도

com.twin.app.shoptime/src/views/TrendingNowPanel/TrendingNowPanel.jsx

@@ -1,13 +1,19 @@
-import React from "react";
+import React, { useCallback, useEffect, useState } from "react";
 
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 
+import Spotlight from "@enact/spotlight";
 import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
 
+import { pushPanel, updatePanel } from "../../actions/panelActions";
 import SectionTitle from "../../components/SectionTitle/SectionTitle";
-import TGrid from "../../components/TGrid/TGrid";
+import TBody from "../../components/TBody/TBody";
+import TButton, { TYPES } from "../../components/TButton/TButton";
 import TItemCard from "../../components/TItemCard/TItemCard";
 import TPanel from "../../components/TPanel/TPanel";
+import useScrollReset from "../../hooks/useScrollReset";
+import useScrollTo from "../../hooks/useScrollTo";
+import { panel_names } from "../../utils/Config";
 import { $L } from "../../utils/helperMethods";
 import css from "./TrendingNowPanel.module.less";
 
@@ -15,31 +21,91 @@ const Container = SpotlightContainerDecorator(
   { enterTo: "last-focused" },
   "div"
 );
-
-export default function TrendingNowPanel() {
+const STRING_CONF = {
+  POPULAR_SHOW: $L("POPULAR SHOW"),
+  BEST_SELLER: $L("BEST SELLER"),
+};
+export default function TrendingNowPanel({ panelInfo }) {
+  const dispatch = useDispatch();
   const bestSellerDatas = useSelector(
     (state) => state.product.bestSellerData.bestSeller
   );
+  const topInfos = useSelector((state) => state.main.top20ShowData.topInfos);
+  const { getScrollTo, scrollTop, scrollLeft } = useScrollTo();
+  const { handleScrollReset, handleStopScrolling } = useScrollReset(
+    scrollLeft,
+    true
+  );
+  const handleCardClick = useCallback((item) => {
+    dispatch(
+      pushPanel(
+        {
+          name: panel_names.DETAIL_PANEL,
+          panelInfo: { patnrId: item.patnrId, prdtId: item.prdtId },
+        },
+        [dispatch, item]
+      )
+    );
+  });
+  const handleTopButtonClick = useCallback(() => {
+    scrollTop();
+  }, []);
+  useEffect(() => {
+    if (panelInfo.currentSpot) {
+      Spotlight.focus(panelInfo.currentSpot);
+    }
+    return () => {
+      const c = Spotlight.getCurrent();
+      let targetSpotlightId = null;
+      if (c) {
+        targetSpotlightId = c.getAttribute("data-spotlight-id");
+      }
+      dispatch(
+        updatePanel({
+          name: panel_names.TRENDING_NOW_PANEL,
+          panelInfo: {
+            currentSpot: targetSpotlightId,
+          },
+        })
+      );
+    };
+  }, []);
 
+  const [isVideoErrorOccurred, setIsVideoErrorOccurred] = useState(false);
   return (
     <TPanel>
-      <Container className={css.container}>
-        <SectionTitle title={$L(`BEST SELLER`)} />
-        <TGrid>
-          {bestSellerDatas &&
-            bestSellerDatas.map((bestSeller) => (
-              <TItemCard
-                key={bestSeller.rankOrd}
-                imageSource={bestSeller.imgUrl}
-                imageAlt={bestSeller.prdtNm}
-                productName={bestSeller.prdtNm}
-                priceInfo={bestSeller.priceInfo}
-                rank={bestSeller.rankOrd}
-                isBestSeller
-              />
-            ))}
-        </TGrid>
-      </Container>
+      <TBody className={css.trendingNow} cbScrollTo={getScrollTo}>
+        <Container className={css.popularContainer}>
+          <SectionTitle title={STRING_CONF.POPULAR_SHOW} />
+        </Container>
+        <Container className={css.bestContainer}>
+          <SectionTitle title={STRING_CONF.BEST_SELLER} />
+          <div className={css.itemList}>
+            {bestSellerDatas &&
+              bestSellerDatas.map((item, index) => (
+                <TItemCard
+                  key={item.prdtId}
+                  imageAlt={item.prdtId}
+                  imageSource={item.imgUrl}
+                  priceInfo={item.priceInfo}
+                  productName={item.prdtNm}
+                  isBestSeller={true}
+                  rank={item.rankOrd}
+                  onFocus={index === 0 ? handleScrollReset : null}
+                  onBlur={handleStopScrolling}
+                  onClick={() => handleCardClick(item)}
+                  offerInfo={item.offerInfo}
+                  spotlightId={"trending-best-item" + item.prdtId}
+                />
+              ))}
+          </div>
+        </Container>
+        <TButton
+          onClick={handleTopButtonClick}
+          size={null}
+          type={TYPES.topButton}
+        />
+      </TBody>
     </TPanel>
   );
 }

com.twin.app.shoptime/src/views/TrendingNowPanel/TrendingNowPanel.module.less

@@ -1,10 +1,32 @@
 @import "../../style/CommonStyle.module.less";
 @import "../../style/utils.module.less";
 
-.container {
-  padding: 60px;
-  > ul {
-    margin-top: 35px;
-    flex-wrap: wrap;
+.trendingNow {
+  position: relative;
+  height: 100%;
+  .popularContainer {
+    width: 100%;
+    padding: 64px 60px 60px 60px;
+    height: 762px;
+    background-image: url("../../../assets/images/img-topdeals-bg@3x.png");
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+
+  .bestContainer {
+    width: 100%;
+    padding: 60px;
+
+    .itemList {
+      margin-top: 30px;
+      display: flex;
+      flex-wrap: wrap;
+      > div {
+        margin: 0 15px 15px 0;
+      }
+      > div:nth-child(5n + 5) {
+        margin: 0;
+      }
+    }
   }
 }