탭 레이아웃 포커스 셀릭티드 기획변경

com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx

@@ -104,10 +104,10 @@ const TabItemBase = ({
       className={classNames(
         css.tabItem,
         focused && css.focused,
-        opened && css.opened,
+        expanded && opened && css.opened,
         !isSubItem && opened && showSubTab && css.arrow,
-        mainSelected && css.selected,
-        selected && css.selected
+        expanded && mainSelected && css.selected,
+        expanded && selected && css.selected
       )}
       onKeyDown={onKeyDown}
       onFocus={_onFocus}
@@ -116,7 +116,12 @@ const TabItemBase = ({
       spotlightId={spotlightId}
     >
       <div
-        className={classNames(css.itemWrap, (focused || opened) && css.focused)}
+        className={classNames(
+          css.itemWrap,
+          (focused || opened) && css.focused,
+          expanded && mainSelected && css.selected,
+          expanded && selected && css.selected
+        )}
       >
         {icons && <div className={css.icon}>{renderIcon()}</div>}
         {expanded && title && (

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

@@ -15,7 +15,7 @@
 
   &.focused {
     color: #eee;
-    background: linear-gradient(to right, #cb1253, #e15ba1);
+    background-color: #c70850;
     border-radius: 42px;
     width: 402px;
     z-index: 1;
@@ -25,6 +25,8 @@
 
   &.opened {
     color: #eee;
+    background-color: #c70850;
+    border-radius: 42px;
     width: 402px;
     z-index: 1;
     margin-left: 30px;
@@ -43,6 +45,12 @@
 
   &.selected {
     color: #eee;
+    background-color: #4f172c;
+    border-radius: 42px;
+    width: 402px;
+    z-index: 1;
+    margin-left: 30px;
+    position: relative;
   }
 
   .itemWrap {
@@ -50,6 +58,9 @@
     &.focused {
       margin-left: -30px;
     }
+    &.selected {
+      margin-left: -30px;
+    }
   }
 
   .icon {

com.twin.app.shoptime/src/components/TabLayout/TabItemSub.jsx

@@ -111,6 +111,7 @@ const TabItemBase = ({
       className={classNames(
         css.tabItem,
         !path && focused && css.focused,
+        selected && css.selected,
         path && css.path
       )}
       onKeyDown={onKeyDown}

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

@@ -14,9 +14,8 @@
   }
 
   &.focused {
-    background: rgba(255, 255, 255, 0.1);
+    background-color: #c70850;
     border-radius: 0px;
-    border-right: 6px solid #c70850;
     margin-left: 0px;
     color: #fff;
   }
@@ -27,6 +26,7 @@
 
   &.selected {
     color: #fff;
+    background-color: #4f172c;
   }
 
   .imageWrap {