chore: tab 컴포넌트 fontSize 적용

depromeet · Jul 24, 2024 · 8d23e50 · 8d23e50
1 parent 97f6004
commit 8d23e50
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 108 deletions.
diff --git a/components/molecules/Tab/Tab.tsx b/components/molecules/Tab/Tab.tsx
@@ -3,49 +3,34 @@ import { css } from '@/styled-system/css';
 import { TabProps, TabTypeProps } from './type';
 
 /**
- * @param variant fill 고정값 (fit-content는 primary에만 적용)
- * @param type primary 고정값
+ *
+ * @param type primary 디폴트값
+ * @param variant fill 디폴트값 (fit-content는 primary에만 적용)
  */
 
-const tabStyles = {
-  primary: {
-    width: '375px',
-    height: '56px',
-    borderBottom: '1px solid',
-    borderColor: 'coolNeutral.97',
-    padding: '0px 20px',
-  },
-  secondary: {
-    width: '335px',
-    height: '44px',
-    border: '1px solid coolNeutral.97',
-    backgroundColor: 'fill.normal',
-    padding: '3px',
-    borderRadius: '12px',
-  },
-  assistive: {
-    width: '150px',
-    height: '34px',
-  },
-};
-
-const Tab = ({
-  children,
-  variant = 'fill',
-  type = 'primary',
-}: TabProps & TabTypeProps) => {
-  const typeStyle = tabStyles[type] || tabStyles.primary;
-
-  const style = {
-    ...typeStyle,
+const Tab = ({ children, variant, type }: TabProps & TabTypeProps) => {
+  const tabStyles = css({
+    width:
+      type === 'primary' ? '375px' : type === 'assistive' ? '150px' : '335px',
+    height:
+      type === 'primary' ? '56px' : type === 'assistive' ? '34px' : '44px',
     display: 'flex',
-    justifyContent: variant === 'fill' ? 'center' : 'flex-start',
+    justifyContent: variant === 'fill' ? 'center' : 'left',
     alignItems: 'center',
-  };
-
-  const tabStyleClass = css(style);
-
-  return <div className={tabStyleClass}>{children}</div>;
+    gap: '8px',
+    backgroundColor:
+      type === 'primary'
+        ? 'white'
+        : type === 'assistive'
+          ? ''
+          : 'background.gray',
+    borderBottom: type === 'primary' ? '1px solid' : '',
+    borderColor: type === 'primary' ? 'line.neutral' : '',
+    borderRadius: type === 'primary' ? '' : type === 'assistive' ? '' : '12px',
+    padding: type === 'primary' ? '' : '3px',
+  });
+
+  return <div className={tabStyles}>{children}</div>;
 };
 
 export default Tab;
diff --git a/components/molecules/Tab/tab-item.tsx b/components/molecules/Tab/tab-item.tsx
@@ -3,90 +3,83 @@ import { css } from '@/styled-system/css';
 import { ClickTabItemProps } from './type';
 
 /**
+ *
  * @param selected 선택 여부
  * @param text 텍스트
- * @param type primary 고정값
- * @param variant fill 고정값 (fit-content는 primary에만 적용)
- * @param onClick
+ * @param onClick tab 클릭 시 함수
+ * @param type primary 디폴트값
+ * @param variant fill 디폴트값 (fit-content는 primary에만 적용)
  */
 
-const tabItemStyles = {
-  primary: {
-    height: '56px',
-    padding: '16px 10px',
-  },
-  secondary: {
-    height: '38px',
-    padding: '8px 10px',
-  },
-  assistive: {
-    height: '34px',
-    padding: '8px 16px',
-    border: '1px solid',
-    borderRadius: '999px',
-    backgroundColor: 'background.white',
-    color: 'normal.white',
-  },
-};
-
 export const TabItem = ({
   selected,
   text,
   onClick,
-  type = 'primary',
-  variant = 'fill',
+  type,
+  variant,
 }: ClickTabItemProps) => {
-  const baseStyle = tabItemStyles[type] || tabItemStyles.primary;
-
-  const selectedStyles = {
-    primary: {
-      borderBottom: '2px solid',
-      borderColor: 'blue.60',
-      color: 'text.normal',
-    },
-    secondary: {
-      boxShadow: 'normal',
-      backgroundColor: 'background.white',
-      borderRadius: '10px',
-      color: 'text.normal',
-    },
-    assistive: {
-      backgroundColor: 'coolNeutral.25',
-      color: 'background.white',
-    },
-  };
-
-  const unselectedStyles = {
-    primary: {
-      borderColor: 'line.normal',
-      color: 'text.alternative',
-    },
-    secondary: {
-      color: 'text.alternative',
-    },
-    assistive: {
-      borderColor: 'line.normal',
-      color: 'text.alternative',
-    },
-  };
-
-  const width =
-    variant === 'fit-content' ? 'auto' : type === 'assistive' ? '67px' : '100%';
-
-  const style = {
-    ...baseStyle,
-    width,
+  const tabItemStyles = css({
+    width:
+      variant === 'fit-content'
+        ? 'auto'
+        : type === 'assistive'
+          ? '67px'
+          : '100%',
+    height: type === 'primary' ? '56px' : '38px',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
     cursor: 'pointer',
-    ...(selected ? selectedStyles[type] : unselectedStyles[type]),
-  };
-
-  const tabItemStyleClass = css(style);
+    padding: type === 'primary' ? '16px 10px' : '8px 10px',
+    backgroundColor:
+      type === 'primary' && selected
+        ? 'white'
+        : type === 'secondary' && selected
+          ? 'white'
+          : type === 'assistive' && selected
+            ? 'coolNeutral.25'
+            : '',
+    borderBottom:
+      type === 'primary' && selected
+        ? '2px solid'
+        : type === 'secondary' && selected
+          ? ''
+          : '',
+    border: type === 'assistive' ? '1px solid' : '',
+    borderColor:
+      type === 'primary' && selected
+        ? 'blue.60'
+        : type === 'secondary' && selected
+          ? ''
+          : 'line.normal',
+    borderRadius:
+      type === 'primary' && selected
+        ? ''
+        : type === 'secondary' && selected
+          ? '10px'
+          : type === 'assistive'
+            ? '999px'
+            : '',
+    shadow:
+      type === 'primary' && selected
+        ? ''
+        : type === 'secondary' && selected
+          ? 'normal'
+          : '',
+    color:
+      type === 'primary' && selected
+        ? 'text.normal'
+        : type === 'secondary' && selected
+          ? 'text.normal'
+          : type === 'assistive' && selected
+            ? 'background.white'
+            : 'text.alternative',
+    fontSize:
+      type === 'primary' ? '17px' : type === 'secondary' ? '15px' : '13px',
+  });
 
   return (
-    <div className={tabItemStyleClass} onClick={onClick}>
+    <div className={tabItemStyles} onClick={onClick}>
       {text}
     </div>
   );