[251009] style: components - DetailPanelBackground.jsx, PlayerPanel.module.l...

🕐 커밋 시간: 2025. 10. 09. 19:28:53

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

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

🔧 주요 변경 내용:
  • UI 컴포넌트 아키텍처 개선

com.twin.app.shoptime/src/views/DetailPanel/components/DetailPanelBackground/DetailPanelBackground.jsx

@@ -15,22 +15,22 @@ export default function DetailPanelBackground() {
   return (
     <div className={css.backgroundContainer}>
       {/* 실제 배경 이미지 */}
-      <img 
+      {/* <img 
         src={detailPanelBg} 
         alt="" 
         className={css.backgroundImage}
         aria-hidden="true"
         onLoad={() => console.log('[DetailPanelBackground] 이미지 로드 완료')}
         onError={(e) => console.error('[DetailPanelBackground] 이미지 로드 실패:', e)}
-      />
-      
+      /> */}
+
       {/* 그라데이션 레이어들 - CSS의 linear-gradient를 div로 구현 */}
       {/* 1. 270도 방향 그라데이션 (왼쪽→오른쪽, 투명→불투명) */}
       <div className={css.gradientLayer1} aria-hidden="true" />
-      
+
       {/* 2. 180도 방향 그라데이션 (위→아래, 투명→불투명) */}
       <div className={css.gradientLayer2} aria-hidden="true" />
-      
+
       {/* 3. 투명 그라데이션 */}
       <div className={css.gradientLayer3} aria-hidden="true" />
     </div>

com.twin.app.shoptime/src/views/PlayerPanel/PlayerPanel.module.less

@@ -56,6 +56,7 @@
     }
   }
   &.modal,
+  &.modal-minimized,
   &.background {
     width: 1px;
     height: 1px;
@@ -71,6 +72,21 @@
       display: none;
     }
   }
+  &.background-visible {
+    width: 1920px;
+    height: 1080px;
+    left: -1px;
+    top: -1px;
+    pointer-events: none;
+    z-index: 1;
+    background-color: @videoBackgroundColor;
+    overflow: visible;
+    .tabContainer,
+    .arrow,
+    .toOpenBtn {
+      display: none;
+    }
+  }
   &.hideSubtitle {
     video::cue {
       visibility: hidden;