From 1853c0c7f5503713e493437a3b7c9301bfdde7c8 Mon Sep 17 00:00:00 2001 From: jangheon Pyo Date: Tue, 13 Feb 2024 16:55:07 +0900 Subject: [PATCH] =?UTF-8?q?[GNB]=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=C2=A0=20=C2=A0=C2=A0=20=C2=A0=20Detail=20Notes=20:?= =?UTF-8?q?=20=C2=A0=201.=20=EB=B6=88=ED=95=84=EC=9A=94=ED=95=9C=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=A0=95=EB=A6=AC=202.=20GUI=20=EA=B0=80?= =?UTF-8?q?=EC=9D=B4=EB=93=9C=EC=99=80=20=EB=B9=84=EC=8A=B7=ED=95=98?= =?UTF-8?q?=EA=B2=8C=20=EB=B3=B4=EC=9D=B4=EB=8F=84=EB=A1=9D=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/TabLayout/TabItem.module.less | 105 +++--- .../TabLayout/TabItemSub.module.less | 319 +++++++++--------- .../src/components/TabLayout/TabLayout.jsx | 64 ++-- .../TabLayout/TabLayout.module.less | 37 +- 4 files changed, 254 insertions(+), 271 deletions(-) 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 29ee9d77..8ad95c1f 100644 --- a/com.twin.app.shoptime/src/components/TabLayout/TabItem.module.less +++ b/com.twin.app.shoptime/src/components/TabLayout/TabItem.module.less @@ -26,50 +26,48 @@ // } // } -.tabItem{ - font-size: 36px; - display: flex; - color: #606060; - align-items: center; - height: 84px; +.tabItem { + font-size: 36px; + display: flex; + color: #606060; + align-items: center; + height: 84px; + position: relative; + 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; - 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; - - &.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; - } + &.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; - } + &.selected { + color: #eee; + } - -.itemWrap { + .itemWrap { display: flex; - &.focused { - margin-left : -30px; - } - } + &.focused { + margin-left: -30px; + } + } -.icon { + .icon { position: relative; min-width: @ICON_SIZE; height: @ICON_SIZE; @@ -81,37 +79,28 @@ transform: translate(-50%, -50%); } > svg { - position: absolute; - width: @ICON_SIZE; - height: @ICON_SIZE; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } -} -.text { + position: absolute; + width: @ICON_SIZE; + height: @ICON_SIZE; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + } + .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: 245px; // word-break:break-all; } + } - -} - - - -.marqueeWrap { + .marqueeWrap { width: 100%; } } - - - - 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 c1b586af..b0bc66f1 100644 --- a/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.module.less +++ b/com.twin.app.shoptime/src/components/TabLayout/TabItemSub.module.less @@ -3,247 +3,232 @@ @ICON_SIZE: 48px; -.tabItem{ - font-size: 36px; - display: flex; - color: #606060; - align-items: center; - height: 84px; +.tabItem { + font-size: 36px; + color: #999; + margin: 12px 0; + position: relative; + padding: 0 24px 0 48px; + > div { + height: 78px; + } + + &.focused { + background: rgba(255, 255, 255, 0.1); + border-radius: 0px; + border-right: 6px solid #c70850; + margin-left: 0px; + color: #fff; + } + &.path { + padding-left: 0px; + margin-bottom: 70px; + } + + &.selected { + color: #fff; + } + + .imageWrap { position: relative; - padding-left: 42px; - padding-right: 24px; - - - &.focused { - background: rgba(255, 255, 255, .1); - border-radius: 0px; - border-right: 6px solid #c70850; - margin-left: 0px; - color: #eee; - - } - &.path { - padding-left: 0px; - margin-bottom: 70px; - } - - - &.selected { - color: #eee; - } - -.imageWrap { - position: relative; - margin:0 30px 0 48px; + margin: 0 30px 0 48px; img { - .size(@w: 120px, @h: 120px); - object-fit: contain; + .size(@w: 120px, @h: 120px); + 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; - + + 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'); - } - } + 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'); - } + 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%; - } - + img { + box-shadow: -3px 0px 30px 0 #808080; + border-radius: 37%; + } } + } -} - - - - - -.text { + .text { + height: 42px; line-height: 1.2; padding-left: 11px; .elip(@clamp: 1); .font(@fontFamily:@baseFontBold, @fontSize:36px); - + &.subItem { - .font (@fontFamily:@baseFontBold, @fontSize:30px); - width: 248px; - word-break:break-all; + .font (@fontFamily:@baseFontBold, @fontSize:30px); + width: 248px; + word-break: break-all; } -} + } - -.subWrap{ -.flex(); + .subWrap { + display: flex; + align-items: center; .icon { - .size(@w: 40px, @h:40px); - background-size: cover; - &.category-icon-1017 { - // LG Electronics + .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 { + // Garden and Outdoors + &.category-icon-1008 { background-image: url("../../../assets/icons/ic-category-garden-nor.png"); - } + } - // Fashion - &.category-icon-1000 { + // Fashion + &.category-icon-1000 { background-image: url("../../../assets/icons/ic-category-fashion-nor.png"); - } + } - // Beauty - &.category-icon-1003 { + // Beauty + &.category-icon-1003 { background-image: url("../../../assets/icons/ic-category-beauty-nor.png"); - } + } - // Jewelry - &.category-icon-1004 { + // Jewelry + &.category-icon-1004 { background-image: url("../../../assets/icons/ic-category-jewelry-nor.png"); - } + } - // Home - &.category-icon-1006 { + // Home + &.category-icon-1006 { background-image: url("../../../assets/icons/ic-category-home-nor.png"); - } + } - // Kitchen & Food - &.category-icon-1007 { + // Kitchen & Food + &.category-icon-1007 { background-image: url("../../../assets/icons/ic-category-kitchen-nor.png"); - } + } - // Accessories - &.category-icon-1014 { + // Accessories + &.category-icon-1014 { background-image: url("../../../assets/icons/ic-category-accessories-nor.png"); - } + } - // Heaclth & Fitness - &.category-icon-1009 { + // Heaclth & Fitness + &.category-icon-1009 { background-image: url("../../../assets/icons/ic-category-health-nor.png"); - } + } - // Entertainment - &.category-icon-1012 { + // Entertainment + &.category-icon-1012 { background-image: url("../../../assets/icons/ic-category-enter-nor.png"); - } + } - // Crafts & Sewing - &.category-icon-1011 { + // Crafts & Sewing + &.category-icon-1011 { background-image: url("../../../assets/icons/ic-category-cw-nor.png"); - } + } - // Electronics - &.category-icon-1010 { + // Electronics + &.category-icon-1010 { background-image: url("../../../assets/icons/ic-category-electronics-nor.png"); - } + } - // Clearance - &.category-icon-1013 { + // Clearance + &.category-icon-1013 { background-image: url("../../../assets/icons/ic-category-clearance-nor.png"); - } + } - &.focused { + &.focused { // LG Electronics &.category-icon-1017 { - background-image: url("../../../assets/category/ic-category-lgelectronics-nor@3x.png"); - } - + 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"); - } - + 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"); - } - + 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"); - } - + 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"); - } - + 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"); - } - + 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"); - } - + 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"); - } - + 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"); - } - + 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"); - } - + 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"); - } - + 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"); - + background-image: url("../../../assets/category/ic-category-clearance-nor@3x.png"); } + } } -} + } -} - -.layout { + .layout { display: flex; } - - .marqueeWrap { - width: 100%; - } - } + .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 43be4057..8c850201 100644 --- a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx +++ b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx @@ -4,36 +4,41 @@ import React, { useMemo, useRef, useState, -} from "react"; +} from 'react'; -import classNames from "classnames"; -import { useDispatch, useSelector } from "react-redux"; +import classNames from 'classnames'; +import { + useDispatch, + useSelector, +} from 'react-redux'; //아이콘 -import { Job } from "@enact/core/util"; +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 Skinnable from '@enact/sandstone/Skinnable'; +import Spotlight from '@enact/spotlight'; +import SpotlightContainerDecorator + from '@enact/spotlight/SpotlightContainerDecorator'; +import { Cancelable } from '@enact/ui/Cancelable'; //이미지 -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 "../../actions/panelActions"; -import { panel_names } from "../../utils/Config"; -import CartIcon from "./iconComponents/CartIcon"; -import CategoryIcon from "./iconComponents/CategoryIcon"; -import FeaturedBrandIcon from "./iconComponents/FeaturedBrandIcon"; -import HomeIcon from "./iconComponents/HomeIcon"; -import HotPicksIcon from "./iconComponents/HotPicksIcon"; -import MyPageIcon from "./iconComponents/MyPageIcon"; -import OnSaleIcon from "./iconComponents/OnSaleIcon"; -import SearchIcon from "./iconComponents/SearchIcon"; -import TrendingNowIcon from "./iconComponents/TrendingNowIcon"; -import TabItem from "./TabItem"; -import TabItemSub from "./TabItemSub"; -import css from "./TabLayout.module.less"; +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 '../../actions/panelActions'; +import { panel_names } from '../../utils/Config'; +import CartIcon from './iconComponents/CartIcon'; +import CategoryIcon from './iconComponents/CategoryIcon'; +import FeaturedBrandIcon from './iconComponents/FeaturedBrandIcon'; +import HomeIcon from './iconComponents/HomeIcon'; +import HotPicksIcon from './iconComponents/HotPicksIcon'; +import MyPageIcon from './iconComponents/MyPageIcon'; +import OnSaleIcon from './iconComponents/OnSaleIcon'; +import SearchIcon from './iconComponents/SearchIcon'; +import TrendingNowIcon from './iconComponents/TrendingNowIcon'; +import TabItem from './TabItem'; +import TabItemSub from './TabItemSub'; +import css from './TabLayout.module.less'; const Container = SpotlightContainerDecorator( { enterTo: "default-element" }, @@ -468,7 +473,9 @@ export default function TabLayout({ topPanelName, onTabActivated }) { onBlur={onTabBlur(COLLABSED_MAIN)} onMouseLeave={onTabBlur(COLLABSED_MAIN)} > - +

