[style] 버튼 공통 컴포넌트 #32

[mtm-git1018]

📢 기능 설명

Button컴포넌트와 TextButton컴포넌트 제작

Button컴포넌트의 Props

size?: 'default' | 'sm'; : 버튼의 사이즈 설정 기본값 : default = default 사이즈
color?: 'default' | 'purple' ; : 버튼의 색 설정 기본값 : default = 버터색
ref?: Ref<HTMLButtonElement | null>;: ref 옵셔널 설정
disabled?: boolean; : disable 설정
type: 'submit' | 'button'; : 버튼 타입 설정 기본값 = button
children?: React.ReactNode; : 버튼안에 들어갈 텍스트 혹은 아이콘
className?: string; : 추가 className
...rest : 추가사항 ex) aria-label

disabled 설정시 조건부 스타일링으로 인하여 스타일링이 변경되게끔 바꿨습니다.

---

TextButton컴포넌트의 Props

size?: 'default' | 'sm'; : 버튼의 사이즈 기본값 = default
type?: 'button' | 'submit'; 버튼 type설정 기본값 = button
ref?: Ref<HTMLButtonElement | null>; : ref설정
children: React.ReactNode; : 버튼 안 텍스트 혹은 아이콘
className?: string; :추가 className

---

텍스트 버튼의 컬러는 고정인 것 같아서 언더바는 흰색으로 고정하고

텍스트 컬러는 디자인시스템 작업 후 base에서 변경하는게 좋을 것 같아서 검정색으로 되어있습니다.

네이비 컬러가 없길래 theme.css에 추가하였습니다.
--color-navy:#1f2544;

inner-shadow는 theme.css에 추가해두었습니다.

--inset-shadow-black: inset 0 2px 6px rgba(0, 0, 0, 0.3);
검정색 이너 쉐도우

--inset-shadow-white: inset 0 0 8px rgba(255, 255, 255, 0.8);
흰색 이너쉐도우

🩷 Approve 하기 전 확인해주세요!

• 빠진 속성은 없는지
• 개선사항은 무엇인지.

✅ 체크리스트

• PR 제목 규칙 잘 지켰는가?
• 추가/수정사항을 설명하였는가?
• 이슈넘버를 적었는가?
• Approve 하기 전 확인 사항 체크했는가?

[ahk0413]

고생하셨습니다~