youmaylike backup && coupon popup css

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

@@ -199,17 +199,17 @@ export default function DetailPanel({ panelInfo }) {
             />
           )}
         </TBody>
+        {lgCatCd && (productData || themeProductInfos) && (
+          <YouMayLike
+            isUnable={
+              productData?.pmtSuptYn === "N" ||
+              (selectedIndex &&
+                themeProductInfos[selectedIndex]?.pmtSuptYn === "N")
+            }
+            lgCatCd={lgCatCd}
+          />
+        )}
       </TPanel>
-      {lgCatCd && (productData || themeProductInfos) && (
-        <YouMayLike
-          isUnable={
-            productData?.pmtSuptYn === "N" ||
-            (selectedIndex &&
-              themeProductInfos[selectedIndex]?.pmtSuptYn === "N")
-          }
-          lgCatCd={lgCatCd}
-        />
-      )}
     </>
   );
 }

com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.jsx

@@ -26,7 +26,7 @@ import FavoriteBtn from "../components/FavoriteBtn";
 import css from "./SingleOption.module.less";
 
 const Container = SpotlightContainerDecorator(
-  { enterTo: "default-element", preserveId: true },
+  { enterTo: "default-element" },
   "div"
 );
 const SpottableComponent = Spottable("div");
@@ -63,7 +63,7 @@ export default function SingleOption({
   const [couponCodes, setCouponCodes] = useState("");
   const [selectedOptionInfo, setSelectedOptionInfo] = useState();
   const [downloadCouponArr, setDownloadCouponArr] = useState([]);
-  const [focusIndex, setFocusIndex] = useState(0);
+  const [focused, setFocused] = useState(false);
   const { priceInfo, shippingCharge } = productInfo || productData;
   const { originalPrice, discountedPrice, discountRate } =
     usePriceInfo(priceInfo) || {};
@@ -92,8 +92,8 @@ export default function SingleOption({
 
     dispatch(
       getProductCouponSearch({
-        patnrId: 11,
-        prdtId: 7280567,
+        patnrId: selectedPatnrId,
+        prdtId: selectedPrdtId,
         mbrNo: userInfo,
       })
     );
@@ -321,7 +321,7 @@ export default function SingleOption({
             <span className={classNames(css.content, css.date)}>
               {$L(`${couponAplyStartDate}~${couponAplyEndDate}`)}
             </span>
-            <TButton
+            <SpottableComponent
               className={classNames(
                 css.couponBtn,
                 downloadCouponArr.length > 0 &&
@@ -342,12 +342,12 @@ export default function SingleOption({
                   ? "DOWNLOAD COMPLETED"
                   : "DOWNLOAD"
               )}
-            </TButton>
+            </SpottableComponent>
           </div>
         </SpottableComponent>
       );
     },
-    [selectedCoupon, couponCodes, downloadCouponArr, dispatch]
+    [selectedCoupon, downloadCouponArr, dispatch]
   );
 
   return (
@@ -536,7 +536,7 @@ export default function SingleOption({
           button1Text={$L("CLOSE")}
           button2Text={$L("DOWNLOAD ALL")}
         >
-          <div className={css.itemWrap}>
+          <Container className={css.itemWrap}>
             {selectedCoupon && selectedCoupon.length > 0 && (
               <TVirtualGridList
                 dataSize={selectedCoupon.length}
@@ -549,7 +549,7 @@ export default function SingleOption({
                 className={css.itemList}
               />
             )}
-          </div>
+          </Container>
           <div
             className={css.couponRemain}
           >{`1/${selectedCoupon?.length}`}</div>

com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.module.less

@@ -268,20 +268,43 @@
   overflow: hidden;
   position: relative;
 
+  &::after,
+  &::before {
+    position: absolute;
+    width: 253px;
+    height: 320px;
+    top: 0;
+    content: "";
+    z-index: 2;
+  }
+  &::after {
+    left: 0;
+    background: linear-gradient(to right, #f8f8f8, transparent);
+  }
+  &::before {
+    right: 0;
+    background: linear-gradient(to left, #f8f8f8, transparent);
+  }
   .itemList {
-    // .size(@w: 255px , @h: 320px);
+    .size(@w: 440px , @h: 320px);
     height: 320px;
   }
   > div > div {
-    padding-left: 253px;
+    margin-left: 253px;
+  }
+  > div {
+    > div:nth-child(2) {
+      left: -253px;
+    }
+    > div:nth-child(2) {
+      right: -520px;
+    }
   }
 }
 .couponContainer {
   .flex(@direction:column);
   position: relative;
 
-  // margin-left: 130px;
-
   &:focus {
     &::after {
       .focused(@boxShadow: 22px, @borderRadius: 12px);
@@ -320,8 +343,8 @@
     }
     .couponBtn {
       .flex();
-      width: 380px;
-      height: 60px;
+      .size(@w: 380px , @h: 60px);
+      background-color: #fff;
       border-radius: 6px;
       margin-top: 18px;
       z-index: 1;
@@ -334,6 +357,11 @@
         background-color: #808080;
         box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
       }
+      &:focus {
+        &::after {
+          .focused(@boxShadow: 22px, @borderRadius: 12px);
+        }
+      }
     }
   }
 }

com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableOption.module.less

@@ -165,7 +165,7 @@
 
   .btnContainer {
     .size(@w: 846px , @h: 78px);
-    margin-top: 59px;
+    margin-top: 147px;
     .flex(@justifyCenter:space-between);
     .smsBtn {
       min-width: 756px;

com.twin.app.shoptime/src/views/DetailPanel/components/indicator/IndicatorOptions.module.less

@@ -69,6 +69,7 @@
         box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
         background-image: linear-gradient(to top, #c70850, #c70850);
         color: #fff;
+        border: solid 1px #c70850;
       }
     }
   }
@@ -116,6 +117,7 @@
         box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
         background-image: linear-gradient(to top, #c70850, #c70850);
         color: #fff;
+        border: solid 1px #c70850;
       }
     }
   }