optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
jiwon93.son
2024-02-13 18:55:10 +09:00
parent 1c1f5bb048
commit 2801f6f406
21 changed files with 296 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
com.twin.app.shoptime/src/actions/actionTypes.js
View File

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

26
com.twin.app.shoptime/src/actions/myPageActions.js
View File

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

3
com.twin.app.shoptime/src/api/apiConfig.js
View File

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

1
com.twin.app.shoptime/src/components/TPopUp/TPopUp.jsx
View File

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

20
com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less
View File

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

8
com.twin.app.shoptime/src/reducers/myPageReducer.js
View File

@@ -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;

29
com.twin.app.shoptime/src/views/MyPagePanel/MyPagePanel.jsx
View File

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

5
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Favorites/Favorites.jsx Normal file
View File

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

0
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Favorites/Favorites.module.less Normal file
View File

5
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfo.jsx Normal file
View File

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

0
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyInfo/MyInfo.module.less Normal file
View File

5
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/MyOrders.jsx Normal file
View File

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

0
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/MyOrders.module.less Normal file
View File

5
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/RecentlyViewed/RecentlyViewed.jsx Normal file
View File

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

0
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/RecentlyViewed/RecentlyViewed.module.less Normal file
View File

5
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/Reminders.jsx Normal file
View File

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

0
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/Reminders.module.less Normal file
View File

93
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/Support.jsx Normal file
View File

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

86
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/Support.module.less Normal file
View File

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

5
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfService.jsx Normal file
View File

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

0
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/TermsOfService/TermsOfService.module.less Normal file
View File