[shoptime-6063] QR/Text rotation 기능 Live/VOD 적용

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>
       )}
     </>

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;
+      }
+    }
+  }
 }