From 7d11a6c0e21b56867d463069bf09095ab5e224c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B3=A0=EB=8F=99=EC=98=81?= Date: Thu, 8 Feb 2024 10:42:10 +0900 Subject: [PATCH] =?UTF-8?q?featured=20Bradns=20focus=20&&=20selected=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/TabLayout/TabItem.jsx | 6 - .../components/TabLayout/TabItem.module.less | 20 --- .../src/components/TabLayout/TabItemSub.jsx | 42 ++--- .../TabLayout/TabItemSub.module.less | 152 +++++++++++++----- .../src/components/TabLayout/TabLayout.jsx | 15 +- .../TabLayout/TabLayout.module.less | 5 - 6 files changed, 145 insertions(+), 95 deletions(-) diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx b/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx index ff5298a1..1bbaa926 100644 --- a/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx +++ b/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx @@ -22,13 +22,10 @@ const TabItemBase = ({ isSubItem, onFocus, showSubTab = false, - temp, - setTemp, mainSelectedIndex, ...rest }) => { const [focused, setFocused] = useState(false); - const [fixed, setFixed] = useState(false); const clearPressedJob = useRef( new Job((func) => { setTimeout(func, 100); @@ -96,8 +93,6 @@ const TabItemBase = ({ className={classNames( css.tabItem, (focused || index === mainSelectedIndex) && css.focused, - // focused && css.focused, - showSubTab && fixed && css.fixed, !isSubItem && (focused || index === mainSelectedIndex) && showSubTab && @@ -124,7 +119,6 @@ const TabItemBase = ({ {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 0c9ff8e8..fe349529 100644 --- a/com.twin.app.shoptime/src/components/TabLayout/TabItem.module.less +++ b/com.twin.app.shoptime/src/components/TabLayout/TabItem.module.less @@ -38,26 +38,6 @@ color: #eee; } - &.fixed { - color: #eee; - background: linear-gradient(to right, #cb1253, #e15ba1); - border-radius: 42px; - width: 402px; - z-index: 1; - margin-left: 30px; - position:relative; - - &.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; - } - } - - } .itemWrap { display: flex; diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx b/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx index 1250174f..6aa162cf 100644 --- a/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx +++ b/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx @@ -11,19 +11,17 @@ import css from "./TabItemSub.module.less"; const SpottableComponent = Spottable("div"); const TabItemBase = ({ - title, - expanded = false, selected = false, + expanded = false, index = 0, + title, target, deActivateTab, onClick, lgCatCd, isSubItem, onFocus, - onBlur, path, - subTitle, ...rest }) => { const [focused, setFocused] = useState(false); @@ -54,10 +52,6 @@ const TabItemBase = ({ const _onBlur = useCallback(() => { setFocused(false); - - if (onBlur) { - onBlur(index); - } }, [index]); const onKeyDown = useCallback( @@ -71,12 +65,19 @@ const TabItemBase = ({ const ImageComponent = useCallback(() => { return ( -
- +
+
); - }, [path]); + }, [path, focused, selected]); const TextComponent = useCallback(() => { return ( @@ -102,20 +103,23 @@ const TabItemBase = ({ css.tabItem, !path && focused && css.focused, path && css.path - - // focused && path && css.imageFocus, - // selected && css.imageSelect )} onKeyDown={onKeyDown} onFocus={_onFocus} onBlur={_onBlur} onClick={_onClick} > -
-
- {!path && } - {path ? : } -
+
+ {!path && ( + + )} + {path ? : }
); 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 5720225f..6c4e3398 100644 --- a/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.module.less +++ b/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.module.less @@ -12,7 +12,7 @@ position: relative; padding-left: 42px; padding-right: 24px; - + &.focused { background: rgba(255, 255, 255, .1); @@ -32,43 +32,59 @@ color: #eee; } - -.imageLayout { - &.outline { - .position(@position: absolute, @top: 0, @right: auto, @bottom: auto, @left: 0); - .size(@w: 138px, @h:138px); - background-position: center; - background-size: cover; - - > img { +.imageWrap { + position: relative; + margin:0 30px 0 48px; + img { .size(@w: 120px, @h: 120px); - } - } - &.imageFocus { - .outline { - .focusDropShadow(); - border-radius: 60px; - z-index: 99; - background-image: url("../../../assets/icons/ic-tab-partners-focus@3x.png"); - - // box-shadow: -3px 0px 30px 0 #c70850; - // border: solid 1px #dadada; - > 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"); - // } - // } - + object-fit: contain; } + span { + .position(@position: absolute, @top: 0, @right: 0, @bottom: 0, @left: 0); + .size(@w: 140px, @h: 140px); + + background-position: center; + background-size: cover; + + } + + &.focused { + + img { + box-shadow: -3px 0px 30px 0 #c70850; + border-radius: 37%; + .size(@w: 138px, @h: 138px); + object-fit: contain; + + + } + span { + background-image: url('../../../assets/icons/ic-tab-partners-focus@3x.png'); + } + } + &.selected { + img { + .size(@w: 138px, @h: 138px); + object-fit: contain; + } + span { + background-image: url('../../../assets/icons/ic-tab-partners-lnb-selected@3x.png'); + } + } + &.selectedFocus { + img { + box-shadow: -3px 0px 30px 0 #808080; + border-radius: 37%; + } + + } + +} + + + + .text { line-height: 1.2; @@ -81,10 +97,11 @@ } } + .subWrap{ .flex(); - span { + .icon { .size(@w: 40px, @h:40px); background-size: cover; &.category-icon-1017 { @@ -151,6 +168,69 @@ &.category-icon-1013 { background-image: url("../../../assets/icons/ic-category-clearance-nor.png"); } + + &.focused { + // LG Electronics + &.category-icon-1017 { + background-image: url("../../../assets/category/ic-category-lgelectronics-nor@3x.png"); + } + + // Garden and Outdoors + &.category-icon-1008 { + background-image: url("../../../assets/category/ic-category-garden-nor@3x.png"); + } + + // Fashion + &.category-icon-1000 { + background-image: url("../../../assets/category/ic-category-fashion-nor@3x.png"); + } + + // Beauty + &.category-icon-1003 { + background-image: url("../../../assets/category/ic-category-beauty-nor@3x.png"); + } + + // Jewelry + &.category-icon-1004 { + background-image: url("../../../assets/category/ic-category-jewelry-nor@3x.png"); + } + + // Home + &.category-icon-1006 { + background-image: url("../../../assets/category/ic-category-home-nor@3x.png"); + } + + // Kitchen & Food + &.category-icon-1007 { + background-image: url("../../../assets/category/ic-category-kitchen-nor@3x.png"); + } + + // Accessories + &.category-icon-1014 { + background-image: url("../../../assets/category/ic-category-accessories-nor@3x.png"); + } + + // Heaclth & Fitness + &.category-icon-1009 { + background-image: url("../../../assets/category/ic-category-health-nor@3x.png"); + } + + // Crafts & Sewing + &.category-icon-1011 { + background-image: url("../../../assets/category/ic-category-cw-nor@3x.png"); + } + + // Electronics + &.category-icon-1010 { + background-image: url("../../../assets/category/ic-category-electronics-nor@3x.png"); + } + + // Clearance + &.category-icon-1013 { + background-image: url("../../../assets/category/ic-category-clearance-nor@3x.png"); + + } + } } } diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx index 81e38c40..6688dfac 100644 --- a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx +++ b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx @@ -506,8 +506,6 @@ export default function TabLayout({ topPanelName, onTabActivated }) { showSubTab={showSubTab} icons={item.icons} expanded={mainExpanded} - temp={temp} - setTemp={setTemp} selected={ (panels.length === 0 && index === 0) || (Array.isArray(item.target) && @@ -540,7 +538,6 @@ export default function TabLayout({ topPanelName, onTabActivated }) { 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 4223fda7..d76d78d2 100644 --- a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less +++ b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less @@ -71,11 +71,6 @@ &.secondDepthReduce { width: 216px; - // transition: width 0.5s ease; - - // > div { - // margin-bottom: 90px; - // } } }