[Feat] Text 컴포넌트 추가

[kongnayeon]

관련 이슈

#39

변경 사항

Text 컴포넌트 만들었습니다!
Compound 패턴으로 만들어 보는 것은 익숙하지 않은데 피드백 많이 많이 부탁드립니다 ㅎ...ㅎ
h1 ~ div까지 다양한 태그를 사용할 수 있도록 했습니다!

레퍼런스

Summary by CodeRabbit

• 새로운 기능

  • 다양한 HTML 태그와 스타일링 옵션을 지원하는 새로운 Text 컴포넌트 추가
  • 텍스트 요소에 대한 동적 색상, 크기, 글꼴 두께 설정 지원
  • Home 컴포넌트에 새로운 <Text.H1> 요소 추가

• 개선 사항

  • UI 컴포넌트 라이브러리에 유연한 텍스트 렌더링 기능 도입
  • 타입스크립트를 활용한 안전한 컴포넌트 구현
  • CSS 모듈을 통한 텍스트 스타일링 개선

[coderabbitai]

Warning

There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure.

🔧 eslint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

apps/web/src/app/page.tsx

Oops! Something went wrong! :(

ESLint: 9.17.0

Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@repo/eslint-config' imported from /eslint.config.mjs
at packageResolve (node:internal/modules/esm/resolve:839:9)
at moduleResolve (node:internal/modules/esm/resolve:908:18)
at defaultResolve (node:internal/modules/esm/resolve:1038:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:557:12)
at ModuleLoader.resolve (node:internal/modules/esm/loader:525:25)
at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:246:38)
at ModuleJob._link (node:internal/modules/esm/module_job:126:49)

워크스루

이 풀 리퀘스트는 새로운 Text 컴포넌트를 도입하고 있습니다. UI 패키지에 텍스트 렌더링을 위한 유연하고 스타일링 가능한 컴포넌트를 추가하며, 웹 애플리케이션의 홈 페이지에서 이 새로운 컴포넌트를 사용하고 있습니다. Vanilla Extract를 사용하여 동적 스타일링을 지원하고, 다양한 HTML 태그에 대한 일관된 텍스트 렌더링을 제공합니다.

변경 사항

파일	변경 요약
apps/web/src/app/page.tsx	Text 컴포넌트 가져오기 및 <Text.H1> 요소 추가
packages/ui/src/components/Text/Text.css.ts	텍스트 스타일링을 위한 CSS 변수 및 스타일 생성
packages/ui/src/components/Text/Text.subComponents.tsx	다양한 HTML 태그에 대한 텍스트 컴포넌트 생성
packages/ui/src/components/Text/Text.tsx	유연한 텍스트 렌더링을 위한 기본 Text 컴포넌트 구현
packages/ui/src/components/index.ts	Text 컴포넌트 및 관련 타입 내보내기

가능한 관련 PR

• [Fix]: Icon 컴포넌트 수정 #51: apps/web/src/app/page.tsx의 Icon 컴포넌트 수정
• [Fix] Spacing 컴포넌트 수정 #54: packages/ui/src/components/Spacing/Spacing.tsx의 구조 및 속성 변경

제안된 레이블

enhancement

제안된 리뷰어

• minseong0324

시퀀스 다이어그램

sequenceDiagram
    participant Web App
    participant Text Component
    participant CSS Variables
    Web App->>Text Component: 렌더링 요청 (태그, 스타일)
    Text Component->>CSS Variables: 스타일 변수 할당
    CSS Variables-->>Text Component: 스타일 적용
    Text Component-->>Web App: 스타일이 지정된 텍스트 요소 반환

Loading

토끼의 시 🐰

코드의 세계에 새로운 글꼴,
텍스트는 춤추고 스타일은 노래해
동적인 글자, 유연한 디자인
우리의 UI는 이제 더욱 빛나네!
🌈✨ 텍스트의 마법, 여기 있네!

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8171580 and 2cef1c7.

📒 Files selected for processing (2)

