[251118] fix: HomeBanner 비디오 포커스 테두리

🕐 커밋 시간: 2025. 11. 18. 14:20:04

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

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx
  ~ com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.module.less

🔧 주요 변경 내용:
  • 소규모 기능 개선

com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.jsx

@@ -855,7 +855,12 @@ export default function RandomUnit({
           </SpottableComponent>
         ) : randomData?.shptmBanrTpNm == 'LIVE' || randomData?.shptmBanrTpNm == 'VOD' ? (
           <SpottableComponent
-            className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
+            className={classNames(
+              css.itemBox,
+              isHorizontal && css.isHorizontal,
+              // 포커스가 다른 곳으로 이동한 뒤 videoPlayIntentRef로 재생되어도 테두리 노출 억제
+              !isFocused && css.hideFocusRing
+            )}
             onClick={videoError === true ? videoErrorClick : videoClick}
             onFocus={handleFocus}
             onBlur={onBlur}

com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.module.less

@@ -269,6 +269,17 @@
   }
 }
 
+.hideFocusRing {
+  &:focus,
+  &:focus-within {
+    &::after {
+      content: none;
+      border: 0 !important;
+      box-shadow: none !important;
+    }
+  }
+}
+
 // .videoModal {
 //   &::after {
 //     .focused(@boxShadow:0, @borderRadius: 12px);
@@ -280,14 +291,14 @@
 //   }
 // }
 
+// 비디오 재생 모달 컨테이너에 강제 포커스 테두리 제거
 .videoModal {
-  // 포커스를 받았을 때만 붉은색 테두리 표시
-  &:focus-within::after {
-    .focused(@boxShadow:0, @borderRadius: 12px);
-    border: 6px solid @PRIMARY_COLOR_RED;
-    top: -4px;
-    right: -4px;
-    bottom: -4px;
-    left: -4px;
+  &:focus,
+  &:focus-within {
+    &::after {
+      content: none;
+      border: 0;
+      box-shadow: none;
+    }
   }
 }