Code Conventions

폴더/파일 구조

• 컴포넌트는 컴포넌트 폴더명 하위에 index.tsx와 index.module.scss를 둔다.
• Next.js 파일 구조 상 특정 파일명 이어야하는 경우, 스타일 파일은 그 파일명을 따른다 (ex : page.module.scss)
• 특정 페이지/컴포넌트에서만 사용하는 하위 컴포넌트, 훅, 유틸 함수, 스타일은 그 하위에 둔다
  • 이유 : 관련된 파일을 한 폴더에서 관리해서, 유지 보수가 보다 용이하다.
• 훅의 경우 이에 대한 테스트 파일이 있는 경우, 훅명을 폴더로 하고 그 하위에 index.ts와 테스트 파일을 둔다.

Props 타입명

• 컴포넌트의 Props 타입을 export 하거나 하나의 파일에 여러 Props 타입이 있는 경우, 컴포넌트명+Props형태를 사용한다

Sass 변수명, 규칙명

• 일반적인 경우에는 케밥 케이스 사용
• element의 스타일 속성에 대한 설정인 경우, element__property형태로 작성 (ex : $img__width-small)

Loaded, Skeleton 설계 (규칙 보다는 권장하는 설계 방식)

• 하나의 컴포넌트에 대한 로딩 전,후를 관리할 때 합성 컴포넌트로 구현한다.
• 해당 합성 컴포넌트는 로딩 중일 때 보일 Skeleton과 로딩 후 렌더링되는 Loaded로 구성한다.