🤙🏻 선약

• ex) feat: 메인 헤더 뷰 구현
• design: 마진 간격 조정
• prefix 종류는 위에 참고!
• 최대한 작은 단위의 commit 지향

📍 컴포넌트

• rafce
• 리액트 컴포넌트만 PascalCase 사용 : PostPage.tsx
• 그 외에는 camelCase ex) type, d.ts파일, ts파일 : useClickOutside.ts
• prop 타입 Interface 선언시 컴포넌트명~PropTypes

// PostPage.tsx
interface PostPagePropTypes {
	title: string | undefined;
  setTitle: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
  tempContent: string;
  editContent: string;
  setEditorContent: (content: string) => void;
  setContentWithoutTag: (content: string) => void;
}

const PostPage = (props: PostPagePropTypes) => {
	  const { title, setTitle, tempContent, editContent, setEditorContent, setContentWithoutTag } = props;
	  ...
}

📍 폴더명

• 무조건 소문자로 시작하기!
• 카멜케이스!

📍 변수

• var 금지
• 변수를 조합하여 문자열 생성시 “” + “” 금지 → 탬플릿 리터럴 사용(백틱${})
• 만약 변수에 할당되는 값이 boolean인 경우 접두사 is 붙이기 : isActive
• map 사용시 변동되는 리스트라면 key값을 고유하게 잘 설정해주기 index사용금지

📍 함수

• 중복되는 함수는 utils 폴더에 모아서 재사용한다. (단위 변환 함수, 날짜 변환 함수 등)
• 중복되는 커스텀훅은 hooks 폴더에 모아서 재사용한다. (모달 바깥부분 클릭시 모달 닫히는 함수 등)
• 되도록 화살표 함수를 사용한다.

📍 style

• style 파일 분리하지 않음, 해당 컴포넌트 하단에 만들어서 사용하기
• s dot 네이밍 사용하지 않기
• 컴포넌트 네이밍 규칙 : Wrapper → Layout → Container → Box 순서로 내리기
• 시멘틱 태그 생각하면서 개발하기
• svg 파일 사용시
  • svg 네이밍은 피그마에 지정된 네이밍 + **Ic**로 해서 사용
  • 만약 svg에 다른 스타일을 추가로 입혀야 할 경우, Ic를 Icon으로 바꿔서 네이밍 해주기
    • svg 파일 네이밍으로 style이 적용된 svg인지 아닌지 구분 가능

// src > assets > svgs > index.tsx
export { default as DefaultProfileIc } from './defaultProfileIc.svg?react';

// src > pages > PageName.tsx
import { DefaultProfileIc } from './../../assets/svgs';

const PageName = () => {

	return (
		<>
			<DefaultProfileIcon />
		</>
	)
}


const DefaultProfileIcon = styled(DefaultProfileIc)`
	cursor: pointer;
`

• 스타일드 컴포넌트에서 prop를 이용할 때는 transient prop 사용 : $로 시작하는 props로 내려줌.
• 단위는 rem 사용, 변경이 필요없는 (border 관련) 속성만 px 사용