From f7ff26347b18e693fd4d921d37e56335b967f4b0 Mon Sep 17 00:00:00 2001
From: optrader <optrader8@gmail.com>
Date: Sat, 15 Nov 2025 15:33:58 +0900
Subject: [PATCH] [251115] fix: TScrollerDetail
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🕐 커밋 시간: 2025. 11. 15. 15:33:58

📊 변경 통계:
  • 총 파일: 2개
  • 추가: +43줄
  • 삭제: -2줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/DetailPanel/components/TScroller/TScrollerDetail.jsx
  ~ com.twin.app.shoptime/src/views/DetailPanel/components/TScroller/TScrollerDetail.module.less

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/views/DetailPanel/components/TScroller/TScrollerDetail.module.less (unknown):
    ✅ Added: child()

🔧 주요 변경 내용:
  • UI 컴포넌트 아키텍처 개선
---
 .../components/TScroller/TScrollerDetail.jsx  | 39 ++++++++++++++++++-
 .../TScroller/TScrollerDetail.module.less     |  9 +++++
 2 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/TScroller/TScrollerDetail.jsx b/com.twin.app.shoptime/src/views/DetailPanel/components/TScroller/TScrollerDetail.jsx
index 25bd410f..f017a593 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/TScroller/TScrollerDetail.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/TScroller/TScrollerDetail.jsx
@@ -4,12 +4,23 @@ import classNames from 'classnames';
 import { useSelector } from 'react-redux';
 
 import { off, on } from '@enact/core/dispatcher';
+import { is } from '@enact/core/keymap';
 import { Job } from '@enact/core/util';
 import Scroller from '@enact/sandstone/Scroller';
+import Spotlight from '@enact/spotlight';
+import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
 
 import AutoScrollAreaDetail, { POSITION } from '../AutoScrollAreaDetail/AutoScrollAreaDetail';
 import css from './TScrollerDetail.module.less';
 
+const ScrollerContainer = SpotlightContainerDecorator(
+  {
+    enterTo: 'default-element',
+    restrict: 'self-only',
+  },
+  'div'
+);
+
 /**
  * DetailPanel 전용 TScroller - 커스텀 스크롤바 구현
  * onScroll* event can't use Callback dependency
@@ -183,8 +194,31 @@ const TScrollerDetail = forwardRef(
       }
     }, [direction]);
 
+    // 스크롤바에 포커스가 있을 때 arrow up/down을 처리하여 포커스 유지
+    const handleScrollerKeyDown = useCallback(
+      (e) => {
+        const isUp = is('up')(e);
+        const isDown = is('down')(e);
+
+        // arrow up/down일 때만 처리
+        if ((isUp || isDown) && direction === 'vertical') {
+          // 현재 포커스된 요소가 스크롤바인지 확인
+          const current = Spotlight.getCurrent();
+          if (current && current.getAttribute('aria-label')?.includes('scroll')) {
+            // 스크롤바에 포커스가 있으면 기본 동작 방지하고 포커스 유지
+            e.preventDefault();
+            e.stopPropagation();
+          }
+        }
+      },
+      [direction]
+    );
+
     return (
-      <div className={classNames(className ? className : null, css.scrollerContainer)}>
+      <ScrollerContainer
+        className={classNames(className ? className : null, css.scrollerContainer)}
+        onKeyDown={handleScrollerKeyDown}
+      >
         <Scroller
           cbScrollTo={_cbScrollTo}
           onScrollStart={_onScrollStart}
@@ -205,6 +239,7 @@ const TScrollerDetail = forwardRef(
           }}
           noScrollByWheel={noScrollByWheel}
           noScrollByDrag
+          spotlightRestrict="self-only"
           // rest props에서 ref만 제외하고 전달
           {...(rest.ref ? { ...rest, ref: undefined } : rest)}
         >
@@ -224,7 +259,7 @@ const TScrollerDetail = forwardRef(
               cursorVisible={cursorVisible}
             />
           ))}
-      </div>
+      </ScrollerContainer>
     );
   }
 );
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/TScroller/TScrollerDetail.module.less b/com.twin.app.shoptime/src/views/DetailPanel/components/TScroller/TScrollerDetail.module.less
index 1db73e82..daf9452c 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/TScroller/TScrollerDetail.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/TScroller/TScrollerDetail.module.less
@@ -80,6 +80,15 @@
           }
         }
       }
+
+      // 스크롤바 thumb의 포커스 상태
+      > div:nth-child(1) {
+        > div {
+          &:focus {
+            background-color: @PRIMARY_COLOR_RED !important;
+          }
+        }
+      }
     }
 
     &.preventScroll {