[mypage]support 팝업부분 인디케이터 추가.

- 이미지 파일추가
 - Tpopup 파라미터 추가.
 - 서폿트 부분 데이터 불러오는곳 부분변경.

com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx

@@ -21,6 +21,7 @@ const OptionContainer = SpotlightContainerDecorator(
 );
 
 const SpottableComponent = Spottable("li");
+const SpottableDiv = Spottable("div");
 
 const KINDS = [
   "textPopup",
@@ -39,9 +40,15 @@ export default function TPopUp({
   children,
   onExit,
   onClick,
+  currentPage,
+  onRightClick,
+  onLeftClick,
+
+  itemLength,
   onClose,
   hasButton,
   hasText,
+  hasIndicator,
   className,
   button1Text,
   button2Text,
@@ -109,6 +116,23 @@ export default function TPopUp({
     [_optionClick]
   );
 
+  const _onLeftClick = useCallback(
+    (e) => {
+      if (onLeftClick) {
+        onLeftClick(e);
+      }
+    },
+    [onLeftClick]
+  );
+  const _onRightClick = useCallback(
+    (e) => {
+      if (onRightClick) {
+        onRightClick(e);
+      }
+    },
+    [onRightClick]
+  );
+
   return (
     <Alert
       open={open}
@@ -168,6 +192,22 @@ export default function TPopUp({
           </OptionContainer>
         )}
         {children}
+        {hasIndicator && (
+          <>
+            {currentPage !== 0 && (
+              <SpottableDiv
+                className={css.leftBtn}
+                onClick={_onLeftClick}
+              ></SpottableDiv>
+            )}
+            {currentPage !== itemLength - 1 && (
+              <SpottableDiv
+                className={css.rightBtn}
+                onClick={_onRightClick}
+              ></SpottableDiv>
+            )}
+          </>
+        )}
         {hasButton && (
           <div className={css.buttonContainer}>
             {button1Text && (

com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less

@@ -210,7 +210,7 @@
 
 .supportPopup {
   .default-style();
-
+  position: relative;
   .info {
     width: 1064px;
     height: 749px;
@@ -222,6 +222,28 @@
       display: flex;
       justify-content: center;
     }
+    .leftBtn {
+      position: absolute;
+      left: 10px;
+      top: calc(50% - 52px);
+      width: 27px;
+      height: 52px;
+      background-image: url(../../../assets/images/MS-arr-l.png);
+      &:focus {
+        background-image: url(../../../assets/images/MS-arr-l-s.png);
+      }
+    }
+    .rightBtn {
+      position: absolute;
+      right: 10px;
+      top: calc(50% - 52px);
+      width: 27px;
+      height: 52px;
+      background-image: url(../../../assets/images/MS-arr-r.png);
+      &:focus {
+        background-image: url(../../../assets/images/MS-arr-r-s.png);
+      }
+    }
   }
   .title {
     width: 100%;

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

@@ -6,10 +6,10 @@ import Spottable from "@enact/spotlight/Spottable";
 import Marquee from "@enact/ui/Marquee";
 
 import { getMyFaqInfo, getNotice } from "../../../../../actions/myPageActions";
+import TButtonScroller from "../../../../../components/TButtonScroller/TButtonScroller";
 import TPopUp from "../../../../../components/TPopUp/TPopUp";
 import TScroller from "../../../../../components/TScroller/TScroller";
 import css from "./ListContents.module.less";
-import TButtonScroller from "../../../../../components/TButtonScroller/TButtonScroller";
 
 const SpottableComponent = Spottable("li");
 
@@ -24,7 +24,7 @@ export default function ListContents({ selectedTab }) {
   const [faqPopUpOpen, setFaqPopUpOpen] = useState(false);
   const [currentInfos, setCurrentInfos] = useState(null);
   const [listInfos, setListInfos] = useState([]);
-
+  const [openIdx, setOpenIdx] = useState(null);
   useEffect(() => {
     dispatch(getMyFaqInfo({}));
     dispatch(getNotice({}));
@@ -34,17 +34,30 @@ export default function ListContents({ selectedTab }) {
     selectedTab === 0 ? setListInfos(faqInfos) : setListInfos(noticeInfos);
   }, [selectedTab, faqInfos, noticeInfos]);
 
+  let selectedData = null;
   const handleListClick = useCallback(
-    (notiNo) => {
+    (idx) => {
       if (listInfos) {
-        const selectedData = listInfos.find((list) => list.notiNo === notiNo);
-        setCurrentInfos(selectedData);
+        selectedData = listInfos[idx];
+        setOpenIdx(idx);
         setFaqPopUpOpen(true);
       }
     },
     [listInfos, currentInfos, faqInfos, noticeInfos]
   );
+  const onLeftClick = useCallback(() => {
+    if (openIdx !== 0) {
+      setOpenIdx((openIdx) => (openIdx > 0 ? openIdx - 1 : openIdx));
+    }
+  }, [openIdx, currentInfos, listInfos]);
+  const onRightClick = useCallback(() => {
+    setOpenIdx((openIdx) => openIdx + 1);
+  }, [openIdx, currentInfos, listInfos]);
 
+  useEffect(() => {
+    selectedData = listInfos[openIdx];
+    setCurrentInfos(selectedData);
+  }, [openIdx]);
   return (
     <>
       <TScroller className={css.scrollContainer} verticalScrollbar="visible">
@@ -55,7 +68,7 @@ export default function ListContents({ selectedTab }) {
                 <SpottableComponent
                   key={`list:${idx}`}
                   onClick={() => {
-                    handleListClick(list.notiNo);
+                    handleListClick(idx);
                   }}
                 >
                   <Marquee className={css.marquee} marqueeOn="focus">
@@ -73,6 +86,11 @@ export default function ListContents({ selectedTab }) {
           setFaqPopUpOpen(false);
         }}
         hasButton
+        hasIndicator
+        onLeftClick={onLeftClick}
+        onRightClick={onRightClick}
+        itemLength={listInfos?.length}
+        currentPage={openIdx}
         button1Text="OK"
       >
         {currentInfos && (
@@ -99,4 +117,3 @@ export default function ListContents({ selectedTab }) {
     </>
   );
 }
-0;