[OnSalePanel] 추가 및 수정

Detail Notes :

1. OnSalePanel, handleTopButtonClick, 조건 추가
2. OnSaleProductItem, handleCardClick, 액션 추가

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

@@ -64,7 +64,7 @@ export default function OnSalePanel() {
   }, []);
 
   const handleTopButtonClick = useCallback(() => {
-    if (isTopButtonClicked) {
+    if (isTopButtonClicked && !targetId) {
       return;
     }
 
@@ -77,8 +77,8 @@ export default function OnSalePanel() {
       <CategoryNav
         categoryInfos={categoryInfos}
         currentCategoryCode={currentCategoryCode}
-        setCurrentCategoryCode={setCurrentCategoryCode}
         scrollTop={scrollTop}
+        setCurrentCategoryCode={setCurrentCategoryCode}
       />
       <TBody className={css.tBody} cbScrollTo={getScrollTo}>
         {saleInfos &&
@@ -87,9 +87,9 @@ export default function OnSalePanel() {
               exposureOrder={expsOrd}
               key={"saleInfo-" + index}
               isTopButtonClicked={isTopButtonClicked}
-              setIsTopButtonClicked={setIsTopButtonClicked}
               saleName={saleNm}
               saleProductInfos={saleProductInfos}
+              setIsTopButtonClicked={setIsTopButtonClicked}
             />
           ))}
         <TopButton onTopButtonClick={handleTopButtonClick} />

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

@@ -1,6 +1,10 @@
-import React, { memo } from "react";
+import React, { memo, useCallback } from "react";
 
+import { useDispatch } from "react-redux";
+
+import { pushPanel } from "../../../../actions/panelActions";
 import TItemCard from "../../../../components/TItemCard/TItemCard";
+import { panel_names } from "../../../../utils/Config";
 import css from "./OnSaleProductItem.module.less";
 
 export default memo(function OnSaleProductItem({
@@ -8,22 +12,30 @@ export default memo(function OnSaleProductItem({
   saleProductInfos,
   ...rest
 }) {
-  const {
-    imgUrl,
-    prdtId: productId,
-    prdtNm: productName,
-    priceInfo,
-  } = saleProductInfos[index];
+  const dispatch = useDispatch();
+
+  const { imgUrl, patnrId, prdtId, prdtNm, priceInfo } =
+    saleProductInfos[index];
+
+  const handleCardClick = useCallback(() => {
+    dispatch(
+      pushPanel({
+        name: panel_names.DETAIL_PANEL,
+        panelInfo: { patnrId, prdtId },
+      })
+    );
+  }, [dispatch, saleProductInfos]);
 
   return (
     <div className={css.container}>
       <div />
       <TItemCard
-        imageAlt={productName}
+        imageAlt={prdtNm}
         imageSource={imgUrl}
         priceInfo={priceInfo}
-        productId={productId}
-        productName={productName}
+        productId={prdtId}
+        productName={prdtNm}
+        onCardClick={handleCardClick}
         {...rest}
       />
     </div>