Skip to content

fix(wds): content badge 스타일 수정 및 데모 텍스트 변경#531

Open
dididoeun wants to merge 6 commits intomainfrom
fix/content-badge
Open

fix(wds): content badge 스타일 수정 및 데모 텍스트 변경#531
dididoeun wants to merge 6 commits intomainfrom
fix/content-badge

Conversation

@dididoeun
Copy link
Copy Markdown
Collaborator

@dididoeun dididoeun commented Apr 7, 2026

Summary

  • ContentBadge 사이즈별 스타일 수정 (border-radius, padding, gap, icon size)
    • medium: border-radius 8px, padding 5px 8px
    • small: border-radius 8px, padding 4px 6px
    • xsmall: border-radius 6px, padding 3px 6px
  • SVG 아이콘 사이즈 width/heightfont-size로 변경
  • 데모 라벨 텍스트 'Content badge' → '텍스트'로 변경
  • AGENTS.md에 디자인 시스템 작업 가이드 추가

Test plan

  • 각 사이즈(xsmall, small, medium) 렌더링 확인
  • solid / outlined variant 정상 동작 확인
  • leadingContent / trailingContent 아이콘 표시 확인
  • neutral / accent 컬러 정상 적용 확인
  • visual regression test 통과 확인

🤖 Generated with Claude Code

Summary by CodeRabbit

릴리스 노트

  • 버그 수정

    • ContentBadge 컴포넌트의 여러 크기 옵션에서 간격, 패딩, 아이콘 크기 최적화
  • 문서

    • 디자인 시스템 컴포넌트 수정 및 추가 절차 가이드 추가

- xsmall: 아이콘 크기 12px 추가
- small: border-radius 6px→8px, gap 3px→4px, 아이콘 크기 14px 추가
- medium: border-radius 8px→10px, 아이콘 크기 14px 추가
- docs: Sizes 데모에 아이콘 포함 예제 추가

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Apr 7, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 8461d44f-abb8-4b34-852d-7e31bd8589a0

📥 Commits

Reviewing files that changed from the base of the PR and between e9c8d9d and dcdd8da.

📒 Files selected for processing (2)
  • AGENTS.md
  • DESIGN-GUIDE.md
✅ Files skipped from review due to trivial changes (1)
  • DESIGN-GUIDE.md
🚧 Files skipped from review as they are similar to previous changes (1)
  • AGENTS.md

Walkthrough

ContentBadge 컴포넌트의 데모 콘텐츠 텍스트를 업데이트하고, 스타일시트에서 크기별 패딩, 간격, 보더 레이더스 값을 조정했으며, 아이콘 SVG의 폰트 사이즈를 명시했습니다. 또한 DESIGN-GUIDE.md를 추가하여 디자인 시스템 컴포넌트 수정 절차를 문서화했습니다.

Changes

Cohort / File(s) Summary
ContentBadge 컴포넌트
docs/data/components/contents/content-badge/web.mdx, packages/wds/src/components/content-badge/style.ts
데모에서 배지 텍스트를 "텍스트"로 변경하고 Sizes 섹션에 IconPlusThick 렌더링을 추가했습니다. 스타일에서 medium/small/xsmall 크기의 패딩, 간격, 보더 레이더스 값을 조정하고, 각 크기별로 svg { font-size } 속성을 추가했습니다.
문서
AGENTS.md, DESIGN-GUIDE.md
AGENTS.md에 DESIGN_GUIDE.md 참조를 추가했습니다. DESIGN-GUIDE.md를 신규 작성하여 Montage 디자인 시스템 컴포넌트 수정 절차, 컬러 구조(Atomic → Semantic → Style), 아이콘 사용 규칙, Figma 연동 방식, PR 체크리스트 및 금지 사항을 문서화했습니다.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed PR 제목이 주요 변경사항을 정확히 반영하고 있습니다. ContentBadge 스타일 수정과 데모 텍스트 변경이라는 핵심 변경내용을 명확하게 전달합니다.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/content-badge

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 7, 2026

size-limit report 📦

