hotpicks초기 스팟및 하단 탑버튼 확인용

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

@@ -38,6 +38,7 @@ import {
 } from "../../actions/playActions";
 import MobileSendPopUp from "../../components/MobileSend/MobileSendPopUp";
 import TBody from "../../components/TBody/TBody";
+import TButton, { TYPES } from "../../components/TButton/TButton";
 import TPanel from "../../components/TPanel/TPanel";
 import useLogService from "../../hooks/useLogService";
 import usePrevious from "../../hooks/usePrevious";
@@ -134,7 +135,11 @@ export default function HotPicksPanel({ panelInfo, isOnTop, spotlightId }) {
   const _onScroll = (e) => {
     spotYoffsetRef.current = e.scrollTop;
     const targetY = currentPageRef.current * window.innerHeight;
-    if (targetY !== e.scrollTop && currentPage === currentPageRef.current) {
+    if (
+      targetY !== e.scrollTop &&
+      currentPage === currentPageRef.current &&
+      currentPage !== themeCurationInfoData?.length - 1
+    ) {
       scrollJob.current.start(() => {
         scrollToRef.current({
           position: { y: currentPageRef.current * window.innerHeight },
@@ -219,6 +224,10 @@ export default function HotPicksPanel({ panelInfo, isOnTop, spotlightId }) {
     [onItemSpotlightDown, onItemSpotlightUp, currentPage, handlePopupOpen]
   );
 
+  const handleTopButtonClick = () => {
+    setCurrentPage(0);
+  };
+
   useEffect(() => {
     if (themeCurationInfoData) {
       const comps = themeCurationInfoData.map((item, index) =>
@@ -343,7 +352,7 @@ export default function HotPicksPanel({ panelInfo, isOnTop, spotlightId }) {
     panelInfo?.linkTpCd,
     panelInfo?.patnrId,
     dispatch,
-    oneLog
+    oneLog,
   ]);
 
   const onItemSpotlightDown = useCallback((ev) => {
@@ -352,6 +361,12 @@ export default function HotPicksPanel({ panelInfo, isOnTop, spotlightId }) {
     if (currentPageRef.current < themeCurationInfoDataRef.current?.length - 1) {
       Spotlight.focus("hotpicks-next-arrow");
     }
+    if (
+      currentPageRef.current ===
+      themeCurationInfoDataRef.current?.length - 1
+    ) {
+      Spotlight.focus("hotpicks-top-button");
+    }
   }, []);
 
   const onItemSpotlightUp = useCallback((ev) => {
@@ -666,6 +681,7 @@ export default function HotPicksPanel({ panelInfo, isOnTop, spotlightId }) {
   }, [couponDownloadRetCode, shopLinkInfo]);
 
   useEffect(() => {
+    Spotlight.focus(panel_names.HOT_PICKS_PANEL);
     return () => {
       dispatch(clearSMS);
       dispatch(clearGetProductCouponDownload());
@@ -683,13 +699,23 @@ export default function HotPicksPanel({ panelInfo, isOnTop, spotlightId }) {
     handleNext();
   };
 
+  const topBtnSpotUp = (ev) => {
+    ev.stopPropagation();
+    ev.preventDefault();
+    Spotlight.focus(SpotlightIds.TBODY);
+  };
+
   const handleCancel = useCallback(() => {
     dispatch(finishVideoPreview());
     dispatch(popPanel(panel_names.HOT_PICKS_PANEL));
   }, [dispatch]);
 
   return (
-    <TPanel spotlightId={spotlightId} handleCancel={handleCancel}>
+    <TPanel
+      className={css.tPanel}
+      spotlightId={spotlightId}
+      handleCancel={handleCancel}
+    >
       {currentPage > 0 && (
         <p className={classNames(css.arrow, css.arrowPrev)}>
           <SpottableComponent
@@ -731,6 +757,15 @@ export default function HotPicksPanel({ panelInfo, isOnTop, spotlightId }) {
           </SpottableComponent>
         </p>
       )}
+      {currentPage === themeCurationInfoData?.length - 1 && (
+        <TButton
+          className={css.tButton}
+          onClick={handleTopButtonClick}
+          size={null}
+          spotlightId="hotpicks-top-button"
+          type={TYPES.topButton}
+        />
+      )}
       {activePopup === Config.ACTIVE_POPUP.hotPicksSmsPopup && (
         <MobileSendPopUp
           open={popupVisible}