컴포넌트 스타일 가이드
YAPLAY 프로젝트에서 사용하는 모든 UI 컴포넌트들을 확인할 수 있습니다.
Typography
H1 - Heading 1
H2 - Heading 2
H3 - Heading 3
H4 - Heading 4
H5 - Heading 5
H6 - Heading 6
Subtitle 1
Subtitle 2
Body 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Body 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Caption TextColors
MLB Navy
#041E42Navy Light
#1a3a5cNavy Dark
#021329MLB Red
#BF0D3ERed Light
#d63a5eRed Dark
#8a0a2dBackground
#000000Card/Paper
#1a1a1aButtons
Contained
Outlined
Text
Icon Buttons
Cards
기본 카드
이것은 기본 카드 컴포넌트입니다. 다양한 콘텐츠를 담을 수 있습니다.
액션이 있는 카드
하단에 액션 버튼이 포함된 카드입니다.
스타일 커스텀 카드
배경색과 텍스트 색상이 변경된 카드입니다.
Form Elements
Text Fields
에러 메시지
도움말을 표시합니다
Selects
옵션 1
Chips
기본
Primary
Secondary
Success
Error
Warning
Info
삭제 가능
클릭 가능
아이콘
아웃라인
작은 크기
Alerts
Spacing
Material-UI 기본 간격 시스템 (8px 단위)
spacing(0) = 0px
spacing(1) = 8px
spacing(2) = 16px
spacing(3) = 24px
spacing(4) = 32px
spacing(5) = 40px
spacing(6) = 48px
spacing(8) = 64px
Border Radius
0px
1px
2px
4px
8px
16px