팀 개발 규칙

작업 진행 순서

1. issue에서 작업을 등록한다. ex. 회원가입 로직 작업
2. issue에서 태그를 등록한다.(작업자, project 등...)
3. issue 작업자가 branch 생성을 한다. ex.회원가입-로직-작업

브랜칭 전략

github flow 전략을 응용하여 develop branch를 추가해 사용한다.

main - develop - 작업 브랜치

merge 방식

• main ← develop : create a merge commit
• develop ← other branch : squash and merge

브랜치 생성, merge, 브랜치 삭제는 작업자가 직접한다.

예시

- 회원가입 로직 관련 기능 개발
  - 브랜치: `회원가입-로직-기능`
  - 커밋: `feat: 회원가입 컴포넌트 구현`, `fix: 회원가입 로직 수정`
  - squash and merge
  - 브랜치 삭제

- 프로필 에러 관련 수정
  - 브랜치: `사용자-프로필-에러-수정`
  - 커밋: `fix: 사용자 닉네임 변경 작업`, `chore: 안쓰는 파일 제거`
  - squash and merge
  - 브랜치 삭제

스프린트 마지막날에 develop에서 main 으로 머지한다.

PR 규칙

• 최소 1명의 승인을 받아야 한다.
• PR 제목에는 컨벤션 태그 붙이지 않는다.
• 레이블과 리뷰이만 지정한다.

이슈 컨벤션

• 이슈 제목에는 컨벤션 태그를 붙이지 않는다.

예시

• ✅ 유저 정보 관련 작업
• ❎ feat: 유저 정보 관련 작업

커밋 컨벤션

• 모든 커밋 내용은 한글로 작성한다.
• 모든 커밋은 한 줄, 명령조로 작성한다.

예시

• feat: 로그인 기능 추가

태그 이름	설명
feat	새로운 기능을 추가할 경우
fix	버그를 고친 경우
refactor	리팩토링한 경우(리팩토링 과정에서 파일 삭제, 이동 포함)
style	CSS 등 사용자 UI 디자인 변경
docs	문서를 수정한 경우
chore	이외의 것들

merge 컨벤션

• merge 제목에는 컨벤션 태그를 사용한다.

예시

• ✅ feat: 유저 정보 관련 작업
• ❎ 유저 정보 관련 작업

네이밍 규칙

props 네이밍

• props 타입 별칭: 컴포넌트명 + Props로 통일한다.
• 함수 작성 방식: 함수 표현식을 사용한다.
• export default는 코드 마지막 줄에 추가한다.

예시

interface TempProps {
  ...
}

const Temp = ({ name }: TempProps) => {
  ...
}

export default Temp

배열 데이터 네이밍

• 배열은 List를 붙인다.
• 아이템은 Item을 붙인다.
• api일 경우에는 List가 아닌 s를 붙인다.

예시

• 파일명: PostList, PostItem
• api: posts/{postId}

타입 네이밍

타입 이름은 파스칼케이스로 통일한다.

예시

type Temp = number

import, export 규칙

• 같은 폴더에 있는 파일은 상대 경로(./*)를 사용한다.
• 다른 폴더에 있는 파일은 절대 경로(~/*)를 사용한다.

스타일 관련 규칙

• css 크기 단위는 rem으로 통일한다.

아이콘 네이밍

• 파일 이름은 케밥케이스로 통일한다.
• 컴포넌트 이름은 파일명+Icon으로 통일한다.

예시

export { ReactComponent as EyeOnIcon } from './eye-on.svg';

폴더 관련 규칙

• index파일은 import/export 용도로 사용한다.

타입 규칙

children은 PropsWithChildren로 통일한다.

기타

함수는 화살표 함수로 통일한다.

이벤트 관련 이름은 handle(+명사)+동사로 통일한다.

예시

• ✅ handleClick
• ❎ handleOnClick

boolean 값을 갖는 변수명에서 is 붙이지 않는다.