페이지수가 적고 컴포넌트의 수가 많기 때문에, 컴포넌트 단위 기준으로 작업을 하기 위해 Atomic Design 적용

참고 자료

https://github.com/diegohaz/arc/blob/master/src-example/components/templates/PageTemplate/index.js

카카오기술블로그: 아토믹 디자인 적용기

Line Entry의 Atomic Design 적용기

• 참고 레포의 구조를 참고하여 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 적용하는 부분
|-- yarn.lock