Contributing

프로젝트 설정

이 프로젝트에 관심을 가져주셔서 감사합니다. 기여는 언제나 환영입니다! 🎉

본 프로젝트는 GitHub의 풀 리퀘스트(PR) 기반으로 기여를 관리하고 있습니다.
먼저 프로젝트를 포크하고 PR을 보내는 방법을 참고해 주세요.

로컬 실행 환경 설정

1. Bun 설치하기
2. 프로젝트를 포크하고 PR을 보내는 방법을 참고해서 리포지토리를 자신의 계정에 포크하고, 클론합니다.
   1. 이 때 클론한 리포지토리를 업스트림 리포지토리와 동기화하는 설정을 함께 적용하면 기여에 용이합니다.
3. 터미널에서 아래 명령어를 실행합니다:

cd path/to/daleui
#  의존성 설치
bun install

# Storybook 실행 (디자인 시스템 기여 시)
bun run sb # or bun run storybook

# 마케팅 웹사이트 실행 (마케팅 웹사이트 기여 시)
bun run dev

기술 스택

• Figma: 디자인, 회고
• React: UI renderer
• Panda: Styling engine
• Ark UI: Headless UI components
• Storybook: 컴포넌트 시연, 문서화
• Chromatic: UI Preview/Tests/Reviews
• Vite: Bundler
• Vitest: Test Runner, Test Matcher
• TestingLibrary: UI Testing
• HappyDom: Testing DOM
• ESLint: Linter
• Prettier: Formatter
• GitHub Actions: CI/CD
• Bun: JS Runtime

코드 작성 및 검토

• PR 병합을 하기 위해서는 최소 1명의 동료 개발자로부터 승인을 받아야 하지만, 품질 향상을 위해서 긴급 건이 아니라면 2개의 승인을 받는 것이 권장됩니다.
• [Proposed] "Resolve conversation" 버튼은 코드 검토자가 피드백이 본인이 의도한 대로 조치되었는지 확인하는 차원에서 누릅니다. 코드 작성자가 임의로 Resolved 표시할 시 불필요한 오해가 생길 수 있습니다.

의존성

• 항상 의존성을 최신 상태로 유지하기 위해서 Dependabot을 코드 저장소에 설정해놓았습니다.
• Dependabot이 올린 PR을 늦지 않게 검토 및 병합하고 새로운 버전이 일으키는 breaking changes를 대응하는 작업은 팀 개발자 모두의 공동 책임입니다.
• Dependabot이 올린 PR을 반드시 PR 코멘트를 통해서 Dependabot에게 원하시는 작업을 시켜주세요. 직접 수정하시면 Dependabot은 해당 PR을 더 이상 자동으로 관리해주지 않습니다.

품질 검사

main 브랜치에 품질 기준에 미달하는 코드가 유입이 되지 않도록 PR을 올리시면 자동으로 품질 검사가 진행되고 실패할 경우 병합이 불가능합니다. 각 품질 검사는 개발자가 로컬 환경에서 직접 진행하실 수도 있습니다.

Formatting

Prettier를 통해서 일관적인 코드 포멧팅을 유지하고 있습니다. VSCode 사용자 분들은 Prettier 익스텐션을 쓰시면 코드를 작성하면서 자동으로 코드를 포멧팅할 수 있어서 편하니 추천드립니다.

Prettier options 는 기본 설정값으로 해주시길 바랍니다.

Linting

ESLint를 통해서 잠재적인 문제를 발견하고 모범 사례를 따르고 있습니다. 린팅 규칙을 위반하고 있는 코드가 있는지 확인하려면 다음 명령어를 실행합니다.

$ bun run lint

Type Checking

TypeScirpt를 통해서 정적 타입 검사를 하고 있습니다. 타입 오류가 있는지 확인하려면 다음 명령어를 실행합니다.

$ bunx tsc

npm 패키지 배포 과정

flowchart TD
  MAIN[main 브랜치]
  RELEASE_PR["버전 bump &<br/>Release PR 생성<br/>(GitHub Action)"]
  TAG["태그 생성 &<br/>GitHub Release Draft 생성<br/>(GitHub Action)"]
  PUBLISH["npm publish 실행<br/>(GitHub Action)"]

  MAIN -->|"GitHub UI에서<br/>Release PR 실행<br/>(개발자)"| RELEASE_PR
  RELEASE_PR -->|"Release PR 리뷰 & 머지<br/>(개발자)"| TAG
  TAG -->|"GitHub Release 발행<br/>(개발자)"| PUBLISH

Loading

기여 전 확인사항

코드 스타일, 네이밍 규칙, PR 작성 규칙 등을 이해하기 위해 먼저 컨벤션 문서를 읽어주세요.