Code rules

🔸Code style

• ES lint를 따름

• 팀원의 코드 이해를 위해 적절한 주석 사용 하기

• 원활한 수정과 불필요한 diff 생성을 방지하기 위해 for, if, function 등에서 중괄호는 생략하지 않기

• 파일 안에서 사용하는 함수는 export default 컴포넌트 함수 밑에 쓰기

• 의미있는 구별과 이해를 위해 검색이 잘되는 이름을 짓고 줄임말은 피하기

• 함수의 이름은 동사이거나 동사구로 한다 (변수와 구별)

• var 사용 금지!

• 변수가 변경되지 않는다면 되도록 const를 사용

• 세미콜론 사용,Single quote 사용(’)

🎨 Css order

 .cssName{
├── 우선순위
│ ├── @include
│ ├── z-index
│
├── 객체의 노출여부와 표현방식
│ ├── display
│ ├── display-layout
│ ├── float
│ └── list-style
│
├── 위치와 좌표
│ ├── position
│ ├── top left right bottom
│ ├── float
│ └── clear
│
├── 크기와 여백
│ ├── width / height
│ └── padding / margin
│
├── 윤곽과 배경
│ └── border / background
│ └── opacity
│
├── 글자와 정렬
│ ├── color / font
│ ├── text-decoration
│ ├── text-align / vertical-align
│ └── white-space
│
└── 내용
└── content
│
├── 애니메이션 
│ └── trans / animation
│

📢 import order

next             - from 'next/*'
react            - from 'react/*'
recoil           - from 'recoil'
types            - from 'type/*'
utils            - from 'utils/*'
components       - from 'components/*'
[icon]           - from 'react-icons/*'
styles           - from 'styles/*'

⌁ recoil order

모든 리코일에는 뒤에 state를 붙여서 사용합니다.

export const errorState = atom<string>({
  key: `errorState/${v1()}`,
  default: '',
});


bool 형식의 리코일에 is를 붙이지 않습니다.

X == export const isMyRankScroll = atom<boolean>({
O == export const Scroll = atom<boolean>({