이 프로젝트는 React 중급 스터디에서 공부하면서 만든 미니 프로젝트입니다.
간단하게 투두를 적을 수 있는 투두 리스트 사이트입니다.
react, ts, recoil, styled-components
![](https://private-user-images.githubusercontent.com/102218665/322804563-c826f871-63ed-4bdf-a795-0acd2bebaa99.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEzMDA5NjAsIm5iZiI6MTcyMTMwMDY2MCwicGF0aCI6Ii8xMDIyMTg2NjUvMzIyODA0NTYzLWM4MjZmODcxLTYzZWQtNGJkZi1hNzk1LTBhY2QyYmViYWE5OS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzE4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcxOFQxMTA0MjBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1kMTRhNzg4MTU3MWQ5MTUwYmMyMGRlOTQ3YTQ5MzBkMGVlOWVhMzY0YTU4YjQ0M2FkMmJhYmI2NjNiNWMyNmNjJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.9H8xJE-kKswaWd6b92wZo1ULS8xII3rM88fRM-Mb3Vc)
투두 리스트는 하나의 페이지로 이루어져 있습니다.
Input구역에 원하는 텍스트를 입력하여 List에 등록할 수 있습니다.
![](https://private-user-images.githubusercontent.com/102218665/322805757-da6f38d8-550c-4ec0-b634-40fa8d62ecae.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEzMDA5NjAsIm5iZiI6MTcyMTMwMDY2MCwicGF0aCI6Ii8xMDIyMTg2NjUvMzIyODA1NzU3LWRhNmYzOGQ4LTU1MGMtNGVjMC1iNjM0LTQwZmE4ZDYyZWNhZS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzE4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcxOFQxMTA0MjBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0wNzY1MjIwYjAzNjBlZjAyNTI2NWNiNjVkNmE0ODVjNDYwYjU2OWQ5NDI5N2RmYzk0MWQwNDU4ZWNhOTcxNjQyJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.yMGxqD14cPCZqG3DnaT8Y-0NWm3unP9RYqJ8paa-8iw)
텍스트를 카테고리별로 구분이 가능합니다.
기본값은 TO_DO이고 DOING, DONE등의 카테고리가 존재합니다.
또한 텍스트를 카테고리별로 분류해서 보여줍니다.
![](https://private-user-images.githubusercontent.com/102218665/322806558-af2a86a9-d3f1-4b23-9def-c9f1910cb717.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEzMDA5NjAsIm5iZiI6MTcyMTMwMDY2MCwicGF0aCI6Ii8xMDIyMTg2NjUvMzIyODA2NTU4LWFmMmE4NmE5LWQzZjEtNGIyMy05ZGVmLWM5ZjE5MTBjYjcxNy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzE4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcxOFQxMTA0MjBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1kM2ExMTY2YmM3NGU0MDA3NTFhNDFlMmNlZGYxYTc0ZDk2OGEyMWE3M2IyYjJiMmFjNDc4NjlhZWE2MmI1YjNjJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.Se24Pf1CAPu4HCpy4h8J6VB-TUDJor2sU5chuR6ok-M)
![](https://private-user-images.githubusercontent.com/102218665/322806989-8e0162dc-686d-40c6-a290-259628326015.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEzMDA5NjAsIm5iZiI6MTcyMTMwMDY2MCwicGF0aCI6Ii8xMDIyMTg2NjUvMzIyODA2OTg5LThlMDE2MmRjLTY4NmQtNDBjNi1hMjkwLTI1OTYyODMyNjAxNS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzE4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcxOFQxMTA0MjBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT05ODg3ZmE2YzJkNjc3MmRkZGE3OTkzMDE4OTM1NDNkOTk3OTYxODRiYTZlMDA2YjJkNWEzMzg0MzhiMjUwMmRkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.Cuv7-OHgh31wMwVpMSG2qciMWHXe479BFUelLviiwwE)
![](https://private-user-images.githubusercontent.com/102218665/322807102-78a2d4f6-877b-415b-a371-10f15d1a848c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEzMDA5NjAsIm5iZiI6MTcyMTMwMDY2MCwicGF0aCI6Ii8xMDIyMTg2NjUvMzIyODA3MTAyLTc4YTJkNGY2LTg3N2ItNDE1Yi1hMzcxLTEwZjE1ZDFhODQ4Yy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzE4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcxOFQxMTA0MjBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1kNGVjMDUxMDFiODk5MDRmNzI3YWY4NmRmMGZiMjY1MGIyMTc5ZWYwOGExY2M1MTk1N2ZmYTFiOTczMzdmOGUxJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.YcYdS_3Y2r-iLHp2s6-ATWLjUILaYtXXfxLsuZ8Oip0)
Input구역에 텍스트를 작성하여 추가를 한고 리스트를 보면 버튼이 3가지가 존재합니다.
![](https://private-user-images.githubusercontent.com/102218665/322807512-284e7155-e3f7-40e7-98fe-c96e790591ed.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEzMDA5NjAsIm5iZiI6MTcyMTMwMDY2MCwicGF0aCI6Ii8xMDIyMTg2NjUvMzIyODA3NTEyLTI4NGU3MTU1LWUzZjctNDBlNy05OGZlLWM5NmU3OTA1OTFlZC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzE4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcxOFQxMTA0MjBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0xMjEzNjdhN2QwMDlmYzAwYjFiMzAxMmQ4NTM4YjA4YjM2ZTViNTM0NDliODk4YTNiZjk3NjkzYjMwNGVkNDE5JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.i6rIT0IxJOzqAYQHJOxvHy3ejFOhehoQl9Mdg8Nwjh8)
버튼은 현재 카테고리 제외 두 가지 변경 버튼과 삭제 버튼으로 구성이 되어있습니다.
위 사진에서 DOING이나 DONE을 누르게 되면 현재 카테고리 영역에서 사라지고 DOING이나 DONE 카테고리 영역으로 갑니다.
삭제 버튼을 누르게 되면 리스트에서 삭제가 됩니다.
이번에 상태 관리 라이브러리인 recoil을 주로 사용하여서 ToDoList를 만들어보았습니다. ToDoList를 만들면서 recoil의 다른 atom을 가져와 아웃풋을 변형시켜서 리턴하는 selector라는 기능을 처음으로 사용해보아서 좋았습니다. 또한, react와 styled-component, ts등도 사용해보면서 익숙해진 것 같습니다.