From 8d23e5017ec2222787a4be62de8c5d2ac2ae1938 Mon Sep 17 00:00:00 2001
From: summermong <2514o_o@naver.com>
Date: Wed, 24 Jul 2024 18:01:27 +0900
Subject: [PATCH] =?UTF-8?q?chore:=20tab=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
=?UTF-8?q?=ED=8A=B8=20fontSize=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
components/molecules/Tab/Tab.tsx | 63 +++++--------
components/molecules/Tab/tab-item.tsx | 131 ++++++++++++--------------
2 files changed, 86 insertions(+), 108 deletions(-)
diff --git a/components/molecules/Tab/Tab.tsx b/components/molecules/Tab/Tab.tsx
index def827b2..c2d86cdb 100644
--- 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
{children}
;
+ 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 {children}
;
};
export default Tab;
diff --git a/components/molecules/Tab/tab-item.tsx b/components/molecules/Tab/tab-item.tsx
index 7f87b58f..316337b6 100644
--- 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 (
-