🔸 Code style

+ ES lint를 따름

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

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

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

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

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

+ var 사용 금지!

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

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

📁 directory structure

.
├── components   // 각 페이지와 관련된 컴포넌트 정의 (페이지 단위로 폴더 정의)
│   ├── Layout
│   ├── admin
│   ├── ...
│   └── user
├── constants    // 각 기능에서 필요한 상수 데이터 정의 (기능 단위로 폴더 정의
│   ├── admin
│   └── store
├── cypress      // cypress 폴더
├── hooks        // 각 페이지에서 사용하는 hook 정의 (페이지 단위로 폴더 정의)
│   ├── Layout
│   ├── Login
│   ├── ...
│   └── users
├── lib          // google analytics 관련 코드
├── pages        // 페이지 정의
│   ├── admin
│   ├── api
│   └── users
├── public       // public asset 폴더
│   ├── font
│   └── image
├── stories      // storybook 파일 폴더 (페이지 단위로 폴더 정의)
│   ├── drawer
│   ├── game
│   ├── ...
│   └── store
├── styles       // 스타일 정의 폴더 (페이지 단위로 폴더 정리)
│   ├── Layout
│   ├── admin
│   ├── ...
│   └── user
├── types        // 각 기능에서 사용하는 타입을 정의합니다.
│   └── admin
└── utils        // 자주 쓰이는 기능들에 대한 코드들
    └── recoil   // atom 정의

📢 import order

+ eslint-plugin-import 패키지를 설치하여 설정했습니다.
+ 같은 순위 내에서는 알파벳 순으로 정렬합니다.
+ import 사이에 개행은 없습니다.

next             - from 'next/*'
react            - from 'react/*'
recoil           - from 'recoil'
other            - from 'axios, uuid, react-icons, mui'
types            - from 'type/*'
utils            - from 'utils/*'
constants        - from 'constants/*'
components       - from 'components/*'
hooks            - from 'hooks/*'
styles           - from 'styles/*'

🎨 Css order

https://gist.github.com/demun/070becac11cd1abdaccca665de6e5bc6

👆 css order 출처입니다.

⌁ recoil order

모든 리코일에는 뒤에 state를 붙여서 사용합니다.
난수는 필수로 붙여줘야 합니다(duplicate key)

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

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

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

기존 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 │