컴포넌트 별로 역할을 분리해야되기 때문에, Atomic Design 적용
참고 자료
https://github.com/diegohaz/arc/blob/master/src-example/components/templates/PageTemplate/index.js
index.tsx로 모든 컴포넌트 파일명 통일|-- 📁 node_modules
|-- 📁 public
|-- 📁 src
|-- 📁 assets
|-- 📁 svgs
|-- 📁 images
|-- 📁 apis
|-- 📁user
|-- 📁axios
|-- 📁queries
|-- client.ts
|-- 📁 components
|-- 📁 atoms (button , input 등 재사용의 가장 작은 요소)
|-- 📁 userButton
|-- index.tsx
|-- 📁 molecules (atom을 모아 만든 카드, 리스트, 썸네일 등의 요소)
|-- 📁 userModal
|-- index.tsx
|-- 📁 templates (위
|-- 📁 pageTemplate (페이지를 만들기 위한 템플릿 - 페이지에서 요소들을 감싸서 사용)
|-- index.tsx
|-- 📁 hooks (커스텀 훅을 담아두는 폴더)
|-- useFunnel.tsx
|-- 📁 pages
|-- 📁Task
|-- 📁hooks
|-- 📁utils
|-- 📁types
|-- index.tsx
|-- index.d.ts // 타입은 주로 컴포넌트 상단에 interface로 정의
// 너무 많아진다면 여기다 index.d.ts로 분리
|-- 📁 stores
|-- 📁 types
|-- 📁 utils ( 재사용이 높은 함수모음 폴더 )
|-- Router.tsx (라우터 파일)
|-- App.tsx
|-- main.tsx
|-- index.css // tailwind globalStyle 적용하는 부분
|-- .eslintrc.json
|-- .gitignore
|-- .prettierrc
|-- README.md
|-- package.json
|-- tsconfig.json
|-- tailwind.config.js // tailwind theme 적용하는 부분
|-- pnpm-lock.yml