youmaylike API 호출 변경

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

@@ -22,7 +22,10 @@ import {
   getThemeCurationDetailInfo,
   getThemeHotelDetailInfo,
 } from "../../actions/homeActions";
-import { getMainCategoryDetail } from "../../actions/mainActions";
+import {
+  getMainCategoryDetail,
+  getMainYouMayLike,
+} from "../../actions/mainActions";
 import { popPanel } from "../../actions/panelActions";
 import { finishVideoPreview } from "../../actions/playActions";
 import {
@@ -129,6 +132,17 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
     panelInfo.patnrId,
   ]);
 
+  useEffect(() => {
+    dispatch(
+      getMainYouMayLike({
+        lgCatCd: lgCatCd,
+        exclCurationId: panelInfo?.curationId,
+        exclPatnrId: panelInfo?.patnrId,
+        exclPrdtId: panelInfo?.prdtId,
+      })
+    );
+  }, [panelInfo?.curationId, panelInfo?.patnrId, panelInfo?.prdtId, lgCatCd]);
+
   useEffect(() => {
     if (productData?.pmtSuptYn === "Y" && productData?.grPrdtProcYn === "Y") {
       dispatch(
@@ -460,18 +474,14 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
           )}
         </TBody>
       </TPanel>
-      {lgCatCd && (productData || themeProductInfos) && youmaylikeData && (
+      {lgCatCd && (productData || themeProductInfos) && (
         <YouMayLike
           isUnable={
             productData?.pmtSuptYn === "N" ||
             panelInfo?.type === "hotel" ||
             panelInfo?.type === "theme"
           }
-          lgCatCd={lgCatCd}
           panelInfo={panelInfo}
-          selectedCurationId={panelInfo?.curationId}
-          selectedPatnrId={panelInfo?.patnrId}
-          selectedPrdtId={panelInfo?.prdtId}
           setSelectedIndex={setSelectedIndex}
           productInfo={productData || themeData}
           setIsYouMayLikeOpened={setIsYouMayLikeOpened}

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

@@ -36,12 +36,9 @@ const Container = SpotlightContainerDecorator(
 const SpottableComponent = Spottable("div");
 export default memo(function YouMayLike({
   isUnable,
-  lgCatCd,
+
   panelInfo,
   productInfo,
-  selectedPatnrId,
-  selectedPrdtId,
-  selectedCurationId,
   setSelectedIndex,
   setIsYouMayLikeOpened,
 }) {
@@ -79,16 +76,8 @@ export default memo(function YouMayLike({
   }, [expanded, setIsYouMayLikeOpened]);
 
   useEffect(() => {
-    dispatch(
-      getMainYouMayLike({
-        lgCatCd: lgCatCd,
-        exclCurationId: selectedCurationId,
-        exclPatnrId: selectedPatnrId,
-        exclPrdtId: selectedPrdtId,
-      })
-    );
     scrollLeft();
-  }, [dispatch, lgCatCd, panelInfo]);
+  }, [panelInfo]);
 
   const cursorVisibleOnFocus = useCallback(() => {
     if (cursorVisible) {
@@ -207,17 +196,19 @@ export default memo(function YouMayLike({
           <span className={classNames(css.arrow, expanded && css.expanded)} />
         </SpottableComponent>
         <Container className={css.itemWrap}>
-          <TVirtualGridList
-            cbScrollTo={getScrollTo}
-            dataSize={youmaylikeData.length}
-            direction="horizontal"
-            autoScroll
-            renderItem={renderItem}
-            itemWidth={324}
-            itemHeight={438}
-            spacing={15}
-            className={css.itemList}
-          />
+          {youmaylikeData && youmaylikeData.length > 0 && (
+            <TVirtualGridList
+              cbScrollTo={getScrollTo}
+              dataSize={youmaylikeData.length}
+              direction="horizontal"
+              autoScroll
+              renderItem={renderItem}
+              itemWidth={324}
+              itemHeight={438}
+              spacing={15}
+              className={css.itemList}
+            />
+          )}
         </Container>
         {expanded && (
           <Container className={css.extraArea} onClick={onClickExtraArea} />