🧩 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: 843198c7601313a8a3c7080edcd49a911f705879
• Workflow run: 29133321594
• Workflow attempt: 1
• Gate result: APPROVE (approval step)

Pull request overview

OpenCode reviewed the current-head bounded evidence and found no blocking issues.

Findings

No blocking findings.

Summary

Approval sufficiency: bounded evidence supplied affirmative approval evidence for changed files, coverage/docstring posture, risk surfaces, and current-head verification; approval is not based merely on the absence of known blockers.
Verification posture: CodeGraph evidence was initialized and bounded current-head evidence reviewed for changed-file evidence including LICENSE, components/index.html, components/krds-components.css.
Linter/static: workflow/static review evidence is bounded by the current-head GitHub Checks gate and changed-file evidence.
TDD/regression: coverage execution evidence and focused changed hunks were reviewed from bounded-review-evidence.md.
Coverage: coverage execution evidence reports test coverage as not applicable because no supported changed source files or package manifests were found.
Docstring coverage: coverage execution evidence reports docstring coverage as not applicable because no supported changed source files or package manifests were found.
DAG: CodeGraph/source-backed behavior map connects LICENSE to the affected review, runtime, or workflow path and required checks.
PoC/execution: coverage-evidence job executed on the current head and reported PASS.
DDD/domain: workflow and repository-governance invariants were reviewed against changed files in bounded evidence.
CDD/context: CodeGraph evidence, changed-file history, and focused hunks were reviewed from bounded-review-evidence.md.
Similar issues: changed-file history evidence was reviewed for comparable local precedents.
Claim/concept check: bounded evidence, repository source, current-head workflow evidence, and, where numeric, scientific, statistical, or literature-backed claims are affected, original-paper/formula evidence and parameter-recovery expectations were used for claims.
Standards search: standards and external-source checks are delegated to configured OpenCode web_search/Context7/DeepWiki sources when applicable; no evidence-backed standards blocker is present in bounded evidence.
Compatibility/convention: changed workflow/script conventions, object naming, and reserved-word safety for schema/API/config/code surfaces were checked in bounded evidence.
Breaking-change/backcompat: deployment evidence and changed-file history were checked for backward-compatibility risk.
Performance: changed surfaces were checked for performance risk in bounded evidence.
Developer experience: changed automation, review, test, setup, and maintenance surfaces were checked for helpful or obstructive DX impact in bounded evidence.
User experience: connected user, operator, API, CLI, documentation, review-comment, status-check, rendering, and workflow-reader behavior was checked for contradictions against code, docs, and tests in bounded evidence.
Visual/DOM: Playwright visual, DOM locator, ARIA snapshot, console, and responsive evidence were checked when a web UI surface was present; for non-web surfaces, API/CLI/log/docs/workflow interaction evidence was reviewed instead.
Accessibility/i18n: accessibility, localization, and human-readable text surfaces were checked where UI, CLI, API message, docs, logs, or review text changed.
Supply-chain/license: dependency, package, model, container, and external-tool changes were checked in bounded evidence.
Packaging: package, build, test, lint, and security contracts were checked in bounded evidence.
Security/privacy: workflow-token, review-gate, and repository-automation security/privacy boundaries were checked in bounded evidence.

• Result: APPROVE
• Reason: No blocking issues found; changes are isolated to components directory with no unresolved review threads or failed checks.
• Head SHA: 843198c7601313a8a3c7080edcd49a911f705879
• Workflow run: 29133321594
• Workflow attempt: 1

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

[seonghobae]

Remediation summary

모든 필수 체크(coverage-evidence, trivy-fs, osv-scan, scorecard, strix, dependency-review 등)는 통과 상태이며, 미해결 리뷰 코멘트나 CHANGES_REQUESTED 는 없습니다. 코드 변경 불필요 — components/ 디렉터리만 추가하는 격리된 변경입니다.

이전에 opencode-review 가 SHA a98e988 에서 APPROVE 한 이력이 있으며, 현재 head(b6eb389)는 main 리베이스 후 실질 내용 동일합니다.

남은 항목: 현재 head 의 opencode-review 만 실패 — GitHub Models 모델 풀 타임아웃(exit 124) + 러너 큐 적체로 인한 org-infra 이슈입니다. 실패 잡 재실행(attempt 2)을 트리거했습니다.

[opencode-agent]

Pull request overview

OpenCode reviewed the current-head bounded evidence and found no blocking issues.

Findings

No blocking findings.

Summary

Approval sufficiency: bounded evidence supplied affirmative approval evidence for changed files, coverage/docstring posture, risk surfaces, and current-head verification; approval is not based merely on the absence of known blockers.
Verification posture: CodeGraph evidence was initialized and bounded current-head evidence reviewed for changed-file evidence including LICENSE, components/index.html, components/krds-components.css.
Linter/static: workflow/static review evidence is bounded by the current-head GitHub Checks gate and changed-file evidence.
TDD/regression: coverage execution evidence and focused changed hunks were reviewed from bounded-review-evidence.md.
Coverage: coverage execution evidence reports test coverage as not applicable because no supported changed source files or package manifests were found.
Docstring coverage: coverage execution evidence reports docstring coverage as not applicable because no supported changed source files or package manifests were found.
DAG: CodeGraph/source-backed behavior map connects LICENSE to the affected review, runtime, or workflow path and required checks.
PoC/execution: coverage-evidence job executed on the current head and reported PASS.
DDD/domain: workflow and repository-governance invariants were reviewed against changed files in bounded evidence.
CDD/context: CodeGraph evidence, changed-file history, and focused hunks were reviewed from bounded-review-evidence.md.
Similar issues: changed-file history evidence was reviewed for comparable local precedents.
Claim/concept check: bounded evidence, repository source, current-head workflow evidence, and, where numeric, scientific, statistical, or literature-backed claims are affected, original-paper/formula evidence and parameter-recovery expectations were used for claims.
Standards search: standards and external-source checks are delegated to configured OpenCode web_search/Context7/DeepWiki sources when applicable; no evidence-backed standards blocker is present in bounded evidence.
Compatibility/convention: changed workflow/script conventions, object naming, and reserved-word safety for schema/API/config/code surfaces were checked in bounded evidence.
Breaking-change/backcompat: deployment evidence and changed-file history were checked for backward-compatibility risk.
Performance: changed surfaces were checked for performance risk in bounded evidence.
Developer experience: changed automation, review, test, setup, and maintenance surfaces were checked for helpful or obstructive DX impact in bounded evidence.
User experience: connected user, operator, API, CLI, documentation, review-comment, status-check, rendering, and workflow-reader behavior was checked for contradictions against code, docs, and tests in bounded evidence.
Visual/DOM: Playwright visual, DOM locator, ARIA snapshot, console, and responsive evidence were checked when a web UI surface was present; for non-web surfaces, API/CLI/log/docs/workflow interaction evidence was reviewed instead.
Accessibility/i18n: accessibility, localization, and human-readable text surfaces were checked where UI, CLI, API message, docs, logs, or review text changed.
Supply-chain/license: dependency, package, model, container, and external-tool changes were checked in bounded evidence.
Packaging: package, build, test, lint, and security contracts were checked in bounded evidence.
Security/privacy: workflow-token, review-gate, and repository-automation security/privacy boundaries were checked in bounded evidence.

• Result: APPROVE
• Reason: No blocking issues found; changes are isolated to components directory with no unresolved review threads or failed checks.
• Head SHA: 843198c7601313a8a3c7080edcd49a911f705879
• Workflow run: 29133321594
• Workflow attempt: 1

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