Contributing

프로젝트 설정

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

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

로컬 실행 환경 설정

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

cd path/to/clone-repo
bun install

# Storybook 실행
bun run sb # or bun run storybook

코드 기여 가이드

1. 이슈 페이지에서 해결하고자 하는 이슈를 선택하거나, 직접 이슈를 생성합니다.

2. 프로젝트 설정

   • 먼저 프로젝트 설정 가이드를 완료합니다.

3. 브랜치 생성 (참고)

   • 포크받은 리포지토리의 main 브랜치에서 새로운 feature 브랜치를 생성합니다.
   • 브랜치 이름에는 -, _ 외의 특수문자 사용은 제한됩니다.
     참고 이슈

4. 기능 구현 및 커밋 (참고)

   • 브랜치 내에서 소스 코드를 수정하고 커밋합니다.
   • 변경이 모두 완료되면 포크받은 리포지토리의 브랜치를 푸시합니다.

5. 테스트 작성

   • 기여한 코드가 정상적으로 동작하는지 확인할 수 있는 테스트 코드를 작성합니다.

6. PR 생성 (참고)

   • https://github.com/<your_username>/daleui/pulls 에서 새로운 PR을 생성합니다.
   • PR 템플릿에 따라서 변경 사항에 대한 설명을 작성하고, 해결하려는 이슈를 연결하고, PR을 생성합니다.

7. PR 리뷰 및 병합

   • 최소 한 명 이상의 관리자가 PR을 검토하고 코멘트를 남깁니다.
   • 변경 요청이 있을 경우, 수정을 반영한 후 다시 푸시하고 리뷰를 요청합니다.
   • 최소 1개의 승인을 받은 후 main 브랜치에 병합됩니다.
   • 이후 릴리즈를 통해 기여한 내용이 배포됩니다.

품질 검사

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

Formatting

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

Linting

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

$ bun run lint

Type Checking

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

$ bunx tsc

프로젝트 구조

• src/components 아래에 폴더를 만들고, 그 안에 컴포넌트 파일, 스토리 파일, 테스트 파일을 위치시킵니다.
• 폴더 이름, 파일 이름, 컴포넌트 이름은 모두 PascalCase로 letter case를 통일합니다.
• 변수 이름, 함수 이름, prop 이름은 모두 camelCase로 letter case를 통일합니다.
• index.tsx 파일을 통해서 re-export하지 않습니다.

├── src
│   ├── components
│   │   ├── Checkbox
│   │   │   ├── Checkbox.stories.tsx
│   │   │   ├── Checkbox.test.tsx
│   │   │   └── Checkbox.tsx

테스팅

• 테스트 파일은 별도의 디렉토리에 중앙화 하지 않고 애플리케이션 파일 바로 옆에 둡니다.
• 단순한 테스트 구조를 위해서 테스트 대상 모듈의 구조가 복잡하지 않다면 describer()-it() 대신에 test()를 씁니다.

관련 링크

• https://github.com/DaleStudy/leaderboard/pull/18#pullrequestreview-2377895806