arrow icon 수정

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

@@ -27,11 +27,13 @@ const TabItemBase = ({
   isSubItem,
   subTitle,
   showSubTab = false,
+  onFocus,
   ...rest
 }) => {
   const [focused, setFocused] = useState(false);
   // const [subFocused , setSubFocused] = useState(false)
   const [pressed, setPressed] = useState(false);
+  const [changeFocused, setChangeFocused] = useState(false);
   const itemRef = useRef();
 
   const clearPressedJob = useRef(
@@ -41,6 +43,8 @@ const TabItemBase = ({
   );
   const _onClick = useCallback(
     (ev) => {
+      setPressed(true);
+      setChangeFocused(false);
       clearPressedJob.current.start(() => {
         if (onClick) {
           onClick({ index, target });
@@ -51,18 +55,25 @@ const TabItemBase = ({
 
       onClick({ index, target });
     },
-    [target, index, onClick, isSubItem]
+    [target, index, onClick]
   );
 
   useEffect(() => {}, [pressed]);
 
   const _onFocus = useCallback(() => {
     setFocused(true);
+
+    if (onFocus) {
+      onFocus(index);
+    }
   }, [index]);
 
   const _onBlur = useCallback(() => {
     setFocused(false);
-  }, [focused]);
+    setPressed(false);
+    setChangeFocused(true);
+    clearPressedJob.current.stop();
+  }, []);
 
   const isDivider = useMemo(() => {
     return !title;
@@ -112,7 +123,6 @@ const TabItemBase = ({
       className={classNames(
         css.tabItem,
         focused && css.focused,
-        pressed && css.pressed,
         isSubItem && css.subDepth,
         pressed && css.arrow,
         !isDivider && selected && css.selected

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

@@ -25,21 +25,9 @@
         margin-left:-30px;
       }
 
-    &.pressed {
-        color: #eee;
-        background: linear-gradient(to right, #cb1253, #e15ba1);
-        border-radius: 42px;
-        width: 402px;
-        z-index: 1;
-        margin-left: 30px;
-        position:relative;
-      }
-    &.selected{
-      // margin-left:0;
-    }
   }
 
-  &.arrow, &.selected {
+  &.arrow {
     &::after {
       content: "";
       .size(@w:36px, @h:36px);

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

@@ -448,11 +448,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
         >
           {/* expanded Main */}
           <MainContainer
-            className={classNames(
+            className={classNames(css.tabWrap, mainExpanded && css.expanded)}
-              css.tabWrap,
-              mainExpanded && css.expanded,
-              css.basicLayout
-            )}
             onFocus={onTabHasFocus(ACTIVATED_MAIN)}
             onMouseOver={onTabHasFocus(COLLABSED_MAIN)}
             onBlur={onTabBlur(ACTIVATED_MAIN)}