detail add loading

com.twin.app.shoptime/src/actions/homeActions.js

@@ -1,7 +1,7 @@
 import { URLS } from "../api/apiConfig";
 import { TAxios } from "../api/TAxios";
 import { types } from "./actionTypes";
-import { getTermsAgreeYn } from "./commonActions";
+import { changeAppStatus, getTermsAgreeYn } from "./commonActions";
 
 // 약관 정보 조회 IF-LGSP-005
 export const getHomeTerms = (props) => (dispatch, getState) => {
@@ -66,6 +66,8 @@ export const getHomeMenu = () => (dispatch, getState) => {
 export const getThemeCurationDetailInfo = (params) => (dispatch, getState) => {
   const { patnrId, curationId, bgImgNo } = params;
 
+  dispatch(changeAppStatus({ showLoadingPanel: { show: true, type: "wait" } }));
+
   const onSuccess = (response) => {
     console.log("getThemeCurationDetailInfo onSuccess", response.data);
 
@@ -73,10 +75,13 @@ export const getThemeCurationDetailInfo = (params) => (dispatch, getState) => {
       type: types.GET_THEME_CURATION_DETAIL_INFO,
       payload: response.data.data,
     });
+
+    dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
   };
 
   const onFail = (error) => {
     console.error("getThemeCurationDetailInfo onFail", error);
+    dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
   };
 
   TAxios(
@@ -94,6 +99,8 @@ export const getThemeCurationDetailInfo = (params) => (dispatch, getState) => {
 export const getThemeHotelDetailInfo = (params) => (dispatch, getState) => {
   const { patnrId, curationId } = params;
 
+  dispatch(changeAppStatus({ showLoadingPanel: { show: true, type: "wait" } }));
+
   const onSuccess = (response) => {
     console.log("getThemeHotelDetailInfo onSuccess", response.data);
 
@@ -101,10 +108,13 @@ export const getThemeHotelDetailInfo = (params) => (dispatch, getState) => {
       type: types.GET_THEME_HOTEL_DETAIL_INFO,
       payload: response.data.data,
     });
+
+    dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
   };
 
   const onFail = (error) => {
     console.error("getThemeHotelDetailInfo onFail", error);
+    dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
   };
 
   TAxios(

com.twin.app.shoptime/src/actions/mainActions.js

@@ -3,6 +3,7 @@ import { TAxios } from "../api/TAxios";
 import { CATEGORY_DATA_MAX_RESULTS_LIMIT } from "../utils/Config";
 import * as HelperMethods from "../utils/helperMethods";
 import { types } from "./actionTypes";
+import { changeAppStatus } from "./commonActions";
 
 export const getMainLiveShow = (props) => (dispatch, getState) => {
   const onSuccess = (response) => {
@@ -56,6 +57,9 @@ export const setMainLiveUpcomingAlarm = (props) => (dispatch, getState) => {
 // 디테일상품 조회 LF-LGSP-015
 export const getMainCategoryDetail = (props) => (dispatch, getState) => {
   const { patnrId, prdtId } = props;
+
+  dispatch(changeAppStatus({ showLoadingPanel: { show: true, type: "wait" } }));
+
   const onSuccess = (response) => {
     console.log("getMainCategoryDetail onSuccess ", response.data);
 
@@ -63,10 +67,13 @@ export const getMainCategoryDetail = (props) => (dispatch, getState) => {
       type: types.GET_PRODUCT_DETAIL,
       payload: response.data.data,
     });
+
+    dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
   };
 
   const onFail = (error) => {
     console.error("getMainCategoryDetail onFail", error);
+    dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
   };
 
   TAxios(

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

@@ -46,7 +46,6 @@ import YouMayLike from "./YouMayLike/YouMayLike";
 
 export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
   const [lgCatCd, setLgCatCd] = useState("");
-  const [loading, setLoading] = useState(true);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const productData = useSelector((state) => state.main.productData);
   const themeData = useSelector((state) => state.home.productData);
@@ -259,16 +258,6 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
     }
   }, [dispatch, themeProductInfos, selectedIndex, hotelInfos]);
 
-  useEffect(() => {
-    dispatch(
-      changeAppStatus({ showLoadingPanel: { show: true, type: "wait" } })
-    );
-    if (productData || hotelData || themeData) {
-      setLoading(false);
-      dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
-    }
-  }, [dispatch, productData, hotelData, themeData]);
-
   useEffect(() => {
     return () => {
       dispatch(clearProductDetail());