[INIT] 디자인 시스템 토큰 및 스토리 세팅 - #44
Conversation
github-actions
Bot
added
⏰ Timo-web
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
워크스루Tailwind 테마 토큰을 분리해 전역 스타일과 폰트 구성을 연결했고, 디자인 시스템의 색상·타이포그래피 토큰과 컴포넌트를 새 스키마에 맞게 갱신했습니다. Storybook과 ESLint 설정도 함께 정리했습니다. 변경 사항디자인 시스템 토큰 및 스타일 세팅
예상 코드 리뷰 노력🎯 3 (Moderate) | ⏱️ ~25 minutes 관련 PR
추천 레이블
추천 리뷰어
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
Timo Performance ReportBundle Size — timo-web
Lighthouse — timo-web
Image Optimization — timo-web
측정 커밋: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/tailwind-config/tokens/typography.css`:
- Line 2: The --font-pretendard token currently defines only Pretendard, so
update the typography token in the font variables setup to include a safe
fallback stack. Locate the --font-pretendard declaration in the typography token
file and change it to use Pretendard with a generic sans-serif fallback so any
consumers of this token keep a usable font when the webfont fails to load.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: c4803a7a-da41-4987-8022-e2ef82b64b6f
📒 Files selected for processing (6)
apps/timo-web/app/globals.csspackages/tailwind-config/theme.csspackages/tailwind-config/tokens/colors.csspackages/tailwind-config/tokens/radius.csspackages/tailwind-config/tokens/typography.csspackages/timo-design-system/eslint.config.mjs
| @@ -0,0 +1,86 @@ | |||
| @theme { | |||
| --font-pretendard: Pretendard, sans-serif; | |||
There was a problem hiding this comment.
https://nextjs-ko.org/docs/pages/building-your-application/optimizing/fonts
위 링크 참고해서 Next/local 폰트 최적화 적용해 주면 좋을 것 같아요-!!!
jjangminii
left a comment
jjangminii
left a comment
There was a problem hiding this comment.
고생하셨어요! 간단한 코멘트 확인해주세요
There was a problem hiding this comment.
Actionable comments posted: 12
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/timo-design-system/src/components/color/Color.stories.tsx`:
- Line 2: `Color.stories.tsx` is using a deep relative import for
`COLOR_TOKENS`, which should be aligned with the project’s absolute alias import
convention. Update the import to use the same alias style used elsewhere in the
design system instead of `../../tokens/color-token`, so the Storybook story
remains resilient to file moves and consistent with the import rules.
- Around line 18-26: The Color.stories render wrapper currently uses a top-level
div, which violates the requested Fragment-first and semantic-container pattern.
Update the render function in Color.stories so the outermost wrapper is a
Fragment, and move the styling currently on the div to a semantic container such
as section while keeping the existing content and COLOR_TOKENS mapping intact.
In `@packages/timo-design-system/src/components/color/Color.tsx`:
- Line 1: The import in Color.tsx uses a deep relative path to ColorToken, which
should be replaced with the package’s absolute path alias to match the import
convention. Update the ColorToken import in the Color component to use the
existing alias used elsewhere in the design system instead of
"../../tokens/color-token", keeping the symbol ColorToken unchanged.
- Around line 4-38: The Color component currently uses nested divs for the whole
token card, but it should be refactored to use a Fragment as the top-level
wrapper and a semantic container like article for the main block. Update the
structure in Color to replace the non-semantic layout with appropriate semantic
tags, and move the name/cssVar/value metadata into a dl-based definition list so
the token details are easier to scan and navigate. Keep the visual styling
equivalent while reducing unnecessary div usage.
- Around line 1-3: `Color` 컴포넌트의 public API가 `ColorToken`을 직접 노출하고 있으므로, 입력 계약을
`ColorProps` interface로 분리하세요. `Color` 시그니처에서 `ColorToken` 대신 `ColorProps`를
사용하고, 필요한 필드만 명시해 토큰 모델과 컴포넌트 계약을 분리해 주세요.
In
`@packages/timo-design-system/src/components/typography/Typography.stories.tsx`:
- Around line 17-25: The Typography.stories.tsx story currently uses a top-level
div and should be updated to follow the path rules and a11y guidance. In the
render function for Typography, wrap the content with a Fragment and replace the
outer container with a semantic element such as section, keeping the existing
styling and mapping over TYPOGRAPHY_TOKENS unchanged.
- Line 2: The Typography.stories.tsx import currently uses a deep relative path,
which should be replaced with the project’s absolute path alias. Update the
TYPOGRAPHY_TOKENS import to use the same alias-based import style used elsewhere
in the design system, and ensure any related imports in Typography.stories.tsx
follow this convention so the file no longer depends on "../../" paths.
In `@packages/timo-design-system/src/components/typography/Typography.tsx`:
- Line 1: Replace the deep relative import in Typography with the project’s path
alias import style. Update the TypographyToken import in Typography.tsx to use
the same absolute alias pattern used elsewhere in the codebase, rather than
"../../tokens/typography-token", so the module resolves through the shared
tokens alias.
- Around line 10-42: The Typography component’s root wrapper is using generic
divs where a Fragment and semantic markup are expected. Update the top-level
structure in Typography to return a Fragment, replace the outer layout wrapper
with an article, and present the token/value metadata with a dl-based structure
instead of nested divs. Keep the same visual layout while reducing div usage and
aligning the component with document-style semantics.
- Around line 1-9: The Typography component is using TypographyToken directly as
its props contract, but the component API should be separated from the token
model. Update Typography to accept a new interface named TypographyProps, with
the Props suffix, and use that interface in the Typography function signature
while keeping the existing fields (token, size, weight, lineHeight,
letterSpacing) aligned with the current component behavior.
In `@packages/timo-design-system/src/tokens/color-token.ts`:
- Around line 1-30: Add a stable id field to the ColorToken model so list items
are keyed by a unique identifier instead of name. Update COLOR_TOKENS in
ColorToken to include id values, then change Color.stories.tsx to use that id
for the dynamic list key and keep name only for display. Make sure the new
identifier is the symbol consumers rely on when rendering the token list.
In `@packages/timo-design-system/src/tokens/typography-token.ts`:
- Around line 1-122: The typography token shape currently lacks a stable
identifier, so consumers are forced to use token names as list keys. Update
TypographyToken and TYPOGRAPHY_TOKENS to include a unique id field, then switch
Typography.stories.tsx to render keys from that id instead of token. Keep token
as the display/name field and use id as the persistent list identifier so
renames do not affect the key contract.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 36f1913f-389e-40ac-af58-ec4ca00a243a
📒 Files selected for processing (6)
packages/timo-design-system/src/components/color/Color.stories.tsxpackages/timo-design-system/src/components/color/Color.tsxpackages/timo-design-system/src/components/typography/Typography.stories.tsxpackages/timo-design-system/src/components/typography/Typography.tsxpackages/timo-design-system/src/tokens/color-token.tspackages/timo-design-system/src/tokens/typography-token.ts
There was a problem hiding this comment.
Caution
Inline review comments failed to post. This is likely due to GitHub's internal server error or limits when posting large numbers of comments. If you are seeing this consistently it is likely a permissions issue. Please check "Moderation" -> "Code review limits" under your organization settings.
Actionable comments posted: 12
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/timo-design-system/src/components/color/Color.stories.tsx`:
- Line 2: `Color.stories.tsx` is using a deep relative import for
`COLOR_TOKENS`, which should be aligned with the project’s absolute alias import
convention. Update the import to use the same alias style used elsewhere in the
design system instead of `../../tokens/color-token`, so the Storybook story
remains resilient to file moves and consistent with the import rules.
- Around line 18-26: The Color.stories render wrapper currently uses a top-level
div, which violates the requested Fragment-first and semantic-container pattern.
Update the render function in Color.stories so the outermost wrapper is a
Fragment, and move the styling currently on the div to a semantic container such
as section while keeping the existing content and COLOR_TOKENS mapping intact.
In `@packages/timo-design-system/src/components/color/Color.tsx`:
- Line 1: The import in Color.tsx uses a deep relative path to ColorToken, which
should be replaced with the package’s absolute path alias to match the import
convention. Update the ColorToken import in the Color component to use the
existing alias used elsewhere in the design system instead of
"../../tokens/color-token", keeping the symbol ColorToken unchanged.
- Around line 4-38: The Color component currently uses nested divs for the whole
token card, but it should be refactored to use a Fragment as the top-level
wrapper and a semantic container like article for the main block. Update the
structure in Color to replace the non-semantic layout with appropriate semantic
tags, and move the name/cssVar/value metadata into a dl-based definition list so
the token details are easier to scan and navigate. Keep the visual styling
equivalent while reducing unnecessary div usage.
- Around line 1-3: `Color` 컴포넌트의 public API가 `ColorToken`을 직접 노출하고 있으므로, 입력 계약을
`ColorProps` interface로 분리하세요. `Color` 시그니처에서 `ColorToken` 대신 `ColorProps`를
사용하고, 필요한 필드만 명시해 토큰 모델과 컴포넌트 계약을 분리해 주세요.
In
`@packages/timo-design-system/src/components/typography/Typography.stories.tsx`:
- Around line 17-25: The Typography.stories.tsx story currently uses a top-level
div and should be updated to follow the path rules and a11y guidance. In the
render function for Typography, wrap the content with a Fragment and replace the
outer container with a semantic element such as section, keeping the existing
styling and mapping over TYPOGRAPHY_TOKENS unchanged.
- Line 2: The Typography.stories.tsx import currently uses a deep relative path,
which should be replaced with the project’s absolute path alias. Update the
TYPOGRAPHY_TOKENS import to use the same alias-based import style used elsewhere
in the design system, and ensure any related imports in Typography.stories.tsx
follow this convention so the file no longer depends on "../../" paths.
In `@packages/timo-design-system/src/components/typography/Typography.tsx`:
- Line 1: Replace the deep relative import in Typography with the project’s path
alias import style. Update the TypographyToken import in Typography.tsx to use
the same absolute alias pattern used elsewhere in the codebase, rather than
"../../tokens/typography-token", so the module resolves through the shared
tokens alias.
- Around line 10-42: The Typography component’s root wrapper is using generic
divs where a Fragment and semantic markup are expected. Update the top-level
structure in Typography to return a Fragment, replace the outer layout wrapper
with an article, and present the token/value metadata with a dl-based structure
instead of nested divs. Keep the same visual layout while reducing div usage and
aligning the component with document-style semantics.
- Around line 1-9: The Typography component is using TypographyToken directly as
its props contract, but the component API should be separated from the token
model. Update Typography to accept a new interface named TypographyProps, with
the Props suffix, and use that interface in the Typography function signature
while keeping the existing fields (token, size, weight, lineHeight,
letterSpacing) aligned with the current component behavior.
In `@packages/timo-design-system/src/tokens/color-token.ts`:
- Around line 1-30: Add a stable id field to the ColorToken model so list items
are keyed by a unique identifier instead of name. Update COLOR_TOKENS in
ColorToken to include id values, then change Color.stories.tsx to use that id
for the dynamic list key and keep name only for display. Make sure the new
identifier is the symbol consumers rely on when rendering the token list.
In `@packages/timo-design-system/src/tokens/typography-token.ts`:
- Around line 1-122: The typography token shape currently lacks a stable
identifier, so consumers are forced to use token names as list keys. Update
TypographyToken and TYPOGRAPHY_TOKENS to include a unique id field, then switch
Typography.stories.tsx to render keys from that id instead of token. Keep token
as the display/name field and use id as the persistent list identifier so
renames do not affect the key contract.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 36f1913f-389e-40ac-af58-ec4ca00a243a
📒 Files selected for processing (6)
packages/timo-design-system/src/components/color/Color.stories.tsxpackages/timo-design-system/src/components/color/Color.tsxpackages/timo-design-system/src/components/typography/Typography.stories.tsxpackages/timo-design-system/src/components/typography/Typography.tsxpackages/timo-design-system/src/tokens/color-token.tspackages/timo-design-system/src/tokens/typography-token.ts
🛑 Comments failed to post (12)
packages/timo-design-system/src/components/color/Color.stories.tsx (2)
2-2: 📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
깊은 상대 경로 import는 절대 경로 alias로 통일해 주세요.
../../tokens/color-token는 이동에 취약하고 현재 import 규칙과도 어긋납니다. Storybook에서도 같은 alias를 쓰도록 맞춰 두면 토큰 경로가 다시 바뀌어도 수정 범위가 줄어듭니다.As per path instructions,
절대 경로 import 사용 (상대 경로 ../../ 지양).🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/timo-design-system/src/components/color/Color.stories.tsx` at line 2, `Color.stories.tsx` is using a deep relative import for `COLOR_TOKENS`, which should be aligned with the project’s absolute alias import convention. Update the import to use the same alias style used elsewhere in the design system instead of `../../tokens/color-token`, so the Storybook story remains resilient to file moves and consistent with the import rules.Source: Path instructions
18-26: 📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
최상단 래퍼는 Fragment로, 실제 컨테이너는 시맨틱 태그로 바꿔 주세요.
현재 루트가
<div>라서 두 규칙을 동시에 놓치고 있습니다. 최상단은<>...</>로 두고, 스타일이 필요한 컨테이너는<section>같은 시맨틱 요소로 내려 주세요. 작은 차이인데 문서 구조가 덜 밋밋해집니다.As per path instructions,
최상단 래퍼는 Fragment: <>…</>anddiv 남발 금지 → main, article, section, nav, header, footer 등 시맨틱 태그 사용.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/timo-design-system/src/components/color/Color.stories.tsx` around lines 18 - 26, The Color.stories render wrapper currently uses a top-level div, which violates the requested Fragment-first and semantic-container pattern. Update the render function in Color.stories so the outermost wrapper is a Fragment, and move the styling currently on the div to a semantic container such as section while keeping the existing content and COLOR_TOKENS mapping intact.Source: Path instructions
packages/timo-design-system/src/components/color/Color.tsx (3)
1-1: 📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
깊은 상대 경로 import는 절대 경로 alias로 바꿔 주세요.
../../tokens/color-token는 현재 import 규칙과 맞지 않습니다. 디자인 시스템 패키지 안에서 경로 alias를 일관되게 쓰는 편이 구조 변경 때 훨씬 덜 아픕니다.As per path instructions,
절대 경로 import 사용 (상대 경로 ../../ 지양).🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/timo-design-system/src/components/color/Color.tsx` at line 1, The import in Color.tsx uses a deep relative path to ColorToken, which should be replaced with the package’s absolute path alias to match the import convention. Update the ColorToken import in the Color component to use the existing alias used elsewhere in the design system instead of "../../tokens/color-token", keeping the symbol ColorToken unchanged.Source: Path instructions
1-3: 📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
컴포넌트 입력 계약은
ColorProps인터페이스로 분리해 주세요.
ColorToken은 토큰 데이터 모델인데, 지금은 그 타입이 그대로 컴포넌트 public API가 됩니다.interface ColorProps로 한 번 분리해 두면 규칙도 지키고 토큰 스키마 변경이 컴포넌트 계약으로 바로 번지는 것도 막을 수 있습니다.예시
import { ColorToken } from "../../tokens/color-token"; -export const Color = ({ name, cssVar, value }: ColorToken) => { +export interface ColorProps extends ColorToken {} + +export const Color = ({ name, cssVar, value }: ColorProps) => {As per path instructions,
Props 타입은 interface로 선언하고 접미사 Props 사용.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.import { ColorToken } from "../../tokens/color-token"; export interface ColorProps extends ColorToken {} export const Color = ({ name, cssVar, value }: ColorProps) => {🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/timo-design-system/src/components/color/Color.tsx` around lines 1 - 3, `Color` 컴포넌트의 public API가 `ColorToken`을 직접 노출하고 있으므로, 입력 계약을 `ColorProps` interface로 분리하세요. `Color` 시그니처에서 `ColorToken` 대신 `ColorProps`를 사용하고, 필요한 필드만 명시해 토큰 모델과 컴포넌트 계약을 분리해 주세요.Source: Path instructions
4-38: 📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
루트 구조를 Fragment + 시맨틱 마크업으로 정리해 주세요.
토큰 한 항목을 설명하는 UI라서 최상단은 Fragment로 두고, 실제 컨테이너는
<article>같은 시맨틱 요소가 더 잘 맞습니다. 내부 메타데이터도<dl>구조로 바꾸면 문서 탐색성이 좋아집니다. 지금은div가 너무 열일합니다.As per path instructions,
최상단 래퍼는 Fragment: <>…</>anddiv 남발 금지 → main, article, section, nav, header, footer 등 시맨틱 태그 사용.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/timo-design-system/src/components/color/Color.tsx` around lines 4 - 38, The Color component currently uses nested divs for the whole token card, but it should be refactored to use a Fragment as the top-level wrapper and a semantic container like article for the main block. Update the structure in Color to replace the non-semantic layout with appropriate semantic tags, and move the name/cssVar/value metadata into a dl-based definition list so the token details are easier to scan and navigate. Keep the visual styling equivalent while reducing unnecessary div usage.Source: Path instructions
packages/timo-design-system/src/components/typography/Typography.stories.tsx (2)
2-2: 📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
깊은 상대 경로 import는 절대 경로 alias로 통일해 주세요.
../../tokens/typography-token는 현재 import 규칙과 어긋납니다. 토큰 파일 분리가 계속될수록 alias가 유지보수 비용을 더 잘 막아 줍니다.As per path instructions,
절대 경로 import 사용 (상대 경로 ../../ 지양).🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/timo-design-system/src/components/typography/Typography.stories.tsx` at line 2, The Typography.stories.tsx import currently uses a deep relative path, which should be replaced with the project’s absolute path alias. Update the TYPOGRAPHY_TOKENS import to use the same alias-based import style used elsewhere in the design system, and ensure any related imports in Typography.stories.tsx follow this convention so the file no longer depends on "../../" paths.Source: Path instructions
17-25: 📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
최상단 래퍼는 Fragment로, 실제 컨테이너는 시맨틱 태그로 바꿔 주세요.
현재 루트가
<div>라서 경로 규칙과 a11y 규칙을 동시에 놓칩니다. 최상단은 Fragment로 두고, 본문 컨테이너는<section>같은 시맨틱 요소로 바꾸는 편이 더 일관됩니다.As per path instructions,
최상단 래퍼는 Fragment: <>…</>anddiv 남발 금지 → main, article, section, nav, header, footer 등 시맨틱 태그 사용.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/timo-design-system/src/components/typography/Typography.stories.tsx` around lines 17 - 25, The Typography.stories.tsx story currently uses a top-level div and should be updated to follow the path rules and a11y guidance. In the render function for Typography, wrap the content with a Fragment and replace the outer container with a semantic element such as section, keeping the existing styling and mapping over TYPOGRAPHY_TOKENS unchanged.Source: Path instructions
packages/timo-design-system/src/components/typography/Typography.tsx (3)
1-1: 📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
깊은 상대 경로 import는 절대 경로 alias로 바꿔 주세요.
../../tokens/typography-token는 현재 import 규칙과 맞지 않습니다. 토큰 구조가 더 분리될수록 alias가 경로 churn을 줄여 줍니다.As per path instructions,
절대 경로 import 사용 (상대 경로 ../../ 지양).🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/timo-design-system/src/components/typography/Typography.tsx` at line 1, Replace the deep relative import in Typography with the project’s path alias import style. Update the TypographyToken import in Typography.tsx to use the same absolute alias pattern used elsewhere in the codebase, rather than "../../tokens/typography-token", so the module resolves through the shared tokens alias.Source: Path instructions
1-9: 📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
컴포넌트 입력 계약은
TypographyProps인터페이스로 분리해 주세요.
TypographyToken을 그대로 props에 쓰면 토큰 데이터 모델과 컴포넌트 API가 한 덩어리로 묶입니다.interface TypographyProps로 분리해 두면 규칙을 지키면서도 두 경계가 더 선명해집니다.예시
import { TypographyToken } from "../../tokens/typography-token"; +export interface TypographyProps extends TypographyToken {} + export const Typography = ({ token, size, weight, lineHeight, letterSpacing, -}: TypographyToken) => { +}: TypographyProps) => {As per path instructions,
Props 타입은 interface로 선언하고 접미사 Props 사용.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.import { TypographyToken } from "../../tokens/typography-token"; export interface TypographyProps extends TypographyToken {} export const Typography = ({ token, size, weight, lineHeight, letterSpacing, }: TypographyProps) => {🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/timo-design-system/src/components/typography/Typography.tsx` around lines 1 - 9, The Typography component is using TypographyToken directly as its props contract, but the component API should be separated from the token model. Update Typography to accept a new interface named TypographyProps, with the Props suffix, and use that interface in the Typography function signature while keeping the existing fields (token, size, weight, lineHeight, letterSpacing) aligned with the current component behavior.Source: Path instructions
10-42: 📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
루트 구조를 Fragment + 시맨틱 마크업으로 바꿔 주세요.
이 컴포넌트는 타이포 샘플과 메타정보를 보여 주는 문서성 블록이라
<article>과<dl>이 더 잘 맞습니다. 최상단도 Fragment로 맞춰 두면 규칙이 일관되고,div의존도도 줄어듭니다. 지금 구조는 조금 너무 편한 길로 갔습니다.As per path instructions,
최상단 래퍼는 Fragment: <>…</>anddiv 남발 금지 → main, article, section, nav, header, footer 등 시맨틱 태그 사용.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/timo-design-system/src/components/typography/Typography.tsx` around lines 10 - 42, The Typography component’s root wrapper is using generic divs where a Fragment and semantic markup are expected. Update the top-level structure in Typography to return a Fragment, replace the outer layout wrapper with an article, and present the token/value metadata with a dl-based structure instead of nested divs. Keep the same visual layout while reducing div usage and aligning the component with document-style semantics.Source: Path instructions
packages/timo-design-system/src/tokens/color-token.ts (1)
1-30: 📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
토큰 모델에
id를 넣어 story 리스트key를 규칙에 맞춰 주세요.현재 구조에서는 소비처가
token.name을key로 쓸 수밖에 없습니다. 동적 리스트는 고유id를 쓰라는 규칙이 있으니ColorToken에id를 추가하고Color.stories.tsx도 그 필드를 사용하도록 맞춰 주세요. 표시명과 식별자를 분리해 두면 이름 변경에도 더 안전합니다.예시
export interface ColorToken { + id: string; name: string; cssVar: string; value: string; } export const COLOR_TOKENS: ColorToken[] = [ - { name: "timo-blue-50", cssVar: "--color-timo-blue-50", value: "`#F1F6FE`" }, + { id: "timo-blue-50", name: "timo-blue-50", cssVar: "--color-timo-blue-50", value: "`#F1F6FE`" },As per path instructions,
동적 리스트의 key prop: 반드시 고유 id 사용 (index 금지).🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/timo-design-system/src/tokens/color-token.ts` around lines 1 - 30, Add a stable id field to the ColorToken model so list items are keyed by a unique identifier instead of name. Update COLOR_TOKENS in ColorToken to include id values, then change Color.stories.tsx to use that id for the dynamic list key and keep name only for display. Make sure the new identifier is the symbol consumers rely on when rendering the token list.Source: Path instructions
packages/timo-design-system/src/tokens/typography-token.ts (1)
1-122: 📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
토큰 항목에
id를 추가해 리스트key계약을 맞춰 주세요.현재 구조에서는 소비처가
row.token을key로 쓸 수밖에 없습니다. 동적 리스트는 고유id를 쓰라는 규칙이 있으니TypographyToken에id를 추가하고Typography.stories.tsx도 그 필드를 사용하도록 맞춰 주세요. 이름과 렌더링 식별자를 분리해 두면 토큰 rename에도 덜 흔들립니다.예시
export interface TypographyToken { + id: string; token: string; size: string; weight: string; lineHeight: string; letterSpacing: string; } export const TYPOGRAPHY_TOKENS: TypographyToken[] = [ { + id: "text-headline-b-30", token: "text-headline-b-30",As per path instructions,
동적 리스트의 key prop: 반드시 고유 id 사용 (index 금지).🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/timo-design-system/src/tokens/typography-token.ts` around lines 1 - 122, The typography token shape currently lacks a stable identifier, so consumers are forced to use token names as list keys. Update TypographyToken and TYPOGRAPHY_TOKENS to include a unique id field, then switch Typography.stories.tsx to render keys from that id instead of token. Keep token as the display/name field and use id as the persistent list identifier so renames do not affect the key contract.Source: Path instructions
확실히 Tailwind는 유틸리티 클래스 내부에서 이미 |
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/timo-design-system/src/components/color/Color.stories.tsx (1)
1-2: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win상대 경로 import를 alias로 바꿔 주세요.
../../tokens/color-token은 이 저장소의 절대 경로 import 규칙과 어긋납니다.@/...로 맞추고, 필요하면 TypeScriptbaseUrl/paths문서도 참고해 보세요: https://www.typescriptlang.org/tsconfig/#paths 토큰은 잘 찾았고, 경로만 한 번 더 다듬으면 됩니다.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/timo-design-system/src/components/color/Color.stories.tsx` around lines 1 - 2, The import in Color.stories.tsx should use the repository’s alias-based absolute path instead of a relative path. Update the COLOR_TOKENS import to follow the existing `@/`... import convention used in this codebase, and keep the Color import unchanged if it already matches the local module pattern.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@packages/timo-design-system/src/components/color/Color.stories.tsx`:
- Around line 1-2: The import in Color.stories.tsx should use the repository’s
alias-based absolute path instead of a relative path. Update the COLOR_TOKENS
import to follow the existing `@/`... import convention used in this codebase, and
keep the Color import unchanged if it already matches the local module pattern.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: c051b8a5-7b9b-4328-98b6-290c2b17d3bb
⛔ Files ignored due to path filters (3)
apps/timo-web/app/fonts/PretendardVariable.woff2is excluded by!**/*.woff2packages/timo-design-system/src/assets/fonts/PretendardVariable.woff2is excluded by!**/*.woff2pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (10)
apps/timo-web/app/fonts.tsapps/timo-web/app/layout.tsxpackages/tailwind-config/tokens/typography.csspackages/timo-design-system/.storybook/preview.tspackages/timo-design-system/package.jsonpackages/timo-design-system/postcss.config.mjspackages/timo-design-system/src/components/color/Color.stories.tsxpackages/timo-design-system/src/components/index.tspackages/timo-design-system/src/components/typography/Typography.stories.tsxpackages/timo-design-system/src/styles/globals.css
|
리뷰 감사합니다! 말씀해주신 부분 확인해보니 그래서 해당 전역 설정은 제거하고, 디자인 명세에 있는 타이포그래피 값은 추가로 패키지 단위 디자인 시스템 검증을 위해 Storybook에서도 Tailwind config와 Pretendard 폰트가 정상 적용되도록 설정했고, 앱에서도 검증 완료한 항목은 다음과 같습니다.
임시 검증 코드는 제거하고 필요한 설정/토큰 변경만 커밋하겠습니당 |
|
너무너무 고생했어요 유민양 ~~ 짱 멋져요 ❤️ |
Co-authored-by: 김민아 <kmina121777@naver.com>
|
타이포그래피 토큰 적용 방식 수정했습니다! 기존에는 Typography 스토리에서 토큰명을 보여주고 있었지만, 실제 샘플 텍스트에는 수정 내용은 아래와 같습니다.
확인 결과, Storybook DevTools에서 |
ehye1
left a comment
ehye1
left a comment
There was a problem hiding this comment.
너무너무 수고많았어요 유민양,,
수정 사항에 맞춰서 pr도 같이 수정해주면 좋을 것 같아요!!!
고생햇서요
- timo-design-system에 ./styles CSS 엔트리포인트 추가 - components.css에 @source로 컴포넌트 디렉토리 스캔 설정 - timo-web globals.css에서 디자인 시스템 스타일 import
kimminna
left a comment
kimminna
left a comment
There was a problem hiding this comment.
Storybook에서는 정상적으로 보이던 컴포넌트의 스타일이 timo-web에서는 적용되지 않는 문제가 있었는데요.
원인을 찾아보니,
Tailwind v4는 소스 파일을 스캔해서 사용된 클래스명에 해당하는 CSS만 생성합니다. timo-web의 Tailwind는 자기 프로젝트 파일만 스캔하고 node_modules 내부는 스캔하지 않기 때문에, timo-design-system 패키지 안의 bg-timo-yellow-300 같은 클래스를 인식하지 못해 CSS가 생성되지 않았어요. Storybook은 디자인 시스템 패키지 내부에서 실행되므로 자체 소스를 직접 스캔해 문제가 없었습니다.
가장 단순한 해결책은 timo-web/app/globals.css에 @source "../../../packages/timo-design-system/src"를 직접 추가하는 것이지만, 이 방식은 디자인 시스템 내부 경로를 소비하는 앱이 알아야 한다는 문제가 있습니다. DS 패키지 구조가 바뀌면 모든 소비 앱을 수정해야 합니다.
대신 디자인 시스템이 자체 CSS 엔트리포인트를 export하는 방식으로 구현했어요. 스캔 경로 관리 책임이 DS 패키지 내부에 위치하므로, 소비하는 앱은 @import "@repo/timo-design-system/styles" 한 줄만 추가하면 됩니다. 이후 새 컴포넌트가 src/components/ 아래에 추가되더라도 소비 앱을 수정할 필요가 없습니다.
빌드 스텝을 추가해 CSS를 미리 컴파일해서 export하는 방법도 있지만, 현재 프로젝트는 모노레포 내에서만 사용하는 소스 패키지 구조이므로 빌드 복잡도를 높이지 않는 이 방법이 적합하다고 판단했습니다!! 추후에 디자인 시스템을 아예 독립적으로 분리할 일이 생긴다면, 그때 dist 파일 내에 디자인 시스템 스타일을 생성해서 export 하는 방식으로 바꿔도 괜찮을 것 같아요.
5 participants
ISSUE 🔗
close #41
What is this PR? 🔍
Figma 디자인 시스템 명세를 기준으로 Tailwind v4 디자인 토큰과 Storybook 검증 환경을 초기 설정했어요.
이번 PR에서는 color, typography, radius 토큰을 역할별 파일로 분리하고, 디자인 시스템 패키지와
timo-web에서 동일한 토큰을 사용할 수 있도록 구성했습니다.또한 Storybook에서 토큰이 실제로 렌더링되는지 확인할 수 있도록 Color/Typography 스토리를 추가했습니다.
주요 변경 사항
Tailwind v4
@theme기반 디자인 토큰을 추가했습니다.토큰 파일을 역할별로 분리했습니다.
tokens/colors.csstokens/typography.csstokens/radius.csstheme.css는 각 토큰 파일을 불러오는 진입점 역할만 하도록 정리했습니다.디자인 시스템 패키지에서 Tailwind가 적용되도록 Storybook 전역 스타일을 설정했습니다.
@import "tailwindcss"@import "@repo/tailwind-config/theme.css"Pretendard 폰트를 적용했습니다.
timo-web: NextlocalFont를 루트 레이아웃에서 적용timo-design-system: Storybook 환경에서@font-face로 적용타이포그래피 토큰 적용 방식을 수정했습니다.
text-*충돌 가능성을 피하기 위해typo-*네이밍 사용@utility typo-*로font-size,line-height,letter-spacing,font-weight적용className={token}으로 실제 토큰 적용 확인Storybook에서 디자인 토큰을 확인할 수 있도록 토큰 스토리를 추가했습니다.
Tokens/ColorTokens/Typography참고 사항
tailwind.config.ts가 아니라 CSS@theme/@utility방식으로 토큰을 정의했습니다.html { font-size: 62.5%; }설정은 Tailwind 기본 스케일과 접근성 측면을 고려해 제거하고, Figma 명세 값은px기준으로 정의했습니다.To Reviewers
토큰 네이밍과 파일 분리 기준 위주로 봐주시면 좋을 것 같아요.
특히
theme.css는 import 진입점으로만 두고, 실제 토큰은colors,typography,radius파일로 나눴습니다. 앞으로 토큰이 늘어날 때도 이 구조로 가져가도 괜찮을지 확인 부탁드립니다!또한 타이포그래피 토큰은
text-*대신typo-*유틸리티로 분리했습니다.cn/Tailwind merge 계열 유틸과 충돌 가능성을 줄이기 위한 방향인데, 이 네이밍 기준도 함께 확인 부탁드립니다.Storybook의
Tokens/Color,Tokens/Typography화면이 Chromatic 검증용으로 적절한지도 함께 봐주시면 감사하겠습니다!Screenshot 📷
Test Checklist ✔
pnpm lint통과git diff --check통과pnpm check-types통과