QA1 / 독일 / My Page / Support / 스크롤 위치 초기화 되지 않음 처리건.

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/ListContents/ListContents.jsx

@@ -1,24 +1,37 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
 
-import { useDispatch, useSelector } from "react-redux";
+import {
+  useDispatch,
+  useSelector,
+} from 'react-redux';
 
-import Spottable from "@enact/spotlight/Spottable";
-import Marquee from "@enact/ui/Marquee";
+import Spottable from '@enact/spotlight/Spottable';
+import Marquee from '@enact/ui/Marquee';
 
-import { getMyFaqInfo, getNotice } from "../../../../../actions/myPageActions";
-import TButton from "../../../../../components/TButton/TButton";
-import TButtonScroller from "../../../../../components/TButtonScroller/TButtonScroller";
-import TPopUp from "../../../../../components/TPopUp/TPopUp";
-import TScroller from "../../../../../components/TScroller/TScroller";
-import useScrollTo from "../../../../../hooks/useScrollTo";
-import { scaleH, scaleW } from "../../../../../utils/helperMethods";
-import css from "./ListContents.module.less";
-import { sendLogMyPageNotice } from "../../../../../actions/logActions";
+import { sendLogMyPageNotice } from '../../../../../actions/logActions';
+import {
+  getMyFaqInfo,
+  getNotice,
+} from '../../../../../actions/myPageActions';
+import TButton from '../../../../../components/TButton/TButton';
+import TButtonScroller
+  from '../../../../../components/TButtonScroller/TButtonScroller';
+import TPopUp from '../../../../../components/TPopUp/TPopUp';
+import TScroller from '../../../../../components/TScroller/TScroller';
+import useScrollTo from '../../../../../hooks/useScrollTo';
+import {
+  scaleH,
+  scaleW,
+} from '../../../../../utils/helperMethods';
+import css from './ListContents.module.less';
 
 const SpottableComponent = Spottable("li");
 
 export default function ListContents({ selectedTab }) {
-
   const dispatch = useDispatch();
 
   const faqInfos = useSelector((state) => state.myPage.faqData.faqInfos);
@@ -30,6 +43,7 @@ export default function ListContents({ selectedTab }) {
   const [currentInfos, setCurrentInfos] = useState(null);
   const [listInfos, setListInfos] = useState([]);
   const [openIdx, setOpenIdx] = useState(null);
+  const [resetScroll, setResetScroll] = useState(false);
 
   const { getScrollTo, scrollTop } = useScrollTo();
 
@@ -52,31 +66,29 @@ export default function ListContents({ selectedTab }) {
         setOpenIdx(idx);
         setFaqPopUpOpen(true);
 
-        dispatch(sendLogMyPageNotice({
-          itemId: `${selectedTab === 0 ? "FAQ/" : "Notice/"}${
-            listInfos[idx]?.notiNo
-          }`,
-          title: `${selectedTab === 0 ? "FAQ/" : "Notice/"}${
-            listInfos[idx]?.notiTitl
-          }`,
-        }));
+        dispatch(
+          sendLogMyPageNotice({
+            itemId: `${selectedTab === 0 ? "FAQ/" : "Notice/"}${
+              listInfos[idx]?.notiNo
+            }`,
+            title: `${selectedTab === 0 ? "FAQ/" : "Notice/"}${
+              listInfos[idx]?.notiTitl
+            }`,
+          })
+        );
       }
     },
-    [
-      listInfos,
-      currentInfos,
-      faqInfos,
-      noticeInfos,
-      selectedTab,
-    ]
+    [listInfos, currentInfos, faqInfos, noticeInfos, selectedTab]
   );
   const onLeftClick = useCallback(() => {
     if (openIdx !== 0) {
       setOpenIdx((openIdx) => (openIdx > 0 ? openIdx - 1 : openIdx));
+      setResetScroll(true);
     }
   }, [openIdx, currentInfos, listInfos]);
   const onRightClick = useCallback(() => {
     setOpenIdx((openIdx) => openIdx + 1);
+    setResetScroll(true);
   }, [openIdx, currentInfos, listInfos]);
 
   useEffect(() => {
@@ -84,6 +96,12 @@ export default function ListContents({ selectedTab }) {
     setCurrentInfos(selectedData);
   }, [openIdx]);
 
+  useEffect(() => {
+    if (resetScroll) {
+      setResetScroll(false);
+    }
+  }, [resetScroll]);
+
   return (
     <>
       <TScroller
@@ -148,6 +166,7 @@ export default function ListContents({ selectedTab }) {
               boxHeight={scaleH(458)}
               width={scaleW(948)}
               verticalScrollbar="visible"
+              resetScrollPosition={resetScroll}
             >
               {currentInfos.notiCntt}
             </TButtonScroller>