From 75458ac1639701901c71884e0dacb2858833e21e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EB=8F=99=EC=98=81?= Date: Fri, 2 Feb 2024 17:09:32 +0900 Subject: [PATCH] =?UTF-8?q?TabLayout=20focus=20=EC=88=98=EC=A0=95(?= =?UTF-8?q?=EC=A7=84=ED=96=89=EC=A4=91)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../assets/icons/ic-tab-partners-focus.png | Bin 0 -> 3162 bytes .../assets/icons/ic-tab-partners-focus@3x.png | Bin 0 -> 10353 bytes .../icons/ic-tab-partners-lnb-selected@3x.png | Bin 0 -> 10600 bytes .../src/components/TabLayout/TabItem.jsx | 82 ++++++------ .../components/TabLayout/TabItem.module.less | 120 +++++++++++------- .../src/components/TabLayout/TabLayout.jsx | 40 ++++-- .../TabLayout/TabLayout.module.less | 17 ++- 7 files changed, 156 insertions(+), 103 deletions(-) create mode 100644 com.twin.app.shoptime/assets/icons/ic-tab-partners-focus.png create mode 100644 com.twin.app.shoptime/assets/icons/ic-tab-partners-focus@3x.png create mode 100644 com.twin.app.shoptime/assets/icons/ic-tab-partners-lnb-selected@3x.png diff --git a/com.twin.app.shoptime/assets/icons/ic-tab-partners-focus.png b/com.twin.app.shoptime/assets/icons/ic-tab-partners-focus.png new file mode 100644 index 0000000000000000000000000000000000000000..9a0f490b63995359072dc963e6f53eb391e1e89b GIT binary patch literal 3162 zcmV-g45jmlP)r004>z1^@s6b%)Yq0000PbVXQnQ*UN; zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU-{7FPXRCwC#U3+kp)fK-n5E3A~6694Y zuh2Ht;u8{K1S~H>ZJBDP^)=MiTI?((`lA;k?lq3MB zpG%xdtRSAvBI#>_5Bv{jFlSgq1hMQU))MQ8FLAvJg>V}2JmMVUY~n@4LgOC#@|Oa< zn(K}ecM+c=ZX>=(Jejo^pM@MHpTAM~!;3h4qyyvy2RH`+n}~<`6**gprA5p5B=Iidvq2TgOyZryX$kH_XxPrNcq{P@qcGgs zM02;-qa=hKbxq~7;kPFQtUPZiu^PzY^9&;OUU#5E< znM_i@M|`ylk^G%_6UXFhiI1pAl0qBX>KeA)O>9dW7O@Y$&pyd1p&&`CCf>{Hmq19F zMZAExj(Z`B)Nqt-cmdmVYn&G7ZuZHzToKAVR(FNvJtU-+d{347IOC{d+g7rzB`SFQ zWns33@@?W1oV9!L9`Sk;89=L5fA%??21Qo=sX&!kW= z;yOjt-EQoIJ&N1}e6>u}O<~_=L?~sJ9uDSd?p50d4r@$gDnKT;WtkAlS`)kK42jXV zw09HO-q6h=xh-TLrzMon8~^a{ttPT&L=jBDci$0p3)$Bx3uTohDSAk49eDiS(g|6W zs!%RAk@*8JmTJfeO$b^l>fq}csR%`8$QZoYr8W)?b{YR5>9Xz$1q*-W$lYqSZRj9< zijnsT-4V)-Ci1vu6j|ozU0iS;(S)t&eu*IToz1lRiSSQMhjpe~Wn^2I@ zcpnwOLg(41^q^~W#}P&yhv(8 z3gvtgc~&+GG)Y_3j-dy9-0CThU@gQI${bOC+C(;tQG^@t@%FB?kVq)nnz(~)qC7XA zP_V5-MS>qzxFeLQ=HsnCVuW&ziCs>BS;l>8KWDJd#I6b`WKH;lQYn70Ms4RDq|YmD zLYb;UaUMG@;m0SG$>OHx)Nan<1yP7qpy>0vt z4JpEp_t^JQ^kHqB5=yzYCJM$YqFnA3id?Ls`>45#y`ntcE0l=|ZdSMhId)doRg2P~ z_Hq{WU9~7<6WpwD2eOeE7ZnN~QXV1R+^_a>7Si|7Mm~gcy676?oS9>4FJ}SY9}!*T z(;<{G;>NesR?g#XQ62-Kj1rXx)K1Rh9Z?NM3ie!W`5JKrED)q@g#c@&YXG>;V)K1Q$)fReAQ@bbRbm&niR457+ib92=P@yPPD2i|kMIOtZuV!%` z1)|&zp~w|&1JzE>qezt7H1sHv4n1;iXRw;Zc}NYkLMS@7qez5KTaKbFib87OD1_o$ zAE|b79=>(dwicyW?c_Y92Hv+Nvnmutu`Tqps!$XOG|*xTJwwz^&SR)8^!WC|P&+w~ zVWQj&p){#b6bUqN*d~-xwUhH0F3L?dp$u0$IS<)bybGcDb^ug6Iginz+z6q_Jw-pE zc5)uRy@w%`cZnUMdptmGp7>R!_Hq`|_j|oUsaK&W81h)-2Cq=|h&RtxdpQf~`#n-9 z9iksSOl{^IhMCwglnyBrY#Az#u>G9c&H2{k4c11?Bc<|SS&f$DfKBWn-Q0l}@ z6>2x{GjnUdocCK6Ooi#qrn(zswow!T<@LaW@ zGngaFwX6xBP=KdYD9%FqdaJh}g|bbQFCiAH4MUGY_H|q>NTIxFVwW6Xuax;}$IxTG ziQN~ck+l$4DA?KHFQV>BwPWZZeZ0wtT`p`J>HJxgzhLy~!7!tkecY7>tU}pAJRri) z)oRbs;;SO;!1q2Zxd{WdcQ@e%^w~O*-<6jorrBHy?qKp9PPS9E@Zidhs~> zI%S~%-zBzr%2-#qPD4;&L(X~=yB@lYeQeSd%0A+9QMXWgL4ob%Tqf$4vyamj3h*=I zU#s#H;^k`lz~BnvDp6O%zBQQ=3P$QM)O*NNhvQl{82>s;MeYGUdf3Dsu>)Uz#aKpR z(-8{rCh;2ai?Kxl2Ih2pC3i86ebirk@vmi{noJ7?z+#pq#7<8g_D$bviG7OfV}hdqv&Z0q}te|vKHW*+grbXAxxF!YNx4b_(S&LuuW+;03c zm5TH+mu>qD+ghTUeX~6i%~d9_pE!efEAg1+{YyB@eu=}Co-&p?2D1(E6yFx(f6T(L z50QS*wYvl+&h|);6A9o%0$L!z<;PNKEh`?w9MulB+(ZNi{df=R@)=} z?H&}0S1|YoE>E%rL-O^UiOfUbb+_^FgBv!CiHrHVJAimzHIW^Fu%;8Uo!Fr8E#i@YhylG3Z1jw+StpvvHl33=Omz343JkqJ zz&*=1d*j3Rrck_j(Z$3so5+mjm^6Q18z*dyEGV#viSrU$OyoE`Tw|N56DIc5vk#2t zseO;|yxq(K6T9s@o`dOYBBy!c0jfcqWa7GnIh={s0=q#MrTKs2%!0>=eZA0Dc~CZJZG86&OaA&W?yc?e-<-Z zy4Ou)&$Q=>J2|QE$dwP+C&vud!Q%rji_ciby?_Z!#P@L~GOrPoZ8_RGd^9lYnGnR@ zToOePgc46YdyIe6CXR0ZiET$F7*!<#w} zkz-2}ERA+%>1}Iyv;jj&&Vgp&37{iEPj{2Y^dGK7J}HSS`D}@b(Nc-G(+d*|u5mpg z_%iG3^RR#AARC^mkcIaUG5KPmxM{ z8pO--8NutvrQu&|o;4AV_Bde(WlR@*?rSSCXFu}dR_|~V=F{HwWWxz7Mt6WM!4Z$! zQho?e9w7%|7~s*ard*LDw*{seUTY0jWlLCBM8d{a%>D+#Fngh9FpJL}(PSNSL(5m2 z%40+y7-^B>ez-F&eC?~%L!+zbuPlss3SQo>=_8^JH=yBpm}7jJ9!E5bVM>d|^`W6R z*~voF@H9Njk3k#a#)AB$T-*WwuJuFSTmIo+KVbYfH2^|PaQk#w9%)!!SgFMd`e7zB z^|Q52l_kSM2n<_2+lv*8+hi5z%NF$>?It2&4e$h_J$v%|X=|1sYNX%7iV(~Mu2CEb zYkeezOg`s#mY9f_-5u*9qVe0?H5&2ELe+UAMM1|$RhTxE#tMZErf3(iTalo5i(0TZ zIRl5mXdcTmg{9x3pd@?BjPkLp#h=3;#DH@B>Ndt`mVf`gCHN(0h}M Gy2J-m2S{ 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 { const [focused, setFocused] = useState(false); - // const [subFocused , setSubFocused] = useState(false) const [pressed, setPressed] = useState(false); - const [changeFocused, setChangeFocused] = useState(false); const itemRef = useRef(); const clearPressedJob = useRef( @@ -51,16 +44,11 @@ const TabItemBase = ({ const _onClick = useCallback( (ev) => { setPressed(true); - setChangeFocused(false); clearPressedJob.current.start(() => { if (onClick) { onClick({ index, target }); } }); - - setPressed(true); - - onClick({ index, target }); }, [target, index, onClick] ); @@ -69,38 +57,56 @@ const TabItemBase = ({ const _onFocus = useCallback(() => { setFocused(true); - if (onFocus) { onFocus(index); } - }, [index]); + }, [index, isArrow]); const _onBlur = useCallback(() => { setFocused(false); setPressed(false); - setChangeFocused(true); - clearPressedJob.current.stop(); }, []); const isDivider = useMemo(() => { - return !title; + if (!title || !path) { + return false; + } + return true; }, []); const onKeyDown = useCallback( (event) => { if (event.key === "ArrowRight") { - const next = getTargetByDirectionFromElement( - "right", - itemRef.current.node - ); - if (!next && deActivateTab) { - deActivateTab(); - } + _onClick(); } }, [deActivateTab] ); + const ImageComponent = useCallback(() => { + return ( + <> + + + + ); + }, [path]); + + const TextComponent = useCallback(() => { + return ( + <> + {expanded && ( + + {title} + + )} + + ); + }, [title]); + const renderIcon = useCallback(() => { if (icons) { const Component = icons; @@ -120,7 +126,7 @@ const TabItemBase = ({ } else { return null; } - }, [focused, expanded]); + }, [focused, expanded, selected]); delete rest.hasChildren; delete rest.getChildren; @@ -129,30 +135,26 @@ const TabItemBase = ({ ref={itemRef} className={classNames( css.tabItem, - focused && css.focused, + !path && focused && css.focused, + !isSubItem && focused && isArrow && css.arrow, + + path && css.path, isSubItem && css.subDepth, - pressed && css.arrow, - !isDivider && selected && css.selected + !path && !isDivider && selected && css.selected, + focused && path && css.ImgFocus, + selected && css.ImgSelect )} onKeyDown={onKeyDown} onFocus={_onFocus} onBlur={_onBlur} onClick={_onClick} - spotlightDisabled={isDivider} > -
+
{icons &&
{renderIcon()}
}
- + - {expanded && ( - - {path ? : title} - - )} + {path ? : }
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 319e9d7e..457f5f42 100644 --- a/com.twin.app.shoptime/src/components/TabLayout/TabItem.module.less +++ b/com.twin.app.shoptime/src/components/TabLayout/TabItem.module.less @@ -3,16 +3,25 @@ @ICON_SIZE: 48px; +.spottable-next-left { + display:none; +} + + .tabItem{ font-size: 36px; display: flex; color: #606060; align-items: center; height: 84px; - + position: relative; padding-left: 42px; padding-right: 24px; + // .spottable-next-left { + // background-color: red; + // } + &.focused { color: #eee; background: linear-gradient(to right, #cb1253, #e15ba1); @@ -21,42 +30,80 @@ z-index: 1; margin-left: 30px; position:relative; - > div{ - margin-left:-30px; - } - } + &.arrow { + &::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; + } } + > div{ + margin-left:-30px; + } - &.arrow { - &::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; + padding-left: 42px; &.focused { background: rgba(255, 255, 255, .1); border-radius: 0px; border-right: 6px solid #c70850; + margin-left: 0px; > div { padding-left: 30px; + } + } + &.path { + padding-left: 0px; + margin-bottom: 70px; + } + .outline { + .position(@position: absolute, @top: 0, @right: auto, @bottom: auto, @left: 0); + .size(@w: 138px, @h:138px); + + background-position: center; + background-size: cover; - + } -}}} + img { + .size(@w: 120px, @h: 120px); + } + + &.ImgFocus { + .outline { + border-radius: 60px; + z-index: 99; + // box-shadow: -3px 0px 30px 0 #c70850; + // border: solid 1px #dadada; + background-image: url("../../../assets/icons/ic-tab-partners-focus@3x.png"); + } + img { + .size(@w: 138px, @h: 138px); + + } + } + + &.ImgSelect { + img { + .size(@w: 138px, @h: 138px); + } + .outline { + background-image: url("../../../assets/icons/ic-tab-partners-lnb-selected@3x.png"); + } + } + } .icon { position: relative; @@ -77,31 +124,29 @@ left: 50%; transform: translate(-50%, -50%); } - - } - .text { line-height: 1.2; padding-left: 11px; .font(@fontFamily:@baseFontBold, @fontSize:36px); - - &.subItem { .font (@fontFamily:@baseFontBold, @fontSize:30px); - width: 245px; - + width: 245px; } - - +} +.layout { + display: flex; } +.marqueeWrap { + width: 100%; + } +} .subWrap{ .flex(); - - span { + span { .size(@w: 40px, @h:40px); background-size: cover; &.category-icon-1017 { @@ -168,23 +213,8 @@ &.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 3f785662..1b5a1aa1 100644 --- a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx +++ b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx @@ -34,8 +34,6 @@ import TrendingNowIcon from "./iconComponents/TrendingNowIcon"; import TabItem from "./TabItem"; import css from "./TabLayout.module.less"; -//이미지 - const Container = SpotlightContainerDecorator( { enterTo: "default-element" }, "div" @@ -179,7 +177,9 @@ export default function TabLayout({ topPanelName, onTabActivated }) { case "Featured Brands": result = data?.shortFeaturedBrands.map((item) => ({ + Id: item.patnrId, path: item.patncLogoPath, + target: [{ name: panel_names.FEATURED_BRANDS_PANEL }], })); break; case "My Page": @@ -225,6 +225,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) { id: subItem.id, title: subItem.title, path: subItem.path, + target: subItem.target, })); } } @@ -272,7 +273,8 @@ export default function TabLayout({ topPanelName, onTabActivated }) { const children = parent.childNodes; const index = Array.prototype.indexOf.call(children, event.target); setMainExpanded(true); - setMainSelectedIndex(index); + setMainSelectedIndex(index - 1); + setSecondDepthReduce(false); } else { if (!panelSwitching.current) { setMainExpanded(true); @@ -288,7 +290,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) { } case EXTRA_AREA: { if (cursorVisible) { - deActivateTabJob.start(deActivateTab); + // deActivateTabJob.start(deActivateTab); return; } } @@ -299,7 +301,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) { return prev; }); }, - [cursorVisible, deActivateTab, focused] + [cursorVisible, deActivateTab] ); const onTabBlur = useCallback( @@ -307,7 +309,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) { switch (type) { case ACTIVATED_MAIN: { if (!cursorVisible) { - setMainExpanded(false); + // setMainExpanded(false); } break; @@ -333,8 +335,12 @@ export default function TabLayout({ topPanelName, onTabActivated }) { [cursorVisible] ); - const onFocus = () => { + const onFocus = (index) => { setFocused(true); + setMainSelectedIndex(index); + if (showSubTab) { + setSecondDepthReduce((prev) => !prev); + } }; const onBlur = () => { @@ -343,7 +349,6 @@ export default function TabLayout({ topPanelName, onTabActivated }) { const handleNavigation = useCallback( ({ index, target }) => { - setMainSelectedIndex(index); if (target) { dispatch(resetPanels(target)); deActivateTab(); @@ -359,6 +364,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) { const onClickSubItem = useCallback( ({ index, target }) => { if (target) { + dispatch(resetPanels(target)); deActivateTab(); panelSwitching.current = true; panelSwitchingJob.start(panelSwitching); @@ -418,19 +424,17 @@ export default function TabLayout({ topPanelName, onTabActivated }) { } }, [tabActivated, showTab]); - useEffect(() => {}, []); - useEffect(() => { setSecondDepthReduce(false); if (showSubTab) { tabs[mainSelectedIndex]?.children.map((item) => { if (item.path) { - console.log("#item.path", item.path); setSecondDepthReduce(true); } }); } - }, [showSubTab, mainSelectedIndex, secondDepthReduce]); + }, [secondDepthReduce, showSubTab, focused]); + if (!showTab) { return null; } @@ -485,6 +489,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) { key={"tabitemExpanded" + index} onClick={handleNavigation} deActivateTab={deActivateTab} + isArrow={showSubTab} icons={item.icons} expanded={mainExpanded} selected={ @@ -505,7 +510,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) { className={classNames( css.tabWrap, css.secondDepthLayout, - // secondDepthReduce && css. + secondDepthReduce && css.secondDepthReduce, !showSubTab && css.hide )} onFocus={onTabHasFocus(ACTIVATED_SUB)} @@ -517,16 +522,23 @@ export default function TabLayout({ topPanelName, onTabActivated }) { 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 b15efbd9..456e4a73 100644 --- a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less +++ b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less @@ -8,8 +8,7 @@ left: 0; top: 0; display: flex; - // display: none; - + &.hide { width: auto; } @@ -40,8 +39,8 @@ justify-content: center; z-index: 1; flex-grow: 0; - transition: width 0.5s ease; - + // transition: width 0.5s ease; + > img { width: 54px; height: 54px; @@ -66,6 +65,16 @@ padding-top: 71px; z-index: 0; justify-content: flex-start; + + &.secondDepthReduce { + width: 216px; + // transition: width 0.5s ease; + + // > div { + // margin-bottom: 90px; + // } + + } } &.extraArea { flex-grow: 1;