DetailPanel 인디게이터 Media 구현

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

@@ -29,6 +29,7 @@ export default function ItemDetail() {
   const [themeType, setThemeType] = useState("");
   const [selectedIndex, setSelectedIndex] = useState(0);
 
+  const youmaylikeData = useSelector((state) => state.main.youmaylikeData);
   const productData = useSelector((state) => state.main.productData);
   const themeData = useSelector((state) => state.home.productData);
   const panels = useSelector((state) => state.panels.panels);
@@ -131,20 +132,18 @@ export default function ItemDetail() {
   }, [panels, selectedPatnrId, selectedPatnrId, httpHeader]);
 
   const getCategoryId = useCallback(() => {
-    setCategoryId("");
-
     if (productData && !selectedCurationId) {
-      return setCategoryId(productData.catCd);
-    }
-    if (
+      setCategoryId(productData.catCd);
+    } else if (
       themeProductInfos[selectedIndex]?.pmtSuptYn === "N" &&
       selectedCurationId
     ) {
-      return setCategoryId(themeProductInfos[selectedIndex]?.catCd);
+      setCategoryId(themeProductInfos[selectedIndex]?.catCd);
+    } else {
+      setCategoryId("");
     }
-  }, [productData, themeProductInfos, selectedIndex]);
+  }, [productData, themeProductInfos, selectedIndex, selectedCurationId]);
 
-  console.log("#themeProductInfos", themeProductInfos);
   useEffect(() => {
     getCategoryId();
   }, [themeProductInfos, productData, selectedIndex]);

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

@@ -10,7 +10,6 @@ import css from "./ProductOption.module.less";
 export default function ProductOption({ children, productInfo }) {
   const { patncLogoPath, prdtId, prdtNm, revwGrd, pmtSuptYn } = productInfo;
 
-  console.log("#productInfo", productInfo);
   return (
     <div className={css.optionContainer}>
       {productInfo && (

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

@@ -8,6 +8,7 @@ import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDeco
 import Spottable from "@enact/spotlight/Spottable";
 
 import defaultImage from "../../../../../assets/images/img-thumb-empty-144@3x.png";
+import TVideoPlayer from "../../../../components/TVideoPlayer/TVideoPlayer";
 import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
 import useScrollTo from "../../../../hooks/useScrollTo";
 import css from "./Indicator.module.less";
@@ -28,11 +29,14 @@ export default function Indicator({
   const [selectedImage, setSelectedImage] = useState(null);
   const { cursorVisible } = useSelector((state) => state.common.appStatus);
   const { getScrollTo, scrollTop } = useScrollTo();
-  let imagePosition = IMAGE_WIDTH * selectedIndex - IMAGE_WIDTH;
 
-  console.log("#productInfo", productInfo);
+  let imagePosition = IMAGE_WIDTH * selectedIndex - IMAGE_WIDTH;
+  let images = [];
+
   useEffect(() => {
-    setSelectedImage(productInfo.imgUrls600[selectedIndex]);
+    if (productInfo?.prdtMediaUrl && selectedIndex > 0) {
+      setSelectedImage(images[selectedIndex]);
+    }
   }, [selectedIndex, productInfo]);
 
   const handleUpClick = useCallback(() => {
@@ -61,9 +65,12 @@ export default function Indicator({
 
   const renderItem = useCallback(
     ({ index, ...rest }) => {
-      const image = productInfo.imgUrls600[index];
+      // defaultImage > mediaThumbnailUrl 교체
+      images = [...productInfo.imgUrls600];
+      if (productInfo?.prdtMediaUrl) {
+        images.splice(0, 0, defaultImage);
+      }
 
-      productInfo?.prdtMeidaUrl;
       const handleItemClick = () => {
         setSelectedIndex(index);
       };
@@ -71,7 +78,7 @@ export default function Indicator({
       return (
         <>
           <SpottableImage
-            src={image ? image : defaultImage}
+            src={images[index]}
             alt=""
             className={classNames(
               css.image,
@@ -96,7 +103,7 @@ export default function Indicator({
   return (
     <Container className={css.indicatorContainer}>
       <div>
-        {productInfo && (
+        {productInfo && selectedIndex > 0 && (
           <SpottableImage
             src={selectedImage}
             alt=""
@@ -105,6 +112,15 @@ export default function Indicator({
             {soldoutFlag && <h3 className={css.soldoutLabel}>SOLD OUT</h3>}
           </SpottableImage>
         )}
+        {productInfo.prdtMediaUrl && selectedIndex === 0 && (
+          <TVideoPlayer
+            showUrl={productInfo.prdtMediaUrl}
+            width={560}
+            height={560}
+            videoIsPlaying
+            className={css.player}
+          />
+        )}
       </div>
       <div>
         <SpottableComponent

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

@@ -7,6 +7,15 @@
   height: 560px;
   display: flex;
 
+  .player {
+    .size(@w: 560px, @h: 560px);
+    margin: 0 10px 10px 0;
+    &:focus {
+      &::after {
+        .focused(@boxShadow: 22px, @borderRadius:0px);
+      }
+    }
+  }
   .thumbnail {
     .size(@w: 560px, @h: 560px);
     border: solid 1px #dadada;