From 942d926781eb13760c0f1a53637d1bd83d608d65 Mon Sep 17 00:00:00 2001
From: optrader <optrader8@gmail.com>
Date: Tue, 11 Nov 2025 12:13:58 +0900
Subject: [PATCH] [251111] feat: views - MediaPlayer.jsx, MediaPlayer.v2.jsx,
 ProductAll...
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🕐 커밋 시간: 2025. 11. 11. 12:13:55

📊 변경 통계:
  • 총 파일: 8개
  • 추가: +84줄
  • 삭제: -124줄

📁 추가된 파일:
  + com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.module.less

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.jsx
  ~ com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.v2.jsx
  ~ com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx
  ~ com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v2.jsx
  ~ com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.jsx
  ~ com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.module.less
  ~ com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/VoiceInputOverlay.jsx

🔧 주요 변경 내용:
  • UI 컴포넌트 아키텍처 개선
  • 소규모 기능 개선
  • 코드 정리 및 최적화
  • 모듈 구조 개선

Performance: 코드 최적화로 성능 개선 기대
---
 .../components/VideoPlayer/MediaPlayer.jsx    |   2 +-
 .../VideoPlayer/MediaPlayer.module.less       | 835 ++++++++++++++++++
 .../components/VideoPlayer/MediaPlayer.v2.jsx |  28 +-
 .../ProductAllSection/ProductAllSection.jsx   |   2 +-
 .../ProductVideo/ProductVideo.v2.jsx          | 170 ++--
 .../src/views/MediaPanel/MediaPanel.jsx       |   2 +-
 .../PlayerOverlayContents.module.less         |   2 +-
 .../VoiceInputOverlay/VoiceInputOverlay.jsx   |   2 +-
 8 files changed, 919 insertions(+), 124 deletions(-)
 create mode 100644 com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.module.less

diff --git a/com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.jsx b/com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.jsx
index 618358d6..70d691bc 100644
--- a/com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.jsx
+++ b/com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.jsx
@@ -59,7 +59,7 @@ import Media from './Media';
 import Overlay from './Overlay';
 import TReactPlayer from './TReactPlayer';
 import Video from './Video';
-import css from './VideoPlayer.module.less';
+import css from './MediaPlayer.module.less';
 
 const isEnter = is('enter');
 const isLeft = is('left');
