feat: Badge 구현

[nijuy]

1️⃣ 어떤 작업을 했나요? (Summary)

• 신나는 Badge 구현하기

2️⃣ 알아두시면 좋아요!

SemanticBGColor 타입 생기기 이전에 적었던 내용 (지금은 안 봐도 되는 내용)

• Badge.type에 BadgeColor를 만들고, Badge.tsx에서 backgroundColorMap 로 매핑해서 쓴 이유:

  BadgeProps - color를 SemanticItemColor 타입으로 설정하면 스토리북 옵션에 --Primary, --Text 까지 포함되어서, --BG 만 넣은 backgroundColorMap을 만들어서 작업했습니다 🤔 왠지 이거 뭐야!??!?! 하실까봐.. 미리 변명을 좀

3️⃣ 추후 작업

• pr 리뷰 달린 내용 기반으로 수정 ➡ 3b010a7
• feat: SemanticBGColor 추가 #7 머지 이후 color 타입 수정 ➡ 42a5802

[EATSTEAK]

지나가던 군바립니다..!

컬러 팔레트 관련해서 고민 많이 하셨을 것 같은데 고생하셨네요!

코드를 살펴보고 생각해 봤는데 project-wide 에 반영할 수 있는 개선점이 있을 것 같아서 제안드립니다.

아무래도 SemanticItemColor에서 BG, Text, Primary 등만 뽑아서 사용할 일이 꽤 있을 것 같은데, 개인적으로는 컬러 담당하시는 분께서 해당 use-case 에 당하는 타입을 만들어 주시면 도움이 될까 싶어요.

아래는 템플릿 리터럴 타입의 유니온에서 특정 리터럴을 포함한 유니온 타입을 만드는 예시입니다!

// type SemanticItemColor = ...;

type OnlyBGColor<T> = T extends `${string}BG` ? T : never;

type SemanticItemBGColor = OnlyBGColor<SemanticItemColor>;

이런 식으로 제네릭 타입과 컨디셔널 타입을 조합해서 특정 리터럴 조건에 맞는 값들의 유니온들만 뽑아낼 수 있어요. 이 경우에는 SemanticItemColor 에서 BG로 끝나는 값들로만 이루어진 Union Type인 SemanticItemBGColor를 만들었어요.

이렇게 만들면 나중에 SemanticItemColor가 변경되어도(색상 추가 등등...) SemanticItemBGColor가 변경 사항을 반영하지 못할 일은 없겠죠?

비슷한 방법으로 팔레트도 filter 함수를 이용하여 semanticColorPalette에 BG 색상만 포함시킬 수 있어요.

// const semanticColorPalette: SemanticColorPalette = { ... };

const semanticBGColorPalette: Record<SemanticItemBGColor, string> = Object
fromEntries(
  Object.entries(semanticColorPalette).filter(([key]) => key.endsWith('BG'))
);

PR에서 작성하신 코드의 목적을 추측해 본다면 Badge의 색상은 전체 팔레트의 BG 색상만 포함한다인 것 같은데, 이렇게 코드를 기존 팔레트에서 필터링 하는 방법으로 구현하면 추후에 팔레트가 수정되어도 적은 코드 변경으로 목적을 달성할 수 있을까 싶어서 제안드려요.

게다가 앞서 말씀드린 것처럼 foundation 레벨에서 해당 팔레트들을 제공한다면 컴포넌트 별로 구현할 필요가 없으니 파편화 문제가 줄어들 거고요.

혹시 다른 의견이나 더 좋은 방법이 있으면 말씀해 주세요. 화이팅!

[nijuy]

@EATSTEAK
와 안녕하세요~~~! 마침 오늘 YDS 회의가 있는 날이라, 같이 얘기해볼게요!
코드 쓰면서 템플릿 리터럴 유니온에서 특정 리터럴만 뽑아내는 거 되나? 싶었는데 이렇게 방법까지 정리를 ㅠㅠㅋㅋㅋㅋㅋ
정말 압도적 감사입니다.... 충성...（⊙ｏ⊙）👍

컬러 팔레트 관련해서 고민 많이 하셨을 것 같은데 고생하셨네요!

객체에 매핑해서 BG만 남기는 방식은 예전 YDS 관련 코드 살펴보다가 디노님이 작업하신 내용 참고했습니다 디노님 감사합니다감사하빈ㄴ다

[nijuy]

@Hanna922 @HyunsDev

Badge에 SemanticBGColor를 적용한 커밋을 이제야 올렸습니다! 확인 후 어푸룹 부탁드려요

(아직 Badge가 function(){} 꼴로 정의되어 있는 건 다른 브랜치에서 수정할거라 잠시 무시해주세요 ➡ 546b655)

[Hanna922]

수고하셨숩니다~!