[홈패널] 탑버튼 추가

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

@@ -1,13 +1,16 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 
 import { useDispatch, useSelector } from "react-redux";
 
+import Spotlight from "@enact/spotlight";
+
 import {
   setExitApp,
   setHidePopup,
   setShowPopup,
 } from "../../actions/commonActions";
 import TBody from "../../components/TBody/TBody";
+import TButton, { TYPES } from "../../components/TButton/TButton";
 import TPanel from "../../components/TPanel/TPanel";
 import TPopUp from "../../components/TPopUp/TPopUp";
 import useDebugKey from "../../hooks/useDebugKey";
@@ -24,6 +27,7 @@ import SubCategory from "../HomePanel/SubCategory/SubCategory";
 
 export default function HomePanel({ isOnTop }) {
   const dispatch = useDispatch();
+  const { getScrollTo, scrollTop } = useScrollTo();
   useDebugKey({ isLandingPage: true });
   const homeLayoutInfo = useSelector((state) => state.home.layoutData);
   const homeTopDisplayInfos = useSelector(
@@ -32,6 +36,9 @@ export default function HomePanel({ isOnTop }) {
   const popupVisible = useSelector((state) => state.common.popupVisible);
   const [selectTemplate, setSelectTemplate] = useState(null);
   const [homeLayoutInfoDetail, setHomeLayoutInfoDetail] = useState([]);
+  const [isTopButtonClicked, setIsTopButtonClicked] = useState(false);
+  const [targetId, setTargetId] = useState();
+  const timerRef = useRef();
 
   useEffect(() => {
     if (homeTopDisplayInfos) {
@@ -40,6 +47,7 @@ export default function HomePanel({ isOnTop }) {
     if (homeLayoutInfo) {
       setHomeLayoutInfoDetail(homeLayoutInfo.homeLayoutInfo);
     }
+    setTargetId("top");
   }, [homeTopDisplayInfos, homeLayoutInfo]);
 
   const onCancel = useCallback(() => {
@@ -58,6 +66,15 @@ export default function HomePanel({ isOnTop }) {
     dispatch(setHidePopup());
   }, [dispatch]);
 
+  const handleTopButtonClick = useCallback(() => {
+    if (isTopButtonClicked && !targetId) {
+      return;
+    }
+    setIsTopButtonClicked(true);
+    scrollTop();
+    timerRef.current = setTimeout(() => Spotlight.focus(targetId), 0);
+  }, [isTopButtonClicked, targetId]);
+
   return (
     <>
       <TPanel className={css.panel} onCancel={onCancel}>
@@ -74,6 +91,12 @@ export default function HomePanel({ isOnTop }) {
           <HomeOnSale />
           <PopularShow />
           <BestSeller />
+          <TButton
+            className={css.tButton}
+            onClick={handleTopButtonClick}
+            size={null}
+            type={TYPES.topButton}
+          />
         </TBody>
       </TPanel>