[251115] fix: TScrollerDetail-2

🕐 커밋 시간: 2025. 11. 15. 15:57:16

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

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

🔧 주요 변경 내용:
  • UI 컴포넌트 아키텍처 개선
  • 코드 정리 및 최적화

Performance: 코드 최적화로 성능 개선 기대

com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.v3.js

@@ -2559,7 +2559,6 @@ const VideoPlayerBase = class extends React.Component {
             </ControlsContainer>
           </div>
         ) : null}
-        {!panelInfo.modal && (
         <SpottableDiv
           className={css.controlsHandleAbove}
           holdConfig={controlsHandleAboveHoldConfig}
@@ -2571,9 +2570,10 @@ const VideoPlayerBase = class extends React.Component {
           onSpotlightLeft={this.onSpotlightFocus}
           onClick={this.onSpotlightFocus}
           selectionKeys={controlsHandleAboveSelectionKeys}
-            spotlightDisabled={this.state.mediaControlsVisible || spotlightDisabled}
+          spotlightDisabled={
+            this.state.mediaControlsVisible || spotlightDisabled || panelInfo.modal
+          }
         />
-        )}
         <Announce ref={this.setAnnounceRef} />
       </RootContainer>
     );

com.twin.app.shoptime/src/views/DetailPanel/components/TScroller/TScrollerDetail.jsx

@@ -4,23 +4,12 @@ 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
@@ -194,31 +183,8 @@ 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 (
-      <ScrollerContainer
+      <div className={classNames(className ? className : null, css.scrollerContainer)}>
-        className={classNames(className ? className : null, css.scrollerContainer)}
-        onKeyDown={handleScrollerKeyDown}
-      >
         <Scroller
           cbScrollTo={_cbScrollTo}
           onScrollStart={_onScrollStart}
@@ -239,7 +205,6 @@ const TScrollerDetail = forwardRef(
           }}
           noScrollByWheel={noScrollByWheel}
           noScrollByDrag
-          spotlightRestrict="self-only"
           // rest props에서 ref만 제외하고 전달
           {...(rest.ref ? { ...rest, ref: undefined } : rest)}
         >
@@ -259,7 +224,7 @@ const TScrollerDetail = forwardRef(
               cursorVisible={cursorVisible}
             />
           ))}
-      </ScrollerContainer>
+      </div>
     );
   }
 );