[TQRCode] QRCode 필요 정보 추가

com.twin.app.shoptime/src/components/TQRCode/TQRCode.jsx

@@ -1,17 +1,29 @@
 import React, { useEffect, useRef, useState } from "react";
 
-//!!raw-loader!../../utils/qrcode.min.js
+import { useDispatch, useSelector } from "react-redux";
 import QRCodeMin from "!!raw-loader!../../utils/qrcode.min.js";
 
+import { getDeviceAdditionInfo } from "../../actions/deviceActions";
+import { scaleH, scaleW } from "../../utils/helperMethods";
+
 let script = document.createElement("script");
 script.innerText = QRCodeMin;
 document.body.appendChild(script);
 
-export default function TQRCode({ text, width = "128", height = "128" }) {
+export default function TQRCode({ text, menu, width = "128", height = "128" }) {
   const qrcodeRef = useRef(null);
+  const deviceInfo = useSelector((state) => state.device.deviceInfo);
+  const dispatch = useDispatch();
+
+  useEffect(
+    () => {
+      dispatch(getDeviceAdditionInfo());
+    },
+    { dispatch }
+  );
 
   useEffect(() => {
-    if (typeof window === "object") {
+    if (typeof window === "object" && deviceInfo && menu) {
       if (qrcodeRef.current) {
         while (qrcodeRef.current.firstChild) {
           qrcodeRef.current.removeChild(qrcodeRef.current.firstChild);
@@ -19,11 +31,11 @@ export default function TQRCode({ text, width = "128", height = "128" }) {
       }
 
       const qrcode = new window.QRCode(qrcodeRef.current, {
-        text: text,
-        width: width,
-        height: height,
+        text: `${text}&nowMenu=${menu}&dvcIndex=${deviceInfo.dvcIndex}`,
+        width: scaleW(width),
+        height: scaleH(height),
       });
     }
-  }, [text]);
+  }, [text, menu, deviceInfo]);
   return <div ref={qrcodeRef} />;
 }