optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[GNB] 스타일 수정

Browse Source 
Detail Notes :
 
1. 불필요한 코드 정리
2. GUI 가이드와 비슷하게 보이도록 스타일 추가
This commit is contained in:
jangheon Pyo
2024-02-13 16:55:07 +09:00
parent 2959a449d0
commit 1853c0c7f5
4 changed files with 254 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
com.twin.app.shoptime/src/components/TabLayout/TabItem.module.less
View File

@@ -26,50 +26,48 @@
// } // }
// } // }
.tabItem{ .tabItem {
font-size: 36px; font-size: 36px;
display: flex; display: flex;
color: #606060; color: #606060;
align-items: center; align-items: center;
height: 84px; 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; position: relative;
padding-left: 42px;
padding-right: 24px;
&.arrow {
&.focused { &::after {
color: #eee; content: "";
background: linear-gradient(to right, #cb1253, #e15ba1); .size(@w:36px, @h:36px);
border-radius: 42px; .position(@position: absolute, @top: 24px, @right: 18px);
width: 402px; background-image: url("../../../assets/icons/ic-lnb-right-arrow.png");
z-index: 1; background-size: 36px 36px;
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;
}
} }
} }
}
&.selected { &.selected {
color: #eee; color: #eee;
} }
.itemWrap {
.itemWrap {
display: flex; display: flex;
&.focused { &.focused {
margin-left : -30px; margin-left: -30px;
} }
} }
.icon { .icon {
position: relative; position: relative;
min-width: @ICON_SIZE; min-width: @ICON_SIZE;
height: @ICON_SIZE; height: @ICON_SIZE;
@@ -81,37 +79,28 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
> svg { > svg {
position: absolute; position: absolute;
width: @ICON_SIZE; width: @ICON_SIZE;
height: @ICON_SIZE; height: @ICON_SIZE;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
} }
.text { .text {
line-height: 1.2; line-height: 1.2;
padding-left: 11px; padding-left: 11px;
// .elip(@clamp: 1);
.font(@fontFamily:@baseFontBold, @fontSize:36px); .font(@fontFamily:@baseFontBold, @fontSize:36px);
&.subItem { &.subItem {
.font (@fontFamily:@baseFontBold, @fontSize:30px); .font (@fontFamily:@baseFontBold, @fontSize:30px);
width: 245px; width: 245px;
// word-break:break-all; // word-break:break-all;
} }
}
.marqueeWrap {
}
.marqueeWrap {
width: 100%; width: 100%;
} }
} }

319
com.twin.app.shoptime/src/components/TabLayout/TabItemSub.module.less
View File

