feat: Handy Semantic 토큰 추가

[fecapark]

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

• resolved feat: Handy Semantic Token 추가 #124

기존 코드에 영향을 미치지 않는 변경사항

• figma에 있는 모든 semantic 토큰을 정의하였습니다. (chip, pagination, checkbox, button 전부 포함)
• spacing에 대한 semantic 토큰을 정의하였습니다.
• Colors, Spacing 문서를 추가했습니다.

기존 코드에 영향을 미치는 변경사항

@2wndrhs 이 구현했던 primitive color의 색상 타입을 MergeVariants 타입을 이용하여 리팩토링을 진행했습니다.

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

1. 토큰 추가하기 관련

figma의 Token Handoff에 보면 정말 많은 토큰들이 있습니다.

수작업으로 모든 토큰을 작성하기에는 귀찮고, 가독성도 안좋고, 휴먼 에러가 발생할 가능성이 높습니다.

따라서 src/utils/variant.ts 에 있는 MergeVariants 타입을 만들어 토큰을 구성하기 그나마 쉽게 만들었습니다.

type Variantable<T> = T extends string ? Capitalize<T> : '';

// 입력받은 타입들을 붙이고 camelCase로 변환해줍니다.
// 4개까지 입력할 수 있습니다. 그 이상은 중첩해서 사용해주세요.
type MergeVariants<
  A extends string,
  B = null,
  C = null,
  D = null,
> = `${A}${Variantable<B>}${Variantable<C>}${Variantable<D>}`;

기존 (하드코딩):

type Color = 'textColorWhite' | 'textColorBlack' | 'textColorPurple' | 'textColorTransparent'

MergeVariants 사용 시:

type ColorVariants = 'white' | 'black' | 'purple' | 'transparent'
type Color = MergeVariants<'text', 'color', ColorVariants>

이때, 생성된 결과는 동일합니다.

Color -> 'textColorWhite' | 'textColorBlack' | 'textColorPurple' | 'textColorTransparent'

2. Color 문서에 색상 팔레트 추가하기

완전 자동화는 아닙니다.

src/style/foundation/color/color.stories.tsx 파일의 AllThemeColors 컴포넌트 속
semanticColorCategories 변수에 색상 값에 대한 정보를 입력해야 합니다.

3. Spacing 문서에 값 추가하기

이 또한 완전 자동화는 아닙니다.

src/style/foundation/spacing/spacing.stories.tsx 파일의 AllBorderSpacings 컴포넌트 속에
StyledRow를 추가하여 예시를 작성해야합니다.

3️⃣ 추후 작업

논의할거 1개

semantic token 에서 spacing/radius 관련 논의

현재 해당 토큰에 대한 접근이 theme.semantic.spacing.spacingRadiusXL 처럼 해야되는데,
spacing이 두번 들어가는게 굳이굳이 싶습니다

theme.semantic.spacing.radiusXL 이런 방식이어도 괜찮지 않을까요?

4️⃣ 체크리스트 (Checklist)

• 빌드 및 실제 적용 확인
• main 브랜치의 최신 코드를 pull 받았나요?

[nijuy]

figma에 있는 모든 semantic 토큰을 정의하였습니다. (chip, pagination, checkbox, button 전부 포함)

아싸 잘 갖다 쓰겠습니다

따라서 src/utils/variant.ts 에 있는 MergeVariants 타입을 만들어 토큰을 구성하기 그나마 쉽게 만들었습니다.

👍（⊙ｏ⊙）👍
템플릿 리터럴 타입 활용의 완전 좋은 예라고 생각해요!!!
특히 InteractiveVariant가 없었다면 중복이 심해졌을 수 있을 거 같은데 아주 기강을 잡아두셨군요
타입스크립트 이제 좀 안다 생각했는데,,, 아직 멀었군요 많이 배워갑니당

---

준이 작업하던 브랜치(feat/#124-handy-semantic-token)가 남아있는데
이 브랜치는 리뷰 제출하는 대로 제가 멸종시켜버리겠습니다
고생하셨어요!

[nijuy]

채널 확인을 늦게 했는데 Spcing(Radius)로 되어있던 이름이 Number로 바뀌었네요.....🤔
저는 지금처럼 Spacing 들어간 게 의도를 드러내기 좋다고 생각하는데
피그마 이름과 달라지는 부분이라 조심스럽네용

[fecapark]

저는 약간 바뀐게 좋다고 생각하는게
padding, margin 만 쓰이는거면 spacing 이 맥락상 맞아보이는데
그 값들과 연계되는 border-radius 까지 설정되어 버리니까 spacing 보다는 number 또는 sizing 이 더 좋아보이긴하네요

• 이 부분도 여기서 수정해서 커밋 넣겠습니다

[nijuy]

spacing이 두번 들어가는게 굳이굳이 싶습니다
theme.semantic.spacing.radiusXL 이런 방식이어도 괜찮지 않을까요?

제안하신 방식 아주아주 괜찮다고 생각합니다!
특별한 이유가 없다면 사용처 코드가 짧은 쪽으로 ㄱㄱ하시죠

근데 지금 피그마를 보면 radiusXL 같은 방식의 이름으로 짓는 게 맞네요!
작업하는 사이에 피그마 수정이 있었던 거 같은데 아무튼....... 좋습니다............!

[fecapark]

굿 같이 수정하겠습니다

[fecapark]

Spacing -> number / radius 로 네이밍 수정된 것을 반영했습니다.

따라서 YDSTheme 구조도 변경되었으며,
구조는 아래와 같습니다.

export type YDSTheme = {
  primitive: {
    color: PrimitiveColorPalette;
    number: PrimitiveNumber;
  };

  semantic: {
    color: SemanticColorPalette;
    radius: SemanticRadius;
  };

  typo: Typos;
};

semantic/radius 같은 경우는,
primitive/number 에서 파생된 토큰으로서 따로 primitive/radius 값이 존재하지 않기 때문에,

src/style/foundation/radius 의 경로가 아닌,
src/style/foundation/number/semanticRadius 경로에 구현했습니다.

만약

• semantic/padding
• semantic/margin

등과 같은 값이 추가로 생긴다면,

동일한 방법으로

• src/style/foundation/number/semanticPadding
• src/style/foundation/number/semanticMargin

경로에 구현을 진행해주시면 됩니다.

• 빌드 통과 및 적용 테스트 완료

[nijuy]

👍🤸‍♀️👍