[DetailPanel] Indicator video modal proeview mode 전환시 포커스 안잡히는 현상 수정 ( 테마 인디게이터 수정중 )

2024-05-09 13:12:37 +09:00
parent a32910a393
commit d44729c3a0
5 changed files with 67 additions and 135 deletions
--- a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
@@ -142,7 +142,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
    getlgCatCd();
  }, [themeProductInfos, productData, selectedIndex]);

-  console.log("#productData", productData);
+  // console.log("#productData", productData);
  useEffect(() => {
    if (panelInfo && patnrId && prdtId) {
      saveToLocalStorage();
@@ -201,7 +201,6 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
              selectedIndex={selectedIndex}
              setSelectedIndex={setSelectedIndex}
              launchedFromPlayer={panelInfo.launchedFromPlayer}
-              panelInfo={panelInfo}
              isOnTop={isOnTop}
            />
          )}
--- a/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableProduct.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/UnableProduct/UnableProduct.jsx
@@ -49,7 +49,6 @@ export default function UnableProduct({
          productInfo={productData}
          soldoutFlag={soldout}
          launchedFromPlayer={launchedFromPlayer}
-          panelInfo={panelInfo}
          isOnTop={isOnTop}
        />
        <IndicatorOptions
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/Indicator.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/Indicator.jsx
@@ -49,15 +49,14 @@ function Indicator({
  productInfo,
  soldoutFlag,
  launchedFromPlayer,
-  panelInfo,
  isOnTop,
 }) {
  const dispatch = useDispatch();
  const { cursorVisible } = useSelector((state) => state.common.appStatus);
-  const { discountRate, promotionCode } = usePriceInfo(productInfo.priceInfo);
+  const { discountRate, promotionCode } = usePriceInfo(productInfo?.priceInfo);
  const panels = useSelector((state) => state.panels.panels);
  const [autoPlaying, setAutoPlaying] = useState(
-    !launchedFromPlayer && productInfo.prdtMediaUrl
+    !launchedFromPlayer && productInfo?.prdtMediaUrl
  );
  const [focused, setFocused] = useState(false);
  const { getScrollTo, scrollTop } = useScrollTo();
@@ -72,15 +71,15 @@ function Indicator({
    ) {
      return; //prevent
    }
-    if (autoPlaying && productInfo.prdtMediaUrl) {
+    if (autoPlaying && productInfo?.prdtMediaUrl) {
      //auto play.
      dispatch(
        startVideoPlayer({
-          showUrl: productInfo.prdtMediaUrl,
-          showNm: productInfo.prdtNm,
-          patnrNm: productInfo.patncNm,
-          patncLogoPath: productInfo.patncLogoPath,
-          orderPhnNo: productInfo.orderPhnNo,
+          showUrl: productInfo?.prdtMediaUrl,
+          showNm: productInfo?.prdtNm,
+          patnrNm: productInfo?.patncNm,
+          patncLogoPath: productInfo?.patncLogoPath,
+          orderPhnNo: productInfo?.orderPhnNo,
          shptmBanrTpNm: "MEDIA",
          modal: true,
          modalContainerId: "indicator_videoContainer", //to calc width, height, left, top
@@ -89,16 +88,10 @@ function Indicator({
        })
      );
    }
-  }, [
-    dispatch,
-    productInfo,
-    autoPlaying,
-    focused,
-    selectedIndex,
-    panelInfo?.modal,
-  ]);
+  }, [dispatch, productInfo, autoPlaying, focused, selectedIndex]);

  const modalClassNameChange = useCallback(() => {
+    console.log("##################");
    if (selectedIndex === 0) {
      if (focused) {
        return css.videoModal;
@@ -160,7 +153,7 @@ function Indicator({
          shptmBanrTpNm: "MEDIA",
          modal: !autoPlaying,
          modalContainerId: "indicator_videoContainer",
-          modalClassName: modalClassNameChange(),
+          modalClassName: css.videoModal,
          spotlightDisable: false,
        })
      );
@@ -239,6 +232,7 @@ function Indicator({
          spotlightId="indicator_videoContainer"
          disabled={!canPlayVideo}
          className={classNames(css.thumbnail, soldoutFlag && css.soldout)}
+          spotlightDisabled={!canPlayVideo}
          onSpotlightRight={onSpotlightRight}
          onSpotlightLeft={onSpotlightLeft}
          onClick={handleVideoOnClick}
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeIndicator.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeIndicator.jsx
@@ -279,62 +279,60 @@ export default function ThemeIndicator({
        <SpottableComponent
          spotlightId="indicator_videoContainer"
          disabled={!canPlayVideo}
+          spotlightDisabled={!canPlayVideo}
          className={classNames(css.thumbnail, soldoutFlag && css.soldout)}
          onClick={handleVideoOnClick}
          onFocus={onFocus}
          onBlur={onBlur}
        >
-          <>
-            <SpottableImage
-              spotlightDisabled
-              className={css.image}
-              src={autoPlaying && canPlayVideo ? "" : selectedImage}
-              alt=""
-            ></SpottableImage>
-
-            <Container className={css.thumbnailIndicator}>
-              {soldoutFlag ? (
-                <h3>SOLD OUT</h3>
-              ) : (
-                <>
-                  <SpottableComponent
-                    className={classNames(
-                      css.prevButton,
-                      imageSelectedIndex === 0 && css.disable
-                    )}
-                    onClick={handlePrevClick}
-                    spotlightDisabled={
-                      imageSelectedIndex === -1 ||
-                      (!canPlayVideo && imageSelectedIndex === 0) ||
-                      (canPlayVideo && imageSelectedIndex === 0)
-                    }
-                    spotlightId="thumbnailPrevButton"
-                  />
-                  {hasMediaUrl ? (
-                    <span>
-                      {imageSelectedIndex + 1} / {imageLength + 1}
-                    </span>
-                  ) : (
-                    <span>
-                      {imageSelectedIndex + 1} / {imageLength}
-                    </span>
-                  )}
-
-                  <SpottableComponent
-                    className={classNames(
-                      css.nextButton,
-                      imageLength === imageSelectedIndex && css.disable
-                    )}
-                    onClick={handleNextClick}
-                    spotlightDisabled={imageLength === imageSelectedIndex}
-                    spotlightId="thumbnailNextButton"
-                    onFocus={() => onFocus(false)}
-                  />
-                </>
-              )}
-            </Container>
-          </>
+          <Image
+            spotlightDisabled
+            className={css.image}
+            src={autoPlaying && canPlayVideo ? "" : selectedImage}
+            alt=""
+          ></Image>
        </SpottableComponent>
+        <div className={css.thumbnailIndicator}>
+          {soldoutFlag ? (
+            <h3>SOLD OUT</h3>
+          ) : (
+            <>
+              <SpottableComponent
+                className={classNames(
+                  css.prevButton,
+                  imageSelectedIndex === 0 && css.disable
+                )}
+                onClick={handlePrevClick}
+                spotlightDisabled={
+                  imageSelectedIndex === -1 ||
+                  (!canPlayVideo && imageSelectedIndex === 0) ||
+                  (canPlayVideo && imageSelectedIndex === 0)
+                }
+                spotlightId="thumbnailPrevButton"
+              />
+              {hasMediaUrl ? (
+                <span>
+                  {imageSelectedIndex + 1} / {imageLength + 1}
+                </span>
+              ) : (
+                <span>
+                  {imageSelectedIndex + 1} / {imageLength}
+                </span>
+              )}
+
+              <SpottableComponent
+                className={classNames(
+                  css.nextButton,
+                  imageLength === imageSelectedIndex && css.disable
+                )}
+                onClick={handleNextClick}
+                spotlightDisabled={imageLength === imageSelectedIndex}
+                spotlightId="thumbnailNextButton"
+                onFocus={() => onFocus(false)}
+              />
+            </>
+          )}
+        </div>
      </div>
    );
  }, [
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeIndicator.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/ThemeIndicator.module.less
@@ -36,22 +36,18 @@
      }
    }

-    .videoThumbnailIndicator {
+    .thumbnailIndicator {
      margin-top: auto;
-      position: absolute;
-      top: 494px;
-      left: 253px;
+      position: relative;
      margin-bottom: 30px;
-      z-index: 3;
+      z-index: 1;

-      .videoPrevButton {
+      .prevButton {
        .size(@w:42px, @h: 42px);
-
        .position(@position: absolute, @right: 70px, @bottom: 0 , @top: 0);
        background-image: url("../../../../../assets/images/btn/btn-prev-thumb-nor.svg");
        background-position: center;
        background-size: cover;
-        z-index: 3;

        &:focus {
          background-image: url("../../../../../assets/images/btn/btn-prev-thumb-foc.svg");
@@ -62,9 +58,8 @@
          background-image: url("../../../../../assets/images/btn/btn-prev-thumb-nor.svg");
        }
      }
-      .videoNextButton {
+      .nextButton {
        .size(@w:42px, @h: 42px);
-        z-index: 3;
        .position(@position: absolute, @left: 70px, @bottom: 0 , @top: 0);
        background-image: url("../../../../../assets/images/btn/btn-next-thumb-nor.svg");
        background-position: center;
@@ -94,6 +89,7 @@
        line-height: 1.33;
      }
    }
+
    .thumbnail {
      .size(@w: 560px, @h: 560px);
      border: solid 1px #dadada;
@@ -127,60 +123,6 @@
          opacity: 0.7;
        }
      }
-
-      .thumbnailIndicator {
-        margin-top: auto;
-        position: relative;
-        margin-bottom: 30px;
-        z-index: 1;
-
-        .prevButton {
-          .size(@w:42px, @h: 42px);
-          .position(@position: absolute, @right: 70px, @bottom: 0 , @top: 0);
-          background-image: url("../../../../../assets/images/btn/btn-prev-thumb-nor.svg");
-          background-position: center;
-          background-size: cover;
-
-          &:focus {
-            background-image: url("../../../../../assets/images/btn/btn-prev-thumb-foc.svg");
-          }
-
-          &.disable {
-            opacity: 0.1;
-            background-image: url("../../../../../assets/images/btn/btn-prev-thumb-nor.svg");
-          }
-        }
-        .nextButton {
-          .size(@w:42px, @h: 42px);
-          .position(@position: absolute, @left: 70px, @bottom: 0 , @top: 0);
-          background-image: url("../../../../../assets/images/btn/btn-next-thumb-nor.svg");
-          background-position: center;
-          background-size: cover;
-
-          &:focus {
-            background-image: url("../../../../../assets/images/btn/btn-next-thumb-foc.svg");
-          }
-          &.disable {
-            opacity: 0.1;
-            background-image: url("../../../../../assets/images/btn/btn-next-thumb-nor.svg");
-          }
-        }
-        //soldout
-        > h3 {
-          font-size: 36px;
-          font-weight: bold;
-          color: #ffffff;
-          margin-bottom: 237px;
-        }
-        > span {
-          // .size(@w: 51px , @h: 21px);
-          -webkit-text-stroke: 1px rgba(255, 255, 255, 0.7);
-          color: #222222;
-          font-size: 24px;
-          font-weight: bold;
-          line-height: 1.33;
-        }
-      }
    }
  }
  .tVirtualGridListContainer {