[feature]: 타이포그라피 테일윈드 css 스타일 구현, 타이포그라피 컴포넌트 구현 #36
Conversation
jangwonyoon
requested review from
semnil5202,
JaeIn1,
youngju6143 and
evenway2025
as code owners
📝 Walkthrough""" Walkthrough이번 PR은 Took 디자인 시스템의 타이포그래피 스타일을 적용하기 위한 새로운 UI 컴포넌트와 관련 유틸리티, 그리고 Tailwind CSS 구성 업데이트를 포함합니다. Changes
Sequence Diagram(s)sequenceDiagram
participant 사용자 as User
participant TComp as Typography Component
participant TUtil as Typography Utility
사용자->>TComp: props (variant, as, children) 전달
TComp->>TUtil: variant 기반 클래스명 생성 요청
TUtil-->>TComp: CSS 클래스명 반환
TComp->>사용자: 지정 태그로 스타일 적용 HTML 요소 렌더링
Suggested labels
Suggested reviewers
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
jangwonyoon
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/shared/ui/typography/index.tsx (2)
3-6: 타입 이름 일관성 개선 제안
TypoGraphyProps타입 이름에서 'G'가 대문자로 되어 있습니다. 일관성을 위해TypographyProps로 변경하는 것이 좋을 것 같습니다.-type TypoGraphyProps = TypographyVariantProps & { +type TypographyProps = TypographyVariantProps & { as?: keyof JSX.IntrinsicElements; children: React.ReactNode; };
19-22: 깔끔한 컴포넌트 구현, 좋습니다!컴포넌트가 간결하고 효율적으로 구현되었습니다.
as속성을 사용하여 다양한 HTML 태그를 렌더링할 수 있는 유연성을 제공한 점이 좋습니다. 타입 일관성을 위해 함수 매개변수 타입을 선언부와 일치시키세요.-export const Typography = ({ as: Tag = "span", variant, children }: TypoGraphyProps) => { +export const Typography = ({ as: Tag = "span", variant, children }: TypographyProps) => { const className = typography({ variant }); return <Tag className={className}>{children}</Tag>; };
📜 Review details
Configuration used: .coderabbit.yml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/shared/ui/typography/index.tsx(1 hunks)src/shared/ui/typography/typography.ts(1 hunks)tailwind.config.ts(1 hunks)
🔇 Additional comments (3)
src/shared/ui/typography/typography.ts (1)
1-24: 유용한 타이포그래피 유틸리티 구현, 좋은 작업입니다!class-variance-authority를 활용한 타이포그래피 유틸리티가 잘 구현되었습니다. 다양한 텍스트 스타일 변형을 제공하고 기본값으로 'body-1'을 설정한 점이 좋습니다. 타입 안전성을 위해 TypographyVariantProps를 내보내는 것도 훌륭한 접근입니다.
typography('typography', { ... })에서 첫 번째 인자로 전달된 'typography' 클래스 이름이 실제로 사용되는지 확인해보세요. 필요하지 않다면 생략해도 될 수 있습니다.src/shared/ui/typography/index.tsx (1)
8-17: 잘 작성된 JSDoc 문서화, 훌륭합니다!컴포넌트의 목적, 매개변수, 반환 값에 대한 명확한 설명을 포함한 JSDoc 문서가 잘 작성되었습니다. 이러한 문서화는 코드 가독성과 유지보수성을 크게 향상시킵니다.
tailwind.config.ts (1)
84-99: 체계적인 타이포그래피 시스템 구현, 훌륭합니다!Tailwind CSS의 fontSize 설정을 활용하여 체계적인 타이포그래피 시스템을 구현한 점이 매우 좋습니다. 각 스타일에 대해 fontSize, lineHeight, fontWeight, letterSpacing을 상세히 지정하여 디자인 시스템에 일관성을 부여했습니다.
한 가지 확인할 점은
body-3와body-4의 설정이 완전히 동일합니다. 이것이 의도적인 설계인지 확인해 보세요. 각각 다른 목적을 가지고 있다면 시각적으로 구분될 수 있도록 설정에 약간의 차이를 두는 것이 좋을 수 있습니다.
jangwonyoon
changed the title
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/shared/ui/typography/index.tsx (2)
8-17: JSDoc 주석이 상세하게 작성되어 있습니다.컴포넌트와 각 props에 대한 설명이 잘 문서화되어 있습니다. 다만,
asprop의 타입이 실제 타입 정의(keyof JSX.IntrinsicElements)와 JSDoc(React.ElementType)에서 약간 다릅니다. 정확성을 위해 일치시키는 것이 좋을 것 같습니다.- * @param {React.ElementType} [props.as=span] - 렌더링할 HTML 태그를 지정합니다. 기본값은 `span`입니다. div, span, p 등의 태그를 사용할 수 있습니다. + * @param {keyof JSX.IntrinsicElements} [props.as=span] - 렌더링할 HTML 태그를 지정합니다. 기본값은 `span`입니다. div, span, p 등의 태그를 사용할 수 있습니다.
19-22: 컴포넌트 구현이 간결하고 효과적입니다.Typography 컴포넌트가 명확한 책임을 가지고 있으며, 리액트 Best Practices를 잘 따르고 있습니다. 하지만 추가적인 HTML 속성(예: id, aria-attributes 등)을 전달할 수 없습니다. 필요에 따라 나머지 props를 전달하는 것이 좋을 수 있습니다.
- export const Typography = ({ as: Tag = "span", variant, children }: TypographyProps) => { - const className = typography({ variant }); - return <Tag className={className}>{children}</Tag>; + export const Typography = ({ as: Tag = "span", variant, children, ...rest }: TypographyProps & JSX.IntrinsicElements[keyof JSX.IntrinsicElements]) => { + const className = typography({ variant }); + return <Tag className={className} {...rest}>{children}</Tag>;이 변경사항을 통해 어떤 HTML 속성도 Typography 컴포넌트에 전달할 수 있게 됩니다.
📜 Review details
Configuration used: .coderabbit.yml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/shared/ui/typography/index.tsx(1 hunks)
🔇 Additional comments (2)
src/shared/ui/typography/index.tsx (2)
1-1: 임포트가 잘 구성되어 있습니다.typography 유틸리티와 타입을 적절히 임포트하여 사용하고 있습니다.
3-6: 타입 정의가 명확하게 되어 있습니다.TypographyProps 타입이 TypographyVariantProps를 확장하고 필요한 추가 속성을 포함하고 있어 타입 안전성을 보장합니다.
📌 개요
close #35
📋 변경사항
기능
화면
| 기능 | 스크린샷 |
| ---- | -------- |
사용방법
커밋에 예시 사용 페이지가 있습니다.
tailwindcss style 직접 적용
✅ 체크사항
✅ 코드리뷰 사항
Summary by CodeRabbit
Summary by CodeRabbit