diff --git a/com.twin.app.shoptime/src/actions/actionTypes.js b/com.twin.app.shoptime/src/actions/actionTypes.js
index bafa4f0f..434e56e3 100644
--- a/com.twin.app.shoptime/src/actions/actionTypes.js
+++ b/com.twin.app.shoptime/src/actions/actionTypes.js
@@ -35,6 +35,7 @@ export const types = {
// myPage actions
GET_MY_RECOMMANDED_KEYWORD: "GET_MY_RECOMMANDED_KEYWORD",
+ GET_MY_FAQ_INFO: "GET_MY_FAQ_INFO",
// onSale actions
GET_ON_SALE_INFO: "GET_ON_SALE_INFO",
diff --git a/com.twin.app.shoptime/src/actions/myPageActions.js b/com.twin.app.shoptime/src/actions/myPageActions.js
index 4b7d8565..2fd7047e 100644
--- a/com.twin.app.shoptime/src/actions/myPageActions.js
+++ b/com.twin.app.shoptime/src/actions/myPageActions.js
@@ -28,3 +28,29 @@ export const getMyRecommandedKeyword = () => (dispatch, getState) => {
onFail
);
};
+
+// FAQ 조회 (IF-LGSP-048)
+export const getMyFaqInfo = () => (dispatch, getState) => {
+ const onSuccess = (response) => {
+ console.log("getMyFaqInfo onSuccess ", response.data);
+ dispatch({
+ type: types.GET_MY_FAQ_INFO,
+ payload: response.data.data,
+ });
+ };
+
+ const onFail = (error) => {
+ console.error("getMyFaqInfo onFail ", error);
+ };
+
+ TAxios(
+ dispatch,
+ getState,
+ "get",
+ URLS.GET_MY_FAQ_INFO,
+ {},
+ {},
+ onSuccess,
+ onFail
+ );
+};
diff --git a/com.twin.app.shoptime/src/api/apiConfig.js b/com.twin.app.shoptime/src/api/apiConfig.js
index 5fdf0875..b74d06e1 100644
--- a/com.twin.app.shoptime/src/api/apiConfig.js
+++ b/com.twin.app.shoptime/src/api/apiConfig.js
@@ -36,6 +36,9 @@ export const URLS = {
//my-page controller
GET_MY_RECOMMANDED_KEYWORD: "/lgsp/v1/mypage/reckeyword.lge",
+ GET_MY_FAQ_INFO: "/lgsp/v1/mypage/support/faq.lge",
+ GET_MY_NOTICE_INFO: "/lgsp/v1/mypage/support/notice.lge",
+ GET_MY_CUSTOMERS: "/lgsp/v1/mypage/customers.lge",
//search controller
GET_SEARCH: "/lgsp/v1/search/list.lge",
diff --git a/com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx b/com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx
index 38feb326..b54773bc 100644
--- a/com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx
+++ b/com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx
@@ -24,6 +24,7 @@ const KINDS = [
"introTermsPopup",
"optionPopup",
"eventBannerPopup",
+ "supportPopup",
];
export default function TPopUp({
diff --git a/com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less b/com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less
index 718bbe69..aa8ef3d4 100644
--- a/com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less
+++ b/com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less
@@ -176,3 +176,23 @@
}
}
}
+
+.supportPopup {
+ .default-style();
+
+ .info {
+ width: 1064px;
+ height: 749px;
+ background-color: @COLOR_SKYBLUE;
+ padding: 60px;
+
+ .buttonContainer {
+ margin: 30px 0 0 0;
+ display: flex;
+ justify-content: center;
+ }
+ }
+ .title {
+ width: 100%;
+ }
+}
diff --git a/com.twin.app.shoptime/src/reducers/myPageReducer.js b/com.twin.app.shoptime/src/reducers/myPageReducer.js
index 0cc663e3..90ca4c16 100644
--- a/com.twin.app.shoptime/src/reducers/myPageReducer.js
+++ b/com.twin.app.shoptime/src/reducers/myPageReducer.js
@@ -2,6 +2,9 @@ import { types } from "../actions/actionTypes";
const initialState = {
recommandedKeywordData: {},
+ faqData: {},
+ contactData: {},
+ noticeData: {},
};
export const myPageReducer = (state = initialState, action) => {
@@ -11,6 +14,11 @@ export const myPageReducer = (state = initialState, action) => {
...state,
recommandedKeywordData: action.payload,
};
+ case types.GET_MY_FAQ_INFO:
+ return {
+ ...state,
+ faqData: action.payload,
+ };
default:
return state;
diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPagePanel.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPagePanel.jsx
index fb07f1fe..0451261a 100644
--- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPagePanel.jsx
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPagePanel.jsx
@@ -1,5 +1,32 @@
+import React, { useCallback, useEffect, useState } from "react";
+
+import { useDispatch, useSelector } from "react-redux";
+
+import { getMyFaqInfo } from "../../actions/myPageActions";
+import TBody from "../../components/TBody/TBody";
import TPanel from "../../components/TPanel/TPanel";
+import Support from "./MyPageSub/Support/Support";
export default function MyPagePanel() {
- return My Page;
+ const dispatch = useDispatch();
+ const [faqs, setFaqs] = useState();
+
+ const faqInfos = useSelector((state) => state.myPage.faqData.faqInfos);
+ const contactInfos = useSelector((state) => state.myPage.faqData);
+
+ useEffect(() => {
+ dispatch(getMyFaqInfo({}));
+ }, [dispatch]);
+
+ useEffect(() => {
+ if (faqInfos) {
+ setFaqs(faqInfos);
+ }
+ }, [faqInfos]);
+
+ return (
+
+
+
+ );
}
diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Favorites/Favorites.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Favorites/Favorites.jsx
new file mode 100644
index 00000000..ab7d3265
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Favorites/Favorites.jsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function Favorites() {
+ return
Favorites
;
+}
diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Favorites/Favorites.module.less b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Favorites/Favorites.module.less
new file mode 100644
index 00000000..e69de29b
diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfo.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfo.jsx
new file mode 100644
index 00000000..8e1884a9
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfo.jsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function MyInfo() {
+ return MyInfo
;
+}
diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfo.module.less b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfo.module.less
new file mode 100644
index 00000000..e69de29b
diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/MyOrders.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/MyOrders.jsx
new file mode 100644
index 00000000..996912b2
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/MyOrders.jsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function MyOrders() {
+ return MyOrders
;
+}
diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/MyOrders.module.less b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/MyOrders.module.less
new file mode 100644
index 00000000..e69de29b
diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/RecentlyViewed/RecentlyViewed.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/RecentlyViewed/RecentlyViewed.jsx
new file mode 100644
index 00000000..24e985c3
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/RecentlyViewed/RecentlyViewed.jsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function RecentlyViewed() {
+ return RecentlyViewed
;
+}
diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/RecentlyViewed/RecentlyViewed.module.less b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/RecentlyViewed/RecentlyViewed.module.less
new file mode 100644
index 00000000..e69de29b
diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/Reminders.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/Reminders.jsx
new file mode 100644
index 00000000..276540ab
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/Reminders.jsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function Reminders() {
+ return Reminders
;
+}
diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/Reminders.module.less b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/Reminders.module.less
new file mode 100644
index 00000000..e69de29b
diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/Support.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/Support.jsx
new file mode 100644
index 00000000..cdefd8b3
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/Support.jsx
@@ -0,0 +1,93 @@
+import React, { useCallback, useState } from "react";
+
+import { Marquee, MarqueeController } from "@enact/sandstone/Marquee";
+import Spottable from "@enact/spotlight/Spottable";
+
+import TBody from "../../../../components/TBody/TBody";
+import TPopUp from "../../../../components/TPopUp/TPopUp";
+import TScroller from "../../../../components/TScroller/TScroller";
+import { $L } from "../../../../utils/helperMethods";
+import css from "./Support.module.less";
+
+const SpottableComponent = Spottable("li");
+
+export default function Support({ faqs }) {
+ const [faqPopUpOpen, setFaqPopUpOpen] = useState(false);
+ const [currentFaqs, setCurrentFaqs] = useState(null);
+
+ const handleListClick = useCallback(
+ (notiNo) => {
+ if (faqs) {
+ const selectedFaq = faqs.find((faq) => faq.notiNo === notiNo);
+ setCurrentFaqs(selectedFaq);
+ setFaqPopUpOpen(true);
+ }
+ },
+ [faqs, currentFaqs]
+ );
+
+ const confirmClick = useCallback(() => {
+ console.log("#####close");
+ });
+
+ return (
+
+
{$L("Support")}
+
+ {/* FAQ */}
+
+ {faqs &&
+ faqs.map((faq, idx) => {
+ return (
+ {
+ handleListClick(faq.notiNo);
+ }}
+ >
+ {faq.notiTitl}
+
+ );
+ })}
+
+
+
{
+ setFaqPopUpOpen(false);
+ }}
+ hasButton
+ button1Text="OK"
+ >
+ {currentFaqs && (
+
+
+ {/*
*/}
+
+ {currentFaqs.expsDt.substring(0, 10)}
+
+
+ {/*
+ {currentFaqs.notiCntt}
+ {/* */}
+
+
+ )}
+
+
+ );
+}
diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/Support.module.less b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/Support.module.less
new file mode 100644
index 00000000..a48e374f
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/Support.module.less
@@ -0,0 +1,86 @@
+@import "../../../../style/CommonStyle.module.less";
+@import "../../../../style/utils.module.less";
+
+.supportContainer {
+ background: @BG_COLOR_03;
+ height: 100%;
+ padding-left: 60px;
+ padding-top: 120px;
+ .title {
+ color: #9ba5b5;
+ .font(@fontFamily: @arialFont,@fontSize:60px);
+ line-height: normal;
+ letter-spacing: -0.6px;
+ }
+ .tBody {
+ height: 1080px;
+ }
+ .liContainer {
+ height: 640px;
+ margin-top: 50px;
+ width: 100%;
+ }
+ li {
+ width: 1660px;
+ height: 70px;
+
+ color: @COLOR_GRAY06;
+ .font(@fontFamily: @arialFontBold,@fontSize:30px);
+ background: @COLOR_WHITE;
+ text-align: left;
+
+ line-height: 70px;
+ // padding: 25px 0 25px 61px;
+ letter-spacing: -0.75px;
+ padding-left: 61px;
+ box-shadow: 0px 3px 5.6px 0.4px rgba(0, 0, 0, 0.11);
+ margin: 0 0 10px;
+
+ .border-solid(@size:1px,@color:#cccccc);
+ border-radius: 8px;
+
+ &:hover,
+ &:focus {
+ // .border-solid(@size:1px,@color:@PRIMARY_COLOR_RED);
+ // box-shadow: 0 3px 5.64px 0.36px #0000007d;
+ box-shadow: 0 3px 5.64px 0.36px #0000007d,
+ 0 0 0 4px @PRIMARY_COLOR_RED inset;
+ color: @PRIMARY_COLOR_RED;
+ box-sizing: border-box;
+ }
+ }
+}
+
+.faqConts {
+ background-color: @COLOR_WHITE;
+ font-size: 30px;
+ border: 1px solid @COLOR_GRAY02;
+ color: @COLOR_BLACK;
+ border-radius: 4px;
+ white-space: pre-wrap;
+
+ .faqTitle {
+ .font(@fontFamily: @baseFontBold,@fontSize:30px);
+ border-bottom: 1px solid @COLOR_GRAY02;
+ padding: 20px 30px;
+ display: flex;
+ flex-direction: column;
+ // .marquee {
+ // width: calc(100% - 150px);
+ // }
+ // .notiTitle {
+ // width: calc(100% - 150px);
+ // }
+ .expDate {
+ // width: 150px;
+ text-align: right;
+ .font(@fontFamily: @baseFont,@fontSize:24px);
+ }
+ }
+
+ .faqDesc {
+ padding: 30px;
+ line-height: 50px;
+ height: 460px;
+ }
+}
diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfService.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfService.jsx
new file mode 100644
index 00000000..188c0007
--- /dev/null
+++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfService.jsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function TermsOfService() {
+ return TermsOfService
;
+}
diff --git 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
new file mode 100644
index 00000000..e69de29b