[MyPagePanel] 스타일 추가 및 작업 중

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",

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
+  );
+};

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",

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

@@ -24,6 +24,7 @@ const KINDS = [
   "introTermsPopup",
   "optionPopup",
   "eventBannerPopup",
+  "supportPopup",
 ];
 
 export default function TPopUp({

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%;
+  }
+}

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;

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 <TPanel>My Page</TPanel>;
+  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 (
+    <TPanel>
+      <Support faqs={faqs} />
+    </TPanel>
+  );
 }

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Favorites/Favorites.jsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function Favorites() {
+  return <div>Favorites</div>;
+}

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfo.jsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function MyInfo() {
+  return <div>MyInfo</div>;
+}

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/MyOrders.jsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function MyOrders() {
+  return <div>MyOrders</div>;
+}

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/RecentlyViewed/RecentlyViewed.jsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function RecentlyViewed() {
+  return <div>RecentlyViewed</div>;
+}

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/Reminders.jsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function Reminders() {
+  return <div>Reminders</div>;
+}

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 (
+    <div className={css.supportContainer}>
+      <div className={css.title}>{$L("Support")}</div>
+      <TBody>
+        {/* FAQ */}
+        <ul className={css.liContainer}>
+          {faqs &&
+            faqs.map((faq, idx) => {
+              return (
+                <SpottableComponent
+                  className={css.supportList}
+                  key={`faq:${idx}`}
+                  onClick={() => {
+                    handleListClick(faq.notiNo);
+                  }}
+                >
+                  {faq.notiTitl}
+                </SpottableComponent>
+              );
+            })}
+        </ul>
+      </TBody>
+      <TPopUp
+        kind="supportPopup"
+        open={faqPopUpOpen}
+        onClose={() => {
+          setFaqPopUpOpen(false);
+        }}
+        hasButton
+        button1Text="OK"
+      >
+        {currentFaqs && (
+          <div className={css.faqConts}>
+            <div className={css.faqTitle}>
+              {/* <Marquee className={css.marquee} marqueeOn="render"> */}
+              {/* <div className={css.notTitle}> */}
+              {currentFaqs.notiTitl}
+              {/* </div> */}
+              {/* </Marquee> */}
+              <div className={css.expDate}>
+                {currentFaqs.expsDt.substring(0, 10)}
+              </div>
+            </div>
+            {/* <TBody */}
+            <TScroller
+              className={css.faqDesc}
+              verticalScrollbar="visible"
+              // focusableScrollbar={true}
+              // dangerouslySetInnerHTML={{
+              // __html: currentFaqs && currentFaqs.notiCntt,
+              // }}
+            >
+              {currentFaqs.notiCntt}
+              {/* </TBody> */}
+            </TScroller>
+          </div>
+        )}
+      </TPopUp>
+    </div>
+  );
+}

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;
+  }
+}

com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfService.jsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function TermsOfService() {
+  return <div>TermsOfService</div>;
+}