chore: 피그마에 정의된 Typography 디자인 시스템 적용

[hjy0951]

🤔 어떤 문제가 발생했나요?

• 피그마에 정리된 디자인 시스템을 적용하기 위해서는 텍스트 관련 모든 속성을 하나씩 정의해주어야 한다.
• 피그마에 존재하는 font-weight: regular 속성이 정의되어 있지 않다.

🎉 어떻게 해결했나요?

• Pretendard 폰트를 variable 파일을 이용하여 적용하였습니다.
• PandaCSS의 textStyle로 디자인 시스템을 정의하였습니다.
• config 파일에 fontWeight: regular 속성을 정의하였습니다.

📷 이미지 첨부 (Option)

• 폰트 적용도 잘되었고

• 디자인 시스템 적용도 잘되고

• 자동 완성도 잘됩니다~

⚠️ 유의할 점! (Option)

• 디자인 시스템에 명칭에 따라 weight를 다르게 가져갈 수 있어서 textStyle로 명칭을, fontWeight로 굵기를 설정해주어야 합니다. 기본 사용법은 아래와 같습니다!

<p className={css({ textStyle: 'display1', fontWeight: 'bold' })}>
  This is a paragraph from Panda with the body text style.
</p>

• 속성 두가지를 이름까지 한번에 정의하는 것이 조금 번거로울 수도 있다는 생각에 아래와 같은 함수를 추가할까 했습니다.
• 하지만 자동 완성이 가져다 주는 이점도 있고, 그렇게 번거로울 것까지 있나 싶은 생각에 우선 반영하지는 않았는데 다른 분들의 의견이 궁금합니다~

/* function */
const textCss = (textStyle: string, fontWeight: string = 'medium') => {
  return css({ textStyle, fontWeight });
};

/* 사용 예시 */
<p className={textCss('body1.normal', 'regular')}>
  This is a paragraph from Panda with the body text style.
</p>

[wokbjso]

👍👍👍👍

저는 font-weight 속성 하나만 따로 지정하는거는 유틸 함수 없이 따로 지정해줘도 괜찮을 것 같습니다~!!

[Jungjjeong]

👍👍👍👍👍

함수로 만들어서 사용하는 것에 대한 명확한 이점이 없을듯!
확장성을 위해서라도 따로 넣어서 사용하는 것이 좋을 것 같습니다~!