diff --git a/com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.module.less b/com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.module.less
new file mode 100644
index 00000000..24e091a8
--- /dev/null
+++ b/com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.module.less
@@ -0,0 +1,835 @@
+// VideoPlayer.module.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";
+.videoPlayer {
+  // Set by counting the IconButtons inside the side components.
+  --liftDistance: 0px;
+
+  overflow: hidden;
+
+  .video {
+    height: 100%;
+    width: 100%;
+    background: #000;
+  }
+
+  .media {
+    height: 100%;
+    width: 100%;
+    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;
+      }
+    }
+  }
+
+  .preloadVideo {
+    display: none;
+  }
+
+  .thumbnail {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    > img {
+      width: 100%;
+      max-height: 100%;
+      border-radius: 12px;
+    }
+    &.noRadiusThumbnail {
+      > img {
+        border-radius: 0;
+      }
+    }
+    &.verticalThumbnail {
+      > img {
+        width: auto;
+        height: 100%;
+        border-radius: 0;
+      }
+    }
+    &.smallThumbnail {
+      &::after {
+        .focused(@boxShadow:0, @borderRadius: 12px);
+        border: 6px solid @PRIMARY_COLOR_RED;
+        top: -4px;
+        right: -4px;
+        bottom: -4px;
+        left: -4px;
+      }
+    }
+  }
+  .disclaimer {
+    .size(@w: 100% , @h: 54px);
+    display: flex;
+    background-color: rgba(0, 0, 0, 0.9);
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    align-items: center;
+    z-index: 1;
+    > span {
+      .size(@w: 18px , @h: 18px);
+      background-image: url("../../../assets/images/icons/ic-alert-20@3x.png");
+      background-position: center;
+      background-size: cover;
+      margin: 0 12px 0 20px;
+    }
+    > h3 {
+      .size(@w: 100% , @h: 54px);
+      color: #ffffff;
+      font-size: 20px;
+      line-height: 54px;
+      .elip(@clamp:1);
+      .marquee {
+        width: 100%;
+        transition: opacity 0.5s ease-in-out;
+      }
+    }
+  }
+  .videoOverlayWithPhoneNumberFull {
+    bottom: 59px;
+    left: 141px;
+  }
+  .videoOverlayWithPhoneNumber {
+    display: none;
+    &.ru {
+      display: flex;
+
+      width: 22%;
+      height: 12.5%;
+      bottom: 6.5% !important;
+      left: 48% !important;
+      padding: 4px !important;
+      margin-bottom: 0 !important;
+      > div:first-child {
+        font-size: 12px;
+        line-height: 12px;
+      }
+      > div:last-child {
+        margin-top: 0;
+        display: flex;
+        align-items: center;
+        > img {
+          width: 14px;
+          height: 14px;
+        }
+        > span {
+          font-size: 18px;
+          line-height: 18px;
+          height: auto;
+          width: auto;
+        }
+      }
+    }
+
+    &.us {
+      &.vertical {
+        width: 105px;
+        height: 66px;
+        bottom: 225px !important;
+        left: -96px !important;
+      }
+      &.horizontal {
+        > div:first-child {
+          font-size: 12px;
+          line-height: 1;
+        }
+        > div:last-child {
+          display: flex;
+          align-items: center;
+          > img {
+            width: 14px;
+            height: 14px;
+          }
+          > span {
+            font-size: 16px;
+            height: auto;
+            width: auto;
+          }
+        }
+        &.qvc {
+          display: flex;
+          width: 18%;
+          height: 22%;
+          padding: 1%;
+          bottom: 4% !important;
+          left: 4.5% !important;
+          > div:first-child {
+            font-size: 48%;
+          }
+          > div:last-child {
+            > img {
+              width: 12px;
+              height: 12px;
+            }
+            > span {
+              font-size: 48%;
+            }
+          }
+        }
+        &.hsn {
+          display: flex;
+          width: 18.5%;
+          height: 22%;
+          padding: 1%;
+          bottom: 4% !important;
+          left: 7% !important;
+          > div:first-child {
+            font-size: 48%;
+          }
+          > div:last-child {
+            > img {
+              width: 12px;
+              height: 12px;
+            }
+            > span {
+              font-size: 48%;
+            }
+          }
+        }
+        &.verticalModal {
+          > div:last-child {
+            > img {
+              width: 20px;
+              height: 20px;
+            }
+            > span {
+              font-size: 20px;
+            }
+          }
+        }
+      }
+    }
+    > img {
+      width: 102px;
+      height: 35px;
+    }
+
+    div > img {
+      width: 34px;
+      height: 34px;
+    }
+  }
+
+  .videoOverlayMedia {
+    bottom: 24% !important;
+    left: 7% !important;
+    &.callToOrderHide {
+      display: none !important;
+    }
+    &.qvc {
+      display: flex;
+      width: 23%;
+      height: 15%;
+      padding: 30px 5px;
+      > div:first-child {
+        flex: none;
+        font-size: 13px !important;
+        line-height: 13px !important;
+        padding: 3px 5px;
+      }
+      > div:last-child {
+        display: flex;
+        flex: none;
+        align-items: center;
+        height: 4px;
+        > img {
+          flex: none;
+          width: 13px;
+          height: 13px;
+        }
+        > span {
+          flex: none;
+          font-size: 15px;
+          height: auto;
+          width: auto;
+        }
+      }
+    }
+    &.hsn {
+      display: flex;
+      width: 23%;
+      height: 15%;
+      padding: 30px 5px;
+      > div:first-child {
+        flex: none;
+        font-size: 13px !important;
+        line-height: 13px !important;
+        padding: 3px 5px;
+      }
+      > div:last-child {
+        display: flex;
+        flex: none;
+        align-items: center;
+        height: 4px;
+        > img {
+          flex: none;
+          width: 13px;
+          height: 13px;
+        }
+        > span {
+          flex: none;
+          font-size: 15px;
+          height: auto;
+          width: auto;
+        }
+      }
+    }
+  }
+
+  .loaderWrap {
+    height: 100%;
+    > div {
+      width: 220px;
+      height: 220px;
+      position: relative;
+      overflow: hidden;
+      left: calc(50% - 110px);
+      top: calc(50% - 110px);
+      background-color: transparent;
+      > div {
+        > div {
+          -webkit-animation: mulShdSpinWhite 1.2s infinite ease !important;
+          animation: mulShdSpinWhite 1.2s infinite ease !important;
+        }
+      }
+    }
+  }
+  @-webkit-keyframes mulShdSpinWhite {
+    0%,
+    100% {
+      -webkit-box-shadow: 0em -2.6em 0em 0em #fff,
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.5),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
+      box-shadow: 0em -2.6em 0em 0em #fff,
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.5),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
+    }
+    12.5% {
+      -webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7),
+        1.8em -1.8em 0 0em #fff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
+      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7),
+        1.8em -1.8em 0 0em #fff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
+    }
+    25% {
+      -webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #fff,
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #fff,
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+    }
+    37.5% {
+      -webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #fff,
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #fff,
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+    }
+    50% {
+      -webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.5),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #fff,
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.5),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #fff,
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+    }
+    62.5% {
+      -webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #fff,
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #fff,
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+    }
+    75% {
+      -webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.5),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #fff,
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.5),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #fff,
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+    }
+    87.5% {
+      -webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #fff;
+      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #fff;
+    }
+  }
+
+  @keyframes mulShdSpinWhite {
+    0%,
+    100% {
+      -webkit-box-shadow: 0em -2.6em 0em 0em #fff,
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.5),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
+      box-shadow: 0em -2.6em 0em 0em #fff,
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.5),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
+    }
+    12.5% {
+      -webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7),
+        1.8em -1.8em 0 0em #fff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
+      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7),
+        1.8em -1.8em 0 0em #fff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
+    }
+    25% {
+      -webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #fff,
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #fff,
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+    }
+    37.5% {
+      -webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #fff,
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #fff,
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+    }
+    50% {
+      -webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.5),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #fff,
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.5),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #fff,
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+    }
+    62.5% {
+      -webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #fff,
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #fff,
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+    }
+    75% {
+      -webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.5),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #fff,
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.5),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #fff,
+        -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
+    }
+    87.5% {
+      -webkit-box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #fff;
+      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
+        1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
+        2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
+        1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
+        0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
+        -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
+        -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #fff;
+    }
+  }
+
+  .overlay {
+    .position(@position: absolute, @top: 0, @right: 0, @bottom: 0, @left: 0);
+  }
+  @keyframes spin {
+    0% {
+      transform: rotate(0.25turn);
+    }
+    33% {
+      transform: rotate(0.5turn);
+    }
+    80% {
+      transform: rotate(0.95turn);
+    }
+    85% {
+      transform: rotate(1turn);
+    }
+    100% {
+      transform: rotate(1.25turn);
+    }
+  }
+  .spinner {
+    background-image: url("../../../assets/images/player/icon_loading.png");
+    width: 100px;
+    height: 100px;
+    position: relative;
+    background-size: cover;
+    border-radius: 20.8125rem;
+    overflow: hidden;
+    // margin: 490px auto;
+    left: calc(50% - 50px);
+    top: calc(50% - 50px);
+    animation: none 1.25s linear infinite;
+    animation-name: spin;
+    // animation-play-state: paused;
+  }
+  .controlFeedbackBtnLayer {
+    position: absolute;
+    z-index: 50;
+    top: 0;
+    left: 0;
+    padding: 0;
+    width: 100%;
+    height: 94px;
+    display: flex;
+    justify-content: space-between;
+    &.lift {
+      transform: translateY(~"calc(var(--liftDistance) * -1)");
+      transition: transform 0.3s linear;
+    }
+  }
+  .fullscreen {
+    .miniFeedback {
+      position: absolute;
+      z-index: 50;
+      top: 506px;
+      left: 0;
+      padding: 0;
+      width: 100%;
+      height: 94px;
+      -webkit-margin-end: 0px;
+      pointer-events: none;
+    }
+    &.liveFullScreen {
+      .bottom {
+        bottom: 78px;
+      }
+    }
+    .bottom {
+      position: absolute;
+      z-index: 3; // Value assigned as part of the VideoPlayer API so layers may be inserted in-between
+      bottom: 70px;
+      // bottom: 78px;
+      // bottom: -18px;
+      left: 0;
+      right: 0;
+      height: 70px;
+      // left: @sand-video-player-padding-side;
+      // right: @sand-video-player-padding-side;
+
+      &.videoVerticalBottom {
+        height: 54px;
+      }
+      &.lift {
+        transform: translateY(~"calc(var(--liftDistance) * -1)");
+        transition: transform 0.3s linear;
+      }
+
+      &.hidden {
+        pointer-events: none;
+
+        .sliderContainer {
+          position: absolute;
+          left: 0;
+          right: 0;
+        }
+      }
+
+      .infoFrame {
+        display: flex;
+        margin-left: 64px;
+      }
+
+      .sliderContainer {
+        // display: flex;
+        position: relative;
+        align-items: center;
+        margin-left: 60px;
+        margin-right: 59px;
+        height: 70px;
+        bottom: -20px;
+        > *:first-child {
+          text-align: right;
+        }
+
+        .enact-locale-rtl({
+					direction: ltr;
+				});
+
+        &.videoVertical {
+          margin-left: 680px;
+          margin-right: 673px;
+        }
+      }
+    }
+  }
+
+  .controlsHandleAbove {
+    pointer-events: none;
+    .position(@position: absolute, @top: 0, @right: 0, @bottom: auto, @left: 0);
+  }
+
+  // Skin colors
+  .applySkins({
+		.fullscreen {
+			.bottom {
+				background-color: @sand-video-player-bottom-bg-color;
+
+				.infoFrame {
+					text-shadow: @sand-video-player-title-text-shadow;
+				}
+			}
+		}
+
+		.overlay {
+			z-index: 2;
+
+      &.scrim::before,
+      &.scrim::after {
+        width: 100%; //1920px;
+        height: 50%;
+        position: absolute;
+        left: 0;
+        content: "";
+        z-index: 4;
+      }
+      &.scrim::before {
+        bottom: 0;
+        background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, transparent 50%);
+      }
+      &.scrim::after {
+        top: 0;
+        background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, transparent 50%);
+      }
+
+			// &.scrim::after {
+			// 	background: @sand-video-player-scrim-gradient-color
+			// }
+		}
+	});
+}
+
+// ========== MediaPlayer.v2 Controls ==========
+.controlsContainer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 20px 40px 30px;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 60%, transparent 100%);
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.sliderContainer {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+}
+
+.times {
+  min-width: 80px;
+  text-align: center;
+}
+
+.controlsButtons {
+  display: flex;
+  gap: 20px;
+  justify-content: center;
+  align-items: center;
+}
+
+.playPauseBtn {
+  width: 60px;
+  height: 60px;
+  font-size: 24px;
+  background: rgba(255, 255, 255, 0.2);
+  border: 2px solid rgba(255, 255, 255, 0.6);
+  border-radius: 50%;
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.3);
+    border-color: white;
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+}
+
+.backBtn {
+  padding: 12px 24px;
+  font-size: 18px;
+  background: rgba(255, 255, 255, 0.2);
+  border: 2px solid rgba(255, 255, 255, 0.6);
+  border-radius: 8px;
+  color: white;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.3);
+    border-color: white;
+  }
+
+  &:active {
+    transform: scale(0.98);
+  }
+}
diff --git a/com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.v2.jsx b/com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.v2.jsx
index 8cdffe7b..9315d97f 100644
--- a/com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.v2.jsx
+++ b/com.twin.app.shoptime/src/components/VideoPlayer/MediaPlayer.v2.jsx
@@ -27,7 +27,7 @@ import Overlay from './Overlay';
 import Media from './Media';
 import TReactPlayer from './TReactPlayer';
 
