[TToast, commonAction, commonReducer] 공통 컴포넌트 TToast 추가, 리덕스 액션 및 상태관리 추가

com.twin.app.shoptime/src/App/App.js

@@ -6,7 +6,10 @@ import platform from "@enact/core/platform";
 import ThemeDecorator from "@enact/sandstone/ThemeDecorator";
 
 import appinfo from "../../webos-meta/appinfo.json";
-import { changeAppStatus } from "../actions/commonActions";
+import {
+  changeAppStatus,
+  getHttpHeaderForServiceRequest,
+} from "../actions/commonActions";
 import { getAuthenticationCode } from "../actions/deviceActions";
 import {
   getHomeLayout,
@@ -18,9 +21,8 @@ import { getSubCategory, getTop20Show } from "../actions/mainActions";
 import { getMyRecommandedKeyword } from "../actions/myPageActions";
 import { getOnSaleInfo } from "../actions/onSaleActions";
 import { getBestSeller } from "../actions/productActions";
-import { getHttpHeaderForServiceRequest } from "../actions/commonActions";
 import { lunaTest } from "../lunaSend/lunaTest";
-import { getLaunchParams, clearLaunchParams } from "../utils/helperMethods";
+import { clearLaunchParams, getLaunchParams } from "../utils/helperMethods";
 import MainView from "../views/MainView/MainView";
 import css from "./App.module.less";
 import { handleDeepLink } from "./deepLinkHandler";
@@ -30,6 +32,7 @@ let foreGroundChangeTimer = null;
 function AppBase(props) {
   const dispatch = useDispatch();
   const { httpHeader } = useSelector((state) => state.common);
+  const { appStatus } = useSelector((state) => state.common);
 
   // called by [receive httpHeader, launch, relaunch]
   const initService = useCallback(
@@ -39,7 +42,7 @@ function AppBase(props) {
         haveyInit,
         appinfo
       );
-      if(httpHeader){
+      if (httpHeader) {
         if (haveyInit) {
           dispatch(changeAppStatus({ connectionFailed: false }));
           if (typeof window === "object" && window.PalmSystem) {
@@ -133,7 +136,7 @@ function AppBase(props) {
         lunaTest(service, method, subscribe, parameters);
     }
     dispatch(getHttpHeaderForServiceRequest());
-        //todo subscribe
+    //todo subscribe
     // dispatch(getSystemSettings());
     // //get captionEnable
     // dispatch(getSystemSettings2());
@@ -148,10 +151,10 @@ function AppBase(props) {
   }, []);
 
   useEffect(() => {
-    console.log('httpHeader changed ', httpHeader);
-    if(!httpHeader){
-
-    }else{ //계정정보 변경시 또는 초기 로딩시
+    console.log("httpHeader changed ", httpHeader);
+    if (!httpHeader) {
+    } else {
+      //계정정보 변경시 또는 초기 로딩시
       dispatch(changeAppStatus({ showLoadingPanel: { show: true } }));
       initService(true);
     }

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

@@ -19,6 +19,9 @@ export const types = {
   SET_EXIT_APP: "SET_EXIT_APP",
   GET_LOGIN_USER_DATA: "GET_LOGIN_USER_DATA",
 
+  // card actions
+  GET_MY_INFO_CARD_SEARCH: "GET_MY_INFO_CARD_SEARCH",
+
   // appData actions
   ADD_MAIN_INDEX: "ADD_MAIN_INDEX",
 

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

@@ -0,0 +1,32 @@
+import { URLS } from "../api/apiConfig";
+import { TAxios } from "../api/TAxios";
+import { types } from "./actionTypes";
+
+// 회원의 등록 카드 정보 조회 IF-LGSP-332
+export const getMyInfoCardSearch = (props) => (dispatch, getState) => {
+  const { mbrNo } = props;
+
+  const onSuccess = (response) => {
+    console.log("getMyInfoCardSearch onSuccess: ", response.data);
+
+    dispatch({
+      type: types.GET_MY_INFO_CARD_SEARCH,
+      payload: response.data.data,
+    });
+  };
+
+  const onFail = (error) => {
+    console.error("getMyInfoCardSearch OnFail: ", error);
+  };
+
+  TAxios(
+    dispatch,
+    getState,
+    "get",
+    URLS.GET_MY_INFO_CARD_SEARCH,
+    { mbrNo },
+    {},
+    onSuccess,
+    onFail
+  );
+};

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

@@ -43,6 +43,14 @@ export const getLoginUserData = (userData) => ({
   payload: userData,
 });
 
+export const alertToast = (payload) => (dispatch, getState) => {
+  if (typeof window === "object" && !window.PalmSystem) {
+    dispatch(changeAppStatus({ toast: true, toastText: payload }));
+  } else {
+    lunaSend.createToast(payload);
+  }
+};
+
 export const getHttpHeaderForServiceRequest =
   (onComplete) => (dispatch, getState) => {
     console.log("getHttpHeaderForServiceRequest ");

com.twin.app.shoptime/src/api/apiConfig.js

@@ -11,6 +11,9 @@ export const URLS = {
   REGISTER_DEVICE: "/lgsp/v1/device/register.lge",
   REGISTER_DEVICE_INFO: "/lgsp/v1/device/register/info.lge",
 
+  // card controller
+  GET_MY_INFO_CARD_SEARCH: "/lgsp/v1/myinfo/card/search.lge",
+
   //home controller
   GET_HOME_TERMS: "/lgsp/v1/home/terms.lge",
   GET_HOME_MENU: "/lgsp/v1/home/menu.lge",
@@ -59,6 +62,7 @@ export const URLS = {
   GET_PRODUCT_COUPON_INFO: "/lgsp/v1/product/coupon/info.lge",
   GET_PRODUCT_COUPON_SEARCH: "/lgsp/v1/product/coupon/search.lge",
 };
+
 const getRicCode = (country, ricCodeSetting) => {
   if (ricCodeSetting !== "system") {
     return ricCodeSetting;

com.twin.app.shoptime/src/components/TToast/TToast.jsx

@@ -0,0 +1,33 @@
+import React, { useEffect } from "react";
+
+import classNames from "classnames";
+import { useDispatch } from "react-redux";
+
+import Alert from "@enact/sandstone/Alert";
+import Spotlight from "@enact/spotlight";
+
+import { changeAppStatus } from "../../actions/commonActions";
+import css from "./TToast.module.less";
+
+export default function TToast({ text, ...rest }) {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    setTimeout(() => {
+      dispatch(changeAppStatus({ toast: false }));
+      Spotlight.focus();
+    }, 1000);
+  }, [dispatch]);
+
+  return (
+    <Alert
+      className={classNames(css.ttoast)}
+      open
+      type="overlay"
+      spotlightRestrict="self-first"
+      scrimType="none"
+    >
+      {text}
+    </Alert>
+  );
+}

com.twin.app.shoptime/src/reducers/cardReducer.js

@@ -0,0 +1,18 @@
+import { types } from "../actions/actionTypes";
+
+const initialState = {
+  cardData: null,
+};
+
+export const cardReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case types.GET_MY_INFO_CARD_SEARCH:
+      return {
+        ...state,
+        cardData: action.payload,
+      };
+
+    default:
+      return state;
+  }
+};

com.twin.app.shoptime/src/reducers/commonReducer.js

@@ -9,6 +9,8 @@ const initialState = {
     mbr_no: "", //X-User-Number : "US2401051532595"
     cursorVisible: false,
     loginUserData: {},
+    toast: false,
+    toastText: null,
   },
   httpHeader: null,
   isGnbOpened: false,

com.twin.app.shoptime/src/store/store.js

@@ -3,6 +3,7 @@ import thunk from "redux-thunk";
 
 import { appDataReducer } from "../reducers/appDataReducer";
 import { brandReducer } from "../reducers/brandReducer";
+import { cardReducer } from "../reducers/cardReducer";
 import { commonReducer } from "../reducers/commonReducer";
 import { couponReducer } from "../reducers/couponReducer";
 import { deviceReducer } from "../reducers/deviceReducer";
@@ -31,6 +32,7 @@ const rootReducer = combineReducers({
   search: searchReducer,
   event: eventReducer,
   coupon: couponReducer,
+  card: cardReducer,
 });
 
 export const store = createStore(rootReducer, applyMiddleware(thunk));

com.twin.app.shoptime/src/utils/Config.js

@@ -42,3 +42,5 @@ export const ACTIVE_POPUP = {
   termsPopup: "termsPopup",
   exitPopup: "exitPopup",
 };
+
+export const AUTO_SCROLL_DELAY = 600;

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

@@ -12,6 +12,7 @@ import { changeAppStatus } from "../../actions/commonActions";
 import { pushPanel } from "../../actions/panelActions";
 import PreloadImage from "../../components/PreloadImage/PreloadImage";
 import TabLayout from "../../components/TabLayout/TabLayout";
+import TToast from "../../components/TToast/TToast";
 import * as Config from "../../utils/Config";
 import CartPanel from "../CartPanel/CartPanel";
 import CategoryPanel from "../CategoryPanel/CategoryPanel";
@@ -52,6 +53,7 @@ export default function MainView() {
   const mainIndex = useSelector((state) => state.appData.mainIndex);
   const panels = useSelector((state) => state.panels.panels);
   const { showLoadingPanel } = useSelector((state) => state.common.appStatus);
+  const { toast, toastText } = useSelector((state) => state.common.appStatus);
 
   const [tabActivated, setTabActivated] = useState(false);
   const [isTermAgreed, setIsTermAgreed] = useState(false); // TODO: 약관 동의 체크 api 연동
@@ -161,6 +163,7 @@ export default function MainView() {
       )}
       <TabLayout topPanelName={topPanelName} onTabActivated={onTabActivated} />
       <LoadingPanel showLoadingPanel={showLoadingPanel} />
+      {toast && <TToast text={toastText} />}
     </>
   );
 }