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 ( -
+
{text}
);