-import css from './VideoPlayer.module.less';
+import css from './MediaPlayer.module.less';
 
 const SpottableDiv = Touchable(Spottable('div'));
 const RootContainer = SpotlightContainerDecorator(
@@ -203,7 +203,7 @@ const MediaPlayerV2 = forwardRef((props, ref) => {
         const bufferedEnd = video.buffered.end(video.buffered.length - 1);
         const loaded = bufferedEnd / video.duration;
         setProportionLoaded(loaded);
-      } catch (error) {
+      } catch (err) {
         // buffered.end() can throw if index is out of range
         setProportionLoaded(0);
       }
@@ -294,7 +294,7 @@ const MediaPlayerV2 = forwardRef((props, ref) => {
     }
   }, [controlsVisible, hideControls, showControls]);
 
-  // ========== Playback Control Methods ==========
+  // ========== Playback Control ==========
   const play = useCallback(() => {
     if (videoRef.current && !sourceUnavailable) {
       videoRef.current.play();
@@ -359,17 +359,21 @@ const MediaPlayerV2 = forwardRef((props, ref) => {
     // 기본 동작은 MediaSlider 내부에서 처리
   }, []);
 
-  // ========== Video Click Handler (Modal 전환) ==========
+  // ========== Video Click Handler ==========
   const handleVideoClick = useCallback(() => {
-    if (isModal && onClick) {
-      // Modal 모드에서 클릭 → Fullscreen 전환
-      onClick();
+    // modal 상태일 때는 아무 동작도 하지 않음 (오버레이 표시 안 함)
+    if (isModal) {
       return;
     }
 
-    // Fullscreen 모드에서 클릭 → Controls 토글
+    // modal이 아닐 때만 컨트롤 토글
     toggleControls();
-  }, [isModal, onClick, toggleControls]);
+
+    // 외부에서 전달된 onClick 콜백 호출
+    if (onClick) {
+      onClick();
+    }
+  }, [isModal, toggleControls, onClick]);
 
   // ========== Modal isPaused 동기화 ==========
   useEffect(() => {
@@ -390,11 +394,11 @@ const MediaPlayerV2 = forwardRef((props, ref) => {
       if (videoRef.current?.paused) {
         play();
       }
-      // Fullscreen 전환 시 controls를 10초로 연장 표시
-      showControls(10000);
+      // Fullscreen 전환 시 controls를 자동으로 표시하지 않음
+      // 사용자가 클릭할 때만 표시됨
     }
     prevModalRef.current = isModal;
-  }, [isModal, play, showControls]);
+  }, [isModal, play]);
 
   // ========== proportionLoaded 주기적 업데이트 ==========
   // TReactPlayer의 경우 buffered가 계속 변경되므로 주기적 체크 필요
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx
index 2447300b..39af927f 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductAllSection/ProductAllSection.jsx
@@ -174,7 +174,7 @@ export default function ProductAllSection({
   const youmaylikeData = useSelector((state) => state.main.youmaylikeData);
 
   // ProductVideo 버전 관리 (1: 기존 modal 방식, 2: 내장 방식 , 3: 비디오 생략)
-  const [productVideoVersion, setProductVideoVersion] = useState(3);
+  const [productVideoVersion, setProductVideoVersion] = useState(2);
 
   // const [currentHeight, setCurrentHeight] = useState(0);
   //하단부분까지 갔을때 체크용
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v2.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v2.jsx
index 030476d1..86f1511a 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v2.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v2.jsx
@@ -68,11 +68,10 @@ export default function ProductVideoV2({
   const autoPlayTimerRef = useRef(null);
   const containerRef = useRef(null);
 
-  // VideoPlayer DOM 이동을 위한 refs
+  // VideoPlayer refs
   const videoPlayerWrapperRef = useRef(null);
   const normalContainerRef = useRef(null);
   const fullscreenContainerRef = useRef(null);
-  const initialRenderContainerRef = useRef(null); // React가 처음 렌더링하는 위치
 
   // 비디오 재생 가능 여부 체크
   const canPlayVideo = useMemo(() => {
@@ -316,42 +315,6 @@ export default function ProductVideoV2({
     };
   }, [autoPlay, canPlayVideo, isPlaying, dispatch]);
 
-  // VideoPlayer wrapper를 적절한 container로 이동
-  useEffect(() => {
-    if (!isPlaying) return;
-
-    const wrapper = videoPlayerWrapperRef.current;
-    const normalContainer = normalContainerRef.current;
-    const fullscreenContainer = fullscreenContainerRef.current;
-
-    if (!wrapper || !normalContainer || !fullscreenContainer) {
-      console.warn('[ProductVideoV2] Refs not ready:', {
-        wrapper: !!wrapper,
-        normalContainer: !!normalContainer,
-        fullscreenContainer: !!fullscreenContainer,
-      });
-      return;
-    }
-
-    // 처음 재생 시작 시: 임시 컨테이너에서 적절한 위치로 이동
-    // 이후 전환 시: 컨테이너 간 이동
-    if (isFullscreen) {
-      // 전체화면: wrapper를 fullscreen container로 이동
-      if (wrapper.parentElement !== fullscreenContainer) {
-        fullscreenContainer.appendChild(wrapper);
-        fullscreenContainer.style.display = 'block';
-        console.log('[ProductVideoV2] Moved to fullscreen');
-      }
-    } else {
-      // 일반 모드: wrapper를 normal container로 이동
-      if (wrapper.parentElement !== normalContainer) {
-        normalContainer.appendChild(wrapper);
-        fullscreenContainer.style.display = 'none';
-        console.log('[ProductVideoV2] Moved to normal');
-      }
-    }
-  }, [isFullscreen, isPlaying]);
-
   // 컴포넌트 언마운트 시 Redux 상태 정리 및 백그라운드 비디오 재생 재개
   useEffect(() => {
     return () => {
@@ -396,54 +359,58 @@ export default function ProductVideoV2({
         }
       : {};
 
-  // VideoPlayer 컴포넌트 (한 번만 생성, DOM 이동으로 위치 변경)
-  const videoPlayerElement = isPlaying ? (
-    <div
-      ref={videoPlayerWrapperRef}
-      className={`${css.videoPlayerWrapper} ${isFullscreen ? css.fullscreenPlayer : ''}`}
-      onMouseMove={handleUserActivity}
-      onTouchMove={handleUserActivity}
-      onWheel={handleUserActivity}
-    >
-      <VideoPlayer
-        setApiProvider={getPlayer}
-        disabled={false}
-        onEnded={handleVideoEnded}
-        onBackButton={handleBackButton}
-        noAutoPlay={false}
-        autoCloseTimeout={5000}
-        spotlightDisabled={!isFullscreen}
-        isYoutube={isYoutube}
-        src={productInfo?.prdtMediaUrl}
-        reactPlayerConfig={reactPlayerSubtitleConfig}
-        thumbnailUrl={thumbnailUrl}
-        title={productInfo?.prdtNm}
-        videoComponent={
-          (typeof window === 'object' && !window.PalmSystem) || isYoutube ? TReactPlayer : Media
-        }
-        type="MEDIA"
-        panelInfo={{ modal: false }}
-        captionEnable={false}
-        setIsSubtitleActive={setIsSubtitleActive}
-        setCurrentTime={setCurrentTime}
-        setIsVODPaused={setIsVODPaused}
-        playListInfo={[]}
-        selectedIndex={0}
-        videoVerticalVisible={false}
-        sideContentsVisible={false}
-        setSideContentsVisible={setSideContentsVisible}
-        handleIndicatorDownClick={handleIndicatorDownClick}
-        handleIndicatorUpClick={handleIndicatorUpClick}
+  // VideoPlayer 컴포넌트 생성 함수
+  const renderVideoPlayer = () => {
+    if (!isPlaying) return null;
+
+    return (
+      <div
+        ref={videoPlayerWrapperRef}
+        className={`${css.videoPlayerWrapper} ${isFullscreen ? css.fullscreenPlayer : ''}`}
+        onMouseMove={handleUserActivity}
+        onTouchMove={handleUserActivity}
+        onWheel={handleUserActivity}
       >
-        {typeof window === 'object' && window.PalmSystem && (
-          <source src={productInfo?.prdtMediaUrl} type={videoType} />
-        )}
-        {productInfo?.prdtMediaSubtitlUrl && typeof window === 'object' && window.PalmSystem && (
-          <track kind="subtitles" src={productInfo?.prdtMediaSubtitlUrl} default />
-        )}
-      </VideoPlayer>
-    </div>
-  ) : null;
+        <VideoPlayer
+          setApiProvider={getPlayer}
+          disabled={false}
+          onEnded={handleVideoEnded}
+          onBackButton={handleBackButton}
+          noAutoPlay={false}
+          autoCloseTimeout={5000}
+          spotlightDisabled={!isFullscreen}
+          isYoutube={isYoutube}
+          src={productInfo?.prdtMediaUrl}
+          reactPlayerConfig={reactPlayerSubtitleConfig}
+          thumbnailUrl={thumbnailUrl}
+          title={productInfo?.prdtNm}
+          videoComponent={
+            (typeof window === 'object' && !window.PalmSystem) || isYoutube ? TReactPlayer : Media
+          }
+          type="MEDIA"
+          panelInfo={{ modal: false }}
+          captionEnable={false}
+          setIsSubtitleActive={setIsSubtitleActive}
+          setCurrentTime={setCurrentTime}
+          setIsVODPaused={setIsVODPaused}
+          playListInfo={[]}
+          selectedIndex={0}
+          videoVerticalVisible={false}
+          sideContentsVisible={false}
+          setSideContentsVisible={setSideContentsVisible}
+          handleIndicatorDownClick={handleIndicatorDownClick}
+          handleIndicatorUpClick={handleIndicatorUpClick}
+        >
+          {typeof window === 'object' && window.PalmSystem && (
+            <source src={productInfo?.prdtMediaUrl} type={videoType} />
+          )}
+          {productInfo?.prdtMediaSubtitlUrl && typeof window === 'object' && window.PalmSystem && (
+            <track kind="subtitles" src={productInfo?.prdtMediaSubtitlUrl} default />
+          )}
+        </VideoPlayer>
+      </div>
+    );
+  };
 
   return (
     <>
@@ -474,14 +441,16 @@ export default function ProductVideoV2({
               </div>
             </div>
           </SpottableComponent>
-        ) : (
-          // 일반 재생 모드: VideoPlayer가 여기에 초기 렌더링됨
-          <div ref={normalContainerRef} className={css.normalPlayerContainer} />
-        )}
+        ) : !isFullscreen ? (
+          // 일반 재생 모드: VideoPlayer를 직접 렌더링
+          <div ref={normalContainerRef} className={css.normalPlayerContainer}>
+            {renderVideoPlayer()}
+          </div>
+        ) : null}
       </ContainerComponent>
 
-      {/* 전체화면 container (Portal, 항상 body에 존재) */}
-      {ReactDOM.createPortal(
+      {/* 전체화면 container (Portal) */}
+      {isPlaying && isFullscreen && ReactDOM.createPortal(
         <SpotlightContainer
           spotlightRestrict="self-only"
           spotlightId="product-video-v2-fullscreen-portal"
@@ -489,25 +458,12 @@ export default function ProductVideoV2({
           <div
             ref={fullscreenContainerRef}
             className={css.fullscreenContainer}
-            style={{ display: 'none' }}
-          />
+          >
+            {renderVideoPlayer()}
+          </div>
         </SpotlightContainer>,
         document.body
       )}
-
-      {/* 임시 렌더링 컨테이너 - React가 여기에 VideoPlayer 렌더링, useEffect가 실제 위치로 이동 */}
-      <div
-        ref={initialRenderContainerRef}
-        style={{
-          position: 'absolute',
-          top: -9999,
-          left: -9999,
-          visibility: 'hidden',
-          pointerEvents: 'none',
-        }}
-      >
-        {videoPlayerElement}
-      </div>
     </>
   );
 }
diff --git a/com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.jsx b/com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.jsx
index ee51ff87..11fb634f 100644
--- a/com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.jsx
+++ b/com.twin.app.shoptime/src/views/MediaPanel/MediaPanel.jsx
@@ -16,7 +16,7 @@ import * as PanelActions from '../../actions/panelActions';
 import TPanel from '../../components/TPanel/TPanel';
 import Media from '../../components/VideoPlayer/Media';
 import TReactPlayer from '../../components/VideoPlayer/TReactPlayer';
-import { VideoPlayer } from '../../components/VideoPlayer/MediaPlayer';
+import { VideoPlayer } from '../../components/VideoPlayer/MediaPlayer.v2';
 import usePrevious from '../../hooks/usePrevious';
 import { panel_names } from '../../utils/Config';
 import css from './MediaPanel.module.less';
diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.module.less b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.module.less
index 2f2a97e6..12462c2e 100644
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.module.less
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayContents.module.less
@@ -73,7 +73,7 @@
       .size(@w: 60px, @h: 60px);
       background-size: 60px 60px;
       background-repeat: no-repeat;
-      background-image: url("../../../../assets/images/btn/btn-60-wh-back-nor@3x.png");
+      background-image: url("../../../../assets/images/btn/btn-60-wh-back-nor@3x.png");      
 
       &:focus {
         background-image: url("../../../../assets/images/btn/btn-60-wh-back-foc@3x.png");
diff --git a/com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/VoiceInputOverlay.jsx b/com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/VoiceInputOverlay.jsx
index c04658bd..a80868ac 100644
--- a/com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/VoiceInputOverlay.jsx
+++ b/com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/VoiceInputOverlay.jsx
@@ -147,7 +147,7 @@ const VoiceInputOverlay = ({
   isVoiceResultMode = false,
   externalResponseText = '',
   isExternalBubbleSearch = false,
-  shopperHouseData = null, // 🎯 [포커스 충돌 해결] 음성 검색 결과 데이터
+  externalShopperHouseData = null, // 🎯 [포커스 충돌 해결] 외부 음성 검색 결과 데이터
 }) => {
   if (DEBUG_MODE) {
     console.log('🔄 [DEBUG] VoiceInputOverlay render - isVisible:', isVisible, 'mode:', mode);