Coding Conventions

Prettier

.prettierrc 파일

https://github.com/Taskify-2team/Taskify/blob/develop/.prettierrc

esLint

.eslintrc.json 파일

https://github.com/Taskify-2team/Taskify/blob/develop/.eslintrc.json

크기 단위

rem으로 통일

10px => 1rem

event와 error 작성 방식

• event => e
• error => error

컴포넌트 및 함수 선언 방식

• 컴포넌트 : 함수 선언문
• 기타 함수 : 함수 표현식

단수와 복수 작성 방식

...List, ...Item

ex. cardList, cardItem

CSS 선언 순서

prettier-plugin-tailwindcss 플러그인 사용

참고 : https://github.com/tailwindlabs/prettier-plugin-tailwindcss

이미지

• /public/icons에 svg파일 저장
• /public/images에 png, jpg파일 저장
• image파일 네이밍 카멜 케이스
• import해서 이미지에 사용
• import한 이미지 변수명 카멜 케이스

import eyeOn from '@/public/icons/eyeOn.svg'

// ...
<Image src={eyeOn} />

컴포넌트 interface 네이밍 규칙

[컴포넌트명] + Props

ex. interface InputProps { }

이벤트 핸들러 네이밍 규칙

handle + ...

ex. handleButtonClick

color 변수 사용 규칙

tailwind.config.ts 내부 colors 변수에 따라 작성