폴더 구조

폴더가 너무 많아도 그리고 너무 중첩되어도 좋지 않다

타입이 중복되어 사용된다면 types 폴더 하나에서 관리할 수 있도록 하자

.d.ts 파일보다는 .ts 파일에서 export 를 이용하자

├── api
├── assets
├── components
│   └── Button
│		    ├── Button.styles.ts
│		    ├── Button.tsx
│		    └── index.ts
├── constants
├── hooks
├── recoil
├── pages
├── styles
├── interfaces
├── types
└── utils

스타일드 컴포넌트

백틱 형식을 오브젝트 형태로 통일하자

현재 common.ts 에 있는 컴포넌트를 components 폴더로 옮기자 ⇒ 이것도 또한 컴포넌트이기 때문에

Object Styles

CSS 프로퍼티 순서

.selector {
  /* Positioning */
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;

  /* Display & Box Model */
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 10px solid #333;
  margin: 10px;

  /* Color */
  background: #000;
  color: #fff

  /* Text */
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.4;
  text-align: right;

  /* Other */
  cursor: pointer;
}

import 문 정렬

"import/order": [
	"error",
	{
	  "groups": ["builtin", "external", "internal", ["parent", "sibling"], "index"],
	  "alphabetize": {
	    "order": "asc",
	    "caseInsensitive": true
	  },
	  "newlines-between": "always"
	}
]

eslint-plugin-import/order.md at main · import-js/eslint-plugin-import

네이밍

<aside> 💡 컴포넌트명은 파스칼 케이스 ex) Header, Button 변수명, 함수명은 카멜 케이스 ex) isLogin

</aside>

타입

파스칼 케이스로 Prefix 없이 정의한다.

Props는 해당 타입이 사용되는 파일 내부에 정의한다.