+ +

{tabs.map((item, index) => ( - +

+ +

{tabActivated && tabs.map((item, index) => ( 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 2c2dcca9..1e540f8b 100644 --- a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less +++ b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less @@ -8,7 +8,7 @@ left: 0; top: 0; display: flex; - + &.hide { width: auto; } @@ -34,29 +34,26 @@ left: 0; top: 0; background-color: #222222; - display: flex; - flex-direction: column; - justify-content: center; z-index: 1; - flex-grow: 0; - // transition: width 0.5s ease; - - > img { - width: 54px; - height: 54px; - margin: -40px 24px 84px 42px; + > .logo { + margin: 60px 24px 84px 42px; + > img { + width: 54px; + height: 54px; + } + // margin: -40px 24px 84px 42px; } - &.expanded { width: 402px; - - > img { - width: 234px; - height: 54px; - } + > .logo { + > img { + width: 234px; + height: 54px; + } + } } &.secondDepthLayout { @@ -65,13 +62,13 @@ opacity: 0.95; box-shadow: 8px 0 36px rgba(33, 33, 32, 0.08); padding-bottom: unset; - padding-top: 71px; + padding-top: 30px; z-index: 0; justify-content: flex-start; + overflow-y: hidden; &.secondDepthReduce { - width: 216px; - + width: 216px; } } &.extraArea {