From 82f25e4163379c4ece6f4dfc91a41c04d9c8430b Mon Sep 17 00:00:00 2001 From: "junghoon86.park" Date: Mon, 1 Apr 2024 14:09:12 +0900 Subject: [PATCH] =?UTF-8?q?[mypage]support=20=ED=8C=9D=EC=97=85=EB=B6=80?= =?UTF-8?q?=EB=B6=84=20=EC=9D=B8=EB=94=94=EC=BC=80=EC=9D=B4=ED=84=B0=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80.=20=20-=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=EC=B6=94=EA=B0=80=20=20-=20Tpopup=20?= =?UTF-8?q?=ED=8C=8C=EB=9D=BC=EB=AF=B8=ED=84=B0=20=EC=B6=94=EA=B0=80.=20?= =?UTF-8?q?=20-=20=EC=84=9C=ED=8F=BF=ED=8A=B8=20=EB=B6=80=EB=B6=84=20?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EB=B6=88=EB=9F=AC=EC=98=A4?= =?UTF-8?q?=EB=8A=94=EA=B3=B3=20=EB=B6=80=EB=B6=84=EB=B3=80=EA=B2=BD.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../assets/images/MS-arr-l-s.png | Bin 0 -> 2194 bytes .../assets/images/MS-arr-l.png | Bin 0 -> 2535 bytes .../assets/images/MS-arr-r-s.png | Bin 0 -> 2174 bytes .../assets/images/MS-arr-r.png | Bin 0 -> 2518 bytes .../src/components/TPopUp/TPopUp.jsx | 40 ++++++++++++++++++ .../src/components/TPopUp/TPopUp.module.less | 24 ++++++++++- .../Support/ListContents/ListContents.jsx | 31 +++++++++++--- 7 files changed, 87 insertions(+), 8 deletions(-) create mode 100644 com.twin.app.shoptime/assets/images/MS-arr-l-s.png create mode 100644 com.twin.app.shoptime/assets/images/MS-arr-l.png create mode 100644 com.twin.app.shoptime/assets/images/MS-arr-r-s.png create mode 100644 com.twin.app.shoptime/assets/images/MS-arr-r.png diff --git a/com.twin.app.shoptime/assets/images/MS-arr-l-s.png b/com.twin.app.shoptime/assets/images/MS-arr-l-s.png new file mode 100644 index 0000000000000000000000000000000000000000..212a3d7352fd775e1e12a945f33056875d69a04e GIT binary patch literal 2194 zcma)8du$VR9KUUJZYxzmHlB{7V35c49=-P3V}*6?pbK^zWq~o&?0Wa>cF^|f-NCvc z(#a4(Nr-^R%K#z_GhsYj5XBAu7!wvA29`yTU?jW)3N9cL@z-|iP*Az#?tb_CeZHUX z`4EQ|@TSvJ;d6n((F9-VA=fMgL9{PK?<8dX#z6>@iijnp zYN`7bmX`tsPLRC75DtVO8bNXP4m&K4ONce9;DJEYuNYcUJ)qZ&C!&>->JY#^K#}IjJb>_#y~6qP zq2_KMoN#Jqd2LZ^ZK%dBjL!nAZm6S^9U#Jtu zu|Px>z-X~WvIvWY^E)MeUX-%HY16|KgCGj5U@|eB(Fiaf!TB(Xrb*1pnP`kKakQ5q z2ro?;dw8BC?<7p7$yO(0wM;gVWWL?*WC#mkbmrNOPMRd0J+cKsMdgA#=+P}g-5hNc z7={)wBk)m}#Y9^$FTq$b%0~gfa8{q-<74uyLk65G$t9BH@2S+{o=Bh$2m10%F(^n? z%9uysz{#n=rjHgaMwl_eSV9pjX=F)e9ARY%A`W#+g6OOM2b3uxO{|Gw>Ayo^#|WIt z{V!PHS)U{aI9NPlfU5v_C|IFK6S-j>l3$XcVrU(VZSQ`8!%-|tKG6>k6wj1Av>@MM zCaq>OMj6Oxf5g-21hP0E2$N+gfW``(6`v4Xg7OJ~v(OmD03&AQXb!XZOa#UdJR@*E zpUF&__1*HqBZUzk5O4=3sMjvn24e74sS)rP<;&)9|7g$c86ObcqT~ zS9SMLm=50PUin3+5q1^J@zDl{ZgS9*s2S1CC%N%-H4>MvssxZSk?_Z}7>6m6Pp#r) zV6T9^@OU{8pzrOsSly~>FX}66T-m+r% z)uUtUJ!un~{B`wxsXl29Z>9{qOp8B^I=`jJymQsH+0FNFu3T_Gr*q+hem@swcJ?Vt zX+1fhQ8zy6%+l6k$B2k+od1JDedJclXl=XWSklGF+0&hMc_;Rtf2N~$c4T#Dcwk!+ z^Ok+Af7q9UXY8Mt+yBS9_dMmiYwMsnN3_ShaB;be$vk+o=|Ere@=-_otT~+XTi*5I z8LxFss85?Q?Fz`QPs?&l$~@REhq4=z{Ykr*=Tr?j| z(^hL1e0K6IBDdtfeq~XotIvyTYVUI++e|fUGp;Ssja-(aHk_;;TtD>EmNTb|-?vS> za;Rf;#->jrdH%K`w>zJgjSW|&=1kU|UVURKvZ>6Ty&>(|l$On!i+i3^ce&5qdg(}E zgxxfKVAb9NvL_u|4!$)TpSk9J5oQ~GDmvF*6f zph^9Hv1OaouFJaGg|GbP)Z#lC$4kqzRhRbT!Q=N$nmZ!hc3|^`{hCYmrTz_hjdN;i zZ+JUW8sEve_b{?^yJqdVqS8;Me!E&(IZm^o3>Mpk2}D=j=+w0XHtuc7-L83d-O{=X z+s>32QrFg=`0!3^)7yWP?Jg_woNeRxBt7_Do0YqY>_4tU7yWA}$S-v6$}4~SFCQEB A{{R30 literal 0 HcmV?d00001 diff --git a/com.twin.app.shoptime/assets/images/MS-arr-l.png b/com.twin.app.shoptime/assets/images/MS-arr-l.png new file mode 100644 index 0000000000000000000000000000000000000000..3a016317625b684673821c2bfa3fe6c85bd788df GIT binary patch literal 2535 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 Iud8z9pUZCKod5s; literal 0 HcmV?d00001 diff --git a/com.twin.app.shoptime/assets/images/MS-arr-r.png b/com.twin.app.shoptime/assets/images/MS-arr-r.png new file mode 100644 index 0000000000000000000000000000000000000000..e9c4e29f0b475b735051adda683ecd1b452c2acf GIT binary patch literal 2518 zcmb_ed2AF_7@uvWK-q%mqQ#>OiwD>2yg7DfXJkufFWTrwj;Yc%gmG> zUM-j53@U^1e9k6!1VqvS z*rwKY>u`Q|eS_S+SmqVy>}q^gr+^$Jp(){=$wbN!I(^QpUjdD+*Q68AnwX1yPSGO7 znX0F86Ji}J9H2h7B2Km!ucB*hSb5&$RAG@k!C5u2{Wg=jFG=R!|D zXParJ1(NLO=x}u~E=_MGDW2yoA2dxM3&QA1nNlZ_GNu$f1fe18YT8t_6mEHxVp_ZD zbE1{zLP(|~k)q?2kxvv#8QCeNNy-JtWYUT&Yi*cOIJAsmt&N7RG$fi-^G;8EnFUAkRQWYeU`Buv00@@Jr!sA53rHqF$GHtjE5 z7pJp{un17Lgj;nLiAG8UHM!k#Sr_y<(Tqz`6+v;kIf-E)5eHJ7pjnn8Vv?IBfLmf? z8~`zvW(t0W!@EI%^ZP}P=eaONg+!k9G69bAhByxpMaEme)};(nO3ARmts-t9v0jN~ z;)DV{F~aR;y#!Cm65*9;HZJkB#7jB65YVAyYI=jFB??NNTgU_+2;ftj)Rdxi7}K(J zIdd44Oz3l3q9uTb089f71d0(TZU*250CJ`gO;O`re=y}5D7WDDB7OhP6m^UunbJQR zE3y#R^rVEuqb8+RNTyS*PP|wfA)qBR9TB6|q1+C=uL}g`>RMb)pa~;7$B);A0v?L@ zcnI1>S^beKXAtV@QmBM=Es19ZE~vvKHwf6U2>1~14ZE$vh(Qi`0Tc9#Opv9hpfitE zh7m;`8~#fySzJu5YM{b&<=cNgT#_FpROBD^k08lbE2DrUv}TLcdO6&JV~RHh;tWN2 zXb(j&9yUhA;ygo0w43MRyetC_7VsTy5V$hhi&I{hx(H zqt5!RbaEiMO-i*ww6&5>D@>o8wvs7<`{2CFC^B_#iC7uoAv5C^j^&eCho+>K&q^=aY{|zrC{~ zROw=Rw)En6Ug0{wVa&bQq!T+=kB*yXPp;Hotys40l@)7^v5p91w!in>f+u%8Ox_=5 z7JNBl?SWG_ZmZZoVr=>j;`9VC?uXtb+Bf~xZ%y-_S$$ySedjJ-dg0R%dwcG$8GF&5 zsUFCbK6S}GD;zhBxc%VZq7h9cedE@3w@lvm{NQJsTE>@NC{=71f(L)DdbF4CYs9|o zYQYZIZtwLeC*CQ0Kq@BfHQ?XRlLjE}aRo)xXEXgp|tvv)nV&b4ce?P9pR;ts6( za1UjnpBs$XE7#ht+1&F+=Gt-g&o>_JCAL1!mIWoG+|H*FU zy2(F0G8kGuu+sq-9=qcFX7Tv`U27c?$F^VgYN+Qz4Oev>F@9GZ^d4hw@+^# z|KYaqya@^a_7wKTk@fpdzI<-d4*TmH`|mrypz&m5Tlnmcj!T~)`$q|Pl^^_Ik4GOk z`qlo;mn}Q7XUWPl<;RyyAGKrGs293xR^3}uy { + if (onLeftClick) { + onLeftClick(e); + } + }, + [onLeftClick] + ); + const _onRightClick = useCallback( + (e) => { + if (onRightClick) { + onRightClick(e); + } + }, + [onRightClick] + ); + return ( )} {children} + {hasIndicator && ( + <> + {currentPage !== 0 && ( + + )} + {currentPage !== itemLength - 1 && ( + + )} + + )} {hasButton && (
{button1Text && ( 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 c0f71ffb..675423fe 100644 --- a/com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less +++ b/com.twin.app.shoptime/src/components/TPopUp/TPopUp.module.less @@ -210,7 +210,7 @@ .supportPopup { .default-style(); - + position: relative; .info { width: 1064px; height: 749px; @@ -222,6 +222,28 @@ display: flex; justify-content: center; } + .leftBtn { + position: absolute; + left: 10px; + top: calc(50% - 52px); + width: 27px; + height: 52px; + background-image: url(../../../assets/images/MS-arr-l.png); + &:focus { + background-image: url(../../../assets/images/MS-arr-l-s.png); + } + } + .rightBtn { + position: absolute; + right: 10px; + top: calc(50% - 52px); + width: 27px; + height: 52px; + background-image: url(../../../assets/images/MS-arr-r.png); + &:focus { + background-image: url(../../../assets/images/MS-arr-r-s.png); + } + } } .title { width: 100%; diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/ListContents/ListContents.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/ListContents/ListContents.jsx index 2162c356..96e41144 100644 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/ListContents/ListContents.jsx +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Support/ListContents/ListContents.jsx @@ -6,10 +6,10 @@ import Spottable from "@enact/spotlight/Spottable"; import Marquee from "@enact/ui/Marquee"; import { getMyFaqInfo, getNotice } from "../../../../../actions/myPageActions"; +import TButtonScroller from "../../../../../components/TButtonScroller/TButtonScroller"; import TPopUp from "../../../../../components/TPopUp/TPopUp"; import TScroller from "../../../../../components/TScroller/TScroller"; import css from "./ListContents.module.less"; -import TButtonScroller from "../../../../../components/TButtonScroller/TButtonScroller"; const SpottableComponent = Spottable("li"); @@ -24,7 +24,7 @@ export default function ListContents({ selectedTab }) { const [faqPopUpOpen, setFaqPopUpOpen] = useState(false); const [currentInfos, setCurrentInfos] = useState(null); const [listInfos, setListInfos] = useState([]); - + const [openIdx, setOpenIdx] = useState(null); useEffect(() => { dispatch(getMyFaqInfo({})); dispatch(getNotice({})); @@ -34,17 +34,30 @@ export default function ListContents({ selectedTab }) { selectedTab === 0 ? setListInfos(faqInfos) : setListInfos(noticeInfos); }, [selectedTab, faqInfos, noticeInfos]); + let selectedData = null; const handleListClick = useCallback( - (notiNo) => { + (idx) => { if (listInfos) { - const selectedData = listInfos.find((list) => list.notiNo === notiNo); - setCurrentInfos(selectedData); + selectedData = listInfos[idx]; + setOpenIdx(idx); setFaqPopUpOpen(true); } }, [listInfos, currentInfos, faqInfos, noticeInfos] ); + const onLeftClick = useCallback(() => { + if (openIdx !== 0) { + setOpenIdx((openIdx) => (openIdx > 0 ? openIdx - 1 : openIdx)); + } + }, [openIdx, currentInfos, listInfos]); + const onRightClick = useCallback(() => { + setOpenIdx((openIdx) => openIdx + 1); + }, [openIdx, currentInfos, listInfos]); + useEffect(() => { + selectedData = listInfos[openIdx]; + setCurrentInfos(selectedData); + }, [openIdx]); return ( <> @@ -55,7 +68,7 @@ export default function ListContents({ selectedTab }) { { - handleListClick(list.notiNo); + handleListClick(idx); }} > @@ -73,6 +86,11 @@ export default function ListContents({ selectedTab }) { setFaqPopUpOpen(false); }} hasButton + hasIndicator + onLeftClick={onLeftClick} + onRightClick={onRightClick} + itemLength={listInfos?.length} + currentPage={openIdx} button1Text="OK" > {currentInfos && ( @@ -99,4 +117,3 @@ export default function ListContents({ selectedTab }) { ); } -0;