[SHOPTIME-3666] Detail Page / 불필요한 API 추가 호출

[수정파일]

  1. SingleOption.jsx
  2. UnableOption.jsx
  3. FavoriteBtn.jsx

[수정내용]

  1.  디테일페이지에 최초 진입시 productInfo API 데이터를 통해 favorite값을 확인할 수 있기에
      flag API를 호출하지않고 productInfo에 있는 flag값을 활용 , favorite 버튼을 눌렀을 시
      flag API를 통해 랜더링하도록 수정

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

@@ -77,6 +77,10 @@ export default function SingleOption({
     (state) => state.common.appStatus.loginUserData
   );
 
+  const favoriteFlagData = useSelector(
+    (state) => state.myPage.favoriteFlagData
+  );
+
   const [hasProductOptionArray, setHasProductOptionArray] = useState(true);
   const [promotions, setPromotions] = useState([]);
   const [selectedBtnOptIdx, setSelectedBtnOptIdx] = useState(0);
@@ -520,6 +524,13 @@ export default function SingleOption({
     Spotlight.focus("spotlight-IndicatorContainer");
   };
 
+  const favoriteFlag = useMemo(() => {
+    if (favoriteFlagData && Object.keys(favoriteFlagData).length > 0) {
+      return favoriteFlagData?.favorFlag;
+    }
+    return productInfo?.favorYn;
+  }, [favoriteFlagData, productInfo]);
+
   const renderItem = useCallback(
     ({ index, ...rest }) => {
       const {
@@ -765,6 +776,7 @@ export default function SingleOption({
             <FavoriteBtn
               selectedPatnrId={selectedPatnrId}
               selectedPrdtId={selectedPrdtId}
+              favoriteFlag={favoriteFlag}
             />
           </Container>
           <div className={css.disclaimerContainer}>

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

@@ -26,6 +26,10 @@ export default function UnableOption({
   const isLoading = useSelector(
     (state) => state.common.appStatus?.showLoadingPanel?.show
   );
+  const favoriteFlagData = useSelector(
+    (state) => state.myPage.favoriteFlagData
+  );
+
   const tooltipDes = $L("Scan for more information about the product.");
 
   const {
@@ -96,6 +100,13 @@ export default function UnableOption({
     }
   }, [dispatch, handleMobileSendPopupOpen]);
 
+  const favoriteFlag = useMemo(() => {
+    if (favoriteFlagData && Object.keys(favoriteFlagData).length > 0) {
+      return favoriteFlagData?.favorFlag;
+    }
+    return productInfo?.favorYn;
+  }, [favoriteFlagData, productInfo]);
+
   const renderPriceItem = useCallback(() => {
     if (productInfo && !promotionCode) {
       if (rewd) {
@@ -291,6 +302,7 @@ export default function UnableOption({
           <FavoriteBtn
             selectedPatnrId={selectedPatnrId}
             selectedPrdtId={selectedPrdtId}
+            favoriteFlag={favoriteFlag}
           />
         </div>
         <div className={css.disclaimerContainer}>{productInfo?.disclaimer}</div>

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

@@ -17,23 +17,18 @@ import * as Config from "../../../utils/Config";
 import { $L } from "../../../utils/helperMethods";
 import css from "./FavoriteBtn.module.less";
 
-export default function FavoriteBtn({ selectedPatnrId, selectedPrdtId }) {
+export default function FavoriteBtn({
+  selectedPatnrId,
+  selectedPrdtId,
+  favoriteFlag,
+}) {
   const dispatch = useDispatch();
   const { popupVisible, activePopup } = useSelector(
     (state) => state.common.popup
   );
-  const favoriteFlagData = useSelector(
-    (state) => state.myPage.favoriteFlagData
-  );
-
-  useEffect(() => {
-    dispatch(
-      getMyFavoriteFlag({ patnrId: selectedPatnrId, prdtId: selectedPrdtId })
-    );
-  }, [selectedPatnrId, selectedPrdtId]);
 
   const handleFavoriteClick = useCallback(() => {
-    switch (favoriteFlagData.favorFlag) {
+    switch (favoriteFlag) {
       case "N":
         dispatch(
           setMainLikeCategory({
@@ -54,7 +49,7 @@ export default function FavoriteBtn({ selectedPatnrId, selectedPrdtId }) {
         break;
       }
     }
-  }, [dispatch, favoriteFlagData, selectedPatnrId, selectedPrdtId]);
+  }, [dispatch, favoriteFlag, selectedPatnrId, selectedPrdtId]);
 
   const PopUpOnClick = useCallback(() => {
     dispatch(
@@ -65,13 +60,13 @@ export default function FavoriteBtn({ selectedPatnrId, selectedPrdtId }) {
     );
     setTimeout(() => Spotlight.focus("favoriteBtn"));
     dispatch(setHidePopup());
-  }, [dispatch, favoriteFlagData]);
+  }, [dispatch, favoriteFlag]);
 
   return (
     <div className={css.favorBtnContainer}>
       <TButton
         className={classNames(
-          favoriteFlagData.favorFlag === "N" ? css.favorBtn : css.favorUnableBtn
+          favoriteFlag === "N" ? css.favorBtn : css.favorUnableBtn
         )}
         onClick={handleFavoriteClick}
         ariaLabel="Register in Favorites"
@@ -86,7 +81,7 @@ export default function FavoriteBtn({ selectedPatnrId, selectedPrdtId }) {
           button1Text={$L("OK")}
           hasText
           text={
-            favoriteFlagData && favoriteFlagData.favorFlag === "N"
+            favoriteFlag && favoriteFlag === "N"
               ? $L("Added to My Favorites List")
               : $L("Removed from My Favorites List")
           }