[SHOPTIME-2899] Detail Page / 사방향키가 OK 이외에 동작하지 않음

[수정파일]

  1. TPopUp.jsx
  2. IndicatorOptions.jsx

[수정내용]

  1. 오른쪽 버튼 누를 시 TButtonScroller로 포커스가 갈 수 있도록 수정

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

@@ -1,32 +1,19 @@
-import React, {
+import React, { useCallback, useEffect, useMemo, useState } from "react";
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
 
-import classNames from 'classnames';
+import classNames from "classnames";
-import {
+import { useDispatch, useSelector } from "react-redux";
-  useDispatch,
-  useSelector,
-} from 'react-redux';
 
-import Alert from '@enact/sandstone/Alert';
+import Alert from "@enact/sandstone/Alert";
-import Spotlight from '@enact/spotlight';
+import Spotlight from "@enact/spotlight";
-import SpotlightContainerDecorator
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
-  from '@enact/spotlight/SpotlightContainerDecorator';
+import Spottable from "@enact/spotlight/Spottable";
-import Spottable from '@enact/spotlight/Spottable';
 
-import defaultImageItem
+import defaultImageItem from "../../../assets/images/img-thumb-empty-product@3x.png";
-  from '../../../assets/images/img-thumb-empty-product@3x.png';
+import { cancelFocusElement, focusElement } from "../../actions/commonActions";
-import {
+import { SpotlightIds } from "../../utils/SpotlightIds";
-  cancelFocusElement,
+import CustomImage from "../CustomImage/CustomImage";
-  focusElement,
+import TButton from "../TButton/TButton";
-} from '../../actions/commonActions';
+import css from "../TPopUp/TPopUp.module.less";
-import { SpotlightIds } from '../../utils/SpotlightIds';
-import CustomImage from '../CustomImage/CustomImage';
-import TButton from '../TButton/TButton';
-import css from '../TPopUp/TPopUp.module.less';
 
 const Container = SpotlightContainerDecorator(
   { enterTo: "default-element" },
@@ -98,6 +85,7 @@ export default function TPopUp({
   optionClick,
   selectedIndex,
   spotlightId,
+  onSpotlightRight,
   ...rest
 }) {
   const dispatch = useDispatch();
@@ -198,6 +186,15 @@ export default function TPopUp({
     [onRightClick]
   );
 
+  const _onSpotlightRight = useCallback(
+    (e) => {
+      if (onSpotlightRight) {
+        onSpotlightRight(e);
+      }
+    },
+    [onSpotlightRight]
+  );
+
   const ariaHidden = useMemo(() => {
     const deviceCountryCode = httpHeader?.["X-Device-Country"] || "";
     if (deviceCountryCode === "US") {
@@ -329,6 +326,7 @@ export default function TPopUp({
                 onClick={_onClick}
                 role="button"
                 ariaLabel={button1Text}
+                onSpotlightRight={_onSpotlightRight}
               >
                 {button1Text}
               </TButton>

com.twin.app.shoptime/src/views/DetailPanel/components/indicator/IndicatorOptions.jsx

@@ -88,11 +88,16 @@ export default function IndicatorOptions({
     return { __html: sanitizedString };
   };
 
+  //DecoratorContainer로 컴포넌트를 감싸주면 해당 함수가 필요없어 보임
   const onSpotlightLeft = (e) => {
     e.stopPropagation();
     Spotlight.focus("");
   };
 
+  const onSpotlightRight = () => {
+    Spotlight.focus("spotlightId_TbuttonScrollerDown");
+  };
+
   const renderPopUp = () => {
     return (
       <TPopUp
@@ -102,6 +107,7 @@ export default function IndicatorOptions({
         hasButton
         button1Text={$L("CLOSE")}
         spotlightId="tPopupBtn1"
+        onSpotlightRight={onSpotlightRight}
       >
         <div>
           <div className={css.popUpHeader}>
@@ -159,7 +165,7 @@ export default function IndicatorOptions({
       </TPopUp>
     );
   };
-
+  //
   return (
     <>
       <div className={css.indicatorOptionContainer}>