Skip to content

hsskey/component-pattern-practice

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

Component Description Note
1 Breadcrumb ํƒ์ƒ‰ ์œ„์น˜๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ์ปดํฌ๋„ŒํŠธ
2 Tabs ์ปจํ…์ธ ๋ฅผ ํƒญ ํ˜•ํƒœ๋กœ ๋‚˜๋ˆ„์–ด ํ‘œ์‹œ
3 Accordion ํ™•์žฅ ๊ฐ€๋Šฅํ•œ ๋ฆฌ์ŠคํŠธ ์ปดํฌ๋„ŒํŠธ
4 Select ๋“œ๋กญ๋‹ค์šด ํ˜•ํƒœ๋กœ ์„ ํƒ ์ž…๋ ฅ์„ ๋ฐ›๋Š” ์ปดํฌ๋„ŒํŠธ
5 Button ์‚ฌ์šฉ์ž ์ž…๋ ฅ์„ ๋ฐ›๊ธฐ ์œ„ํ•œ ๋ฒ„ํŠผ
6 Switch ํ† ๊ธ€ ํ˜•ํƒœ๋กœ ์ƒํƒœ๋ฅผ ๋ณ€๊ฒฝํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ
7 Carousel ์—ฌ๋Ÿฌ ๊ฐœ์˜ ํ•ญ๋ชฉ์„ ์Šฌ๋ผ์ด๋“œ ํ˜•ํƒœ๋กœ ์ˆœ์ฐจ์ ์œผ๋กœ ๋ณด์—ฌ์ฃผ๋Š” ์ปดํฌ๋„ŒํŠธ
8 Modal ์‚ฌ์šฉ์ž ์ธํ„ฐ๋ž™์…˜์„ ์œ„ํ•œ ํŒ์—…์ฐฝ

๐Ÿ“ 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

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors