[MyPagePanel] 카테고리 별 맵핑

[account.js] lunaSend User Info mock data 생성
2024-02-26 18:37:04 +09:00
parent e7e208bd38
commit eec77bf350
10 changed files with 131 additions and 42 deletions
--- a/com.twin.app.shoptime/src/actions/actionTypes.js
+++ b/com.twin.app.shoptime/src/actions/actionTypes.js
@@ -50,6 +50,7 @@ export const types = {
  GET_MY_FAQ_INFO: "GET_MY_FAQ_INFO",
  GET_NOTICE: "GET_NOTICE",
  GET_MY_CUSTOMERS: "GET_MY_CUSTOMERS",
+  GET_MY_FAVORITE: "GET_MY_FAVORITE",

  // onSale actions
  GET_ON_SALE_INFO: "GET_ON_SALE_INFO",
--- a/com.twin.app.shoptime/src/actions/myPageActions.js
+++ b/com.twin.app.shoptime/src/actions/myPageActions.js
@@ -97,3 +97,30 @@ export const getMyCustomers = () => (dispatch, getState) => {
    onFail
  );
 };
+
+// MyPage 찜 목록 IF-LGSP-052
+export const getMyFavorite = () => (dispatch, getState) => {
+  const onSuccess = (response) => {
+    console.log("getmyFavorite onSuccess ", response.data);
+
+    dispatch({
+      type: types.GET_MY_FAVORITE,
+      payload: response.data.data,
+    });
+  };
+
+  const onFail = (error) => {
+    console.error("getMyFavorite onFail ", error);
+  };
+
+  TAxios(
+    dispatch,
+    getState,
+    "get",
+    URLS.GET_MY_FAVORITE,
+    {},
+    {},
+    onSuccess,
+    onFail
+  );
+};
--- a/com.twin.app.shoptime/src/api/apiConfig.js
+++ b/com.twin.app.shoptime/src/api/apiConfig.js
@@ -36,11 +36,13 @@ export const URLS = {
  GET_PRODUCT_BESTSELLER: "/lgsp/v1/product/bestSeller.lge",
  GET_PRODUCT_GROUP: "/lgsp/v1/product/group.lge",
  GET_PRODUCT_OPTION: "/lgsp/v1/product/option.lge",
+
  //my-page controller
  GET_MY_RECOMMANDED_KEYWORD: "/lgsp/v1/mypage/reckeyword.lge",
  GET_MY_FAQ_INFO: "/lgsp/v1/mypage/support/faq.lge",
  GET_NOTICE: "/lgsp/v1/mypage/support/notice.lge",
  GET_MY_CUSTOMERS: "/lgsp/v1/mypage/customers.lge",
+  GET_MY_FAVORITE: "/lgsp/v1/mypage/favorite.lge",

  //search controller
  GET_SEARCH: "/lgsp/v1/search/list.lge",
--- a/com.twin.app.shoptime/src/lunaSend/account.js
+++ b/com.twin.app.shoptime/src/lunaSend/account.js
@@ -1,8 +1,11 @@
-import LS2Request from "./LS2Request";
+import appinfo from "../../webos-meta/appinfo.json";
 import * as Config from "../utils/Config";
-import appinfo from '../../webos-meta/appinfo.json';
+import LS2Request from "./LS2Request";

-export const getSystemSettings = (parameters, {onSuccess, onFailure, onComplete}) => {
+export const getSystemSettings = (
+  parameters,
+  { onSuccess, onFailure, onComplete }
+) => {
  if (typeof window === "object" && window.PalmSystem) {
    if (process.env.REACT_APP_MODE === "DEBUG") {
      console.log("LUNA SEND getSystemSettings");
@@ -18,11 +21,14 @@ export const getSystemSettings = (parameters, {onSuccess, onFailure, onComplete}
        onComplete,
      });
    }
-  } else if(typeof window === "object"){
-    const language = (typeof window.navigator === 'object') ? (window.navigator.language || window.navigator.userLanguage) : "en-US";
+  } else if (typeof window === "object") {
+    const language =
+      typeof window.navigator === "object"
+        ? window.navigator.language || window.navigator.userLanguage
+        : "en-US";
    const res = {
      settings: {
-        smartServiceCountryCode2: language.split('-')[1],
+        smartServiceCountryCode2: language.split("-")[1],
        captionEnable: true,
      },
      returnValue: true,
@@ -31,7 +37,10 @@ export const getSystemSettings = (parameters, {onSuccess, onFailure, onComplete}
    onComplete(res);
  }
 };
-export const getSystemInfo = (parameters, {onSuccess, onFailure, onComplete}) => {
+export const getSystemInfo = (
+  parameters,
+  { onSuccess, onFailure, onComplete }
+) => {
  if (typeof window === "object" && window.PalmSystem) {
    if (process.env.REACT_APP_MODE === "DEBUG") {
      console.log("LUNA SEND getSystemInfo");
@@ -52,12 +61,15 @@ export const getSystemInfo = (parameters, {onSuccess, onFailure, onComplete}) =>
    onComplete();
  }
 };
-export const getDeviceId = (parameters, {onSuccess, onFailure, onComplete}) => {
-  if(typeof window === "object" && window.PalmSystem){
-    if(process.env.REACT_APP_MODE === "DEBUG") {
+export const getDeviceId = (
+  parameters,
+  { onSuccess, onFailure, onComplete }
+) => {
+  if (typeof window === "object" && window.PalmSystem) {
+    if (process.env.REACT_APP_MODE === "DEBUG") {
      console.log("LUNA SEND getDeviceId");
      return "Some Hard Coded Mock Data";
-    }else{
+    } else {
      return new LS2Request().send({
        service: "luna://com.webos.service.sm",
        method: "deviceid/getIDs",
@@ -74,42 +86,55 @@ export const getDeviceId = (parameters, {onSuccess, onFailure, onComplete}) => {
    onComplete();
  }
 };
-export const getLoginUserData = (parameters, {onSuccess, onFailure, onComplete}) => {
-  if(typeof window === "object" && window.PalmSystem){
-    if(process.env.REACT_APP_MODE === "DEBUG") {
+export const getLoginUserData = (
+  parameters,
+  { onSuccess, onFailure, onComplete }
+) => {
+  if (typeof window === "object" && window.PalmSystem) {
+    if (process.env.REACT_APP_MODE === "DEBUG") {
      console.log("getLoginUserData");
      return "Mock Data";
-    }else{
+    } else {
      return new LS2Request().send({
        service: "luna://com.webos.service.accountmanager",
        method: "getLoginUserData",
-        subscribe: true,
+        subscribe: false,
        parameters: parameters,
        onSuccess,
        onFailure,
        onComplete,
      });
    }
+  } else {
+    onSuccess({
+      userId: "twin",
+      userInfo: "US2401051532595",
+      email: "twin@t-win.kr",
+    });
  }
 };
-export const launchMembershipApp = ({onSuccess, onFailure, onComplete}) => {
-  if(typeof window === "object" && window.PalmSystem){
+
+export const launchMembershipApp = ({ onSuccess, onFailure, onComplete }) => {
+  if (typeof window === "object" && window.PalmSystem) {
    if (process.env.REACT_APP_MODE === "DEBUG") {
      console.log("LUNA SEND launchMembershipApp");
      return "Some Hard Coded Mock Data";
    } else {
      return new LS2Request().send({
-        service: 'luna://com.webos.applicationManager',
-        method: 'launchDefaultApp',
+        service: "luna://com.webos.applicationManager",
+        method: "launchDefaultApp",
        subscribe: false,
-        parameters:{"category":"MembershipApp", params: {query:"", appReturn: {appId: appinfo.id}}},
+        parameters: {
+          category: "MembershipApp",
+          params: { query: "", appReturn: { appId: appinfo.id } },
+        },
        onSuccess,
        onFailure,
-        onComplete
+        onComplete,
      });
    }
  } else {
    onSuccess({ returnValue: true });
    onComplete();
  }
-};
+};
--- a/com.twin.app.shoptime/src/reducers/myPageReducer.js
+++ b/com.twin.app.shoptime/src/reducers/myPageReducer.js
@@ -5,6 +5,7 @@ const initialState = {
  faqData: {},
  contactData: {},
  noticeData: {},
+  favoriteData: {},
 };

 export const myPageReducer = (state = initialState, action) => {
@@ -29,6 +30,11 @@ export const myPageReducer = (state = initialState, action) => {
        ...state,
        contactData: action.payload,
      };
+    case types.GET_MY_FAVORITE:
+      return {
+        ...state,
+        favoriteData: action.payload,
+      };

    default:
      return state;
--- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPagePanel.jsx
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPagePanel.jsx
@@ -1,17 +1,51 @@
 import React, { useCallback, useEffect, useState } from "react";

+import { useSelector } from "react-redux";
+
+import Spotlight from "@enact/spotlight";
+
 import TBody from "../../components/TBody/TBody";
+import THeader from "../../components/THeader/THeader";
 import TPanel from "../../components/TPanel/TPanel";
+import useScrollTo from "../../hooks/useScrollTo";
+import { SpotlightIds } from "../../utils/SpotlightIds";
 import css from "./MyPagePanel.module.less";
+import Favorites from "./MyPageSub/Favorites/Favorites";
+import MyInfo from "./MyPageSub/MyInfo/MyInfo";
+import MyOrders from "./MyPageSub/MyOrders/MyOrders";
+import RecentlyViewed from "./MyPageSub/RecentlyViewed/RecentlyViewed";
+import Reminders from "./MyPageSub/Reminders/Reminders";
 import Support from "./MyPageSub/Support/Support";
 import TermsOfService from "./MyPageSub/TermsOfService/TermsOfService";

 export default function MyPagePanel() {
+  const panelInfos = useSelector((state) => state.panels.panels?.[0]);
+  const { panelInfo } = panelInfos || {};
+  const { menuNm, menuOrd } = panelInfo || {};
+  const { getScrollTo, scrollTop } = useScrollTo();
+
+  const myPageComponents = {
+    "My Info": MyInfo,
+    "My Orders": MyOrders,
+    "Recently Viewed": RecentlyViewed,
+    Favorites: Favorites,
+    Reminders: Reminders,
+    Support: Support,
+    "Terms of Service": TermsOfService,
+  };
+
+  const SelectedComponent = menuNm && myPageComponents[menuNm];
+
+  useEffect(() => {
+    Spotlight.focus(SpotlightIds.TBODY);
+    scrollTop();
+  }, [panelInfos]);
+
  return (
    <TPanel>
-      <TBody className={css.tBody}>
-        {/* <Support /> */}
-        <TermsOfService />
+      <THeader title={menuNm} />
+      <TBody className={css.tBody} cbScrollTo={getScrollTo}>
+        {SelectedComponent && <SelectedComponent />}
      </TBody>
    </TPanel>
  );
--- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPagePanel.module.less
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPagePanel.module.less
@@ -1,3 +1,7 @@
+@import "../../style/CommonStyle.module.less";
+@import "../../style/utils.module.less";
+
 .tBody {
-  height: 100%;
+  height: calc(100% - 90px);
+  background-color: @BG_COLOR_01;
 }
--- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Favorites/Favorites.jsx
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Favorites/Favorites.jsx
@@ -1,5 +1,9 @@
 import React from "react";

+import { useSelector } from "react-redux";
+
 export default function Favorites() {
+  const favoriteDatas = useSelector((state) => state.myPage.favoriteData);
+
  return <div>Favorites</div>;
 }
--- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfService.jsx
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfService.jsx
@@ -53,8 +53,6 @@ export default function TermsOfService() {

  return (
    <div className={css.termsContainer}>
-      <div className={css.title}>{$L("TERMS OF SERVICE")}</div>
-
      <div className={css.contentsBox}>
        <TButtonTab
          contents={tabList}
--- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfService.module.less
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfService.module.less
@@ -6,20 +6,8 @@
  height: 100%;
  background: @BG_COLOR_01;

-  .title {
-    background: @COLOR_WHITE;
-    width: 1800px;
-    height: 90px;
-    font-size: 42px;
-    font-family: @baseFontBold;
-    font-weight: bold;
-    color: @COLOR_GRAY07;
-    text-align: left;
-    padding-left: 59px;
-    line-height: 90px;
-    margin-bottom: 42px;
-  }
  .contentsBox {
+    margin-top: 42px;
    padding: 0px 60px;
    .textBox {
      width: 1680px;