From 8a882c28ca6f33fe32437b12cbea567bec43c288 Mon Sep 17 00:00:00 2001
From: "junghoon86.park" <junghoon86.park@lgepartner.com>
Date: Tue, 16 Dec 2025 16:27:49 +0900
Subject: [PATCH] =?UTF-8?q?[=EC=98=81=EC=83=81=20=EB=85=B8=EC=B6=9C?=
 =?UTF-8?q?=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EB=B6=80=EB=B6=84=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

 - 영상 상하 블랙라인 관련 하여 스타일 수정
 - discimir부분 노출관련하여 처리.
---
 .../ProductVideo/ProductVideo.module.less     | 57 +++++++++----------
 .../ProductVideo/ProductVideo.v3.jsx          | 14 +++--
 2 files changed, 35 insertions(+), 36 deletions(-)

diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.module.less b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.module.less
index cae695b5..32508410 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.module.less
@@ -5,11 +5,10 @@
   position: relative;
   width: 1114px; // ProductDetail과 동일한 고정 크기
   max-width: 1114px;
-  height: 740px; // ProductDetail과 동일한 고정 높이
-  margin-bottom: 30px; // ProductDetail과 동일한 간격
+  height: 632px !important; // ProductDetail과 동일한 고정 높이  
   cursor: pointer;
   background-color: rgba(0, 0, 0, 1);
-  border-radius: 12px;
+  border-radius: 12px 12px 0 0;
   box-sizing: border-box;
   padding: 6px; // 포커스 테두리를 위한 공간
   overflow: hidden;
@@ -80,7 +79,7 @@
       z-index: 23; // MediaPanel(z-index: 22)보다 위에 표시되어야 비디오 재생 중에도 포커스 테두리가 보임
       border: 6px solid @PRIMARY_COLOR_RED;
       box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
-      border-radius: 12px;
+      border-radius: 12px 12px 0px 0px;
       content: "";
     }
 
@@ -217,30 +216,28 @@
 }
 
 .notice {
+  width: calc(100% - 10px);
+  height: 54px;
+  background: #000000;
+  .flex(@justifyCenter:flex-start);
+  padding: 6px 18px 18px 18px;    
+  border-radius: 0 0 12px 12px;
+  margin-bottom: 30px; // ProductDetail과 동일한 간격
+  .marquee {
     width: 100%;
-    height: 54px;
-    background: #000000;
-    .flex(@justifyCenter:flex-start);
-    padding: 6px 18px 18px 18px;
-    position: absolute;
-    bottom: 0;
-    border-radius: 0 0 12px 12px;
-
-    .marquee {
-      width: 100%;
-      height: 100%;
-    }
-    img {
-      width: 18px;
-      height: 18px;
-      margin: 10px 12px 0 0;
-      object-fit: contain;
-    }
-    span {
-      line-height: normal;
-      letter-spacing: normal;
-      text-align: left;
-      .font(@fontFamily:@baseFont, @fontSize:20px);
-      color: @COLOR_GRAY04;
-    }
-  }
\ No newline at end of file
+    height: 100%;
+  }
+  img {
+    width: 18px;
+    height: 18px;
+    margin: 10px 12px 0 0;
+    object-fit: contain;
+  }
+  span {
+    line-height: normal;
+    letter-spacing: normal;
+    text-align: left;
+    .font(@fontFamily:@baseFont, @fontSize:20px);
+    color: @COLOR_GRAY04;
+  }
+}
\ No newline at end of file
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v3.jsx b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v3.jsx
index 63a2d48a..fe0f5671 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v3.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/ProductContentSection/ProductVideo/ProductVideo.v3.jsx
@@ -311,6 +311,7 @@ export default function ProductVideo({
   if (!canPlayVideo) return null;
 
   return (
+  <>
     <SpottableComponent
       className={css.videoContainer}
       onClick={handleVideoClick}
@@ -330,12 +331,13 @@ export default function ProductVideo({
           <img src={playImg} alt="재생" />
         </div>
       </div>
-      <div className={css.notice}>
-        <Marquee className={css.marquee} marqueeOn="render">
-          <img src={ic_warning} alt={disclaimer} />
-          <span>{disclaimer}</span>
-        </Marquee>
-      </div>
     </SpottableComponent>
+    <div className={css.notice}>
+      <Marquee className={css.marquee} marqueeOn="render">
+        <img src={ic_warning} alt={disclaimer} />
+        <span>{disclaimer}</span>
+      </Marquee>
+    </div>
+  </>
   );
 }