[OnSalePanel] TopButton 반영

Detail Notes :

1. TopButton component 반영

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

@@ -1,14 +1,23 @@
-import React, { useEffect, useState } from "react";
+import React, {
+  useEffect,
+  useState,
+} from 'react';
 
-import { useDispatch, useSelector } from "react-redux";
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';
 
-import { getOnSaleInfo } from "../../actions/onSaleActions";
-import TBody from "../../components/TBody/TBody";
-import TItemCard from "../../components/TItemCard/TItemCard";
-import TPanel from "../../components/TPanel/TPanel";
-import CategoryNav from "../OnSalePanel/CategoryNav/CategoryNav";
-import OnSaleProductsGrid from "../OnSalePanel/OnSaleProductsGrid/OnSaleProductsGrid";
-import css from "./OnSalePanel.module.less";
+import { getOnSaleInfo } from '../../actions/onSaleActions';
+import TBody from '../../components/TBody/TBody';
+import TItemCard from '../../components/TItemCard/TItemCard';
+import TopButton from '../../components/TopButton/TopButton';
+import TPanel from '../../components/TPanel/TPanel';
+import { SpotlightIds } from '../../utils/SpotlightIds';
+import CategoryNav from '../OnSalePanel/CategoryNav/CategoryNav';
+import OnSaleProductsGrid
+  from '../OnSalePanel/OnSaleProductsGrid/OnSaleProductsGrid';
+import css from './OnSalePanel.module.less';
 
 export default function OnSalePanel() {
   const dispatch = useDispatch();
@@ -20,7 +29,9 @@ export default function OnSalePanel() {
 
   const [currentLgCatCd, setCurrentLgCatCd] = useState();
 
-  const handleCategoryNav = (lgCatCd) => {
+  const targetId = saleInfos[0].saleProductInfos[0].prdtId;
+
+  const handleCategoryNavClick = (lgCatCd) => {
     if (currentLgCatCd === lgCatCd) {
       return;
     }
@@ -48,28 +59,32 @@ export default function OnSalePanel() {
       <CategoryNav
         categoryInfos={categoryInfos}
         currentLgCatCd={currentLgCatCd}
-        onCategoryNavClick={handleCategoryNav}
+        onCategoryNavClick={handleCategoryNavClick}
       />
       <TBody className={css.tBody}>
         {saleInfos &&
           saleInfos.map(({ saleNm, saleProductInfos }) => {
             return (
               <OnSaleProductsGrid key={saleNm} sectionTitle={saleNm}>
-                {saleProductInfos.map((saleProduct) => {
-                  return (
-                    <TItemCard
-                      key={saleProduct.prdtId}
-                      imageAlt={saleProduct.prdtNm}
-                      imageSource={saleProduct.imgUrl}
-                      priceInfo={saleProduct.priceInfo}
-                      productId={saleProduct.prdtId}
-                      productName={saleProduct.prdtNm}
-                    />
-                  );
-                })}
+                {saleProductInfos.map(
+                  ({ imgUrl, prdtId, prdtNm, priceInfo }) => {
+                    return (
+                      <TItemCard
+                        key={prdtId}
+                        imageAlt={prdtNm}
+                        imageSource={imgUrl}
+                        priceInfo={priceInfo}
+                        productId={prdtId}
+                        productName={prdtNm}
+                      />
+                    );
+                  }
+                )}
               </OnSaleProductsGrid>
             );
           })}
+
+        <TopButton targetId={SpotlightIds.TITEM_CARD + targetId} />
       </TBody>
     </TPanel>
   );