[GNB] 스타일 수정

Detail Notes : 1. 불필요한 코드 정리 2. GUI 가이드와 비슷하게 보이도록 스타일 추가
2024-02-13 16:55:07 +09:00
parent 2959a449d0
commit 1853c0c7f5
4 changed files with 254 additions and 271 deletions
--- 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%;
  }
 }
-
-
-
-
--- 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%;
+  }
+}
--- 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)}
      >
-        <img src={shopTimeIcon} alt="" />
+        <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) => (
--- 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 {