From 8280b4a8aab8c8f9e096d1d60e898ec6c1cc6eea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B3=A0=EB=8F=99=EC=98=81?=
 <dongyoung@godong-yeong-ui-noteubug.local>
Date: Wed, 31 Jan 2024 17:27:02 +0900
Subject: [PATCH] =?UTF-8?q?arrow=20icon=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/TabLayout/TabItem.jsx         | 16 +++++++++++++---
 .../src/components/TabLayout/TabItem.module.less | 14 +-------------
 .../src/components/TabLayout/TabLayout.jsx       |  6 +-----
 3 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx b/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx
index 951731ba..94c4ef63 100644
--- a/com.twin.app.shoptime/src/components/TabLayout/TabItem.jsx
+++ b/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
diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabItem.module.less b/com.twin.app.shoptime/src/components/TabLayout/TabItem.module.less
index 786a9834..319e9d7e 100644
--- a/com.twin.app.shoptime/src/components/TabLayout/TabItem.module.less
+++ b/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);
diff --git a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
index 8db526a0..e83e1e57 100644
--- a/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
+++ b/com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx
@@ -448,11 +448,7 @@ export default function TabLayout({ topPanelName, onTabActivated }) {
         >
           {/* expanded Main */}
           <MainContainer
-            className={classNames(
-              css.tabWrap,
-              mainExpanded && css.expanded,
-              css.basicLayout
-            )}
+            className={classNames(css.tabWrap, mainExpanded && css.expanded)}
             onFocus={onTabHasFocus(ACTIVATED_MAIN)}
             onMouseOver={onTabHasFocus(COLLABSED_MAIN)}
             onBlur={onTabBlur(ACTIVATED_MAIN)}