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 */} + + + { + setFaqPopUpOpen(false); + }} + hasButton + button1Text="OK" + > + {currentFaqs && ( +
+
+ {/* */} + {/*
*/} + {currentFaqs.notiTitl} + {/*
*/} + {/*
*/} +
+ {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