| 기준 | 근거 경로 |
|---|---|
| Figma | references/design-resources/figma/KRDS_v1.0.0 (Community).fig |
| Markdown | content/docs/krds-guideline/04-components/**/*.mdx |
| Screenshot | content/docs/krds-guideline/**/images + headless Chrome captures |
KRDS Visual Audit
KRDS Visual Audit
Figma 디자인 리소스, KRDS guideline markdown, 추출 screenshot을 기준으로 registry 배포 컴포넌트를 전수 검수하기 위한 화면입니다.
이 페이지의 목적은 개별 문서화가 아니라 모든 registry UI/block 컴포넌트가 docs 런타임에서 직접 import되어 렌더링되는지와 시각 검수 대상이 한 곳에 모이는지를 확인하는 것입니다.
KRDS visual audit
KRDS 컴포넌트 시각 전수검수 보드
Figma 원본, 가이드라인 Markdown, 추출 screenshot 기준으로 registry 배포 컴포넌트를 한 화면에서 확인하기 위한 docs 전수검수 화면입니다.
전수검수 대상
accordionalertalert-dialogaspect-ratioavatarbadgebreadcrumbbuttonbutton-groupcalendarcardcarouselchartcheckboxcollapsiblecomboboxcommandcontext-menucontextual-helpdate-inputdialogdirectiondisclosuredrawerdropdowndropdown-menuemptyfieldfile-uploadhover-cardinputinput-groupinput-otpitemkbdlabellanguage-switcherlinkmenubarnative-selectnavigation-menupaginationpopoverprogressradio-groupresizablescroll-areaselectseparatorsheetsidebarskeletonskip-linkslidersonnerspinnerstep-indicatorstructured-listswitchtabletabstextareatext-listtoggletoggle-grouptooltipheaderfooterside-navigationin-page-navigationhelp-paneltutorial-panelcoach-mark
Primitive / Foundation
Badge / Tag
기준: badge/tag screenshots
기본보조외곽선긴급
Kbd
기준: keyboard shortcut docs
⌘K
Label
기준: form label markdown
Separator
기준: layout divider screenshots
상단 콘텐츠
하단 콘텐츠
Skeleton
기준: loading placeholder docs
Spinner
기준: loading indicator docs
로딩 중
Progress
기준: progress feedback docs
StepIndicator
기준: step indicator guideline
AspectRatio
기준: media ratio docs
16:9 영역
Input / Form
Input / TextInput
기준: text input markdown + screenshots
Textarea
기준: textarea markdown
Checkbox
기준: selection checkbox screenshots
RadioGroup
기준: radio markdown
Switch / ToggleSwitch
기준: toggle switch screenshots
알림 받기
Select
기준: select markdown
NativeSelect
기준: native select docs
InputGroup
기준: input group docs
메모
InputOTP
기준: OTP shadcn docs
1
2
3
4
5
6
DateInput
기준: date input markdown + screenshot
YYYY.MM.DD 형식
Calendar
기준: calendar markdown + screenshot
FileUpload
기준: file upload markdown
PDF, HWP 파일을 업로드하세요
첨부할 파일을 여기에 끌어다 놓거나, 파일 선택 버튼을 눌러 파일을 직접 선택해주세요.
- 신청서.pdf240KB
Field
기준: form field docs
Slider
기준: range input docs
Combobox
기준: combobox docs + input group pattern
Navigation / Actions
Dropdown alias
기준: krds-react Dropdown package presence
Pagination
기준: pagination screenshots
Link
기준: link markdown
LanguageSwitcher
기준: language switcher html
SkipLink
기준: skip link markdown + focus screenshot
Tab focus 시 상단 바로가기 표시
Overlay / Feedback
Alert
기준: feedback alert docs
주의
필수 입력 항목을 확인하세요.
확인 후 제출 버튼을 다시 눌러주세요.
Dialog
기준: modal/dialog docs
AlertDialog
기준: alert-dialog docs
Sheet
기준: sheet side panel docs
Drawer
기준: drawer mobile bottom panel
Popover
기준: popover docs
Tooltip
기준: tooltip docs
HoverCard
기준: hover card docs
ContextualHelp
기준: contextual help markdown
Sonner / Toaster
기준: toast docs
Disclosure / Content / Layout
Accordion
기준: accordion screenshots
Collapsible
기준: collapsible docs
접힘 영역 콘텐츠
Disclosure
기준: KRDS disclosure markdown
Tabs
기준: tabs screenshot
신청 안내 콘텐츠
Card
기준: card docs
Empty
기준: empty state docs
결과 없음
검색 조건을 변경해 보세요.
Item
기준: item docs
목록 헤더
정책 알림
중요 공지 내용
StructuredList
기준: structured list markdown
신청 정보
처리 상태 요약
- 상태
- 접수
TextList
기준: text list markdown
- 필수 서류를 준비합니다.
- 신청서를 제출합니다.
ScrollArea
기준: scroll area docs
Resizable
기준: resizable panel docs
왼쪽
오른쪽
DirectionProvider
기준: RTL docs
RTL 방향 컨테이너
Data display / Media
Table
기준: table markdown
| 구분 | 상태 | 건수 |
|---|---|---|
| 민원 | 처리 중 | 24 |
| 신청 | 완료 | 128 |
| 합계 | 152 | |
Chart
기준: chart docs
Avatar
기준: avatar docs
KRDS
+3
Carousel
기준: carousel screenshots
1
2
3
Command
기준: command palette docs
Toggle
기준: toggle docs
ToggleGroup
기준: toggle group docs
KRDS composed blocks
Header / Masthead / Identifier / MainMenu
기준: identity/header markdown + screenshots
이 누리집은 대한민국 공식 전자정부 누리집입니다.
이 누리집은 대한민국 정부의 공식 누리집입니다.
HelpPanel
기준: help-panel markdown + screenshots
TutorialPanel
기준: tutorial-panel markdown + screenshots
CoachMark
기준: coach-mark markdown + screenshots