From b2e4b63138926a3b4e0460b22bd74ddc96588ece Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EB=8F=99=EC=98=81?= Date: Wed, 31 Jan 2024 15:59:46 +0900 Subject: [PATCH] =?UTF-8?q?subDepth=20icon=20=EC=B6=94=EA=B0=80=20?= =?UTF-8?q?=EB=B0=8F=20tabLayout=20css=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../icons/ic-category-accessories-nor.png | Bin 0 -> 794 bytes .../assets/icons/ic-category-beauty-nor.png | Bin 0 -> 420 bytes .../icons/ic-category-clearance-nor.png | Bin 0 -> 909 bytes .../assets/icons/ic-category-cw-nor.png | Bin 0 -> 1026 bytes .../icons/ic-category-electronics-nor.png | Bin 0 -> 299 bytes .../assets/icons/ic-category-enter-nor.png | Bin 0 -> 727 bytes .../assets/icons/ic-category-fashion-nor.png | Bin 0 -> 585 bytes .../assets/icons/ic-category-garden-nor.png | Bin 0 -> 751 bytes .../assets/icons/ic-category-health-nor.png | Bin 0 -> 571 bytes .../assets/icons/ic-category-home-nor.png | Bin 0 -> 534 bytes .../assets/icons/ic-category-jewelry-nor.png | Bin 0 -> 866 bytes .../assets/icons/ic-category-kitchen-nor.png | Bin 0 -> 522 bytes .../assets/icons/ic-lnb-right-arrow.png | Bin 0 -> 333 bytes .../src/components/TabLayout/TabItem.jsx | 75 ++++++-- .../components/TabLayout/TabItem.module.less | 171 ++++++++++++++++-- .../src/components/TabLayout/TabLayout.jsx | 150 +++++++-------- .../TabLayout/TabLayout.module.less | 55 +++--- .../iconComponents/convertThemeColor.js | 4 +- 18 files changed, 322 insertions(+), 133 deletions(-) create mode 100644 com.twin.app.shoptime/assets/icons/ic-category-accessories-nor.png create mode 100644 com.twin.app.shoptime/assets/icons/ic-category-beauty-nor.png create mode 100644 com.twin.app.shoptime/assets/icons/ic-category-clearance-nor.png create mode 100644 com.twin.app.shoptime/assets/icons/ic-category-cw-nor.png create mode 100644 com.twin.app.shoptime/assets/icons/ic-category-electronics-nor.png create mode 100644 com.twin.app.shoptime/assets/icons/ic-category-enter-nor.png create mode 100644 com.twin.app.shoptime/assets/icons/ic-category-fashion-nor.png create mode 100644 com.twin.app.shoptime/assets/icons/ic-category-garden-nor.png create mode 100644 com.twin.app.shoptime/assets/icons/ic-category-health-nor.png create mode 100644 com.twin.app.shoptime/assets/icons/ic-category-home-nor.png create mode 100644 com.twin.app.shoptime/assets/icons/ic-category-jewelry-nor.png create mode 100644 com.twin.app.shoptime/assets/icons/ic-category-kitchen-nor.png create mode 100644 com.twin.app.shoptime/assets/icons/ic-lnb-right-arrow.png diff --git a/com.twin.app.shoptime/assets/icons/ic-category-accessories-nor.png b/com.twin.app.shoptime/assets/icons/ic-category-accessories-nor.png new file mode 100644 index 0000000000000000000000000000000000000000..699751ce132f33342823053fa45af4351f607291 GIT binary patch literal 794 zcmV+#1LgdQP)XfC39%JLo4# zBrEG(1kSVMxi;WBD7x@nmt;MRm`yRtU-6C{S>Styfv!X7HC_Q#{gCH5vpf27mqq{)PbW8Boh3EHtCs&w1XB2m|fVeU?Fe$ z)kC=olrs_AiuLx1W&EB`;@%lU_8fBktYZ}<-^37$1Uw?rM`HefqIrzVCl79qlbi#{ z9bz5pD1Lw|)VQ7-rGAS8_|$IlTo~od_%87%PQouhep+d!lz!gzd`etnOZO5)SJ~F6 zavgEx&b#DW1<4lC$dT3K@w?gHUXu3=PH&WZCLW57_}P@l+#Zs4Bl)q{Ce56sZ;i2t z&k+#K4&{c4@B;E)M~tmrAx`r7oXr*oSS%IgZgJiktK1M{qCu?km^+31fUOS>h;1V1 zD6QPB!J%A;W6Tr@k9l^FR8r<~t_P7nVC#czY?Vo-)#9S~?iw?M|8)^4VFI8IE7mh^ z!c|Y6;$_|tY-!blb!=OEf(phtKIqt?PEL!Ia;wNCCu4UKQ+b?rrGqfeJ($G&DuS)VRlHvCC_=0+ zO~pi{Ne@3s52l^xG8C^OI>YCeSaFs*a59s3l1Y+qw0-2 z#%2B5>9&lYf_5v_O&^InpW9qD`7x2DGp?X%>&0R2#KRnIpQ%s|i47DQ*Tp-V1^l^x jSaS;I6#UN>{42l!X-U`?DXv6S00000NkvXXu0mjfyuYn> literal 0 HcmV?d00001 diff --git a/com.twin.app.shoptime/assets/icons/ic-category-cw-nor.png b/com.twin.app.shoptime/assets/icons/ic-category-cw-nor.png new file mode 100644 index 0000000000000000000000000000000000000000..d6f53de1f9647f410258d6f6b652dd0d8fa6a3cd GIT binary patch literal 1026 zcmV+d1pWJoP)G#4j za2UqQamMCiK6sd6zVDp#JMVe7Z(_Y(Z%ia#aWN5oMFmC${_o4vhigq1t3*F>L)?or z3l@q-@kA7e)JQ$zScktq9HvA)MvN8-qE*z1A!04U?1*oREU{Gl5|_l=a0~PxB2#pT zPLaY%edYTDah+#(Au3S}6?;P!B=K0{r{C|h#YAyJycS;8Fl)}@el8Y!im)Hz8_$F! ziu1)HzTXsgoO@}aNxX7?vrW_>#sofQj(mj9U?W#UA#fr-a~CTv5tZT-_glnpBDB?S z>`2j0nu+K5P1qUnL9~S;igQU7*YKk*F~PZ?&e1RS8)rV5hZU!Yb7G%p5NkwouxVzn z^Nf9t7v+xi;|T^|V=IWpP9` zOuh_@oW=1iF(=`pCgPwNCO$j!w=?%cHXaxHpp&VScxOC_IK}%W2;^ zYFqdse%cgZjVhveTrdL5S#TNtbCq4kG2vybRKV{(@iyj`s1?h_cGAj2=NaFXf&n^v zQ%T}DUZ20&guBHlG1l=nv%qP;#cbSMf@FaBf=_lb?<8F0NPx)iRVA@1@PdH2Nvc@K zag_!rTd^GXBm!zI?oml+^DWf1xDd)Hrj@;SqMkKp5ja1>)y;Tte6!vN(#uIAH^#5@O{G~)XPlRaE@pEf z7dV|`w8ah+#T&5V6{6MKO`zqIdP)MNlu(qqOiEJ%N8C(Anl;{t)nW&EvA^F~8#A9u zQ~j?C_SAxFS-73VTxDo3F+9EW$JJy+ibdVG+2V`g>k%WucM)Nj8b5z$`wB znjS-|bs?OuomE)EL!q~{vc(bL*4PS?_I}2-cGvTTQee5$eKb&e`(e#I{49{)W>D8V zdi;hJL=;;!*d$)kxp?TXbI5Du+^gsLomlT^P_KYN=0WqXBJmNCme&S~g`}Yrr``7; za8F+f^tJFs2zx|5ZNY8QoYsFHznAp2Kwm}4#s89N5Z=<1dZ-}TymvhN9|C<>A|)-0 w{Fq8LX{4im9`xT3(Z7JB0;2-|eEk++01#LZx;pkI=Kufz07*qoM6N<$f|&^HkpKVy literal 0 HcmV?d00001 diff --git a/com.twin.app.shoptime/assets/icons/ic-category-electronics-nor.png b/com.twin.app.shoptime/assets/icons/ic-category-electronics-nor.png new file mode 100644 index 0000000000000000000000000000000000000000..d321c92fd520515ece17b7a9899ba6b9c7438fab GIT binary patch literal 299 zcmeAS@N?(olHy`uVBq!ia0vp^8X(NU1|)m_?Z^dEk|nMYCBgY=CFO}lsSJ)O`AMk? zp1FzXsX?iUDV2pMQ*D5X&U(5yhE&{2`t$$4{ow>QAD(8J9;<>Yjf?qYN)>t;x#cWt z6~3_~@mcMB$}W)4{;2zi)dlX3{mdU(tt1+u=|94S_$+i+8T)Jo3s#MViwlE6*wVwa8M(7ze@V%QD;tmOm5U$d@7` jTPF>->>w`#6A#0!I0fbV4}bjtdW^x-)z4*}Q$iB}4}fnT literal 0 HcmV?d00001 diff --git a/com.twin.app.shoptime/assets/icons/ic-category-enter-nor.png b/com.twin.app.shoptime/assets/icons/ic-category-enter-nor.png new file mode 100644 index 0000000000000000000000000000000000000000..14d9ae51651fa49e6690e23aac534faa44325938 GIT binary patch literal 727 zcmV;|0x127P)sP8a z?esnH3LroSUF!SphHGgMi1)7w8LA*h4T3qFxmk1o_~( zR|Q^!V^Gg%=FEaw)WH_e0}eq99D#lC$14KGUW2zF%=1$)4R*aEP%H#0K{e9>Z=q3>n`4m`hot`0dRXUCsQoi}nfl27bAjgJqx_G`bY^ zzu+sF2j8<5_=@F3A{Gam;0L3jD&m%A#Y#W}Xrhl9u#u_2TJWCB@`*LiEqey~m@ZRb z$MhqSeCh=kVA5rA0s5Py|6Wx`(g|z@h2S#_a4zhW{tNj$BY_bX+qmL-F?g3jCAe#G zJ||)-u!_A^m83PG1C%=u@e~Y#Hk)e}pHpQjP{yfq#c%R&FQ^N=4H-RKGH3Z zUGzTOdE0&-SHP^zOUnJ*V2mYZ2+V=CG|$PXlZY*GIFN|cfpva~TbjXExB_{%&a-ZH zmg4#Mr>xr5W9;}4xZ7m%C7hlmk!!miefJn18u1y-?b6k zWjiVWNt^3m7@eepmHG)jDz1tD7piimi(rg7)1|p58OYwc_?(!jK%0no#+5GHw;Hnb$MH_c(6-&TzwD!ko)veVo>% zipi$wC6`2;KVgkCHH$TKk2#mPk6oSr=aDba7w8N8p9TICU;yw0okd+t&x8N~002ov JPDHLkV1m*eP(=U$ literal 0 HcmV?d00001 diff --git a/com.twin.app.shoptime/assets/icons/ic-category-fashion-nor.png b/com.twin.app.shoptime/assets/icons/ic-category-fashion-nor.png new file mode 100644 index 0000000000000000000000000000000000000000..6cbfcf0fa51b5c46e9193a9d580a00b8a05d2cef GIT binary patch literal 585 zcmV-P0=E5$P)q$gGRCwC#n9oWAQ543VGE*F*Wl|^< zWs8VhDFqcS+Vl)PL+hTPbq~{~Rk)~~iVG3@hY*2~V5EknPT#;M3^F+*GaiTVz>ll< zd^3KG_ntE|il%8kFUOqE<1sVnH2f}~?-1X4I zzVON&@q3+fo-sHNS|G&lEzWsn4JJSgyptH`9EIYrljv7#6KoMZt~j1^tdIxrC24RE zoPq_=15Yd~ugtHp>}>F_{sGsZAZ74^>+A+RgYQ3d0k95EKp0#~t-&r$l}DKK4QaZP zo1_F*K-7jdN^MEfVBWA6?W|YhF(L-vKn?6#)Kfn-H69~c2Ma7U35)s|8h7`)Ww6K+ zlN_N*Qd69U!4`|KUh5(z`3Q3rYNyib^b(?gxJfR~TzQ(kc!^`%B-b9&h#S<~Tnc=E zs!6`eT#8z8gK6HBX1NiDqsN>|t*Al0#~$#;G;dMR>(mA$4Q_)VxCi|ax;`~Q9wTNj zX4u7ccDnHx5rZo4@tQWYO=?x?P12i?)-{95gtV?a)pfukTbWfG3sc*XG?)WB;B1V) zI4Av7w`}OQgE;1RYnap6RT|O{?hTV4O&jhN9mnkbpqJjw4C2$xlPR;8=>Of|uK)u8 XQoD4vPxvgf00000NkvXXu0mjf+RX%# literal 0 HcmV?d00001 diff --git a/com.twin.app.shoptime/assets/icons/ic-category-garden-nor.png b/com.twin.app.shoptime/assets/icons/ic-category-garden-nor.png new file mode 100644 index 0000000000000000000000000000000000000000..6172825aaf64b966dec7d0c2e3b869948ca80f32 GIT binary patch literal 751 zcmVTLgivs!iddS_E$Dri&~nC~r}qRF;)}QF(n{ z_zA=1j`!TjGu_1;co22Y%yZ6p&wJjP%3Lm2QO>QZqRd+&m+Xt5K?!+NzGn0Z2SPZY>K0KFHSg37_ zL(qgyz$SPL*YvYk`v}dxW6sc;_oo*F*Ln)!Hy=Xoqv!L}9H#Iddp1CC!E4d(A+z@}MnQKU`3L+d50% zLyFx8zKeyIuv0U58#1t6XYE8tpOj{=Ujy-0Zkg1w0&-~uex^VlyZ)$-!H2%ettA@y zN!S>WvzhFKSI`H43Y;2UDk`oQI}W1=+KrFEUX@LCc{A6kYie|jRWTm|IqwXtQX%oF z=)+2U?X-|MuGBCLTU2oNDxT6>wh`^>wdyynzcotkCOmeUjS>W_B#@GvEzbt%);U@q zSk~X_vsAmlxHKR6L zi{`vMFEWGqasz?Nxku^3u4^P)PUP!U0q?~`M!JjP1 z12C*{NCKu#u}C%q!W!?2Q#nCY_Nw8t#9A##_4-ZVD!8Mg${xWP%fQX1xrHk0B0i=gihyN)xC;tD@q-f@0*|F8VB|AXVVlb<{9;nOGj>^Uq!V}xIvUVP z#=!vSuF0t-@EN4pixW~WHfdv0FHSS3r%sZU8n|dj+h9<-&4fLO2}>O(%5lHm+l*`_ z-roxbml1^g3{qx8Qv;wU_E6@u3-vU1c7yxVrV+o%gJxTxo002ov JPDHLkV1h*l^X~uv literal 0 HcmV?d00001 diff --git a/com.twin.app.shoptime/assets/icons/ic-category-home-nor.png b/com.twin.app.shoptime/assets/icons/ic-category-home-nor.png new file mode 100644 index 0000000000000000000000000000000000000000..4e59f70d7a65d6bde2a3756f04b6e6ac5d7d63a0 GIT binary patch literal 534 zcmV+x0_pvUP)lrx3vg`=Et}|22 zg^x_;&ah{PnLGEc>v^7IvNbq{n-%z1YfR`R*TGESg}=cCIAL3xzzHx1Zo!MMzl;6% zAg@#4C|BqReE9mC!4Ca-oqKQ?lmp@%{x8$7?T}k!xndO;4z?n{sU9*$RbiU+_71ysSf%A~?5@sSME;1%63)IixCc^j;)dCm5ELXD$e6l~qcJTg9sXQcSzTn#m z2Ei*u^>cM=A@klM@1+DXYH^iqfn)FvHozgcwh3#5!y;0uCsPHAecaB2Vx+(p&;?rD^rHW&UIbmRpbJG8gITk-nq+*ASR(@BVZH^Hi2Y(%w28qKA>MC1My0PaHrY9>5Q)uGZ?=h zzUNw?ap&Q zf*f^WaWqW=^e`S~evtL`*t1n&Ej!RDHsbC!b}-#D#5@=4IODH|r{~Q(?D27w&TNK5S87Y`z;iF1rPqbe|Ge9*Qjr zjLjdxPSkFJ5l)8?@8?+*7@Hr$PQ-43J_0+!{h}_-O)l9Lp^kMC?D*^!_zX9hcE5ul z_hz`(%lr=37h}&>fiEev&7xO4;k7r-PC6NHW_~ZPgV?jRqc%Z(g+`&3&cuASnfi7& z$ywY$S$Qlj(*b#C7&1zdY`U2yEt~2k sV*ayvTj)#E|NH;ogurnx@Sgw!05`hd=*Q9X@c;k-07*qoM6N<$figP)|ZX;Dx{M$oE7P|!_6h{7Vwn%;qTAuVbyXNGU_9e8k< zagLAkdCqqosr%F2FUgqZCYoWzY}4!7XTj8(z1#LTN7dBiQEq zLKmE6wbsEAtM&bl;&G~b2EP!(uzRp!bv zcVNLBdtO8SlT@u)Dc+I}1L0GI;_ zFvxA~Nm#Cz+ut4d00-c~?YOlD+Q2h-<3NxQ7W`!MPH^bx1M6-DyEu66MzqvRV9LwD z>MUu7H%1W|ex~c+;5a9jctnDAPB>?h6Se+dtOd287Sw_v$BzI50Jk1#gR6pio&W#< M07*qoM6N<$f^6;P>i_@% literal 0 HcmV?d00001 diff --git a/com.twin.app.shoptime/assets/icons/ic-lnb-right-arrow.png b/com.twin.app.shoptime/assets/icons/ic-lnb-right-arrow.png new file mode 100644 index 0000000000000000000000000000000000000000..2670ad1e22312fc8e50d4ef82a36d3b809ab8de8 GIT binary patch literal 333 zcmV-T0kZyyP)CjpBf6%0&ys0lg?QEfn{&e`=v5bw~vz zEsSs!qEbUqsMY~PA$wVaI!jRK<{D9R2}+~ehY$U)7f?kxQKqeX+q6qx2Z=FA&Wm!!gQX?(%MmOlzW;yOy8i`tM*!xt1Z7{ f3h3WJZvh4Xu24Y@?&rr700000NkvXXu0mjfx6Fh- literal 0 HcmV?d00001 diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx b/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx index 7bc3ad7d..951731ba 100644 --- a/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx +++ b/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx @@ -1,10 +1,13 @@ +import { useCallback, useEffect, useMemo, useRef, useState } from "react"; + +import classNames from "classnames"; +import compose from "ramda/src/compose"; + import { Job } from "@enact/core/util"; import { Marquee, MarqueeController } from "@enact/sandstone/Marquee"; import Spottable from "@enact/spotlight/Spottable"; import { getTargetByDirectionFromElement } from "@enact/spotlight/src/target"; -import classNames from "classnames"; -import compose from "ramda/src/compose"; -import { useCallback, useMemo, useRef, useState } from "react"; + import css from "./TabItem.module.less"; const SpottableComponent = Spottable("div"); @@ -19,42 +22,52 @@ const TabItemBase = ({ deActivateTab, className, onClick, + mainExpandend, + lgCatCd, + isSubItem, + subTitle, + showSubTab = false, ...rest }) => { const [focused, setFocused] = useState(false); + // const [subFocused , setSubFocused] = useState(false) + const [pressed, setPressed] = useState(false); const itemRef = useRef(); const clearPressedJob = useRef( new Job((func) => { - // setPressed(false); setTimeout(func, 100); }, 100) ); const _onClick = useCallback( (ev) => { - // if(ev?.target?.nodeName === 'IMG'){ - // return; - // } clearPressedJob.current.start(() => { if (onClick) { onClick({ index, target }); } }); + + setPressed(true); + onClick({ index, target }); }, - [target, index, onClick] + [target, index, onClick, isSubItem] ); + + useEffect(() => {}, [pressed]); + const _onFocus = useCallback(() => { setFocused(true); }, [index]); const _onBlur = useCallback(() => { setFocused(false); - }, []); + }, [focused]); const isDivider = useMemo(() => { return !title; }, []); + const onKeyDown = useCallback( (event) => { if (event.key === "ArrowRight") { @@ -69,14 +82,27 @@ const TabItemBase = ({ }, [deActivateTab] ); + const renderIcon = useCallback(() => { if (icons) { const Component = icons; - return ; + return ( + + ); } else { return null; } - }, [focused, selected, expanded]); + }, [focused, expanded]); delete rest.hasChildren; delete rest.getChildren; @@ -85,8 +111,11 @@ const TabItemBase = ({ ref={itemRef} className={classNames( css.tabItem, - focused && css.focused - //!isDivider && selected && css.selected + focused && css.focused, + pressed && css.pressed, + isSubItem && css.subDepth, + pressed && css.arrow, + !isDivider && selected && css.selected )} onKeyDown={onKeyDown} onFocus={_onFocus} @@ -94,13 +123,21 @@ const TabItemBase = ({ onClick={_onClick} spotlightDisabled={isDivider} > - {icons &&
{renderIcon()}
} +
+ {icons &&
{renderIcon()}
} +
+ - {expanded && title && ( - - {title} - - )} + {expanded && ( + + {title} + + )} +
+
); }; diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabItem.module.less b/com.twin.app.shoptime/src/components/TabLayout/TabItem.module.less index 7926577f..786a9834 100644 --- a/com.twin.app.shoptime/src/components/TabLayout/TabItem.module.less +++ b/com.twin.app.shoptime/src/components/TabLayout/TabItem.module.less @@ -1,25 +1,80 @@ +@import "../../style/utils.module.less"; +@import "../../style/CommonStyle.module.less"; + @ICON_SIZE: 48px; + .tabItem{ - padding: 18px 12px 18px 42px; font-size: 36px; display: flex; color: #606060; align-items: center; - + height: 84px; + + padding-left: 42px; + padding-right: 24px; &.focused { + color: #eee; + background: linear-gradient(to right, #cb1253, #e15ba1); + border-radius: 42px; + width: 402px; + z-index: 1; + margin-left: 30px; + position:relative; + > div{ + margin-left:-30px; + } + + &.pressed { color: #eee; - background: linear-gradient(#cb1253, #e15ba1); + background: linear-gradient(to right, #cb1253, #e15ba1); border-radius: 42px; width: 402px; + z-index: 1; + margin-left: 30px; + position:relative; + } + &.selected{ + // margin-left:0; } + } + + &.arrow, &.selected { + &::after { + content: ""; + .size(@w:36px, @h:36px); + .position(@position: absolute, @top: 24px, @right: 18px); + background-image: url('../../../assets/icons/ic-lnb-right-arrow.png'); + background-size: 36px 36px; + + + } + } + &.selected { + color: #eee; + } + + &.subDepth{ + width: 386px; + height: 78px; + margin-left: 0; + + &.focused { + background: rgba(255, 255, 255, .1); + border-radius: 0px; + border-right: 6px solid #c70850; + > div { + padding-left: 30px; + + + +}}} - .icon { position: relative; min-width: @ICON_SIZE; height: @ICON_SIZE; - + > img { position: absolute; top: 50%; @@ -39,15 +94,107 @@ } .text { - width: 100%; - line-height: 36px; - padding-left: 18px; - padding-top: 6px; - flex-grow: 1; - flex-shrink: 1; - overflow: hidden; + line-height: 1.2; + padding-left: 11px; + .font(@fontFamily:@baseFontBold, @fontSize:36px); + + + + &.subItem { + .font (@fontFamily:@baseFontBold, @fontSize:30px); + width: 245px; + + } + } + +.subWrap{ + .flex(); + + + span { + .size(@w: 40px, @h:40px); + background-size: cover; + &.category-icon-1017 { + // LG Electronics + background-image: url("../../../assets/category/ic-category-lgelectronics-nor@3x.png"); + } + + // Garden and Outdoors + &.category-icon-1008 { + background-image: url("../../../assets/icons/ic-category-garden-nor.png"); + } + + // Fashion + &.category-icon-1000 { + background-image: url("../../../assets/icons/ic-category-fashion-nor.png"); + } + + // Beauty + &.category-icon-1003 { + background-image: url("../../../assets/icons/ic-category-beauty-nor.png"); + } + + // Jewelry + &.category-icon-1004 { + background-image: url("../../../assets/icons/ic-category-jewelry-nor.png"); + } + + // Home + &.category-icon-1006 { + background-image: url("../../../assets/icons/ic-category-home-nor.png"); + } + + // Kitchen & Food + &.category-icon-1007 { + background-image: url("../../../assets/icons/ic-category-kitchen-nor.png"); + } + + // Accessories + &.category-icon-1014 { + background-image: url("../../../assets/icons/ic-category-accessories-nor.png"); + } + + // Heaclth & Fitness + &.category-icon-1009 { + background-image: url("../../../assets/icons/ic-category-health-nor.png"); + } + + // Entertainment + &.category-icon-1012 { + background-image: url("../../../assets/icons/ic-category-enter-nor.png"); + } + + // Crafts & Sewing + &.category-icon-1011 { + background-image: url("../../../assets/icons/ic-category-cw-nor.png"); + } + + // Electronics + &.category-icon-1010 { + background-image: url("../../../assets/icons/ic-category-electronics-nor.png"); + } + + // Clearance + &.category-icon-1013 { + background-image: url("../../../assets/icons/ic-category-clearance-nor.png"); + } + } + + + +} + +.layout { + display: flex; + + &.focused, &.selected { + // margin-left: -30px; + } +} + + .marqueeWrap { width: 100%; } diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx index b1a18d33..8db526a0 100644 --- a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx +++ b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx @@ -9,20 +9,19 @@ import React, { import classNames from "classnames"; import { useDispatch, useSelector } from "react-redux"; -import { panel_names } from "../../utils/Config"; -import TabItem from "./TabItem"; -import css from "./TabLayout.module.less"; +//아이콘 +import { Job } from "@enact/core/util"; //enact import Skinnable from "@enact/sandstone/Skinnable"; import Spotlight from "@enact/spotlight"; import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; import { Cancelable } from "@enact/ui/Cancelable"; -//아이콘 -import { Job } from "@enact/core/util"; //이미지 import shoptimeFullIcon from "../../../assets/icons/ic-lnb-logo-shoptime@3x.png"; import shopTimeIcon from "../../../assets/icons/ic-lnb-shoptime-symbol@3x.png"; +import { resetPanels } from "../../features/panels/panelsSlice"; +import { panel_names } from "../../utils/Config"; import CartIcon from "./iconComponents/CartIcon"; import CategoryIcon from "./iconComponents/CategoryIcon"; import FeaturedBrandIcon from "./iconComponents/FeaturedBrandIcon"; @@ -32,9 +31,8 @@ import MyPageIcon from "./iconComponents/MyPageIcon"; import OnSaleIcon from "./iconComponents/OnSaleIcon"; import SearchIcon from "./iconComponents/SearchIcon"; import TrendingNowIcon from "./iconComponents/TrendingNowIcon"; - -//이미지 -import { resetPanels } from "../../features/panels/panelsSlice"; +import TabItem from "./TabItem"; +import css from "./TabLayout.module.less"; const Container = SpotlightContainerDecorator( { enterTo: "default-element" }, @@ -52,9 +50,10 @@ const CancelableDiv = Cancelable( ); class TabMenuItem { - constructor(icons = "", title = "", target, children = []) { + constructor(icons = "", title = "", id, target, children = []) { this.icons = icons; this.title = title; + this.id = id; this.target = target; this.children = []; //TabMenuItem if (children && children.length > 0) { @@ -62,6 +61,7 @@ class TabMenuItem { const tabmenu = new TabMenuItem( children[i].icons, children[i].title, + children[i].id, children[i].target, children[i].children ); @@ -110,91 +110,80 @@ export default function TabLayout({ topPanelName, onTabActivated }) { const dispatch = useDispatch(); const [mainExpanded, setMainExpanded] = useState(false); const [mainSelectedIndex, setMainSelectedIndex] = useState(-1); + const [focused, setFocused] = useState(false); const [tabs, setTabs] = useState([]); const [tabFocused, setTabFocused] = useState([false, false, false]); //COLLABSED_MAIN, ACTIVATED_MAIN, ACTIVATED_SUB const panelSwitching = useRef(null); const { cursorVisible } = useSelector((state) => state.common.appStatus); const data = useSelector((state) => state.home.menuData?.data); + const panels = useSelector((state) => state.panels.panels); - const menuItems = useMemo( - () => [ + const menuItems = useMemo(() => { + return [ { icons: CategoryIcon, - title: "", - children: [], }, { icons: MyPageIcon, - title: "", - children: [], }, { icons: SearchIcon, - title: "", target: [{ name: panel_names.SEARCH_PANEL }], }, { icons: HomeIcon, - title: "", target: [{ name: panel_names.HOME_PANEL }], }, { icons: FeaturedBrandIcon, - title: "", - children: [], }, { icons: OnSaleIcon, - title: "", target: [{ name: panel_names.ON_SALE_PANEL }], }, { icons: TrendingNowIcon, - title: "", target: [{ name: panel_names.TRENDING_NOW_PANEL }], }, { icons: HotPicksIcon, - title: "", target: [{ name: panel_names.HOT_PICKS_PANEL }], }, { icons: CartIcon, - title: "", target: [{ name: panel_names.CART_PANEL }], }, - - //메뉴 추가 필요 20240112 chw - ], - [data] - ); + ]; + }, []); const getMenuData = (type) => { let result = []; switch (type) { case "Category": - data?.homeCategory.map((item) => { - result.push(item.lgCatNm); - }); - return result; + result = data?.homeCategory.map((item) => ({ + id: item.lgCatCd, + title: item.lgCatNm, + })); + break; case "GNB": - data?.gnb.map((item) => { - result.push(item.menuNm); - }); - return result; + result = data?.gnb.map((item) => ({ + title: item.menuNm, + })); + break; + case "Featured Brands": - data?.shortFeaturedBrands.map((item) => { - result.push(item.patncLogoPath); - }); - return result; + result = data?.shortFeaturedBrands.map((item) => ({ + title: item.patncLogoPath, + })); + break; case "My Page": - data?.mypage.map((item) => { - result.push(item.menuNm); - }); - return result; + result = data?.mypage.map((item) => ({ + title: item.menuNm, + })); + break; } - return null; + return result; }; const dataDivide = useCallback(() => { @@ -216,22 +205,20 @@ export default function TabLayout({ topPanelName, onTabActivated }) { Cart: 8, }; - return order[a] - order[b]; + return order[a.title] - order[b.title]; }); - for (let i = 0; i < mainTitle.length; i++) { - menuItems[i].title = mainTitle[i]; - } - for (let j = 0; j < keys.length; j++) { const currentKey = keys[j]; - const subTitle = getMenuData(currentKey); + const subData = getMenuData(currentKey); - if (subTitle && subTitle.length > 0) { + if (subData && subData.length > 0) { for (let i = 0; i < mainTitle.length; i++) { - if (mainTitle[i] === currentKey) { - menuItems[i].children = subTitle.map((title) => ({ - title, + menuItems[i].title = mainTitle[i].title; + if (mainTitle[i].title === currentKey) { + menuItems[i].children = subData.map((subItem) => ({ + id: subItem.id, + title: subItem.title, })); } } @@ -247,6 +234,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) { const tabmenu = new TabMenuItem( menuItems[i].icons, menuItems[i].title, + menuItems[i].id, menuItems[i].target, menuItems[i].children ); @@ -287,7 +275,8 @@ export default function TabLayout({ topPanelName, onTabActivated }) { break; } case ACTIVATED_SUB: { - setMainExpanded(false); + if (cursorVisible) { + } break; } case EXTRA_AREA: { @@ -303,7 +292,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) { return prev; }); }, - [cursorVisible, deActivateTab] + [cursorVisible, deActivateTab, focused] ); const onTabBlur = useCallback( @@ -337,6 +326,14 @@ export default function TabLayout({ topPanelName, onTabActivated }) { [cursorVisible] ); + const onFocus = () => { + setFocused(true); + }; + + const onBlur = () => { + setFocused(false); + }; + const handleNavigation = useCallback( ({ index, target }) => { setMainSelectedIndex(index); @@ -355,10 +352,9 @@ export default function TabLayout({ topPanelName, onTabActivated }) { const onClickSubItem = useCallback( ({ index, target }) => { if (target) { - dispatch(resetPanels(target)); deActivateTab(); panelSwitching.current = true; - // panelSwitchingJob.start(panelSwitching); + panelSwitchingJob.start(panelSwitching); } }, [dispatch, deActivateTab] @@ -416,27 +412,24 @@ export default function TabLayout({ topPanelName, onTabActivated }) { }, [tabActivated, showTab]); useEffect(() => {}, [showSubTab, mainSelectedIndex]); - if (!showTab) { return null; } - return ( -
+
{/* collabsed Main */} - + {tabs.map((item, index) => ( {/* expanded Main */} -

- -

+ {tabActivated && tabs.map((item, index) => ( @@ -498,7 +497,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) { onMouseLeave={onTabBlur(ACTIVATED_SUB)} > {showSubTab && - tabs[mainSelectedIndex].children.map((item, index) => { + tabs[mainSelectedIndex]?.children.map((item, index) => { return ( ); })} diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less index 38fb37d4..2002960d 100644 --- a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less +++ b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less @@ -1,3 +1,6 @@ +@import "../../style/utils.module.less"; +@import "../../style/CommonStyle.module.less"; + .tabLayoutWrap { width: 100%; height: 100%; @@ -5,6 +8,7 @@ left: 0; top: 0; display: flex; + &.hide { width: auto; } @@ -18,40 +22,55 @@ left: 0; z-index: 1; + &.hide { width: auto; z-index: 0; } + } .tabWrap { width: 120px; height: 100%; - //position:fixed; left: 0; top: 0; background-color: #222222; - display: flex; flex-direction: column; justify-content: center; - // padding-top: 104px; - // padding-bottom: 104px; z-index: 1; flex-grow: 0; transition: width 0.5s ease; + + > img { + width: 54px; + height: 54px; + margin: -40px 24px 84px 42px + + } + &.expanded { width: 402px; + + > img { + width: 234px; + height: 54px; + } + } + &.secondDepthLayout { width: 386px; height: calc(100%); opacity: 0.95; - box-shadow: 8px 0 36px rgba(33, 33, 32, 0.08); padding-bottom: unset; - justify-content: flex-start; - left: 402px; + padding-top: 71px; + z-index: 0; + justify-content: flex-start; + + } &.extraArea { flex-grow: 1; @@ -61,25 +80,9 @@ &.hide { width: 0; } + + + } -.logo { - width: 54px; - height: 54px; - margin: 0 0 84px 42px; - transition: width 0.5s ease; - overflow: hidden; - &.expanded { - width: 234px; - height: 54px; - > img { - width: 234px; - height: 54px; - } - } - > img { - width: 54px; - height: 54px; - } -} diff --git a/com.twin.app.shoptime/src/components/TabLayout/iconComponents/convertThemeColor.js b/com.twin.app.shoptime/src/components/TabLayout/iconComponents/convertThemeColor.js index ee9d51c1..17959f30 100644 --- a/com.twin.app.shoptime/src/components/TabLayout/iconComponents/convertThemeColor.js +++ b/com.twin.app.shoptime/src/components/TabLayout/iconComponents/convertThemeColor.js @@ -3,7 +3,9 @@ export const convertThemeColor = (iconType) => { const theme = { light: { normal: "#353535", - expanded: "#FEFEFE", + expanded: "#353535", + selected: "#FEFEFE", + focused: "#FEFEFE", }, };