Table
Search
Tags
디자인
개발
일치
비고
Atom
Text
MUI 에서 Typography를 사용하고 있어서 아마 Text로 가지 않았을까 싶음
Text를 새로 만들었지만 기존 컴포넌트를 대체하지 않아서 디자인과 라벨링 일치시키는 작업은 변환이후 해야할듯?
Atom
panda token 화
일치하는 것 같이 보임!
* 디자인 파일에 breakpoint에 대해 보기 쉽게 되어있지 않음
Desktop : 1280px~
Large Tablet : 960px ~ 1279px
Small Tablet : 600px ~ 959px
Mobile : 0~599px
const breakpoints = {
xs: '0px',
sm: '600px',
md: '960px',
lg: '1280px',
xl: '1920px',
}
Molecule
LinearProgress
CircularProgress
CircularProgress는 최근에 spinner 작업하면서 만들었던 건데 DS랑 일치하지 않음
Molecule
Spinner (mui)
CustomSpinner (panda)
spinner를 customspinner로 변경해야함
data loading 할때 그냥 CircularProgress를 사용하는 경우도 있음
loading상태 일때 DataProgress 도 사용?
Spinner와 DataProgress의 차이는?
loading 상태 표현
1. customspinner
2. spinner
3. DataProgress
Load more
개발단에는 있지만 디자인에는 없는 컴포넌트
1.
Circle
2.
Focus ⇒ 스타일 보여주기만 함
3.
pretendardvariable ⇒ 스타일 보여주기만 함
4.
필요한 token화
1.
spacing
2.
zindex
3.
aspect ratios
4.
opacity
5.