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

원인 : 즐겨 찾기 관련 불필요 api  호출
대책 : 즐겨찾기 여부는 내부 변수로 관리하도록 수정

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

@@ -77,10 +77,6 @@ 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);
@@ -96,6 +92,7 @@ export default function SingleOption({
   const [selectedOptionInfo, setSelectedOptionInfo] = useState();
   const [downloadCouponArr, setDownloadCouponArr] = useState([]);
   const [focused, setFocused] = useState(false);
+  const [favoriteFlag, setFavoriteFlag] = useState(productInfo?.favorYn);
 
   const webOSVersion = useSelector(
     (state) => state.common.appStatus.webOSVersion
@@ -524,12 +521,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]);
+  useEffect(() => {
+    setFavoriteFlag(productInfo?.favorYn ? productInfo?.favorYn : "N");
+  }, [productInfo]);
+
+  const onFavoriteFlagChanged = useCallback((ev) => {
+    setFavoriteFlag(ev);
+  }, []);
 
   const renderItem = useCallback(
     ({ index, ...rest }) => {
@@ -777,6 +775,7 @@ export default function SingleOption({
               selectedPatnrId={selectedPatnrId}
               selectedPrdtId={selectedPrdtId}
               favoriteFlag={favoriteFlag}
+              onFavoriteFlagChanged={onFavoriteFlagChanged}
             />
           </Container>
           <div className={css.disclaimerContainer}>

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

@@ -24,7 +24,7 @@ export default function UnableOption({
   soldoutFlag,
 }) {
   const dispatch = useDispatch();
-  const { USE_SELECTOR } = useWhyDidYouUpdate("UnableOption", {
+  const { USE_STATE, USE_SELECTOR } = useWhyDidYouUpdate("UnableOption", {
     handleMobileSendPopupOpen,
     patnrName,
     productInfo,
@@ -37,11 +37,7 @@ export default function UnableOption({
     "isLoading",
     (state) => state.common.appStatus?.showLoadingPanel?.show
   );
-  const favoriteFlagData = USE_SELECTOR(
-    "favoriteFlagData",
-    (state) => state.myPage.favoriteFlagData
-  );
-
+  const [favoriteFlag, setFavoriteFlag] = USE_STATE("favoriteFlag", productInfo?.favorYn);
   const tooltipDes = $L("Scan for more information about the product.");
 
   const {
@@ -130,12 +126,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]);
+  useEffect(() => {
+    setFavoriteFlag(productInfo?.favorYn ? productInfo?.favorYn : "N");
+  }, [productInfo]);
+
+  const onFavoriteFlagChanged = useCallback((ev) => {
+    setFavoriteFlag(ev);
+  }, []);
 
   const renderPriceItem = useCallback(() => {
     if (productInfo && !promotionCode) {
@@ -333,6 +330,7 @@ export default function UnableOption({
             selectedPatnrId={selectedPatnrId}
             selectedPrdtId={selectedPrdtId}
             favoriteFlag={favoriteFlag}
+            onFavoriteFlagChanged={onFavoriteFlagChanged}
           />
         </div>
         <div className={css.disclaimerContainer}>{productInfo?.disclaimer}</div>

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

@@ -52,15 +52,10 @@ export default function FavoriteBtn({
   }, [dispatch, favoriteFlag, selectedPatnrId, selectedPrdtId]);
 
   const PopUpOnClick = useCallback(() => {
-    dispatch(
-      getMyFavoriteFlag({
-        patnrId: selectedPatnrId,
-        prdtId: selectedPrdtId,
-      })
-    );
     setTimeout(() => Spotlight.focus("favoriteBtn"));
     dispatch(setHidePopup());
-  }, [dispatch, favoriteFlag]);
+    onFavoriteFlagChanged(favoriteFlag === "Y" ? "N" : "Y");
+  }, [dispatch, favoriteFlag, onFavoriteFlagChanged]);
 
   return (
     <div className={css.favorBtnContainer}>