[251115] fix: MediaPanel.v3.jsx 비디오재생-2

🕐 커밋 시간: 2025. 11. 15. 12:43:36

📊 변경 통계:
  • 총 파일: 3개
  • 추가: +35줄
  • 삭제: -1줄

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.module.less
  ~ com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.module.less
  ~ com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.v3.jsx

🔧 함수 변경 내용:
  📄 com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.v3.jsx (javascript):
    🔄 Modified: normalizeModalStyle()

com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.module.less

@@ -489,6 +489,10 @@
   align-items: center !important;
   justify-content: center !important;
   cursor: default !important;
+  user-select: none !important;
+  -webkit-user-select: none !important;
+  caret-color: transparent !important;
+
   &.shopByMobileOne {
     margin: 0 6px 0 0;
   }
@@ -500,11 +504,27 @@
     font-weight: 400 !important;
     line-height: 35px !important;
     text-align: center !important;
+    user-select: none !important;
+    -webkit-user-select: none !important;
+    pointer-events: none !important;
+    caret-color: transparent !important;
+  }
+
+  // Marquee와 내부 요소들의 커서 숨김
+  .marquee,
+  .marquee > div,
+  .marquee > div > div,
+  .text {
+    user-select: none !important;
+    -webkit-user-select: none !important;
+    caret-color: transparent !important;
+    cursor: default !important;
   }
 
   // 포커스 상태 추가
   &:focus {
     background: @PRIMARY_COLOR_RED !important;
+    outline: none !important;
     // outline: 2px solid @PRIMARY_COLOR_RED !important;
 
     .shopByMobileText {

com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.module.less

@@ -13,6 +13,9 @@
   box-sizing: border-box;
   padding: 6px; // 포커스 테두리를 위한 공간
   overflow: hidden;
+  user-select: none !important;
+  -webkit-user-select: none !important;
+  caret-color: transparent !important;
   .videoThumbnailWrapper {
     position: relative;
     // width: 658px;
@@ -24,6 +27,9 @@
     justify-content: center;
     margin: auto;
     overflow: hidden;
+    user-select: none !important;
+    -webkit-user-select: none !important;
+    caret-color: transparent !important;
     .videoThumbnail {
       width: 100%;
       margin: 0;
@@ -34,6 +40,9 @@
       background-color: @COLOR_WHITE;
       border-radius: 8px;
       transition: all 0.2s ease;
+      user-select: none !important;
+      -webkit-user-select: none !important;
+      caret-color: transparent !important;
     }
 
     .playButtonOverlay {
@@ -43,11 +52,16 @@
       transform: translate(-50%, -50%);
       z-index: 2;
       transition: opacity 0.3s ease;
+      user-select: none !important;
+      -webkit-user-select: none !important;
+      caret-color: transparent !important;
 
       img {
         width: 80px;
         height: 80px;
         filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
+        user-select: none !important;
+        -webkit-user-select: none !important;
       }
     }
   }

com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.v3.jsx

@@ -231,7 +231,7 @@ const MediaPanel = React.forwardRef(
       panelInfo.shptmBanrTpNm === 'LIVE' ? null : 0
     );
     const [isUpdate, setIsUpdate] = USE_STATE('isUpdate', false);
-    const [isSubtitleActive, setIsSubtitleActive] = USE_STATE('isSubtitleActive', true);
+    const [isSubtitleActive, setIsSubtitleActive] = USE_STATE('isSubtitleActive', false);
     const [logStatus, setLogStatus] = USE_STATE('logStatus', {
       isModalLiveLogReady: false,
       isFullLiveLogReady: false,