프론트엔드 구조 회의

Rules

<aside> 💡 React Component를 돌려주는 파일+스타일 파일이 아니라면, 폴더/파일 모두 소문자로 시작합니다. (styles 폴더 제외)

</aside>

pages

• 파일 이름 규칙 : ${폴더 이름} + (Style) + Page.tsx
• 페이지에 관련된 components, style은 해당 페이지에 국한
• style Component가 많지 않을 경우, 컴포넌트 파일 내에 작성해도 무방
• 내부 내용을 컴포넌트로 묶을 경우, componets 폴더 내에 작성
• custom hook은 공용으로 관리

폴더 구조

pages

styles

• 사용되는 색상은 모두 Theme.ts 에 정의하여 사용 (추후 테마 추가 고려해서!)

styles

hooks

• 파일 이름 규칙 : use + ${hook 이름}
• 우선 custom hook은 여기에 공용으로 넣습니다.

hooks

api

• 페이지 별로 나눠서 관련 api 쿼리들 모아두기
• 기능에 따른 queries들이 묶음으로 여기에 정의된다.

features