[GNB] 스타일 수정

Detail Notes :
 
1. 불필요한 코드 정리
2. GUI 가이드와 비슷하게 보이도록 스타일 추가

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

@@ -36,7 +36,6 @@
   padding-left: 42px;
   padding-right: 24px;
 
-
   &.focused {
     color: #eee;
     background: linear-gradient(to right, #cb1253, #e15ba1);
@@ -51,7 +50,7 @@
         content: "";
         .size(@w:36px, @h:36px);
         .position(@position: absolute, @top: 24px, @right: 18px);
-          background-image: url('../../../assets/icons/ic-lnb-right-arrow.png');
+        background-image: url("../../../assets/icons/ic-lnb-right-arrow.png");
         background-size: 36px 36px;
       }
     }
@@ -61,7 +60,6 @@
     color: #eee;
   }
 
-
   .itemWrap {
     display: flex;
     &.focused {
@@ -92,7 +90,6 @@
   .text {
     line-height: 1.2;
     padding-left: 11px;
-    // .elip(@clamp: 1);
 
     .font(@fontFamily:@baseFontBold, @fontSize:36px);
 
@@ -101,17 +98,9 @@
       width: 245px;
       // word-break:break-all;
     }
-
- 
   }
 
-
-
   .marqueeWrap {
     width: 100%;
   }
 }
-
-
-
-

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

@@ -5,31 +5,28 @@
 
 .tabItem {
   font-size: 36px;
-    display: flex;
-    color: #606060;
-    align-items: center;
-    height: 84px;
+  color: #999;
+  margin: 12px 0;
   position: relative;
-    padding-left: 42px;
-    padding-right: 24px;
- 
+  padding: 0 24px 0 48px;
+  > div {
+    height: 78px;
+  }
 
   &.focused {
-        background: rgba(255, 255, 255, .1);
+    background: rgba(255, 255, 255, 0.1);
     border-radius: 0px;
     border-right: 6px solid #c70850;
     margin-left: 0px;
-        color: #eee;
-
+    color: #fff;
   }
   &.path {
     padding-left: 0px;
     margin-bottom: 70px;
   }
 
-
   &.selected {
-    color: #eee;
+    color: #fff;
   }
 
   .imageWrap {
@@ -46,21 +43,17 @@
 
       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');
+        background-image: url("../../../assets/icons/ic-tab-partners-focus@3x.png");
       }
     }
     &.selected {
@@ -69,7 +62,7 @@
         object-fit: contain;
       }
       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 {
@@ -77,16 +70,11 @@
         box-shadow: -3px 0px 30px 0 #808080;
         border-radius: 37%;
       }
-       
     }
-
   }
 
-
-
-
-
   .text {
+    height: 42px;
     line-height: 1.2;
     padding-left: 11px;
 
@@ -100,9 +88,9 @@
     }
   }
 
-
   .subWrap {
-.flex();
+    display: flex;
+    align-items: center;
 
     .icon {
       .size(@w: 40px, @h:40px);
@@ -231,11 +219,9 @@
         // Clearance
         &.category-icon-1013 {
           background-image: url("../../../assets/category/ic-category-clearance-nor@3x.png");
-            
         }
       }
     }
-
   }
 
   .layout {
@@ -246,4 +232,3 @@
     width: 100%;
   }
 }
-

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)}
       >
+        <h1 className={css.logo}>
           <img src={shopTimeIcon} alt="" />
+        </h1>
         {tabs.map((item, index) => (
           <TabItem
             key={"tabitem" + index}
@@ -498,7 +505,12 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
             onBlur={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 &&
               tabs.map((item, index) => (

com.twin.app.shoptime/src/components/TabLayout/TabLayout.module.less

@@ -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;
-
 
+  > .logo {
+    margin: 60px 24px 84px 42px;
     > img {
       width: 54px;
       height: 54px;
-    margin: -40px 24px 84px 42px;
     }
-
+    // margin: -40px 24px 84px 42px;
+  }
 
   &.expanded {
     width: 402px;
 
+    > .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;
-
     }
   }
   &.extraArea {