쿠폰 set 조건수정

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

@@ -92,6 +92,7 @@ export default function ItemDetail() {
   }, [dispatch, selectedPatnrId, selectedPrdtId, panels]);
 
   const onClick = useCallback(() => {
+    dispatch(resetPanels([{ name: panel_names.DETAIL_PANEL, panelInfo: {} }]));
     dispatch(popPanel());
   }, [dispatch]);
 

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

@@ -59,7 +59,7 @@ export default function GroupProduct({
         />
       </Container>
       <div>
-        <ProductOption>
+        <ProductOption productInfo={productData}>
           <GroupOption
             selectedPatnrId={selectedPatnrId}
             selectedPardtId={selectedPrdtId}

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

@@ -93,13 +93,15 @@ export default function SingleOption({
 
     dispatch(
       getProductCouponSearch({
-        patnrId: selectedPatnrId,
-        prdtId: selectedPrdtId,
+        patnrId: 11,
+        prdtId: 7280567,
         mbrNo: userInfo,
       })
     );
   }, [dispatch, selectedPatnrId]);
 
+  console.log("#selectedCoupon", selectedCoupon);
+
   const handleOptionClick = useCallback(
     (optionValIdx) => {
       setSelectedBtnOptIdx(optionValIdx);
@@ -182,11 +184,11 @@ export default function SingleOption({
   }, [dispatch, quantity, discountedPrice, selectedBtnOptIdx, selectedOptions]);
 
   const handleCouponClick = useCallback(
-    (idx) => {
-      if (idx === 0) {
-        setSelectedCoupon(partnerCoupon);
-      } else if (idx === 1) {
+    (idx, promotion) => {
+      if (promotion === "SPECIAL PROMOTION") {
         setSelectedCoupon(shoptiemCoupon);
+      } else if (promotion === "SHOPTIME PROMOTION") {
+        setSelectedCoupon(partnerCoupon);
       }
       setCouponTypes(idx);
       dispatch(setShowPopup(Config.ACTIVE_POPUP.couponPopup));

com.twin.app.shoptime/src/views/DetailPanel/components/indicator/Indicator.jsx

@@ -84,6 +84,15 @@ export default function Indicator({
     );
   }, [dispatch]);
 
+  const onSpotlightRight = useCallback(() => {
+    const timer = setTimeout(() => {
+      Spotlight.focus(`indicator-image-${selectedIndex}`);
+    });
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [selectedIndex]);
+
   const renderItem = useCallback(
     ({ index, ...rest }) => {
       images = [...productInfo.imgUrls600];
@@ -132,6 +141,7 @@ export default function Indicator({
         {productInfo && productInfo.prdtMediaUrl !== null ? (
           selectedIndex === 0 ? (
             <>
+              {/* <SpottableComponent> */}
               <TVideoPlayer
                 showUrl={productInfo.prdtMediaUrl}
                 width={560}
@@ -140,6 +150,7 @@ export default function Indicator({
                 className={css.player}
                 onClick={handleVideoOnClick}
               />
+              {/* </SpottableComponent> */}
               {productInfo && productInfo[selectedIndex]?.disclaimer && (
                 <div className={css.disclaimerContainer}>
                   <span className={css.icon} />
@@ -154,6 +165,7 @@ export default function Indicator({
               src={selectedImage}
               alt=""
               className={classNames(css.thumbnail, soldoutFlag && css.soldout)}
+              onSpotlightRight={onSpotlightRight}
             >
               {soldoutFlag && <h3 className={css.soldoutLabel}>SOLD OUT</h3>}
             </SpottableImage>
@@ -163,6 +175,7 @@ export default function Indicator({
             src={selectedImage}
             alt=""
             className={classNames(css.thumbnail, soldoutFlag && css.soldout)}
+            onSpotlightRight={onSpotlightRight}
           >
             {soldoutFlag && <h3 className={css.soldoutLabel}>SOLD OUT</h3>}
           </SpottableImage>

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

@@ -7,6 +7,7 @@
   height: 560px;
   display: flex;
   position: relative;
+
   .disclaimerContainer {
     // .size(@w: 524px , @h: 74px);
     width: 524px;
@@ -31,6 +32,7 @@
       line-height: 1.56;
     }
   }
+
   .player {
     .size(@w: 560px, @h: 560px);
     margin: 0 10px 10px 0;
@@ -41,7 +43,7 @@
         .focused(@boxShadow: 22px, @borderRadius:0px);
       }
     }
-    &:after {
+    &:before {
       .size(@w: 560px, @h: 200px);
       position: absolute;
       left: 0;
@@ -50,7 +52,22 @@
       background: linear-gradient(to top, rgba(255, 255, 255, 1), transparent);
       opacity: 0.2;
     }
+    // > div {
+    //   > div {
+    //     > div:nth-child(4) {
+    //       position: absolute;
+    //       width: 100%;
+    //       height: 100%;
+    //       &:focus {
+    //         &::after {
+    //           .focused(@boxShadow: 22px, @borderRadius:0px);
+    //         }
+    //       }
+    //     }
+    //   }
+    // }
   }
+
   .thumbnail {
     .size(@w: 560px, @h: 560px);
     border: solid 1px #dadada;