[HomePanel] 링크처리건.

- Subcategory,popularshow,homeonsaleitem,bestseller 링크 처리건.

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

@@ -1,15 +1,17 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 
 import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
 import Spottable from "@enact/spotlight/Spottable";
 
+import { pushPanel } from "../../../actions/panelActions";
 import SectionTitle from "../../../components/SectionTitle/SectionTitle";
 import TItemCard from "../../../components/TItemCard/TItemCard";
 import TScroller from "../../../components/TScroller/TScroller";
 import useScrollReset from "../../../hooks/useScrollReset";
 import useScrollTo from "../../../hooks/useScrollTo";
+import { panel_names } from "../../../utils/Config";
 import { $L } from "../../../utils/helperMethods";
 import css from "./BestSeller.module.less";
 
@@ -20,6 +22,7 @@ const Container = SpotlightContainerDecorator(
 );
 
 const BestSeller = () => {
+  const dispatch = useDispatch();
   const bestSellerDatas = useSelector(
     (state) => state.product.bestSellerData.bestSeller
   );
@@ -32,6 +35,27 @@ const BestSeller = () => {
   useEffect(() => {
     setDrawChk(true);
   }, [bestSellerDatas]);
+  const handleCardClick = useCallback((item) => {
+    dispatch(
+      pushPanel(
+        {
+          name: panel_names.DETAIL_PANEL,
+          panelInfo: { patnrId: item.patnrId, prdtId: item.prdtId },
+        },
+        [dispatch, item]
+      )
+    );
+  });
+  const handleMoreCardClick = useCallback(() => {
+    dispatch(
+      pushPanel(
+        {
+          name: panel_names.TRENDING_NOW_PANEL,
+        },
+        [dispatch]
+      )
+    );
+  });
   return (
     <Container className={css.bestSellerWrap}>
       <SectionTitle title={$L(`BEST SELLER`)} />
@@ -54,11 +78,15 @@ const BestSeller = () => {
               rank={item.rankOrd}
               onFocus={index === 0 ? handleScrollReset : null}
               onBlur={handleStopScrolling}
+              onClick={() => handleCardClick(item)}
             />
           ))}
 
         {drawChk && (
-          <SpottableComponent className={css.addItem}></SpottableComponent>
+          <SpottableComponent
+            className={css.addItem}
+            onClick={handleMoreCardClick}
+          ></SpottableComponent>
         )}
       </TScroller>
     </Container>