@@ -3,247 +3,232 @@
@ICON_SIZE: 48px; @ICON_SIZE: 48px;
.tabItem{ .tabItem {
font-size: 36px; font-size: 36px;
display: flex; color: #999;
color: #606060; margin: 12px 0;
align-items: center; position: relative;
height: 84px; 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; position: relative;
padding-left: 42px; margin: 0 30px 0 48px;
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;
img { img {
.size(@w: 120px, @h: 120px); .size(@w: 120px, @h: 120px);
object-fit: contain; object-fit: contain;
} }
span { span {
.position(@position: absolute, @top: 0, @right: 0, @bottom: 0, @left: 0); .position(@position: absolute, @top: 0, @right: 0, @bottom: 0, @left: 0);
.size(@w: 140px, @h: 140px); .size(@w: 140px, @h: 140px);
background-position: center; background-position: center;
background-size: cover; background-size: cover;
} }
&.focused { &.focused {
img {
img { box-shadow: -3px 0px 30px 0 #c70850;
box-shadow: -3px 0px 30px 0 #c70850; border-radius: 37%;
border-radius: 37%; .size(@w: 138px, @h: 138px);
.size(@w: 138px, @h: 138px); object-fit: contain;
object-fit: contain; }
span {
background-image: url("../../../assets/icons/ic-tab-partners-focus@3x.png");
} }
span { }
background-image: url('../../../assets/icons/ic-tab-partners-focus@3x.png');
}
}
&.selected { &.selected {
img { img {
.size(@w: 138px, @h: 138px); .size(@w: 138px, @h: 138px);
object-fit: contain; object-fit: contain;
} }
span { span {
background-image: url('../../../assets/icons/ic-tab-partners-lnb-selected@3x.png'); background-image: url("../../../assets/icons/ic-tab-partners-lnb-selected@3x.png");
} }
} }
&.selectedFocus { &.selectedFocus {
img { img {
box-shadow: -3px 0px 30px 0 #808080; box-shadow: -3px 0px 30px 0 #808080;
border-radius: 37%; border-radius: 37%;
} }
} }
}
} .text {
height: 42px;
.text {
line-height: 1.2; line-height: 1.2;
padding-left: 11px; padding-left: 11px;
.elip(@clamp: 1); .elip(@clamp: 1);
.font(@fontFamily:@baseFontBold, @fontSize:36px); .font(@fontFamily:@baseFontBold, @fontSize:36px);
&.subItem { &.subItem {
.font (@fontFamily:@baseFontBold, @fontSize:30px); .font (@fontFamily:@baseFontBold, @fontSize:30px);
width: 248px; width: 248px;
word-break:break-all; word-break: break-all;
} }
} }
.subWrap {
.subWrap{ display: flex;
.flex(); align-items: center;
.icon { .icon {
.size(@w: 40px, @h:40px); .size(@w: 40px, @h:40px);
background-size: cover; background-size: cover;
&.category-icon-1017 { &.category-icon-1017 {
// LG Electronics // LG Electronics
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 // Garden and Outdoors
&.category-icon-1008 { &.category-icon-1008 {
background-image: url("../../../assets/icons/ic-category-garden-nor.png"); background-image: url("../../../assets/icons/ic-category-garden-nor.png");
} }
// Fashion // Fashion
&.category-icon-1000 { &.category-icon-1000 {
background-image: url("../../../assets/icons/ic-category-fashion-nor.png"); background-image: url("../../../assets/icons/ic-category-fashion-nor.png");
} }
// Beauty // Beauty
&.category-icon-1003 { &.category-icon-1003 {
background-image: url("../../../assets/icons/ic-category-beauty-nor.png"); background-image: url("../../../assets/icons/ic-category-beauty-nor.png");
} }
// Jewelry // Jewelry
&.category-icon-1004 { &.category-icon-1004 {
background-image: url("../../../assets/icons/ic-category-jewelry-nor.png"); background-image: url("../../../assets/icons/ic-category-jewelry-nor.png");
} }
// Home // Home
&.category-icon-1006 { &.category-icon-1006 {
background-image: url("../../../assets/icons/ic-category-home-nor.png"); background-image: url("../../../assets/icons/ic-category-home-nor.png");
} }
// Kitchen & Food // Kitchen & Food
&.category-icon-1007 { &.category-icon-1007 {
background-image: url("../../../assets/icons/ic-category-kitchen-nor.png"); background-image: url("../../../assets/icons/ic-category-kitchen-nor.png");
} }
// Accessories // Accessories
&.category-icon-1014 { &.category-icon-1014 {
background-image: url("../../../assets/icons/ic-category-accessories-nor.png"); background-image: url("../../../assets/icons/ic-category-accessories-nor.png");
} }
// Heaclth & Fitness // Heaclth & Fitness
&.category-icon-1009 { &.category-icon-1009 {
background-image: url("../../../assets/icons/ic-category-health-nor.png"); background-image: url("../../../assets/icons/ic-category-health-nor.png");
} }
// Entertainment // Entertainment
&.category-icon-1012 { &.category-icon-1012 {
background-image: url("../../../assets/icons/ic-category-enter-nor.png"); background-image: url("../../../assets/icons/ic-category-enter-nor.png");
} }
// Crafts & Sewing // Crafts & Sewing
&.category-icon-1011 { &.category-icon-1011 {
background-image: url("../../../assets/icons/ic-category-cw-nor.png"); background-image: url("../../../assets/icons/ic-category-cw-nor.png");
} }
// Electronics // Electronics
&.category-icon-1010 { &.category-icon-1010 {
background-image: url("../../../assets/icons/ic-category-electronics-nor.png"); background-image: url("../../../assets/icons/ic-category-electronics-nor.png");
} }
// Clearance // Clearance
&.category-icon-1013 { &.category-icon-1013 {
background-image: url("../../../assets/icons/ic-category-clearance-nor.png"); background-image: url("../../../assets/icons/ic-category-clearance-nor.png");
} }
&.focused { &.focused {
// LG Electronics // LG Electronics
&.category-icon-1017 { &.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 // Garden and Outdoors
&.category-icon-1008 { &.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 // Fashion
&.category-icon-1000 { &.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 // Beauty
&.category-icon-1003 { &.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 // Jewelry
&.category-icon-1004 { &.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 // Home
&.category-icon-1006 { &.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 // Kitchen & Food
&.category-icon-1007 { &.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 // Accessories
&.category-icon-1014 { &.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 // Heaclth & Fitness
&.category-icon-1009 { &.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 // Crafts & Sewing
&.category-icon-1011 { &.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 // Electronics
&.category-icon-1010 { &.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 // Clearance
&.category-icon-1013 { &.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; display: flex;
} }
.marqueeWrap {
width: 100%;
}
}
.marqueeWrap {
width: 100%;
}
}

64
com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
View File

@@ -4,36 +4,41 @@ import React, {
useMemo, useMemo,
useRef, useRef,
useState, useState,
} from "react"; } from 'react';
import classNames from "classnames"; import classNames from 'classnames';
import { useDispatch, useSelector } from "react-redux"; import {
useDispatch,
useSelector,
} from 'react-redux';
//아이콘 //아이콘
import { Job } from "@enact/core/util"; import { Job } from '@enact/core/util';
//enact //enact
import Skinnable from "@enact/sandstone/Skinnable"; import Skinnable from '@enact/sandstone/Skinnable';
import Spotlight from "@enact/spotlight"; import Spotlight from '@enact/spotlight';
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; import SpotlightContainerDecorator
import { Cancelable } from "@enact/ui/Cancelable"; from '@enact/spotlight/SpotlightContainerDecorator';
import { Cancelable } from '@enact/ui/Cancelable';
//이미지 //이미지
import shoptimeFullIcon from "../../../assets/icons/ic-lnb-logo-shoptime@3x.png"; import shoptimeFullIcon
import shopTimeIcon from "../../../assets/icons/ic-lnb-shoptime-symbol@3x.png"; from '../../../assets/icons/ic-lnb-logo-shoptime@3x.png';
import { resetPanels } from "../../actions/panelActions"; import shopTimeIcon from '../../../assets/icons/ic-lnb-shoptime-symbol@3x.png';
import { panel_names } from "../../utils/Config"; import { resetPanels } from '../../actions/panelActions';
import CartIcon from "./iconComponents/CartIcon"; import { panel_names } from '../../utils/Config';
import CategoryIcon from "./iconComponents/CategoryIcon"; import CartIcon from './iconComponents/CartIcon';
import FeaturedBrandIcon from "./iconComponents/FeaturedBrandIcon"; import CategoryIcon from './iconComponents/CategoryIcon';
import HomeIcon from "./iconComponents/HomeIcon"; import FeaturedBrandIcon from './iconComponents/FeaturedBrandIcon';
import HotPicksIcon from "./iconComponents/HotPicksIcon"; import HomeIcon from './iconComponents/HomeIcon';
import MyPageIcon from "./iconComponents/MyPageIcon"; import HotPicksIcon from './iconComponents/HotPicksIcon';
import OnSaleIcon from "./iconComponents/OnSaleIcon"; import MyPageIcon from './iconComponents/MyPageIcon';
import SearchIcon from "./iconComponents/SearchIcon"; import OnSaleIcon from './iconComponents/OnSaleIcon';
import TrendingNowIcon from "./iconComponents/TrendingNowIcon"; import SearchIcon from './iconComponents/SearchIcon';
import TabItem from "./TabItem"; import TrendingNowIcon from './iconComponents/TrendingNowIcon';
import TabItemSub from "./TabItemSub"; import TabItem from './TabItem';
import css from "./TabLayout.module.less"; import TabItemSub from './TabItemSub';
import css from './TabLayout.module.less';
const Container = SpotlightContainerDecorator( const Container = SpotlightContainerDecorator(
{ enterTo: "default-element" }, { enterTo: "default-element" },
@@ -468,7 +473,9 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
onBlur={onTabBlur(COLLABSED_MAIN)} onBlur={onTabBlur(COLLABSED_MAIN)}
onMouseLeave={onTabBlur(COLLABSED_MAIN)} onMouseLeave={onTabBlur(COLLABSED_MAIN)}
> >
<img src={shopTimeIcon} alt="" /> <h1 className={css.logo}>
<img src={shopTimeIcon} alt="" />
</h1>
{tabs.map((item, index) => ( {tabs.map((item, index) => (
<TabItem <TabItem
key={"tabitem" + index} key={"tabitem" + index}
@@ -498,7 +505,12 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
onBlur={onTabBlur(ACTIVATED_MAIN)} onBlur={onTabBlur(ACTIVATED_MAIN)}
onMouseLeave={onTabBlur(ACTIVATED_MAIN)} onMouseLeave={onTabBlur(ACTIVATED_MAIN)}
> >
<img src={mainExpanded ? shoptimeFullIcon : shopTimeIcon} alt="" /> <h1 className={css.logo}>
<img
src={mainExpanded ? shoptimeFullIcon : shopTimeIcon}
alt=""
/>
</h1>
{tabActivated && {tabActivated &&
tabs.map((item, index) => ( tabs.map((item, index) => (

37
com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less
View File

@@ -8,7 +8,7 @@
left: 0; left: 0;
top: 0; top: 0;
display: flex; display: flex;
&.hide { &.hide {
width: auto; width: auto;
} }
@@ -34,29 +34,26 @@
left: 0; left: 0;
top: 0; top: 0;
background-color: #222222; background-color: #222222;
display: flex;
flex-direction: column;
justify-content: center;
z-index: 1; z-index: 1;
flex-grow: 0;
// transition: width 0.5s ease;
> .logo {
> img { margin: 60px 24px 84px 42px;
width: 54px; > img {
height: 54px; width: 54px;
margin: -40px 24px 84px 42px; height: 54px;
}
// margin: -40px 24px 84px 42px;
} }
&.expanded { &.expanded {
width: 402px; width: 402px;
> img {
width: 234px;
height: 54px;
}
> .logo {
> img {
width: 234px;
height: 54px;
}
}
} }
&.secondDepthLayout { &.secondDepthLayout {
@@ -65,13 +62,13 @@
opacity: 0.95; opacity: 0.95;
box-shadow: 8px 0 36px rgba(33, 33, 32, 0.08); box-shadow: 8px 0 36px rgba(33, 33, 32, 0.08);
padding-bottom: unset; padding-bottom: unset;
padding-top: 71px; padding-top: 30px;
z-index: 0; z-index: 0;
justify-content: flex-start; justify-content: flex-start;
overflow-y: hidden;
&.secondDepthReduce { &.secondDepthReduce {
width: 216px; width: 216px;
} }
} }
&.extraArea { &.extraArea {