DetailPanel TPopUp 수정

com.twin.app.shoptime/src/views/DetailPanel/container/ProductThumbnail.jsx

@@ -17,7 +17,12 @@ export default function ProductThumbnail() {
   const [opened, setOpened] = useState(false);
   console.log("#productData", productData);
 
-  const onClickPopUp = (children) => {
+  const buttonLabel = [
+    { label: $L("DESCRIPTION") },
+    { label: $L("RETURN & EXCHANGES") },
+    { label: $L("SHOP BY MOBILE") },
+  ];
+  const handlePopUp = () => {
     setOpened((prev) => !prev);
   };
 
@@ -25,14 +30,20 @@ export default function ProductThumbnail() {
     return (
       <TPopUp
         kind="productDetail"
-        onClose={onClickPopUp}
+        onClose={handlePopUp}
         open={opened}
         hasButton
-        button1Text={"CLOSE"}
+        // button1Text={"CLOSE"}
       >
-        <div>
+        <div className={css.popUpHeader}>
           <img src={productData?.imgUrls600[0]} />
-          <span className={css.popUpIcon} />
+          <div className={css.path}>
+            <div>
+              <img src={productData?.patncLogoPath} alt="" />{" "}
+              <span>{`ID:` + productData?.prdtId}</span>
+            </div>
+            <h3>{productData?.prdtNm}</h3>
+          </div>
         </div>
       </TPopUp>
     );
@@ -51,9 +62,11 @@ export default function ProductThumbnail() {
       </div>
       <div className={css.buttonWrap}>
         <div className={css.tButton}>
-          <TButton onClick={onClickPopUp}>{$L("DESCRIPTION")}</TButton>
-          <TButton onClick={onClickPopUp}>{$L("RETURN & EXCHANGES")}</TButton>
-          <TButton onClick={onClickPopUp}>{$L("SHOP BY MOBILE")}</TButton>
+          {buttonLabel.map(({ label }, index) => (
+            <TButton onClick={handlePopUp} key={index}>
+              {label}
+            </TButton>
+          ))}
         </div>
         <div className={css.qrcode} />
       </div>

com.twin.app.shoptime/src/views/DetailPanel/container/ProductThumbnail.module.less

@@ -4,11 +4,6 @@
 .Wrap {
     padding-left: 120px;
     .size(@w: 894px, @h: 930px);
-
-    .popUpIcon {
-        .size(@w: 50px, @h: 50px);
-        background-color: red;
-    }
     .order {
         .font(@fontFamily: @baseFontBold,  @fontSize: 30px);
         .size(@w: 560px, @h: 68px);
@@ -65,3 +60,28 @@
     }
 }
 
+
+.popUpHeader {
+    display: flex;
+    > img {
+        .size(@w: 200px , @h: 200px);
+        border: solid 1px #dadada;
+    }
+    .path {
+        padding-left: 20px;
+        > div > img {
+        .size(@w: 42px , @h: 42px);
+        background-color: #f8f8f8;
+        margin: 0 12px 0 0;
+        }
+        > h3 {
+        .font(@fontFamily: @baseFontBold,  @fontSize: 36px);
+        padding-top: 24px;
+        
+        }
+        > div > span {
+        .font(@fontFamily: @baseFontBold,  @fontSize: 30px);
+        }
+    }
+
+}