Code Convention

1. prettier setting

{
    "printWidth": 120,
    "tabWidth": 2,
    "useTabs": false,
    "semi": true,
    "singleQuote": true,
    "bracketSpacing": true,
    "trailingComma": "none"
}

2. Detail

항목 (주제)	세부 항목 (키워드)	예시
함수 이름	handle~~로 시작	const handleSearch =()⇒{} 이런식
boolean 타입 변수	is~~로 시작	const [isVisible,setIsVisible] 이런식
css 클래스 타입	kebab-case	btn이런식
변수 이름타입	camelCase	userId,setUserId 이런식
컴포넌트 파일이름	camelCase (예: HomePage)	function HomePage
페이지 폴더 이름	kebab-case	my-page
함수		상단 표현식 안에 화살표 (아래 예시 참고)
조건문		중괄호를 꼭 사용할 것

// 이게 예시임.
function TestComponent() {
	const testFunc() = () => {};

	return <div>Hello</div>
}

export default TestComponent

if(user) return "asd"

// vs

if(user) {
	return "asd"
}

3. 컴포넌트 폴더구조

컴포넌트 안에 페이지별 컴포넌트 구조
타입(type) 관련 폴더는 types 폴더 사용
SX 는 파스칼 일반 파일명 카멜케이스로

4. 전역상태

zustand
선택 이유(현우): Context API는 컴포넌트 리렌더링에 대한 문제가 있는데 이에 대한 리소스가 피곤하고 이를 해결하기 위해 모두가 모르는 jotai를 사용하는 것도 현재 상황에 맞지 않습니다. 현재 쉽게 작업하기 적합한 Zustand를 사용해야 합니다.