Path Size
wds 2.37 KB (0%)
wds-icon 5 KB (0%)
wds-lottie 83 B (0%)
wds-theme 144 B (0%)
wds-engine 332 B (0%)
wds-nextjs 165 B (0%)

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/wds/src/components/content-badge/style.ts`:
- Around line 37-39: In packages/wds/src/components/content-badge/style.ts
replace the hardcoded pixel values for border-radius, padding, gap and icon
sizes in the ContentBadge style definitions with theme tokens from wds-theme
(use the theme’s radius, spacing and icon/size tokens) so the values at the
shown locations (border-radius: 10px; padding: 7px 8px; gap: 4px; and the other
hardcoded sizes at the other groups) are derived from theme tokens; import the
theme or token helpers used across other components and swap the literal px
values for the appropriate token references (e.g., theme.radius.* /
theme.spacing.* / theme.iconSize.*) in the style.ts definitions for the content
badge.
- Around line 42-45: The current descendant selectors that force all inner svg
sizes in the ContentBadge styles are too broad and override explicitly sized
icons; update the selectors that target svg inside the badge (including
leadingContent/trailingContent rules) to only affect SVGs that do not already
declare dimensions, e.g. change targets to svg:not([width]):not([height]) (and
optionally also exclude inline style width/height with
:not([style*="width"]):not([style*="height"])), or narrow the selector to a
dedicated icon class (e.g. .content-badge__icon > svg) so only intended icons
are resized and existing explicit sizes are preserved.
🪄 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: CHILL

Plan: Pro

Run ID: 6543b350-6beb-4964-a86a-3ba45f58c3cc

📥 Commits

Reviewing files that changed from the base of the PR and between 391818a and 617c55d.

📒 Files selected for processing (2)
  • docs/data/components/contents/content-badge/web.mdx
  • packages/wds/src/components/content-badge/style.ts

Comment on lines +42 to +45
svg {
width: 14px;
height: 14px;
}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

배지 내부 모든 SVG 크기 강제는 기존 사용처를 깨뜨릴 수 있습니다.

Line 42, Line 54, Line 66의 svg descendant selector는 leadingContent/trailingContent로 들어오는 모든 SVG를 일괄 리사이즈합니다. 기존에 명시 크기를 준 아이콘까지 덮어써서 회귀가 날 수 있으니, 명시 크기 SVG는 제외하거나 더 좁은 타깃으로 제한해 주세요.

🔧 제안 수정안
-        svg {
+        svg:not([width]):not([height]) {
           width: 14px;
           height: 14px;
         }
@@
-        svg {
+        svg:not([width]):not([height]) {
           width: 14px;
           height: 14px;
         }
@@
-        svg {
+        svg:not([width]):not([height]) {
           width: 12px;
           height: 12px;
         }

Also applies to: 54-57, 66-69

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/wds/src/components/content-badge/style.ts` around lines 42 - 45, The
current descendant selectors that force all inner svg sizes in the ContentBadge
styles are too broad and override explicitly sized icons; update the selectors
that target svg inside the badge (including leadingContent/trailingContent
rules) to only affect SVGs that do not already declare dimensions, e.g. change
targets to svg:not([width]):not([height]) (and optionally also exclude inline
style width/height with :not([style*="width"]):not([style*="height"])), or
narrow the selector to a dedicated icon class (e.g. .content-badge__icon > svg)
so only intended icons are resized and existing explicit sizes are preserved.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 7, 2026

🚀 Preview

Last commite6380c1
Preview URLhttps://dev-montage.wanted.co.kr/e6380c1

Sh031224 and others added 3 commits April 8, 2026 08:12
- medium border-radius 10px → 8px, 패딩 7px 8px → 5px 8px로 변경
- 데모 라벨 텍스트 'Content badge' → '텍스트'로 변경
- AGENTS.md에 디자인 시스템 작업 가이드 추가
- changeset 설정 및 패치 changeset 추가

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@dididoeun dididoeun changed the title fix(wds): content badge 사이즈별 스타일 수정 fix(wds): content badge 스타일 수정 및 데모 텍스트 변경 Apr 8, 2026
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@AGENTS.md`:
- Around line 184-188: The fenced code block containing the three-column example
starting with "[Atomic 파일]              [Semantic 파일]            [컴포넌트 사용]" is
missing a language identifier and triggers markdownlint MD040; fix it by adding
a language tag (e.g., use ```text) immediately after the opening backticks so
the block becomes ```text ... ```, preserving the block contents exactly.
🪄 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: CHILL

Plan: Pro

Run ID: bb2b7853-2dc4-4988-9932-a3993791cae3

📥 Commits

Reviewing files that changed from the base of the PR and between 5c79f80 and e9c8d9d.

📒 Files selected for processing (5)
  • .changeset/config.json
  • .changeset/content-badge-style-update.md
  • AGENTS.md
  • docs/data/components/contents/content-badge/web.mdx
  • packages/wds/src/components/content-badge/style.ts
✅ Files skipped from review due to trivial changes (2)
  • .changeset/content-badge-style-update.md
  • .changeset/config.json
🚧 Files skipped from review as they are similar to previous changes (1)
  • docs/data/components/contents/content-badge/web.mdx

AGENTS.md Outdated
Comment on lines +184 to +188
```
[Atomic 파일] [Semantic 파일] [컴포넌트 사용]
변수(raw 값 정의) → 변수(atomic alias) → 스타일
예: #FF0000 예: color.red.primary 예: semantic.label.error
```
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

코드 펜스에 언어 식별자를 지정해 주세요.

Line 184의 fenced code block에 language가 없어 markdownlint(MD040) 경고가 발생합니다.

🔧 제안 수정안
-```
+```text
 [Atomic 파일]              [Semantic 파일]            [컴포넌트 사용]
 변수(raw 값 정의)    →     변수(atomic alias)    →    스타일
 예: `#FF0000`                예: color.red.primary      예: semantic.label.error
</details>

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 markdownlint-cli2 (0.22.0)</summary>

[warning] 184-184: Fenced code blocks should have a language specified

(MD040, fenced-code-language)

</details>

</details>

<details>
<summary>🤖 Prompt for AI Agents</summary>

Verify each finding against the current code and only fix it if needed.

In @AGENTS.md around lines 184 - 188, The fenced code block containing the
three-column example starting with "[Atomic 파일] [Semantic 파일]
[컴포넌트 사용]" is missing a language identifier and triggers markdownlint MD040; fix
it by adding a language tag (e.g., use text) immediately after the opening backticks so the block becomes text ... ```, preserving the block contents
exactly.


</details>

<!-- fingerprinting:phantom:poseidon:hawk:55c3bf76-a589-4b05-a912-3bc11f450d82 -->

<!-- This is an auto-generated comment by CodeRabbit -->

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants