🧩 KRDS 컴포넌트 라이브러리 (바닐라 HTML/CSS 구현체)

[seonghobae]

무엇을

Figma 디자인 시스템(6Kx2gzcduyIyLGN3Ck2rtm)의 컴포넌트를 실제 코드 구현체로 추가합니다. 지금까지 컴포넌트는 Figma에만 있었고 대응 코드가 없어 component-level parity를 실측할 수 없었는데, 이 PR로 실제 구현이 생깁니다.

어떻게 (스코프 결정)

바닐라 정적 사이트라 Storybook + JS 프레임워크는 과설계 → 빌드/프레임워크 없는 바닐라 HTML/CSS 갤러리로 구현. 기존 styles.css의 브랜드 토큰(:root)을 그대로 소비하고, KRDS status 색상(info/success/warning/danger)만 추가합니다.

파일

• components/krds-components.css — Button, Text Input, Checkbox/Radio, Select, Badge, Tag, Tabs, Accordion(native <details>), Pagination, Alert, Toast. 전부 토큰 바인딩, focus-visible는 사이트 컨벤션(teal 2px offset 2px) 준수.
• components/index.html — 10개 story 갤러리(states 포함). Tabs/Tag 최소 동작 JS(프레임워크 없음).
• .gitignore — 로컬 codegraph 인덱스 제외.

검증 (Puppeteer @1200w, 실측)

Component	측정	비고
primary button	98×51, radius 4px, min-h 48px, bg #16263d	사이트 .button 컨벤션 + Figma 스펙 일치
text input	radius 4px, min-h 48px, border --line
badge success	bg #eaf5eb / text #2e7d32
toast	radius 12px, bg #16263d
합계	10 stories · 37 component instances 렌더

되돌리기

새 components/ 디렉터리만 추가 — 기존 페이지/스타일 변경 0. 안전하게 revert 가능.

미리보기: /components/ (GitHub Pages 배포 시 바로 접근)

🤖 Generated with Claude Code

https://claude.ai/code/session_0169KuM8Ygfmeswa4EtaL7mC

[github-advanced-security]

You are seeing this message because GitHub Code Scanning has recently been set up for this repository, or this pull request contains the workflow file for the Code Scanning tool.

What Enabling Code Scanning Means:

• The 'Security' tab will display more code scanning analysis results (e.g., for the default branch).
• Depending on your configuration and choice of analysis tool, future pull requests will be annotated with code scanning analysis results.
• You will be able to see the analysis results for the pull request's branch on this overview once the scans have completed and the checks have passed.

For more information about GitHub Code Scanning, check out the documentation.

[opencode-agent]

OpenCode Review Overview

• Head SHA: a98e9881065e57456bb92d3c16db55903763cbda
• Workflow run: 28759648937
• Workflow attempt: 1
• Gate result: APPROVE (exit 0)

Changed-File Evidence Map

flowchart LR
  PR["PR changed files"] --> Evidence["OpenCode bounded evidence"]
  Evidence --> S1["Changed file (4 files)"]
  S1 --> I1["repository behavior"]
  I1 --> R1["Review risk: Changed file (4 files)"]
  R1 --> V1["required checks"]

Loading