• apps/web/src/app/page.tsx (1 hunks)
• packages/ui/src/components/Text/Text.subComponents.tsx (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (2)

• packages/ui/src/components/Text/Text.subComponents.tsx
• apps/web/src/app/page.tsx

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 4

🧹 Nitpick comments (6)

packages/ui/src/components/Text/Text.css.ts (1)

3-5: CSS 변수에 기본값 추가를 고려해보세요.

CSS 변수들이 잘 정의되어 있지만, 기본값이 없는 경우 스타일이 제대로 적용되지 않을 수 있습니다.

다음과 같이 기본값을 추가하는 것을 제안드립니다:

-export const sizeVar = createVar();
-export const weightVar = createVar();
-export const colorVar = createVar();
+export const sizeVar = createVar('16px');
+export const weightVar = createVar('400');
+export const colorVar = createVar('inherit');

packages/theme/src/tokens/index.ts (1)

18-22: 타입 정의가 잘 구성되어 있습니다!

각 토큰 카테고리별로 타입을 분리한 것이 좋은 접근 방식입니다. 다만, 각 타입에 대한 JSDoc 문서화를 추가하면 더 좋을 것 같습니다.

예시:

/** 타이포그래피 관련 토큰 타입 */
export type TypographyType = typeof typography;

packages/theme/src/tokens/colors.ts (1)

7-27: 색상 팔레트가 체계적으로 구성되어 있습니다.

primary, pink, orange, blue 색상들이 200/400/800 단위로 일관성 있게 구성되어 있어 좋습니다. 다만 다음 사항들을 고려해보시면 좋을 것 같습니다:

• 각 색상 그룹별로 주석으로 용도 설명 추가
• 디자인 시스템 문서에 색상 사용 가이드라인 추가

예시:

// Primary colors - 주요 브랜드 색상
primary500: '#7081F4',

packages/ui/src/components/Text/Text.tsx (1)

17-22: TextProps 타입 정의가 잘 되어있습니다.

타입 안전성이 잘 보장되어 있습니다. 다만 몇 가지 개선사항을 제안드립니다:

• 필수 props에 대해 재고려 (color, fontSize, fontWeight를 모두 필수로 할 필요가 있는지)
• 자주 사용되는 조합을 위한 variant 속성 추가 고려

예시:

export type TextProps<T extends AllowedTags> = {
  as?: T;
  variant?: 'heading' | 'body' | 'caption';
  color?: keyof typeof tokens.colors;
  fontSize?: keyof TypographyType['fontSize'];
  fontWeight?: keyof TypographyType['fontWeight'];
} & ComponentPropsWithoutRef<T>;

packages/theme/src/themes/contract.ts (1)

34-53: 테마 계약이 잘 정의되어 있습니다.

새로 추가된 색상들이 체계적으로 정리되어 있습니다. 다만 다음과 같은 개선사항을 제안드립니다:

• 관련 색상들을 그룹화하는 주석 추가
• 각 색상의 사용 목적에 대한 문서화

예시:

colors: {
  // Base colors
  primary: string;
  // ...

  // Primary palette
  primary500: string;
  primary600: string;
  primary700: string;
  primary800: string;

  // Utility colors
  shadow: string;
  blue: string;

  // Extended palettes
  pink200: string;
  // ...
}

packages/theme/src/themes/dark.ts (1)

47-57: 색상 그룹을 더 체계적으로 구성해주세요.

현재 pink, orange, blue 색상들이 개별적으로 나열되어 있습니다. 이를 더 체계적으로 구성하면 유지보수가 용이해질 것 같습니다.

다음과 같이 색상을 그룹화하는 것을 고려해보세요:

-    pink200: tokens.colors.pink200,
-    pink400: tokens.colors.pink400,
-    pink800: tokens.colors.pink800,
-
-    orange200: tokens.colors.orange200,
-    orange400: tokens.colors.orange400,
-    orange800: tokens.colors.orange800,
-
-    blue200: tokens.colors.blue200,
-    blue400: tokens.colors.blue400,
-    blue800: tokens.colors.blue800,
+    pink: {
+      200: tokens.colors.pink200,
+      400: tokens.colors.pink400,
+      800: tokens.colors.pink800,
+    },
+    orange: {
+      200: tokens.colors.orange200,
+      400: tokens.colors.orange400,
+      800: tokens.colors.orange800,
+    },
+    blue: {
+      200: tokens.colors.blue200,
+      400: tokens.colors.blue400,
+      800: tokens.colors.blue800,
+    },

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between bac9147 and c30e1b0.

📒 Files selected for processing (11)

• apps/web/src/app/page.tsx (1 hunks)
• packages/theme/src/themes/contract.ts (1 hunks)
• packages/theme/src/themes/dark.ts (1 hunks)
• packages/theme/src/themes/index.ts (1 hunks)
• packages/theme/src/themes/light.ts (2 hunks)
• packages/theme/src/tokens/colors.ts (1 hunks)
• packages/theme/src/tokens/index.ts (1 hunks)
• packages/ui/src/components/Text/Text.css.ts (1 hunks)
• packages/ui/src/components/Text/Text.subComponents.tsx (1 hunks)
• packages/ui/src/components/Text/Text.tsx (1 hunks)
• packages/ui/src/components/index.ts (1 hunks)

🔇 Additional comments (8)

packages/theme/src/themes/index.ts (1)

5-5: 타입 이름 변경이 적절합니다!

Vars에서 VarsType으로의 이름 변경은 이것이 타입임을 더 명확하게 나타내며, TypeScript 네이밍 컨벤션을 잘 따르고 있습니다.

packages/ui/src/components/Text/Text.css.ts (1)

7-11: 스타일 정의가 깔끔합니다!

CSS-in-JS 패턴을 잘 활용하여 타입 안정성이 보장된 스타일을 구현하셨네요.

packages/ui/src/components/index.ts (1)

5-6: 컴포넌트 export 구조가 일관성 있습니다!

기존 컴포넌트들의 export 패턴을 잘 따르고 있으며, 타입 정의도 함께 export하여 타입 안정성을 보장하고 있습니다.

apps/web/src/app/page.tsx (2)

1-1: import 구문이 깔끔합니다!

Icon과 Text 컴포넌트를 함께 import하여 코드가 간결해졌네요.

---

9-11: 테스트용 텍스트를 실제 콘텐츠로 교체해주세요.

"hihi"는 테스트용 텍스트로 보입니다. 실제 서비스에 맞는 의미 있는 텍스트로 교체가 필요합니다.

또한, 하드코딩된 스타일 값들을 테마 시스템의 토큰으로 교체하는 것을 고려해보세요:

-<Text.h1 color="grey950" fontSize={28} fontWeight="semibold">
+<Text.h1 color="grey950" fontSize="heading1" fontWeight="semibold">

✅ Verification successful

테스트용 텍스트 "hihi" 교체 필요 확인

코드베이스 전체 검색 결과, "hihi"는 해당 파일에서만 사용되는 테스트용 텍스트임이 확인되었습니다. 또한 테마 시스템이 올바르게 구현되어 있어 fontSize를 테마 토큰으로 교체하는 것이 디자인 시스템의 일관성을 위해 권장됩니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Error: No shell scripts found

---

Script:

#!/bin/bash
# Search for "hihi" occurrences
echo "=== Searching for 'hihi' occurrences ==="
rg "hihi" --type tsx --type ts

# Look for Text.h1 usage patterns
echo -e "\n=== Searching for Text.h1 usage patterns ==="
rg "Text\.h1" --type tsx --type ts -A 2

# Search for theme-related files
echo -e "\n=== Looking for theme configuration ==="
fd "theme" -e ts -e tsx

Length of output: 537

---

Script:

#!/bin/bash
# Search for "hihi" occurrences with correct extensions
echo "=== Searching for 'hihi' occurrences ==="
rg "hihi" -t typescript -t typescriptreact

# Look for Text.h1 usage patterns
echo -e "\n=== Searching for Text.h1 usage patterns ==="
rg "Text\.h1" -t typescript -t typescriptreact -A 2

# Examine theme configuration
echo -e "\n=== Examining theme configuration ==="
cat packages/theme/src/themes/themes.css.ts

Length of output: 820

---

Script:

#!/bin/bash
# Search using basic grep
echo "=== Searching for patterns ==="
find . -type f -name "*.tsx" -o -name "*.ts" | xargs grep -l "hihi"
find . -type f -name "*.tsx" -o -name "*.ts" | xargs grep -l "Text.h1"

# Check theme definitions
echo -e "\n=== Theme contract ==="
cat packages/theme/src/themes/contract.ts

echo -e "\n=== Light theme implementation ==="
cat packages/theme/src/themes/light.ts

Length of output: 3878

packages/theme/src/themes/dark.ts (1)

39-42: 색상 토큰의 용도를 명확히 문서화해주세요.

새로 추가된 primary 색상 토큰들의 구체적인 사용 사례와 가이드라인이 필요합니다.

각 색상의 사용 목적을 확인하기 위해 다음 스크립트를 실행해보세요:

packages/theme/src/themes/light.ts (1)

6-8: 삭제 예정인 속성들의 마이그레이션 계획이 필요합니다.

TODO 주석으로 표시된 삭제 예정인 속성들에 대해:

1. 구체적인 삭제 일정
2. 대체할 속성들로의 마이그레이션 가이드
3. 하위 호환성 보장 방안
   이 명확히 문서화되어야 합니다.

현재 사용 중인 곳을 파악하기 위해 다음 스크립트를 실행해보세요:

✅ Verification successful

삭제 예정인 속성들을 즉시 제거해도 좋습니다.

검색 결과 primary, primary400to200, primaryHover 속성들이 현재 코드베이스에서 사용되지 않고 있음이 확인되었습니다. 따라서 마이그레이션 계획 없이 해당 속성들과 TODO 주석을 바로 제거하셔도 됩니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 삭제 예정인 속성들의 사용처 확인
rg "primary(?!500|600|700|800)" --type ts --type tsx

Length of output: 291

---

Script:

#!/bin/bash
# Search for deprecated primary color token usages
echo "=== Searching for 'primary' usage ==="
rg "\.primary\b" --type ts --type tsx -g '!**/light.ts' -g '!**/dark.ts'

echo -e "\n=== Searching for 'primary400to200' usage ==="
rg "\.primary400to200\b" --type ts --type tsx

echo -e "\n=== Searching for 'primaryHover' usage ==="
rg "\.primaryHover\b" --type ts --type tsx -g '!**/light.ts' -g '!**/dark.ts'

Length of output: 597

---

Script:

#!/bin/bash
# Search for deprecated primary color token usages without type restrictions
echo "=== Searching for theme.primary usage ==="
rg "theme\.primary\b" -C 2 -g '!**/light.ts' -g '!**/dark.ts'

echo -e "\n=== Searching for primary400to200 usage ==="
rg "\.primary400to200\b" -C 2

echo -e "\n=== Searching for primaryHover usage ==="
rg "theme\.primaryHover\b" -C 2 -g '!**/light.ts' -g '!**/dark.ts'

Length of output: 457

packages/ui/src/components/Text/Text.subComponents.tsx (1)

3-8: CreateSubText 함수의 타입 안전성이 잘 구현되었습니다.

제네릭과 Omit을 활용한 타입 설계가 견고합니다. 컴파운드 컴포넌트 패턴도 적절히 적용되었습니다.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (3)

packages/ui/src/components/Text/Text.subComponents.tsx (3)

3-8: JSDoc 문서화가 필요합니다.

CreateSubText 함수는 컴파운드 패턴의 핵심 구현체입니다. 함수의 목적과 사용법을 명확히 하기 위해 JSDoc 문서화를 추가하는 것이 좋겠습니다.

+/**
+ * Text 컴포넌트의 서브 컴포넌트를 생성하는 헬퍼 함수
+ * @param props - Text 컴포넌트의 props (as prop은 필수)
+ * @returns Text 컴포넌트의 인스턴스
+ */
function CreateSubText<T extends AllowedTags>({

---

16-16: 타입 단언에 대한 설명이 필요합니다.

as TextCompoundType 타입 단언의 목적과 필요성을 설명하는 주석을 추가하면 코드의 의도를 더 명확히 전달할 수 있습니다.

+// Text 컴포넌트에 compound 패턴을 적용하기 위한 타입 확장
const BaseText = Text as TextCompoundType;

---

18-91: 접근성 개선이 필요합니다.

텍스트 컴포넌트의 접근성을 높이기 위해 다음 기능들의 추가를 고려해주세요:

1. aria-label prop 지원
2. heading 레벨에 따른 적절한 시맨틱 구조 가이드라인 추가
3. 색상 대비 검사 유틸리티 추가

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c30e1b0 and c97f87c.

📒 Files selected for processing (1)

• packages/ui/src/components/Text/Text.subComponents.tsx (1 hunks)

🔇 Additional comments (2)

packages/ui/src/components/Text/Text.subComponents.tsx (2)

18-91: 이전 리뷰 피드백이 아직 반영되지 않았습니다.

heading 태그들의 스타일이 여전히 중복되어 있으며, 시맨틱한 크기 차이가 없습니다. 이전 리뷰에서 제안된 다음 개선사항들을 반영해주세요:

1. 공통 스타일을 상수로 분리
2. heading 태그별 적절한 폰트 크기 차등 적용

---

1-2: 테스트 코드 작성이 여전히 필요합니다.

컴파운드 패턴의 안정적인 동작을 보장하기 위해 테스트 코드 작성이 필요합니다. 이전 리뷰에서 제안된 테스트 케이스들을 참고해주세요.

[kongnayeon]

태그마다 임의로 동일한 값 넣어 뒀는데 추후에 디자이너 분들과 이야기해서 디폴트값 넣어 둬도 좋을 것 같아요!

[kongnayeon]

요건 디자이너 분께 여쭤 보고 가장 많이 사용되는 값으로 기본값 넣어 줘도 좋을 것 같아요(?)

[minseong0324]

h4까지만 있어도 좋지 않을까요?

[minseong0324]

h1 : 가장 큰 제목
h2: 큰 제목
h3: 일반적인 제목
h4: 작은 제목

[kongnayeon]

대부분의 경우 h1만 사용하거나 h2까지만 사용되지 않을까 싶긴 해요! h5, h6도 존재하는 태그라 저는 두는 게 좋을 것 같긴 합니다,,

[minseong0324]

넵 알겠습니다~!

[minseong0324]

Text.H1, Text.Span 이런 식으로 대문자면 통일감이 있을 것 같아요!

[kongnayeon]

다른 컴파운드 컴포넌트들 사용할 때 생각하면 대문자가 좋겠네요!! 수정할게요!