: 작업 개요
*작업을 진행하게된 맥락을 서술해주세요.
: 작업 범위 & Spec
*작업 진행 범위와 컴포넌트에 대한 스펙을 자세하게 서술해주세요.
- 기본적인 CRUD, 예측하기 어려운 동작사항들에 대해 꼼꼼히 기록해주세요.
size
•
size의 경우 small 까지 밖에 없는데 xsmall을 쓰는 경우가 있다.
•
xSmall, xsmall 형태는 다양…
•
아마 small 사이즈로 적용이 되고 있었지 않았나 싶음
⇒ icon button과 헷갈리지 않았나 싶음!
color
•
디자인 시스템 피그마 상에서 지원하는 color는 'primary' | 'secondary' | 'error' | 'inherit'!!
•
mui에서 지원하는 color는 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning’
•
color 값으로 info , success 디자인 시스템에서 지원하지 않는 컬러들을 쓰는 경우가 있음
◦
DS의 버튼을 사용하는게 아닌 html button을 사용해서 스타일링을 해주는 것으로!
◦
확인해보니 color prop의 inherit를 사용해서 Button 컴포넌트를 사용하면 될 것 같음
이상한 props
•
placement…
엣지 케이스 정리 방식
•
접근성에 따른 포커스 상태 표기가 현재는 DS에 없음 하지만 이것을 디자이너가 쓸 일은 없음
→ 디자인 가이드라인만 제작하여 배포한다.
•
loading button이 분리되어 있음. → 상태로 분류되어야 하는데 타입이 찢어져 있음.
→ 로딩 상태를 기존 버튼에 병합한다.
•
button의 color 값이 danger가 있는데 이는 레거시한 명칭!!error로 해야함!!
◦
개발 단에서는 error로 되어있음, 디자이너 파일에서 변경 필요
•
Color를 지원하지 않는 경우에는 inherit 속성을 사용하면 될 것 같음
이슈
버튼이 어디갔지??…?
Button에 custom으로 style 준 것들이 먹히지 않음
⇒ 스타일링을 할때 Panda css를 사용하고 있는데, style끼리 Merge할때 잘못된 방법으로 합성을 하고 있어 custom 스타일이 먹히지 않는 문제가 발생
투명도…
•
selected 스타일이 투명으로 되어있어…어두운 컬러 위에서는 보이지 않음!!
•
dark mode 지원을 해야할 듯 하다!! ⇒ 일단은 이버튼만 예외로 처리!
: 성과 예측
기대 효과
*제품 및 서비스에 영향을 주는 성과에 대한 예측 범위를 자세히 서술해주세요.
•
Designer
•
Front-End
사이드 이펙트
*제품 및 서비스 내에 영향을 미치는 항목들에 대해서 서술해주세요.
•
Designer
•
Front-End