[FeaturedBrandsPanel] section TODAY’S DEALS, scroll & focus 조정

Detail Notes :

1. 시나리오 가이드에 따른 DetailPanl 진입 이후 scroll & focus 조정

com.twin.app.shoptime/src/reducers/brandReducer.js

@@ -1,11 +1,6 @@
 import { types } from "../actions/actionTypes";
 
 const initialState = {
-  // pyh Todo, test, temporary state, deleted later
-  upcomingAlamUseFlagData: {
-    upcomingAlamUseFlag: "N",
-  },
-
   brandInfoData: {
     data: {},
     status: "idle",
@@ -59,13 +54,6 @@ const initialState = {
 
 export const brandReducer = (state = initialState, action) => {
   switch (action.type) {
-    // pyh Todo, test, temporary case, deleted later
-    case "SET_MY_UPCOMING_USE_ALERT":
-      return {
-        ...state,
-        upcomingAlamUseFlagData: action.payload,
-      };
-
     case types.GET_BRAND_LIST:
       return {
         ...state,

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

@@ -24,6 +24,10 @@ import {
   getBrandTSVInfo,
 } from "../../actions/brandActions";
 import { changeAppStatus, setHidePopup } from "../../actions/commonActions";
+import {
+  getMyUpcomingAlertShow,
+  setMyUpcomingUseAlert,
+} from "../../actions/myPageActions";
 import { updatePanel } from "../../actions/panelActions";
 import TBody from "../../components/TBody/TBody";
 import TButton, { TYPES } from "../../components/TButton/TButton";
@@ -193,6 +197,10 @@ export default function FeaturedBrandsPanel() {
     (state) => state.brand.brandShowroomData.status
   );
 
+  const upcomAlamUseFlag = useSelector(
+    (state) => state.myPage.upComingData?.upComingAlertShow?.upcomAlamUseFlag
+  );
+
   const [firstFocusableTargetId, setFirstFocusableTargetId] = useState();
   const [spotlightDisabled, setSpotlightDisabled] = useState(true);
   const [selectedPatnrId, setSelectedPatnrId] = useState();
@@ -257,8 +265,12 @@ export default function FeaturedBrandsPanel() {
 
   useEffect(() => {
     if (!brandInfo) {
-      console.log("%c 0 brandInfo effect", "background:blue; color:white");
+      console.log(
+        "%c 0 brandInfo & upcomAlamUseFlag effect",
+        "background:blue; color:white"
+      );
       dispatch(getBrandList());
+      dispatch(getMyUpcomingAlertShow());
     }
   }, [dispatch]);
 
@@ -379,7 +391,7 @@ export default function FeaturedBrandsPanel() {
         })
       );
     }
-  }, [selectedCatCd, dispatch]);
+  }, [dispatch, selectedCatCd]);
 
   useEffect(() => {
     if (selectedHstNm) {
@@ -390,7 +402,7 @@ export default function FeaturedBrandsPanel() {
         })
       );
     }
-  }, [selectedHstNm, dispatch]);
+  }, [dispatch, selectedHstNm]);
 
   useEffect(() => {
     if (selectedSeriesId || selectedSeriesId === "") {
@@ -401,7 +413,7 @@ export default function FeaturedBrandsPanel() {
         })
       );
     }
-  }, [selectedSeriesId, dispatch]);
+  }, [dispatch, selectedSeriesId]);
 
   useEffect(() => {
     if (selectedCatCdLv1 !== null || selectedCatCdLv2 !== null) {
@@ -464,17 +476,12 @@ export default function FeaturedBrandsPanel() {
     scrollTopBody();
   }, [firstFocusableTargetId]);
 
-  // pyh Todo, test, temporary func, edited later
   const handlePopupClick = useCallback(() => {
-    dispatch({
-      type: "SET_MY_UPCOMING_USE_ALERT",
-      payload: { upcomingAlamUseFlag: "Y" },
-    });
+    dispatch(setMyUpcomingUseAlert({ upcomingAlamUseFlag: "Y" }));
 
     dispatch(setHidePopup());
   }, [dispatch]);
 
-  // pyh Todo, test, temporary func, edited later
   const handlePopupClose = useCallback(() => {
     dispatch(setHidePopup());
   }, [dispatch]);
@@ -547,6 +554,7 @@ export default function FeaturedBrandsPanel() {
                     brandLayoutInfo,
                     TEMPLATE_CODE_CONF.TODAYS_DEALS
                   )}
+                  scrollTopBody={scrollTopBody}
                 />
               )}
 

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/LiveChannels/NoLiveContents/NoLiveCard/NoLiveCard.jsx

@@ -22,8 +22,8 @@ const STRING_CONF = {
 export default memo(function NoLiveCard({ brandChanInfoItem }) {
   const dispatch = useDispatch();
 
-  const upcomingAlamUseFlag = useSelector(
-    (state) => state.brand.upcomingAlamUseFlagData.upcomingAlamUseFlag
+  const upcomAlamUseFlag = useSelector(
+    (state) => state.myPage.upComingData?.upComingAlertShow?.upcomAlamUseFlag
   );
 
   const {
@@ -52,8 +52,7 @@ export default memo(function NoLiveCard({ brandChanInfoItem }) {
   const isReserved = alamDispFlag === "Y";
 
   const handleReminderButton = useCallback(() => {
-    // @@pyh Todo, @@test, temporary if, edited later
-    if (upcomingAlamUseFlag === "N") {
+    if (upcomAlamUseFlag === "N") {
       return dispatch(setShowPopup());
     }
 
@@ -73,7 +72,7 @@ export default memo(function NoLiveCard({ brandChanInfoItem }) {
         upcoming: true,
       })
     );
-  }, [brandChanInfoItem, dispatch, upcomingAlamUseFlag]);
+  }, [brandChanInfoItem, dispatch, upcomAlamUseFlag]);
 
   const handleAiredButton = () => {
     // @@pyh, Todo, PlayerPanel 완료 뒤 action 추가

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDeals.jsx

@@ -9,13 +9,23 @@ const STRING_CONF = {
   TODAYS_DEALS: $L("TODAY'S DEALS"),
 };
 
-export default memo(function TodaysDeals({ brandTsvInfo, order }) {
+export default memo(function TodaysDeals({
+  brandTsvInfo,
+  order,
+  scrollTopBody,
+}) {
   const orderStyle = useMemo(() => ({ order: order }), [order]);
 
   return (
     <div className={css.container} style={orderStyle}>
-      <SectionTitle title={STRING_CONF.TODAYS_DEALS} />
-      <TodaysDealsCard brandTsvInfo={brandTsvInfo} />
+      <SectionTitle
+        title={STRING_CONF.TODAYS_DEALS}
+        data-title="today's-deals"
+      />
+      <TodaysDealsCard
+        brandTsvInfo={brandTsvInfo}
+        scrollTopBody={scrollTopBody}
+      />
     </div>
   );
 });

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/TodaysDeals/TodaysDealsCard/TodaysDealsCard.jsx

@@ -1,14 +1,17 @@
 import React, { memo, useCallback } from "react";
 
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 
 import Spottable from "@enact/spotlight/Spottable";
 
-import { pushPanel } from "../../../../actions/panelActions";
+import { pushPanel, updatePanel } from "../../../../actions/panelActions";
 import CustomImage from "../../../../components/CustomImage/CustomImage";
+import { removeDotAndColon } from "../../../../components/TItemCard/TItemCard";
 import usePriceInfo from "../../../../hooks/usePriceInfo";
+import useScrollTopByDistance from "../../../../hooks/useScrollTopByDistance";
 import { panel_names } from "../../../../utils/Config";
 import { $L } from "../../../../utils/helperMethods";
+import { SpotlightIds } from "../../../../utils/SpotlightIds";
 import css from "./TodaysDealsCard.module.less";
 
 const SpottableComponent = Spottable("div");
@@ -17,9 +20,19 @@ const STRING_CONF = {
   SAVE: $L("SAVE"),
 };
 
-export default memo(function TodaysDealsCard({ brandTsvInfo, ...rest }) {
+export default memo(function TodaysDealsCard({
+  brandTsvInfo,
+  scrollTopBody,
+  ...rest
+}) {
+  const { scrollTopByDistance } = useScrollTopByDistance();
+
   const dispatch = useDispatch();
 
+  const panelInfo = useSelector((state) => state.panels.panels[0]?.panelInfo);
+
+  const { cursorVisible } = useSelector((state) => state.common.appStatus);
+
   const {
     freeShippingFlag,
     patnrId,
@@ -34,6 +47,27 @@ export default memo(function TodaysDealsCard({ brandTsvInfo, ...rest }) {
     usePriceInfo(priceInfo);
 
   const handleClick = useCallback(() => {
+    const tBody = document.querySelector(
+      `[data-spotlight-id="${SpotlightIds.TBODY}"]`
+    );
+
+    const yContainer = tBody?.children[0]?.children[0]?.children[0];
+
+    if (yContainer) {
+      const catCdLv1 = null;
+      const catCdLv2 = null;
+      const section = "today's-deals";
+      const x = 0;
+      const y = yContainer.scrollTop;
+
+      dispatch(
+        updatePanel({
+          name: panel_names.FEATURED_BRANDS_PANEL,
+          panelInfo: { ...panelInfo, catCdLv1, catCdLv2, section, x, y },
+        })
+      );
+    }
+
     dispatch(
       pushPanel({
         name: panel_names.DETAIL_PANEL,
@@ -42,10 +76,31 @@ export default memo(function TodaysDealsCard({ brandTsvInfo, ...rest }) {
     );
   }, [brandTsvInfo, dispatch]);
 
+  const handleFocus = useCallback(() => {
+    if (cursorVisible) {
+      return;
+    }
+
+    scrollTopByDistance(
+      `[data-marker="scroll-marker"]`,
+      `[data-title="today's-deals"]`,
+      scrollTopBody,
+      36
+    );
+  }, [cursorVisible]);
+
   return (
-    <SpottableComponent className={css.item} onClick={handleClick} {...rest}>
+    <SpottableComponent
+      className={css.item}
+      onClick={handleClick}
+      onFocus={handleFocus}
+      spotlightId={
+        "today's-deals-card-spotlightId-" + removeDotAndColon(prdtId)
+      }
+      {...rest}
+    >
       <figure>
-        <CustomImage src={thumbnailImg} delay={0} alt="" />
+        <CustomImage src={thumbnailImg} alt="" />
       </figure>
 
       <div>

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/UpComing/UpComingList/UpComingCard/UpComingCard.jsx

@@ -31,8 +31,8 @@ export default memo(function UpComingCard({
 }) {
   const dispatch = useDispatch();
 
-  const upcomingAlamUseFlag = useSelector(
-    (state) => state.brand.upcomingAlamUseFlagData.upcomingAlamUseFlag
+  const upcomAlamUseFlag = useSelector(
+    (state) => state.myPage.upComingData?.upComingAlertShow?.upcomAlamUseFlag
   );
 
   const [isFocused, setIsFocused] = useState(false);
@@ -47,8 +47,7 @@ export default memo(function UpComingCard({
   }, []);
 
   const handleClick = useCallback(() => {
-    // @@pyh Todo, @@test, temporary if, edited later
-    if (upcomingAlamUseFlag === "N") {
+    if (upcomAlamUseFlag === "N") {
       return dispatch(setShowPopup());
     }
 
@@ -68,7 +67,7 @@ export default memo(function UpComingCard({
         upcoming: true,
       })
     );
-  }, [dispatch, isReserved, upcomingAlamUseFlag]);
+  }, [dispatch, isReserved, upcomAlamUseFlag]);
 
   const handleFocus = useCallback(() => {
     setIsFocused(true);