Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

History

7 Commits

Repository files navigation

component-pattern-practice

🧩 컴포넌트 패턴에 대한 이해와 학습을 위한 레포지토리입니다. 다양한 UI 라이브러리(MUI, Ant Design 등)와 웹 접근성(ARIA Pattern)을 참고하며, 컴포넌트 마크업을 비교하고 학습합니다.

마크업 패턴 및 컴포넌트 설계에 대한 논의와 문제 해결 과정은 Issue 탭에서 확인할 수 있습니다.

⚡️ Component Patterns Overview

ComponentDescriptionNote
1Breadcrumb탐색 위치를 나타내는 컴포넌트
2Tabs컨텐츠를 탭 형태로 나누어 표시
3Accordion확장 가능한 리스트 컴포넌트
4Select드롭다운 형태로 선택 입력을 받는 컴포넌트
5Button사용자 입력을 받기 위한 버튼
6Switch토글 형태로 상태를 변경하는 컴포넌트
7Carousel여러 개의 항목을 슬라이드 형태로 순차적으로 보여주는 컴포넌트
8Modal사용자 인터랙션을 위한 팝업창

📝 Issues and Component Analysis

  • 각 컴포넌트에 대해 Issue 탭에서 다양한 마크업 패턴을 비교하고 정리합니다.
  • ARIA Pattern을 기반으로 컴포넌트의 접근성 기능을 학습하고, MUI, Ant Design 등의 라이브러리와 비교합니다.

예시 이슈 템플릿

  • ARIA Patterns: https://www.w3.org/WAI/ARIA/apg/patterns/ 링크를 참고하여 컴포넌트가 웹 접근성에 따라 어떻게 마크업되어야 하는지 학습합니다.
  • 라이브러리 비교: MUI, Ant Design 등에서 동일한 컴포넌트를 어떻게 마크업하는지 비교하고, 각각의 장단점을 분석합니다.

About

🛠️ Learning UI markup patterns for better accessibility

Resources

Stars

0 stars

Watchers

1 watching

Forks

Releases

Packages

Contributors