💎 J Design System은 여러 재사용 가능한 핵심적인 UI 컴포넌트를 담아내고 있는 React에서 사용할 수 있는 Design System UI Library 입니다. 빠르고 쉽게 적용할 수 있는 단순한 인터페이스를 지향하였으며, 웹 접근성을 최대한 준수하였습니다.
- ⚡️ Compound Component 구조와 일관성 있는 속성 구조를 통해 간결한 사용자 인터페이스를 유지하도록 하였습니다.
- 🌈
as
속성을 통해 컴포넌트 다형성을 지원하도록 구현했습니다. ⚠️ 웹 접근성을 고려해 적절한html role
을 사용하여 컴포넌트를 구성하였습니다.- 🧩 다양한 사용 환경을 고려해
cjs
,esm
모듈을 지원하도록 번들링을 구성하였습니다. - ⌨️ Uncontrolled Component 특성을 활용해 인터랙션이 필요한 컴포넌트들을 지원하였습니다.
- 💫 Form 관련 컴포넌트들은 React Hook Form을 지원합니다.
- 💄 Storybook Link
- 🚚 Yarn Berry: 패키지 매니저로 Yarn Berry를 활용하였습니다.
- ⚡️ Compound Component 패턴을 활용하여 유연한 구성이 가능하도록 설계되었습니다.
- 🏢 Monorepo Architecture를 채택해 코드 공유와 협업을 용이하게 구성하였습니다.
- ⌨️ Keyboard Control: 키보드 제어 기능을 포함하여 사용자 상호작용과 접근성에 주의를 기울였습니다.
- ✅ dependency-cruiser를 사용하여 의존성을 체크하여 패키지 간 참조 관계를 검사하였습니다.
- 💅 Emotion을 사용하여 컴포넌트 스타일링을 구현하였습니다.
- 🧪 Jest와 React Testing Library를 사용하여 테스트를 구성하였습니다.
- 📦 모듈 번들링을 위해 tsup을 사용하였습니다.
- 🚀 Changeset과 함께 CI/CD 파이프라인을 구축하여 자동화된 빌드 및 배포 환경을 구성하였습니다.
💅 Emotion
환경에서 동작하기 때문에 emotion dpendency가 필요합니다.
React UI Component
npm install --save @jdesignlab/react @emotion/react@^11
SVG Icons
npm install --save @jdesignlab/react-icons @emotion/react@^11
아래와 같이 필요한 UI 컴포넌트를 import하여 사용할 수 있습니다. 각 컴포넌트의 README
를 참고하시면 자세한 인터페이스와 사용법을 확인하실 수 있습니다. 아래 링크를 클릭하시면 각 컴포넌트의 README로 이동하실 수 있습니다.
import { Text, TextInput, Button, Modal, ... } from '@jdesignlab/react';
import {Mail, Bell, Book, ...} from '@jdesignlab/react-icons'
yondo123 |
yoycode |
---|---|
Commit Convention
rule | description |
---|---|
✨ Feat | 새로운 기능을 작성합니다. |
🎨 Style | 코드 스타일 규칙을 수정합니다. |
➖ Remove | 사용되지 않는 파일 또는 코드를 삭제합니다. |
🏗️ Structure | 프로젝트 구조를 변경합니다. |
🔧 Modify | 기능에 영향을 주지 않는 코드를 수정합니다. |
🐛 Fix | 기능의 문제 사항 또는 전반적인 프로젝트 내 이슈를 해결합니다. |
♻️ Refactor | 성능이나 코드의 구조를 개선합니다. |
📝 Doc | 문서를 작성하거나 편집합니다. |
🤡 Chore | 애플리케이션 동작에 영향을 주지 않는 코드들을 수정합니다. (package version, configure) |
🚀 Deploy | 패키지를 배포합니다. |
🧪 Test | 테스트 코드를 작성합니다. |
💄 Ui | 스타일링을 위한 코드를 수정하거나 추가합니다. |