featured Bradns focus && selected 작업 완료

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

@@ -11,19 +11,17 @@ import css from "./TabItemSub.module.less";
 
 const SpottableComponent = Spottable("div");
 const TabItemBase = ({
-  title,
-  expanded = false,
   selected = false,
+  expanded = false,
   index = 0,
+  title,
   target,
   deActivateTab,
   onClick,
   lgCatCd,
   isSubItem,
   onFocus,
-  onBlur,
   path,
-  subTitle,
   ...rest
 }) => {
   const [focused, setFocused] = useState(false);
@@ -54,10 +52,6 @@ const TabItemBase = ({
 
   const _onBlur = useCallback(() => {
     setFocused(false);
-
-    if (onBlur) {
-      onBlur(index);
-    }
   }, [index]);
 
   const onKeyDown = useCallback(
@@ -71,12 +65,19 @@ const TabItemBase = ({
 
   const ImageComponent = useCallback(() => {
     return (
-      <div className={css.imageLayout}>
-        <span className={classNames(css.outline)} />
+      <div
+        className={classNames(
+          css.imageWrap,
+          focused && css.focused,
+          selected && css.selected,
+          focused && selected && css.selectedFocus
+        )}
+      >
         <img src={path} alt="" />
+        <span className={classNames(css.outline)} />
       </div>
     );
-  }, [path]);
+  }, [path, focused, selected]);
 
   const TextComponent = useCallback(() => {
     return (
@@ -102,20 +103,23 @@ const TabItemBase = ({
         css.tabItem,
         !path && focused && css.focused,
         path && css.path
-
-        // focused && path && css.imageFocus,
-        // selected && css.imageSelect
       )}
       onKeyDown={onKeyDown}
       onFocus={_onFocus}
       onBlur={_onBlur}
       onClick={_onClick}
     >
-      <div className={css.layout}>
-        <div className={classNames(isSubItem && css.subWrap)}>
-          {!path && <span className={css[`category-icon-${lgCatCd}`]} />}
-          {path ? <ImageComponent /> : <TextComponent />}
-        </div>
+      <div className={classNames(isSubItem && css.subWrap)}>
+        {!path && (
+          <span
+            className={classNames(
+              css.icon,
+              focused && css.focused,
+              css[`category-icon-${lgCatCd}`]
+            )}
+          />
+        )}
+        {path ? <ImageComponent /> : <TextComponent />}
       </div>
     </SpottableComponent>
   );