🎯 custom hooks 분리하기

• todoService 컴포넌트는 custom hook을 위해 만들어진 컴포넌트입니다. components 폴더가 아닌 hooks 폴더 안에 분리했습니다.

📦src
 ┣ 📂components
 ┣ 📂hooks
 ┣  ┗  📜useTodo.tsx
 ┗ 📂utils

🎯 TotoTemplate 분리하기

• 단순 스타일, layout을 지정하기 위한 컴포넌트입니다. layout 폴더 밑으로 이동시켰습니다.

📦src
 ┣ 📂components
 ┣  ┗ 📂 layout
 ┣     ┗ 📜 TodoTemplate.tsx 
 ┣ 📂hooks
 ┗ 📂utils

🎯 GlobalStyle 분리

재사용 가능한 Style들을 모아둘 styles 폴더에 분리시켰습니다.

📦src
 ┣ 📂styles
 ┗     ┗ 📜 GlobalStyle

🎯 page 분리

지금은 todo page 하나지만, 로그인 기능을 추가한다고 가정했을 때, page를 나누기 위해 pages 폴더 안에 분리시켰습니다. 가장 먼저 보여주는 TodoContainer 컨포넌트를 Todo 페이지로 설정했습니다.

📦src
 ┣ 📂components
 ┣ 📂pages
 ┗     ┗📜Todo.tsx

🎯 최종 폴더 구조

📦src
 ┣ 📂components
 ┣ 📂hooks
 ┣ 📂pages
 ┣ 📂styles
 ┣ 📂utils
 ┣ 📜 App.tsx
 ┗ 📜 index.tsx