From 66b174258b431a3d703693a6d0a11a1473b2217f Mon Sep 17 00:00:00 2001
From: "junghoon86.park" <junghoon86.park@lgepartner.com>
Date: Wed, 24 Jul 2024 15:56:22 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B9=84=EB=94=94=EC=98=A4=20disclaimer?=
 =?UTF-8?q?=EB=B6=80=EB=B6=84=20=EC=88=98=EC=A0=95=EA=B1=B4.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/VideoPlayer/VideoPlayer.js |  7 ++-
 .../VideoPlayer/VideoPlayer.module.less       | 51 +++++++++----------
 2 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js b/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js
index b51494dd..1e394f86 100644
--- a/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js
+++ b/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.js
@@ -56,6 +56,7 @@ import { FloatingLayerDecorator } from '@enact/ui/FloatingLayer';
 import {
   FloatingLayerContext,
 } from '@enact/ui/FloatingLayer/FloatingLayerDecorator';
+import Marquee from '@enact/ui/Marquee';
 import Slottable from '@enact/ui/Slottable';
 import Touchable from '@enact/ui/Touchable';
 
@@ -2285,7 +2286,11 @@ const VideoPlayerBase = class extends React.Component {
           <>
             <div className={css.disclaimer}>
               <span className={css.icon} />
-              <h3 aria-label={disclaimer}>{disclaimer}</h3>
+              <h3 aria-label={disclaimer}>
+                <Marquee className={css.marquee} marqueeOn="render">
+                  {disclaimer}
+                </Marquee>
+              </h3>
             </div>
           </>
         )}
diff --git a/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.module.less b/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.module.less
index 68e79732..c93721b6 100644
--- a/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.module.less
+++ b/com.twin.app.shoptime/src/components/VideoPlayer/VideoPlayer.module.less
@@ -159,25 +159,26 @@
             height: 14px;
           }
           > span {
-            font-size: 18px;
+            font-size: 16px;
             height: auto;
             width: auto;
           }
         }
         &.qvc {
           display: flex;
-          width: 180px;
-          height: 80px;
-          bottom: 9.5% !important;
+          width: 19%;
+          height: 22%;
+          padding: 1%;
+          bottom: 4% !important;
           left: 4.5% !important;
         }
         &.hsn {
           display: flex;
-          left: 7% !important;
           width: 19%;
           height: 22%;
+          padding: 1%;
           bottom: 4% !important;
-          padding: 30px 5px;
+          left: 7% !important;
         }
       }
     }
@@ -256,29 +257,23 @@
     }
   }
 
-  .disclaimerContainer {
-    width: 524px;
-    height: 74px;
-    padding: 12px;
-    border-radius: 5px;
-    background-color: rgba(0, 0, 0, 0.5);
-    display: flex;
-    position: absolute;
-    top: 14px;
-    left: 18px;
+  .disclaimer {
+    color: #f2f2f2;
+    font-size: 18px;
+    line-height: 1.56;
+    z-index: 1;
+    width: 1002px;
 
-    > span {
-      width: 18px;
-      height: 18px;
-      background-size: 18px 18px;
-      background-image: url("../../../assets/images/icons/ic-warning.svg");
-      margin: 4px 12px 0 0;
-    }
-    .disclaimer {
-      width: 470px;
-      color: #f2f2f2;
-      font-size: 18px;
-      line-height: 1.56;
+    display: inline-flex;
+    > h3 {
+      width: 100%;
+      height: 54px;
+      line-height: 54px;
+      .elip(@clamp:1);
+      .marquee {
+        width: 100%;
+        transition: opacity 0.5s ease-in-out;
+      }
     }
   }