From 2e8662f389b598670bf0cb89a37ca81465be8800 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EB=8F=99=EC=98=81?= Date: Tue, 13 Feb 2024 15:03:32 +0900 Subject: [PATCH] =?UTF-8?q?2Depth=20active=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/TabLayout/TabItem.jsx | 54 +++++++++++-------- .../components/TabLayout/TabItem.module.less | 31 ++++++++++- .../src/components/TabLayout/TabItemSub.jsx | 3 +- .../TabLayout/TabItemSub.module.less | 5 +- .../src/components/TabLayout/TabLayout.jsx | 36 ++++++++----- .../TabLayout/TabLayout.module.less | 2 +- 6 files changed, 93 insertions(+), 38 deletions(-) diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx b/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx index 1bbaa926..31c59323 100644 --- a/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx +++ b/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx @@ -14,6 +14,7 @@ const TabItemBase = ({ icons, title, expanded = false, + mainSelected = false, selected = false, index = 0, target, @@ -44,7 +45,6 @@ const TabItemBase = ({ const _onFocus = useCallback(() => { setFocused(true); - if (onFocus) { onFocus(index); } @@ -57,34 +57,44 @@ const TabItemBase = ({ const onKeyDown = useCallback( (event) => { if (event.key === "ArrowRight") { - _onClick(); + if (!showSubTab) { + _onClick(); + } } }, [deActivateTab] ); const renderIcon = useCallback(() => { - if (icons) { - const Component = icons; - - let iconType; - if (expanded && index === mainSelectedIndex) { - iconType = "focused"; - } else { - iconType = focused - ? "focused" - : selected - ? "selected" - : expanded - ? "expanded" - : "normal"; - } - - return ; - } else { + if (!icons) { return null; } - }, [focused, expanded, selected, mainSelectedIndex, index, icons]); + + const Component = icons; + let iconType = "normal"; + + if (expanded && index === mainSelectedIndex) { + iconType = "focused"; + } else if (selected) { + iconType = "selected"; + } else if (mainSelected) { + iconType = "selected"; + } else if (focused) { + iconType = "focused"; + } else if (expanded) { + iconType = "expanded"; + } + + return ; + }, [ + focused, + expanded, + mainSelected, + mainSelectedIndex, + index, + icons, + selected, + ]); delete rest.hasChildren; delete rest.getChildren; @@ -97,6 +107,7 @@ const TabItemBase = ({ (focused || index === mainSelectedIndex) && showSubTab && css.arrow, + mainSelected && css.selected, selected && css.selected )} onKeyDown={onKeyDown} @@ -113,6 +124,7 @@ const TabItemBase = ({ {icons &&
{renderIcon()}
} {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 fe349529..29ee9d77 100644 --- a/com.twin.app.shoptime/src/components/TabLayout/TabItem.module.less +++ b/com.twin.app.shoptime/src/components/TabLayout/TabItem.module.less @@ -3,6 +3,29 @@ @ICON_SIZE: 48px; +// @-webkit-keyframes textLoop { +// 0% { +// -webkit-transform: translate(50%); +// transform: translate(50%); +// } +// to { +// -webkit-transform: translate(calc(-100% - 189px)); +// transform: translate(calc(-100% - 189px)); +// } +// } + +// @keyframes textLoop { +// 0% { +// -webkit-transform: translate(50%); +// transform: translate(50%); +// } +// to { +// -webkit-transform: translate(calc(-100% - 289px)); +// transform: translate(calc(-100% - 189px)); +// left: 100%; /* 끝 μœ„μΉ˜ */ +// } +// } + .tabItem{ font-size: 36px; display: flex; @@ -69,15 +92,21 @@ .text { line-height: 1.2; padding-left: 11px; + // .elip(@clamp: 1); + .font(@fontFamily:@baseFontBold, @fontSize:36px); - + &.subItem { .font (@fontFamily:@baseFontBold, @fontSize:30px); width: 245px; + // word-break:break-all; } + + } + .marqueeWrap { width: 100%; } diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx b/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx index 6aa162cf..bf0bdbc3 100644 --- a/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx +++ b/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx @@ -84,6 +84,7 @@ const TabItemBase = ({ <> {expanded && ( @@ -92,7 +93,7 @@ const TabItemBase = ({ )} ); - }, [title]); + }, [title, focused]); delete rest.hasChildren; delete rest.getChildren; diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.module.less b/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.module.less index 6c4e3398..c1b586af 100644 --- a/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.module.less +++ b/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.module.less @@ -89,11 +89,14 @@ .text { line-height: 1.2; padding-left: 11px; + + .elip(@clamp: 1); .font(@fontFamily:@baseFontBold, @fontSize:36px); &.subItem { .font (@fontFamily:@baseFontBold, @fontSize:30px); - width: 245px; + width: 248px; + word-break:break-all; } } diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx index 6688dfac..43be4057 100644 --- a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx +++ b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx @@ -114,7 +114,6 @@ export default function TabLayout({ topPanelName, onTabActivated }) { const [mainExpanded, setMainExpanded] = useState(false); const [mainSelectedIndex, setMainSelectedIndex] = useState(-1); const [secondDepthReduce, setSecondDepthReduce] = useState(false); - const [temp, setTemp] = useState(false); const [tabs, setTabs] = useState([]); const [tabFocused, setTabFocused] = useState([false, false, false]); //COLLABSED_MAIN, ACTIVATED_MAIN, ACTIVATED_SUB const panelSwitching = useRef(null); @@ -126,9 +125,11 @@ export default function TabLayout({ topPanelName, onTabActivated }) { return [ { icons: CategoryIcon, + // target: [{ name: panel_names.CATEGORY_PANEL }], }, { icons: MyPageIcon, + // target: [{ name: panel_names.MY_PAGE_PANEL }], }, { icons: SearchIcon, @@ -140,6 +141,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) { }, { icons: FeaturedBrandIcon, + // target: [{ name: panel_names.FEATURED_BRANDS_PANEL }], }, { icons: OnSaleIcon, @@ -201,9 +203,16 @@ export default function TabLayout({ topPanelName, onTabActivated }) { case "My Page": result = data?.mypage.map((item) => ({ title: item.menuNm, + target: [ + { + name: panel_names.MY_PAGE_PANEL, + panelInfo: item.menuOrd, + }, + ], })); break; } + //console.log("#data", data); return result; }; @@ -306,7 +315,6 @@ export default function TabLayout({ topPanelName, onTabActivated }) { } case EXTRA_AREA: { if (cursorVisible) { - // deActivateTabJob.start(deActivateTab); return; } } @@ -351,19 +359,15 @@ export default function TabLayout({ topPanelName, onTabActivated }) { const onFocus = (index) => { setMainSelectedIndex(index); - setTemp(false); + if (showSubTab) { setSecondDepthReduce((prev) => !prev); } }; - const onBlur = useCallback(() => { - setTemp(true); - }, []); - const handleNavigation = useCallback( ({ index, target }) => { - if (target) { + if (target && !showSubTab) { dispatch(resetPanels(target)); deActivateTab(); panelSwitching.current = true; @@ -441,6 +445,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) { useEffect(() => { setSecondDepthReduce(false); + if (showSubTab) { tabs[mainSelectedIndex]?.children.map((item) => { if (item.path) { @@ -506,12 +511,18 @@ export default function TabLayout({ topPanelName, onTabActivated }) { showSubTab={showSubTab} icons={item.icons} expanded={mainExpanded} - selected={ + mainSelected={ (panels.length === 0 && index === 0) || (Array.isArray(item.target) && item.target[0]?.name && panels[0]?.name === item.target[0]?.name) } + selected={ + (panels.length === 0 && index === 0) || + (Array.isArray(item.children[0]?.target) && + item.children[0]?.target[0]?.name && + panels[0]?.name === item.children[0]?.target?.[0].name) + } title={item.title} index={index} mainSelectedIndex={mainSelectedIndex} @@ -549,10 +560,9 @@ export default function TabLayout({ topPanelName, onTabActivated }) { path={item.path} showSubTab={showSubTab} selected={ - (panels.length === 0 && index === 0) || - (Array.isArray(item.target) && - item.target[0]?.panelInfo && - panels[0]?.panelInfo === item.target[0]?.panelInfo) + Array.isArray(item.target) && + item.target[0]?.panelInfo && + panels[0]?.panelInfo === item.target[0]?.panelInfo } /> ); 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 d76d78d2..2c2dcca9 100644 --- a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less +++ b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less @@ -39,8 +39,8 @@ justify-content: center; z-index: 1; flex-grow: 0; - // transition: width 0.5s ease; + > img { width: 54px;