[251211] fix: NBCU Detailpanel QRCodeNew->QRCode

🕐 커밋 시간: 2025. 12. 11. 14:54:31

📊 변경 통계:
  • 총 파일: 2개
  • 추가: +15줄
  • 삭제: -3줄

📁 추가된 파일:
  + com.twin.app.shoptime/src/views/DetailPanel/ProductInfoSection/QRCode/QRCodePatnr21.jsx

📝 수정된 파일:
  ~ com.twin.app.shoptime/src/views/DetailPanel/ProductInfoSection/QRCode/QRCode.jsx

com.twin.app.shoptime/src/views/DetailPanel/ProductInfoSection/QRCode/QRCode.jsx

@@ -5,6 +5,7 @@ import { useSelector } from 'react-redux';
 
 import TQRCode from '../../../../components/TQRCode/TQRCode';
 import TQRCodeNew from '../../../../components/TQRCode/TQRCodeNew';
+import QRCodePatnr21 from './QRCodePatnr21';
 import { getQRCodeUrl } from '../../../../utils/helperMethods';
 import css from './QRCode.module.less';
 
@@ -57,22 +58,33 @@ export default function QRCode({
     return detailUrl;
   }, [productInfo, isShopByMobile, detailUrl]);
 
-  // patnrId === 21인 경우 TQRCodeNew 사용 (원형 QR코드)
+  // patnrId === 21인 경우 qrImgUrl 처리
   const isPatnrId21 = productInfo?.patnrId === 21 || productInfo?.patnrId === "21";
+  const qrImgUrl = isPatnrId21 ? productInfo?.qrImgUrl : null;
 
   return (
     <div className={classNames(css.qrcode, kind ? css.detailQrcode : "")}>
       {/* {qrCodeUrl && <TQRCode text={qrCodeUrl} width="190" height="190" />} */}
       {kind === "detail" ? (
         isPatnrId21 ? (
-          <TQRCodeNew text={qrCodeUrl} width="240" height="240" />
+          <QRCodePatnr21
+            qrImgUrl={qrImgUrl}
+            fallbackText={qrCodeUrl}
+            width="240"
+            height="240"
+          />
         ) : (
           <TQRCode text={qrCodeUrl} width="240" height="240" />
         )
       ) : (
         qrCodeUrl && (
           isPatnrId21 ? (
-            <TQRCodeNew text={qrCodeUrl} width="190" height="190" />
+            <QRCodePatnr21
+              qrImgUrl={qrImgUrl}
+              fallbackText={qrCodeUrl}
+              width="190"
+              height="190"
+            />
           ) : (
             <TQRCode text={qrCodeUrl} width="190" height="190" />
           )

com.twin.app.shoptime/src/views/DetailPanel/ProductInfoSection/QRCode/QRCodePatnr21.jsx

@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+
+import TQRCode from '../../../../components/TQRCode/TQRCode';
+
+/**
+ * patnrId=21 전용 QR 이미지 처리 컴포넌트
+ * 서버에서 제공하는 qrImgUrl을 우선 표시하고,
+ * 로드 실패 시 TQRCode(QR 코드 생성)로 폴백합니다.
+ *
+ * @param {string} qrImgUrl - 서버 제공 QR 이미지 URL (productData.qrImgUrl)
+ * @param {string} fallbackText - TQRCode 생성 시 사용할 QR 텍스트 (qrCodeUrl)
+ * @param {string} width - 너비 ("190" 또는 "240")
+ * @param {string} height - 높이 ("190" 또는 "240")
+ */
+export default function QRCodePatnr21({
+  qrImgUrl,
+  fallbackText,
+  width = '190',
+  height = '190',
+}) {
+  const [imageError, setImageError] = useState(false);
+  const [imageLoaded, setImageLoaded] = useState(false);
+
+  // 1. qrImgUrl이 없으면 TQRCode 폴백
+  if (!qrImgUrl) {
+    return <TQRCode text={fallbackText} width={width} height={height} />;
+  }
+
+  // 2. 이미지 로드 실패 → TQRCode 폴백
+  if (imageError) {
+    return <TQRCode text={fallbackText} width={width} height={height} />;
+  }
+
+  // 3. 이미지 로드 성공 → 이미지 표시 (기존 QRCode와 동일한 레이아웃)
+  const sizeInPx = `${width}px`;
+
+  return (
+    <div
+      style={{
+        width: sizeInPx,
+        height: sizeInPx,
+        background: '#fff',
+        border: '1px solid #dadada',
+        margin: '0 auto',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'relative',
+        overflow: 'hidden',
+      }}
+    >
+      <img
+        src={qrImgUrl}
+        alt="QR Code"
+        onLoad={() => setImageLoaded(true)}
+        onError={() => setImageError(true)}
+        style={{
+          display: imageLoaded ? 'block' : 'none',
+          width: '100%',
+          height: '100%',
+          objectFit: 'contain',
+        }}
+      />
+      {!imageLoaded && (
+        <div
+          style={{
+            fontSize: '12px',
+            color: '#999',
+            textAlign: 'center',
+            position: 'absolute',
+          }}
+        >
+          Loading...
+        </div>
+      )}
+    </div>
+  );
+}