refactor(typo, colors): 타이포그래피, 컬러 미반영 사항 반영 및 스토리북 개선 #285
Conversation
|
|
There was a problem hiding this comment.
피그마 상으로 green/yellow도 alpha 색상이 있어서 아래 alpha 모여있는 곳에 추가해주셔야 할 것 같습니다!
| <div className='color-chips'> | ||
| <a data-title={`black\n${colors.black}`} style={{ backgroundColor: colors.black }}></a> | ||
| </div> | ||
| </div> | ||
| <div className='colors-group'> | ||
| <p>white</p> | ||
| <div className='color-chips'> | ||
| <a data-title={`white\n${colors.white}`} style={{ backgroundColor: colors.white }}></a> | ||
| </div> |
There was a problem hiding this comment.
chip 내부에 a태그는 무슨 역할을 하나요??
color code 복사 등의 기능이 있는 건지 궁금합니다. 특별하게 기능이 없다면 a태그가 아니어도 되지 않을까 생각해서 여쭤봅니다!
| /* GPU layer for smoother fade */ | ||
| will-change: color; |
There was a problem hiding this comment.
will-change를 최적화를 위해 사용하신게 맞을까요??
저도 이번에 처음 본 속성이라 찾아보니 남용하면 안되는 생각보다 cost가 비싼 작업 같습니다. 특히 렌더링 과정 중 composite에 해당하는 transform이나 opacity가 아니라 color를 지정해서 결국 layer를 분리해도 repaint가 다시 일어나는 것이 아닐까 하는 생각이 듭니다.
그래서 특별한 이유가 없다면 사용을 지양하는 것이 좋아보이는데 어떻게 생각하시나요??
MDN 참고
There was a problem hiding this comment.
반복되는 코드가 많은 것 같은데 Chip이나 Row등을 따로 컴포넌트로 만들고 map을 사용하도록 수정하면 어떨까요??
| <div className='color-chips'>{renderColorChips(scales, 'blue')}</div> | ||
| </div> | ||
| <div className='colors-group'> | ||
| <p>red</p> | ||
| <div className='color-chips'>{renderColorChips(scales, 'red')}</div> | ||
| </div> | ||
| <div className='colors-group'> | ||
| <p>green</p> | ||
| <div className='color-chips'>{renderColorChips(scales, 'green')}</div> | ||
| </div> | ||
| <div className='colors-group'> | ||
| <p>yellow</p> | ||
| <div className='color-chips'>{renderColorChips(scales, 'yellow')}</div> | ||
| </div> |
There was a problem hiding this comment.
반복되는 부분 map활용해서 가독성과 코드량을 줄이면 더 좋을 것 같습니다!
변경사항
링크
시급한 정도
🏃♂️ 보통 : 최대한 빠르게 리뷰 부탁드립니다.
기타 사항
AS-IS
2025-09-30.6.53.08.mov
TO-BE
2025-09-30.6.53.23.mov
따라서 Alpha 색상으로 업데이트 해주고, 불투명도를 나타내기 위해 배경에 격자이미지를 넣어주었습니다.
AS-IS
TO-BE
yellow900 색상 코드가 달라 피그마 기준으로 변경해주었습니다.
Heading_40_B font가 존재하지 않아 추가해주었습니다.
디자인 피그마에는 네이밍에 숫자가 없는데 mds에는 Heading_1 , Heading_2 의 숫자가 존재해서 우선 Heading_8_40_B로 추가했는데 추후 개선은 주용님께 맡기겠습니다.