From 29e8e2860ff6bacaa589db32cd3716ca14a86836 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B3=A0=EB=8F=99=EC=98=81?=
 <dongyoung@godong-yeong-ui-noteubug.local>
Date: Wed, 2 Oct 2024 16:39:00 +0900
Subject: [PATCH] =?UTF-8?q?[SHOPTIME-2899]=20Detail=20Page=20/=20=EC=82=AC?=
 =?UTF-8?q?=EB=B0=A9=ED=96=A5=ED=82=A4=EA=B0=80=20OK=20=EC=9D=B4=EC=99=B8?=
 =?UTF-8?q?=EC=97=90=20=EB=8F=99=EC=9E=91=ED=95=98=EC=A7=80=20=EC=95=8A?=
 =?UTF-8?q?=EC=9D=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[수정파일]

  1. TPopUp.jsx
  2. IndicatorOptions.jsx

[수정내용]

  1. 오른쪽 버튼 누를 시 TButtonScroller로 포커스가 갈 수 있도록 수정
---
 .../src/components/TPopUp/TPopUp.jsx          | 50 +++++++++----------
 .../components/indicator/IndicatorOptions.jsx |  8 ++-
 2 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx b/com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx
index 009a4c35..51c48c7f 100644
--- a/com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx
+++ b/com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx
@@ -1,32 +1,19 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 
-import classNames from 'classnames';
-import {
-  useDispatch,
-  useSelector,
-} from 'react-redux';
+import classNames from "classnames";
+import { useDispatch, useSelector } from "react-redux";
 
-import Alert from '@enact/sandstone/Alert';
-import Spotlight from '@enact/spotlight';
-import SpotlightContainerDecorator
-  from '@enact/spotlight/SpotlightContainerDecorator';
-import Spottable from '@enact/spotlight/Spottable';
+import Alert from "@enact/sandstone/Alert";
+import Spotlight from "@enact/spotlight";
+import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
+import Spottable from "@enact/spotlight/Spottable";
 
-import defaultImageItem
-  from '../../../assets/images/img-thumb-empty-product@3x.png';
-import {
-  cancelFocusElement,
-  focusElement,
-} from '../../actions/commonActions';
-import { SpotlightIds } from '../../utils/SpotlightIds';
-import CustomImage from '../CustomImage/CustomImage';
-import TButton from '../TButton/TButton';
-import css from '../TPopUp/TPopUp.module.less';
+import defaultImageItem from "../../../assets/images/img-thumb-empty-product@3x.png";
+import { cancelFocusElement, focusElement } from "../../actions/commonActions";
+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>
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/IndicatorOptions.jsx b/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/IndicatorOptions.jsx
index c9075a13..8a16d160 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/IndicatorOptions.jsx
+++ b/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}>