[251217] fix: MediaPanelOverlayConents분리

🕐 커밋 시간: 2025. 12. 17. 17:24:13

📊 변경 통계:
  • 총 파일: 5개
  • 추가: +528줄
  • 삭제: -70줄

📁 추가된 파일:
  + com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/MediaOverlayContents.module.less

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.module.less
  ~ com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.module.less
  ~ com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.v3.module.less
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/MediaOverlayContents.jsx

🔧 주요 변경 내용:
  • UI 컴포넌트 아키텍처 개선
  • 대규모 기능 개발

com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.v3.module.less

@@ -1,19 +1,19 @@
 // VideoPlayer.module.less
 //
-@import "~@enact/sandstone/styles/variables.less";
+@import "~@enact/sandstone/styles/variables.less";
 @import "~@enact/sandstone/styles/mixins.less";
 @import "~@enact/sandstone/styles/skin.less";
 @import "../../style/utils.module.less";
 @import "../../style/CommonStyle.module.less";
-.fullscreen .videoPlayer,
-.videoPlayer {
-  // Set by counting the IconButtons inside the side components.
-  --liftDistance: 0px;
-
-  overflow: hidden;
-  padding: 2px;
-  margin: 0;
-  box-sizing: border-box;
+.fullscreen .videoPlayer,
+.videoPlayer {
+  // Set by counting the IconButtons inside the side components.
+  --liftDistance: 0px;
+
+  overflow: hidden;
+  padding: 2px;
+  margin: 0;
+  box-sizing: border-box;
 
   :focus {
     outline: none !important;
@@ -21,51 +21,51 @@
     box-shadow: none !important;
   }
 
-  &.fullscreen {
-    width: 100%;
-    height: 100%;
-  }
-
-  .video {
-    height: 100%;
-    width: 100%;
-    background: #000;
-    max-width: none;
-    max-height: none;
-  }
+  &.fullscreen {
+    width: 100%;
+    height: 100%;
+  }
 
-  .media {
-    height: var(--media-height, calc(100% - 4px));
-    width: var(--media-width, calc(100% - 4px));
-    background: #000;
-
-    &.mediaBackground {
-      &:after {
-        width: 560px;
-        height: 200px;
-        position: absolute;
-        left: 0;
-        bottom: 0;
-        content: "";
-        background: linear-gradient(
-          to top,
-          rgba(255, 255, 255, 1),
-          transparent
-        );
-        opacity: 0.2;
-      }
-    }
-  }
-
-  &.fullscreen {
-    --media-width: 100vw;
-    --media-height: 100vh;
-  }
-
-  .fullscreen .videoPlayer .media {
-    --media-width: 100vw;
-    --media-height: 100vh;
-  }
+  .video {
+    height: 100%;
+    width: 100%;
+    background: #000;
+    max-width: none;
+    max-height: none;
+  }
+
+  .media {
+    height: var(--media-height, calc(100% - 4px));
+    width: var(--media-width, calc(100% - 4px));
+    background: #000;
+
+    &.mediaBackground {
+      &:after {
+        width: 560px;
+        height: 200px;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        content: "";
+        background: linear-gradient(
+          to top,
+          rgba(255, 255, 255, 1),
+          transparent
+        );
+        opacity: 0.2;
+      }
+    }
+  }
+
+  &.fullscreen {
+    --media-width: 100vw;
+    --media-height: 100vh;
+  }
+
+  .fullscreen .videoPlayer .media {
+    --media-width: 100vw;
+    --media-height: 100vh;
+  }
 
   .preloadVideo {
     display: none;
@@ -613,11 +613,11 @@
     }
   }
 
-  .overlay {
-    .position(@position: absolute, @top: 0, @right: 0, @bottom: 0, @left: 0);
-    pointer-events: auto;
-    z-index: 10;
-  }
+  .overlay {
+    .position(@position: absolute, @top: 0, @right: 0, @bottom: 0, @left: 0);
+    pointer-events: auto;
+    z-index: 10;
+  }
   @keyframes spin {
     0% {
       transform: rotate(0.25turn);
@@ -741,11 +741,11 @@
     }
   }
 
-  .controlsHandleAbove {
-    pointer-events: none;
-    z-index: -1;
-    .position(@position: absolute, @top: 0, @right: 0, @bottom: auto, @left: 0);
-  }
+  .controlsHandleAbove {
+    pointer-events: none;
+    z-index: -1;
+    .position(@position: absolute, @top: 0, @right: 0, @bottom: auto, @left: 0);
+  }
 
   // Skin colors
   .applySkins({