From fa4798dd3e1e847593dc2e8d5a75bf9356e352a4 Mon Sep 17 00:00:00 2001 From: "hyunwoo93.cha" Date: Fri, 26 Jan 2024 18:31:37 +0900 Subject: [PATCH] =?UTF-8?q?TIconButton,=20TInpu=20=EC=B6=94=EA=B0=80=20?= =?UTF-8?q?=EB=B0=8F=20SearchPanel=20=EC=9E=91=EC=96=B8=20=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../assets/searchpanel/ico_search_submit.png | Bin 0 -> 1972 bytes .../assets/searchpanel/sch-arr-l-f.png | Bin 0 -> 2069 bytes .../assets/searchpanel/sch-arr-l.png | Bin 0 -> 2376 bytes .../assets/searchpanel/sch-arr-r-f.png | Bin 0 -> 1295 bytes .../assets/searchpanel/sch-arr-r.png | Bin 0 -> 2099 bytes .../components/TIconButton/TIconButton.jsx | 106 ++++++++++++++++++ .../TIconButton/TIconButton.module.less | 34 ++++++ .../src/components/TIconButton/package.json | 3 + .../src/components/TInput/TInput.jsx | 49 ++++---- .../src/components/TInput/TInput.module.less | 71 ++++++++---- com.twin.app.shoptime/src/utils/Config.js | 3 + .../src/views/OnSalePanel/OnSalePanel.jsx | 15 ++- .../src/views/SearchPanel/SearchPanel.jsx | 60 +++++++--- .../views/SearchPanel/SearchPanel.module.less | 57 +++++++++- 14 files changed, 338 insertions(+), 60 deletions(-) create mode 100644 com.twin.app.shoptime/assets/searchpanel/ico_search_submit.png create mode 100644 com.twin.app.shoptime/assets/searchpanel/sch-arr-l-f.png create mode 100644 com.twin.app.shoptime/assets/searchpanel/sch-arr-l.png create mode 100644 com.twin.app.shoptime/assets/searchpanel/sch-arr-r-f.png create mode 100644 com.twin.app.shoptime/assets/searchpanel/sch-arr-r.png create mode 100644 com.twin.app.shoptime/src/components/TIconButton/TIconButton.jsx create mode 100644 com.twin.app.shoptime/src/components/TIconButton/TIconButton.module.less create mode 100644 com.twin.app.shoptime/src/components/TIconButton/package.json diff --git a/com.twin.app.shoptime/assets/searchpanel/ico_search_submit.png b/com.twin.app.shoptime/assets/searchpanel/ico_search_submit.png new file mode 100644 index 0000000000000000000000000000000000000000..6b42144f0b96c0c1d3ceca9172897148de7ff712 GIT binary patch literal 1972 zcmaJ?dr%X19#0X_P(kp4BB!^kj7l)sO*Z6Z0_H_QgTw$WR}sl$fi>jeW+4H5l-LT= zaVi=s98{B5A=4`gBYJ9eY_wPer79>~e0$9m5v4MSJ-It?qhRk3uRF8*dwo8i@8kFV z&hAjIelIj+eh7s^2~ACrsmL*&eBYlI?El_3-6e-8LY_@znDPm$8b>K&ok@cNsRnfc zszTMe(v25UA%!vp!!omp>@x|Ydi0bD+V$$|MS_A-D4Gr17Vg_sB(W(r`A0O11@ z4@g?Wb@>97EP28fxe|ee1Ys6Hkkx8sSP_N^FMybQJ|BWv5Q{}85p+wbkx<*{M$4i} z1sQ75;+UDhOh&-3sMeT@2@yzo`Z@%IIW6stu+cJ+C^BV`O>Ksl3>Y#P{BgZPTL=~U zn;UOMTQW<{D5OFyrea)6-benTNivzc-#6q3lHLf?ag4kab&<@ZEjFM=B2^{=$rFYS z(+PC>D2v5M6X;q5QPW`^8>aJED3{J+YhkX2nU81@&ZN%U_*@<=Ll8tF=JOCHQ!bXk zES^{@;jr0Kgem5+Cb_9b3!ye@(Mj7FX?ubz{#~v>ilb`6glC#eMUz#aEHn`&OQFdO zNTtBi4=|(7WVOWkZ|HTvG8D&3P+c-^G61hqEWqAoo|BL) zgK&5WFd_pdxVpEbjr*D_|G!*_bO!R*$N$vJ7i|IWB}z(dq2D$Ikx#R)KwfOIe`n^HBRE=d@c9PyQzU z<49P0e5T zYZ~cMsw3X9sMC=-b-Vljskj-xXw%=nr=@QbHa0I0XuT~Na>kZaVfBBg$Yw-7%-CFe zv*}$he0k-`v2|HROL~s816u!5t6!hhUIH6-4?oj)4aC+Mq0IKgnc%96O%!(xUsV{!0Q)9EAtebJizUSP=_PCK? z+u~98f}gup3mWI`scG$ApPoDoR?Pg*{s2c3`|PX`@P+u3@Y?e3j!_j^(sw(y#D39Q z9kA?ls#7d)ac~E|ocBCGC9y9`A^5IibI~v4eUerWUn=!1Z?8t zJBnxB`tweW!Bg*v_ELwV9o&U?JQu3lcQSS7ZyL&tpY)9*?}w$0CJf+i%WQ(rzD@9Z zulSUS>CP_Kmi9s1?do!!F2CkeUf3JAJD#3ar>Cy}jwk`W~OM=^^euPw+GM zNwX?3UfDn4JkCHc7F>rWfR-^wvnkru{J1ohw{}*SC4>bS) literal 0 HcmV?d00001 diff --git a/com.twin.app.shoptime/assets/searchpanel/sch-arr-l-f.png b/com.twin.app.shoptime/assets/searchpanel/sch-arr-l-f.png new file mode 100644 index 0000000000000000000000000000000000000000..476b3b2c243f0ccf59a6f6473a85a8a7c6ee00e5 GIT binary patch literal 2069 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 literal 0 HcmV?d00001 diff --git a/com.twin.app.shoptime/assets/searchpanel/sch-arr-r-f.png b/com.twin.app.shoptime/assets/searchpanel/sch-arr-r-f.png new file mode 100644 index 0000000000000000000000000000000000000000..f0e7c5b4f65ed344c142190c95a5b99d0a90f013 GIT binary patch literal 1295 zcmV+q1@QWbP)X-ua_{al?5f(kzN^Cmy6TtpZ4yqOf>m#=*|rL}5;z0=MGI#LxDPlD90V?F zEAlG6z7E(2tZDe3qK`vPM_dfH?+lECUZ=yNGS2SvL1LC}v( zwk;)S3?zbfJkV!TfW|@+XmmTUr)g+Rq?_*r{n%tXnuf+kB5210eWodB6-WZm1wk*V z=$gT)3Q1sf7qq&yLaRi&`A*O?Cab;Cs*woVDM5D%dT|ZcuLVh<(Vbe|%As{3-Fz$P zCnl?<(K?X`+9^SI33^dg7p)t~GSEF$L7PAlSl!ARZ3>CLFY2J5n(U@3piLqXwBvz3 z9TVC#l0c)ofu~|YQ$V`;TF}o-c5^IfDo6zFc%V-X3QY+~0D24X#30brkQnIaCcAYI zXo^S#UGITD-VZcYB!Nb610L%YnljSOSAu?FvfF!wrjA6=^&aS>-9mFf5@_^}ZlSp# z-JB0VA6W^S6A}ac(qwn81kDYJpzA%*heOaDkpvpO3wX!}%@yh9oSXxAoT4?S_0*&4y=)b-;Al;k|K;7yN)$$H@O;bQm0uu&$zAa4_v)c3R!I3s0*8xkw zT9dsA+}oCQ4FTO}bT71_Ne4Vp0-h>>wBS$IdHw?qo9vW6lY5~Ea$eVYt!NqO8vMon z!d#mSHTXXunIh)|95LA&As`td=d_|_;HD6e%+6#8=ovOqFH&I&kc zve&x>k^yp7D{6r!bq2cvk~nfE0NmUQkc5#l0$JcvKR^;i`Wjr)GblX+Nf228$4qu& z5Fm*mrvtz(g8)egIju8jfyZM2Nd)O@@VFkP85l?c$SDEGP4-$$APpm@w4!C;)|fyV zMEV*$Rt1oTkdp#VnCzGymWd9e0pw)q&0jaKRtcnLWC*yuN+314MfPxwW1cd*cKo{-tPhKZVM10 z?WZjEwGD`nZ|n75J@Vcvpqt{q(zrtZmet=0+*8~E{sBqdN1)BjGe`gc002ovPDHLk FV1i5|IY|Hj literal 0 HcmV?d00001 diff --git a/com.twin.app.shoptime/assets/searchpanel/sch-arr-r.png b/com.twin.app.shoptime/assets/searchpanel/sch-arr-r.png new file mode 100644 index 0000000000000000000000000000000000000000..b2e3571f06387a820d3b6ee5374fa1c6532a0916 GIT binary patch literal 2099 zcmaJ?4^R_l7T*LS{{%!u5REJWPZ7vJ1d@=11OfpOL_hG6^+yeOt;f@g@B*{~w`$D@q|~G3 z2%Kfq9z^mHt-j{SAR>hzk4Qsd5nhzDQ=&tST&)|!C5#wgLy$Cuz_hw51c%F!g9ej~ zGj;VE2R7(s98E$FKL<-gDh-*nW~87tw@_DGr4#EpDRNj!NPvJ5!L=}9JZ!Q^2pMNV zR|0Hzn8$$^Ab6FG^J7s(IeBmzYDVBhEnkMrs*J^4z>{$*aU7HIcvh>GYmMik=7T(eSS)sH2!(L~5of6} z;aVcjWQkl-P$3qb*?{2&)C9W~wdH6vF5`eoe{8{sy_Pju7LN%W7?03mJOP*QZfOaa zlk@+fM&oO=1|TwFz@I~68LGb36YH5a1j;iXf|t3+|s zQi)=)P{0+yTQvrg9<^Gc7YI2yk}Q)2*P3)lmP*C}5?q5pFG&?`7o`bAqExXkULZ(U zDibpj(^6HbV!l|gT`W*8aaE|U+K8C&C9eJ_u6S9ldlrls$gD!lhNFl+!;Bi?g`Opb z(#Auv8}^Yz>U=k??xCNS=1FxOE%e-D5l&rh;c z%0lAn$uondHOf^@_H`KI@A>$~$==JJsYS;`wXp#%NE#YA5ai?2SU*0*=n>f?lBJBK zPtvOIw0?a>_THsSr!RhdT9|vdzEo4=xbefVtaRVY_STEvIQR4)-IIELdWKW#H#dLg z_ix>yuMG@a<_>j6mC>0Lhh`acioiLm z8VfIabcZ1u7<(M>(1Wx`Q+A0bxkug3&Q^r<{Wapm$f3!AiH3XE*?ob`qe&7ik*4o~|$BbvXj8Ew$ala}M>(rH<^NIhHp?vW7bG-veJ;!7KMcYVa>J$(@LK6W#k704=O zxxzN0$Dlw)>G9oHXeWPM*`L|r(U`P{LZN>tI#zFVboYL>*0!r-_donzK_6v9QzCl* zHdpV!ID2Z~LW}JjYqa5>jtu!=E-SEaeOvvLkQJXp#7#!&uUYbKpofIewyksrrGe_2 z{AMr5my)~RQ+AkF%^817CO2E_+Wcl=!cXqBC4FW)w_WM1OM8oQ{Bz?r#5BY zRqrHX;NtKrbQ_5Dx%vY#?|N-^xI+Rkx-H#-I~Kp!M@AKggK<*;`WJQpes|F>A)A0l zY%UJp$cl0{_JCF573GXPtr!k!0Wi17MSuvUPt62*?CX(l{bIATG0f2cfSVTFWKiM+ zSQo4Z!1kyLn3dMiPsh(UyxH(hci$=8V2@UQDZTqb0#Af$zJS#m{bt$#1;XfI`LQ((# literal 0 HcmV?d00001 diff --git a/com.twin.app.shoptime/src/components/TIconButton/TIconButton.jsx b/com.twin.app.shoptime/src/components/TIconButton/TIconButton.jsx new file mode 100644 index 00000000..078ef871 --- /dev/null +++ b/com.twin.app.shoptime/src/components/TIconButton/TIconButton.jsx @@ -0,0 +1,106 @@ +import React, { useCallback, useRef, useState } from "react"; +import css from "./TIconButton.module.less"; +import Spottable from "@enact/spotlight/Spottable"; +import classNames from "classnames"; +import { useDispatch } from "react-redux"; +import { Job } from "@enact/core/util"; +import * as Config from "../../utils/Config"; +import { popPanel, resetPanels } from "../../features/panels/panelsSlice"; + +const SpottableComponent = Spottable("div"); + +const SIZES = { tiny: "tiny", small: "small" }; +const ICON_TYPES = { + none: "none", + back: "back", + home: "home", + leftArrow: "leftArrow", + rightArrow: "rightArrow", +}; + +export default function TIconButton({ + className, + iconType = ICON_TYPES.none, + size = "normal", + color, + spotlightId = undefined, + children, + onClick, + spotlightDisabled, + disabled, + ...rest +}) { + const dispatch = useDispatch(); + + const [pressed, setPressed] = useState(false); + + const clearPressedJob = useRef( + new Job((func) => { + setPressed(false); + + setTimeout(func, Config.TBUTTON_PRESS_DELAY); + }, Config.TBUTTON_PRESS_DELAY) + ); + + const _onClick = useCallback( + (event) => { + if (disabled) { + event.stopPropagation(); + return; + } + + setPressed(true); + + clearPressedJob.current.start(() => { + if (onClick) { + onClick(event); + } + + switch (iconType) { + case ICON_TYPES.back: { + dispatch(popPanel()); + break; + } + + case ICON_TYPES.home: { + dispatch(resetPanels()); + break; + } + } + }); + }, + [dispatch, iconType, onClick, disabled] + ); + + const _onBlur = useCallback(() => { + setPressed(false); + + clearPressedJob.current.stop(); + }, []); + + const _onFocus = useCallback(() => {}, []); + + return ( + + {children} + + ); +} + +export { ICON_TYPES, SIZES }; diff --git a/com.twin.app.shoptime/src/components/TIconButton/TIconButton.module.less b/com.twin.app.shoptime/src/components/TIconButton/TIconButton.module.less new file mode 100644 index 00000000..333191f3 --- /dev/null +++ b/com.twin.app.shoptime/src/components/TIconButton/TIconButton.module.less @@ -0,0 +1,34 @@ +@import "../../style/CommonStyle.module.less"; +@import "../../style/utils.module.less"; + +.tIconButton { + background-color: transparent; + background-repeat: no-repeat; + background-position: center; + cursor: pointer; + box-sizing: border-box; +} + +.leftArrow { + background-image: url("../../../assets/searchpanel/sch-arr-l.png"); + background-position: center top; + width: 47px; + height: 92px; + + &:focus-within { + background-position: center bottom; + transform: scale(1.2); + } +} + +.rightArrow { + background-image: url("../../../assets/searchpanel/sch-arr-r.png"); + background-position: center top; + width: 47px; + height: 92px; + + &:focus-within { + background-position: center bottom; + transform: scale(1.2); + } +} diff --git a/com.twin.app.shoptime/src/components/TIconButton/package.json b/com.twin.app.shoptime/src/components/TIconButton/package.json new file mode 100644 index 00000000..d4233145 --- /dev/null +++ b/com.twin.app.shoptime/src/components/TIconButton/package.json @@ -0,0 +1,3 @@ +{ + "main": "TIconButton.jsx" +} \ No newline at end of file diff --git a/com.twin.app.shoptime/src/components/TInput/TInput.jsx b/com.twin.app.shoptime/src/components/TInput/TInput.jsx index c6c712a7..02a9db84 100644 --- a/com.twin.app.shoptime/src/components/TInput/TInput.jsx +++ b/com.twin.app.shoptime/src/components/TInput/TInput.jsx @@ -1,8 +1,13 @@ -import classNames from "classnames"; -import React from "react"; +import React, { forwardRef, useCallback, useRef, useEffect } from "react"; import css from "./TInput.module.less"; import { InputField } from "@enact/sandstone/Input"; -import { $L } from "../../utils/helperMethods"; +import Spottable from "@enact/spotlight/Spottable"; +import classNames from "classnames"; +import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator"; + +const Container = SpotlightContainerDecorator("div"); + +const SpottableInputIcon = Spottable("div"); const KINDS = { withIcon: "withIcon" }; const ICONS = { search: "search" }; @@ -10,27 +15,33 @@ const BORDER = { none: "none" }; const COLOR = { transparent: "transparent" }; export default function TInput({ - kind = "", - icon = null, - border = null, - color = null, - className = null, + kind, + icon, + border, + color, + className, spotlightDisabled, ...rest }) { + const handleIconClick = useCallback(() => {}, []); + return ( - + + {kind === "withIcon" && ( + )} - spotlightDisabled={spotlightDisabled} - /> + ); } diff --git a/com.twin.app.shoptime/src/components/TInput/TInput.module.less b/com.twin.app.shoptime/src/components/TInput/TInput.module.less index a91afd68..9d32e8c0 100644 --- a/com.twin.app.shoptime/src/components/TInput/TInput.module.less +++ b/com.twin.app.shoptime/src/components/TInput/TInput.module.less @@ -1,29 +1,62 @@ @import "../../style/CommonStyle.module.less"; @import "../../style/utils.module.less"; -.input { - margin-right: 0; - margin-left: 0; - height: 100px !important; - padding: 20px 40px 20px 50px !important; - border-radius: 50px; - border: 5px solid #ccc; - background-color: #fff !important; +.container { + width: fit-content; + height: fit-content; + position: relative; - &:focus-within, - &:hover { - box-shadow: 0 0 0 2px #fefefe inset; - border: 5px solid @PRIMARY_COLOR_RED; + .input { + margin-right: 0; + margin-left: 0; + height: 100px !important; + padding: 20px 40px 20px 50px !important; + border-radius: 50px; + border: 5px solid #ccc; + background-color: #fff !important; + width: 100% !important; + + &:focus-within, + &:hover { + box-shadow: 0 0 0 2px #fefefe inset; + border: 5px solid @PRIMARY_COLOR_RED; + } + + > div { + display: none; + } + + > input { + font-family: @baseFont; + color: @COLOR_GRAY07 !important; + height: inherit !important; + line-height: inherit !important; + } } - > div { - display: none; + .withIcon { + > div { + display: none; + } } - > input { - font-family: @baseFont; - color: @COLOR_GRAY07 !important; - height: inherit !important; - line-height: inherit !important; + .search { + position: absolute; + background-repeat: no-repeat; + background-position: center top; + width: 41px; + height: 41px; + top: 50%; + right: 30px; + transform: translateY(-50%); + background-image: url("../../../assets/searchpanel/ico_search_submit.png"); + + &:focus-within, + &:hover { + width: 43px; + height: 43px; + transform: translateY(-50%) scale(1.1); + background-position: center bottom; + } } } diff --git a/com.twin.app.shoptime/src/utils/Config.js b/com.twin.app.shoptime/src/utils/Config.js index a357b1c3..313c8215 100644 --- a/com.twin.app.shoptime/src/utils/Config.js +++ b/com.twin.app.shoptime/src/utils/Config.js @@ -25,3 +25,6 @@ export const panel_names = { // debug DEBUG_PANEL: "debugpanel", }; + +//button +export const TBUTTON_PRESS_DELAY = 100; diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx b/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx index 098a6140..187f7b28 100644 --- a/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx +++ b/com.twin.app.shoptime/src/views/OnSalePanel/OnSalePanel.jsx @@ -12,7 +12,9 @@ import css from "./OnSalePanel.module.less"; export default function OnSalePanel() { const dispatch = useDispatch(); - const categoryInfos = useSelector((state) => state.onSale.onSaleData.categoryInfos); + const categoryInfos = useSelector( + (state) => state.onSale.onSaleData.categoryInfos + ); const saleInfos = useSelector((state) => state.onSale.onSaleData.saleInfos); const [currentLgCatCd, setCurrentLgCatCd] = useState(); @@ -34,7 +36,9 @@ export default function OnSalePanel() { useEffect(() => { if (currentLgCatCd) { - dispatch(getOnSaleInfo({ categoryIncFlag: "Y", lgCatCd: currentLgCatCd })); + dispatch( + getOnSaleInfo({ categoryIncFlag: "Y", lgCatCd: currentLgCatCd }) + ); } }, [currentLgCatCd]); @@ -56,7 +60,12 @@ export default function OnSalePanel() { return ( {saleProductInfos.map((saleProduct) => { - return ; + return ( + + ); })} ); diff --git a/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.jsx b/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.jsx index 244a1fcd..35f91383 100644 --- a/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.jsx +++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.jsx @@ -1,16 +1,26 @@ -import React, { useCallback, useEffect, useState } from "react"; +import React, { useCallback, useEffect, useState, useRef } from "react"; import { useDispatch, useSelector } from "react-redux"; -import TInput from "../../components/TInput/TInput"; +import TInput, { KINDS, ICONS } from "../../components/TInput/TInput"; import TPanel from "../../components/TPanel/TPanel"; import TButton from "../../components/TButton/TButton"; import { $L } from "../../utils/helperMethods"; import css from "./SearchPanel.module.less"; +import TIconButton, { + ICON_TYPES, + SIZES, +} from "../../components/TIconButton/TIconButton"; +import classNames from "classnames"; + +import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; + +const Container = SpotlightContainerDecorator( + { enterTo: "last-focused" }, + "div" +); const ITEMS_PER_PAGE = 9; export default function SearchPanel() { - const dispatch = useDispatch(); - const recommandedKeywords = useSelector( (state) => state.myPage.recommandedKeywordData.data?.keywords ); @@ -35,25 +45,39 @@ export default function SearchPanel() { setCurrentPage((prev) => (prev > 1 ? prev - 1 : prev)); }, [currentPage]); + const hasPrevPage = currentPage > 1; + const hasNextPage = + currentPage * ITEMS_PER_PAGE < recommandedKeywords?.length; + return ( - -
+ + {hasPrevPage && ( + + )} + {paginatedKeywords.map((keyword, index) => ( -
{keyword.keywd}
+ + {keyword.keywd} + ))} -
-
- - PREV - - + {hasNextPage && ( + = recommandedKeywords?.length} - > - NEXT - -
+ /> + )} ); } diff --git a/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.module.less b/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.module.less index 988aa7b9..07c4846f 100644 --- a/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.module.less +++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.module.less @@ -5,5 +5,60 @@ background-color: @BG_COLOR_01; width: 100%; height: 100%; - .flex(@direction: row); + + > section { + display: flex; + justify-content: center; + flex-direction: column; + } + + .input { + width: 880px; + margin: 0 auto 180px; + } + + .arrow { + position: absolute; + top: 59%; + } + + .arrowLeft { + left: 60px; + } + + .arrowRight { + right: 60px; + } + + .keywordsGrid { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 80px; + width: 100%; + place-items: center; + padding: 0 233px; + + .keywordBox { + width: 390px; + height: 97px; + border-radius: 10px; + box-shadow: 0 4px 8px 0 rgba(2, 3, 3, 0.2); + border: 1px solid #999; + background-color: #f5f5f5; + color: #333; + font-family: @baseFontBold; + font-size: 40px; + + > div { + overflow: unset; + } + + &:focus-within { + box-shadow: 0 0 50px 0 rgba(11, 8, 8, 0.5); + border: 4px solid #c70850; + color: #c70850; + background-color: #f5f5f5; + } + } + } }