MR 컨벤션 | Notion

📌 이슈

Typography 에서 타이틀인 경우 -0.03rem, 일반 텍스트인 경우 -0.02rem을 적용했어요.
이를 위해서는 size를 체크할 리스트가 필요했어요.
- FontSizeKey는 string literal이 포함된 커스텀 타입이기 때문에 typeof size === 'TitleKey'와 같은 체크가 불가능했거든요.
- String Literal 이란?
그래서 최대한 반복을 줄이기 위해, FontSize.types에서 타입 선언 방식을 변경했어요.
- 리스트를 const로 먼저 선언하고, 여기서 string literal를 뽑아내는 방식으로요.
- (원래는 |와 string literal을 이용해 먼저 선언하는 방식이었어요!)
- 참고 링크
```
export const TitleList = [
  "h1",
  "h2",
  "sub1",
  "sub2",
  "sub3",
] as const;

export type TitleKey = typeof TitleList[number];
```
그리고 FontSize.types에서 선언한 TitleList를 가져와, Typography.styled에서 includes()를 이용해 체크했어요.
- 이 때 props인 size는 FontSizeKey지만, TitleList 내부에서 인덱싱할 때는 TitleKey여야 해요.
- 그래서 any를 사용해줬어요.
- 참고로 위 font-size와 달리 size && 구문이 없는 이유는, 컴포넌트에서 <Typography size="body2" /> 처럼 size를 적용하지 않고 <Typography />만 사용했을 경우에도 letter-spacing을 적용하기 위함이에요.
```
letter-spacing: ${({ size }: any) => TitleList.includes(size) ? "-0.03rem" : "-0.02rem"};
```