[251115] fix: TScrollerDetail

🕐 커밋 시간: 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 컴포넌트 아키텍처 개선

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>
     );
   }
 );

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 {