From 0eae4f3c5ca7103f59632494306f03a7c0e9c409 Mon Sep 17 00:00:00 2001
From: "jiwon93.son" <jiwon93.son@lgepartner.com>
Date: Tue, 11 Nov 2025 15:40:05 +0900
Subject: [PATCH] =?UTF-8?q?[shoptime-6063]=20QR/Text=20rotation=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20Live/VOD=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../PlayerOverlay/PlayerOverlayQRCode.jsx     | 55 ++++++++++---
 .../PlayerOverlayQRCode.module.less           | 80 +++++++++++++++++++
 2 files changed, 125 insertions(+), 10 deletions(-)

diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayQRCode.jsx b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayQRCode.jsx
index adec69cb..94d9a2f1 100644
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayQRCode.jsx
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayQRCode.jsx
@@ -1,9 +1,10 @@
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 
 import classNames from "classnames";
 import { useSelector } from "react-redux";
 
 import TQRCode from "../../../components/TQRCode/TQRCode";
+import { $L } from "../../../utils/helperMethods";
 import css from "./PlayerOverlayQRCode.module.less";
 import { getQRCodeUrl, scaleH, scaleW } from "../../../utils/helperMethods";
 
@@ -15,6 +16,8 @@ export default function PlayerOverlayQRCode({
   const { cntry_cd } = useSelector((state) => state.common.httpHeader);
   const deviceInfo = useSelector((state) => state.device.deviceInfo);
 
+  const [isShowQRCode, setIsShowQRCode] = useState(true);
+  const timerRef = useRef(null);
   const serverHOST = useSelector((state) => state.common.appStatus.serverHOST);
   const serverType = useSelector((state) => state.localSettings.serverType);
   const { entryMenu, nowMenu } = useSelector((state) => state.common.menu);
@@ -106,6 +109,28 @@ export default function PlayerOverlayQRCode({
     return qrCurrentItem?.qrcodeUrl;
   }, [detailUrl, qrCurrentItem, type]);
 
+  useEffect(() => {
+    const toggleQRCode = () => {
+      if (isShowQRCode) {
+        timerRef.current = setTimeout(() => {
+          setIsShowQRCode(false);
+        }, 10000);
+      } else {
+        timerRef.current = setTimeout(() => {
+          setIsShowQRCode(true);
+        }, 5000);
+      }
+    };
+
+    toggleQRCode();
+
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, [isShowQRCode]);
+
   return (
     <>
       {innerStylePosition && QRCodeUrl && (
@@ -119,15 +144,25 @@ export default function PlayerOverlayQRCode({
           )}
           style={innerStylePosition}
         >
-          <div>
-            <TQRCode
-              text={QRCodeUrl}
-              width={width}
-              height={height}
-              ariaLabel="QR CODE, “SCAN TO SHOP” go to Shoptime App"
-            />
-            <div className={css.text}>{label}</div>
-          </div>
+          {isShowQRCode ? (
+            <div>
+              <TQRCode
+                text={QRCodeUrl}
+                width={width}
+                height={height}
+                ariaLabel='QR CODE, "SCAN TO SHOP" go to Shoptime App'
+              />
+              <div className={css.text}>{label}</div>
+            </div>
+          ) : (
+            <div className={css.qrRollingWrap}>
+              <div className={css.innerText}>
+                <h3>{$L("Scan QR")}</h3>
+                <p>{$L("with your phone, Check Product")}</p>
+                <p>{$L("info & Purchase easily")}</p>
+              </div>
+            </div>
+          )}
         </div>
       )}
     </>
diff --git a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayQRCode.module.less b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayQRCode.module.less
index 1d537521..f4b895ab 100644
--- a/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayQRCode.module.less
+++ b/com.twin.app.shoptime/src/views/PlayerPanel/PlayerOverlay/PlayerOverlayQRCode.module.less
@@ -68,4 +68,84 @@
       }
     }
   }
+
+  .qrRollingWrap {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    width: 100%;
+    height: 100%;
+    background: @COLOR_WHITE;
+
+    .innerText {
+      width: 100%;
+      padding: 0 10px;
+
+      h3 {
+        word-break: break-word;
+        font-size: 24px;
+        font-weight: bold;
+        color: @PRIMARY_COLOR_RED;
+
+        & + p {
+          margin-top: 10px;
+        }
+      }
+
+      p {
+        font-size: 16px;
+        font-weight: bold;
+        line-height: 1.2;
+        color: @COLOR_GRAY05;
+        word-break: keep-all;
+      }
+    }
+  }
+
+  // 국가별 롤링 텍스트 크기 조정 (폰트 사이즈만)
+  &.us .qrRollingWrap {
+    .innerText {
+      h3 {
+        font-size: 27px;
+      }
+      p {
+        font-size: 18px;
+      }
+    }
+  }
+
+  &.ru .qrRollingWrap {
+    .innerText {
+      h3 {
+        font-size: 22px;
+      }
+      p {
+        font-size: 15px;
+      }
+    }
+  }
+
+  &.de .qrRollingWrap {
+    .innerText {
+      h3 {
+        font-size: 26px;
+      }
+      p {
+        font-size: 17px;
+      }
+    }
+  }
+
+  &.gb .qrRollingWrap {
+    .innerText {
+      h3 {
+        font-size: 23px;
+      }
+      p {
+        font-size: 16px;
+      }
+    }
+  }
 }