[Home] TOP 버튼 및 디자인 수정

Detail Notes :
 
1. 최초 진입시 scrollTop 추가
2. TOP 버튼 클릭시 scrollTOP 이후 포커스 추가
3. TBody padding 제거

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

@@ -22,7 +22,7 @@ const ContainerBasic = SpotlightContainerDecorator(
   "div"
 );
 
-export default function HomeBannerTemplate1() {
+export default function HomeBannerTemplate1({ scrollTop }) {
   const dispatch = useDispatch();
   const [bannerInfos, setBannerInfos] = useState([]);
 
@@ -65,11 +65,12 @@ export default function HomeBannerTemplate1() {
       const banerInfo = homeMainContentsBannerInfos[0].bannerInfos;
       setBannerInfos(banerInfo);
       dispatch(getHomeMainContents);
+      scrollTop({ animate: false });
       startFocus();
       // console.log(homeMainContentsBannerInfos, "메인 컨텐츠");
       // console.log(homeTopDisplayInfos, "탑디스");
     }
-  }, [homeMainContentsBannerInfos, bannerInfos, dispatch]);
+  }, [homeMainContentsBannerInfos, bannerInfos, dispatch, scrollTop]);
 
   return (
     <Container className={css.container} spotlightId={"top"}>

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

@@ -24,7 +24,6 @@ import HomeOnSale from "../HomePanel/HomeOnSale/HomeOnSale";
 import css from "../HomePanel/HomePanel.module.less";
 import PopularShow from "../HomePanel/PopularShow/PopularShow";
 import SubCategory from "../HomePanel/SubCategory/SubCategory";
-
 export default function HomePanel({ isOnTop }) {
   const dispatch = useDispatch();
   const { getScrollTo, scrollTop } = useScrollTo();
@@ -36,7 +35,7 @@ export default function HomePanel({ isOnTop }) {
   const popupVisible = useSelector((state) => state.common.popupVisible);
   const [selectTemplate, setSelectTemplate] = useState(null);
   const [homeLayoutInfoDetail, setHomeLayoutInfoDetail] = useState([]);
-
+  const timerRef = useRef();
   useEffect(() => {
     if (homeTopDisplayInfos) {
       setSelectTemplate(homeTopDisplayInfos[0].shptmTmplCd);
@@ -62,6 +61,10 @@ export default function HomePanel({ isOnTop }) {
     dispatch(setHidePopup());
   }, [dispatch]);
 
+  useEffect(() => {
+    return () => clearTimeout(timerRef.current);
+  }, []);
+
   const handleTopButtonClick = useCallback(() => {
     scrollTop();
 
@@ -72,34 +75,33 @@ export default function HomePanel({ isOnTop }) {
       spotId = "banner01";
     }
 
-    Spotlight.focus(spotId);
+    timerRef.current = setTimeout(() => Spotlight.focus(spotId), 700);
   }, [scrollTop]);
 
   return (
-    <>
-      <TPanel className={css.panel} onCancel={onCancel}>
-        <TBody className={css.tBody} cbscrollTo={getScrollTo}>
+    <TPanel className={css.panel} onCancel={onCancel}>
+      <TBody className={css.tBody} cbScrollTo={getScrollTo}>
+        <div className={css.mainBanner}>
           {selectTemplate &&
             (selectTemplate === "DSP00201" ? (
-              <HomeBannerTemplate1 />
+              <HomeBannerTemplate1 scrollTop={scrollTop} />
             ) : selectTemplate === "DSP00202" ? (
               <HomeBannerTemplate2 />
             ) : selectTemplate === "DSP00203" ? (
               <HomeBannerTemplate3 />
             ) : null)}
-          <SubCategory />
-          <HomeOnSale />
-          <PopularShow />
-          <BestSeller />
-          <TButton
-            className={css.tButton}
-            onClick={handleTopButtonClick}
-            size={null}
-            type={TYPES.topButton}
-          />
-        </TBody>
-      </TPanel>
-
+        </div>
+        <SubCategory />
+        <HomeOnSale />
+        <PopularShow />
+        <BestSeller />
+        <TButton
+          className={css.tButton}
+          onClick={handleTopButtonClick}
+          size={null}
+          type={TYPES.topButton}
+        />
+      </TBody>
       <TPopUp
         kind="exitPopup"
         open={popupVisible}
@@ -112,6 +114,6 @@ export default function HomePanel({ isOnTop }) {
         title={$L("Exit Shop Time")}
         text={$L("Are you sure you want to exit Shop Time?")}
       />
-    </>
+    </TPanel>
   );
 }

com.twin.app.shoptime/src/views/HomePanel/HomePanel.module.less

@@ -4,11 +4,12 @@
 .panel {
   background-color: @BG_COLOR_01;
 }
-
 .tBody {
   height: 100%;
-  padding: 24px;
-}
-.tButton {
-  margin: 60px auto;
+  .mainBanner {
+    padding: 24px;
+  }
+  .tButton {
+    margin: 74px auto 60px;
+  }
 }