↓↓↓↓이 프로젝트의 전체 코드는 GitHub에서 확인하실 수 있습니다.↓↓↓↓https://github.com/GangHyun95/calendar-todo GitHub - GangHyun95/calendar-todo: with typescriptwith typescript. Contribute to GangHyun95/calendar-todo development by creating an account on GitHub.github.com  ModalContent 컴포넌트에 키보드 입력 시 ESC 키를 누르면 모달이 닫히고, Enter 키를 누르면 폼이 전송되는 로직을 추가했습니다.또한, ModalContent에 할 일 텍스트가 비어 있을 때 경고를 표시하는 알림 모달을 추가했으며, todoConte..

↓↓↓↓이 프로젝트의 전체 코드는 GitHub에서 확인하실 수 있습니다.↓↓↓↓https://github.com/GangHyun95/calendar-todo GitHub - GangHyun95/calendar-todo: with typescriptwith typescript. Contribute to GangHyun95/calendar-todo development by creating an account on GitHub.github.com  이번 포스트에서는 To-Do 리스트 앱에 수정, 삭제 기능을 추가하고, 체크박스 상태에 따라 완료 여부를 관리하는 방법을 설명하겠습니다. 또한, To-Do 항목의 완료 상태에 따라 캘린더에서 시각적으로 표시하는 방법도 다룹니다.모달 컴포넌트 설계ModalConte..

↓↓↓↓이 프로젝트의 전체 코드는 GitHub에서 확인하실 수 있습니다.↓↓↓↓https://github.com/GangHyun95/calendar-todo GitHub - GangHyun95/calendar-todo: with typescriptwith typescript. Contribute to GangHyun95/calendar-todo development by creating an account on GitHub.github.com To-Do List를 구현하면서, 여러 컴포넌트에서 공통으로 To-Do 데이터가 필요하다는 점을 확인했습니다.Calendar에서는 특정 날짜에 완료되지 않은 To-Do가 있을 경우, 해당 날짜를 특별하게 표시해야 합니다.(추후 구현 예정)TodoContent에서는 ..

↓↓↓↓이 프로젝트의 전체 코드는 GitHub에서 확인하실 수 있습니다.↓↓↓↓https://github.com/GangHyun95/calendar-todo GitHub - GangHyun95/calendar-todo: with typescriptwith typescript. Contribute to GangHyun95/calendar-todo development by creating an account on GitHub.github.com 이번 포스팅에서는 To-Do List에서 모달 컴포넌트를 구현하고 사용하는 방법에 대해 다뤄보겠습니다.이 모달 컴포넌트는 '할 일 추가하기' 기능을 위한 UI를 구현한 것으로, 추후 실제 기능 구현이나 수정 기능에도 재사용할 수 있도록 유연하게 설계되었습니다. 모달..

↓↓↓↓이 프로젝트의 전체 코드는 GitHub에서 확인하실 수 있습니다.↓↓↓↓https://github.com/GangHyun95/calendar-todo GitHub - GangHyun95/calendar-todo: with typescriptwith typescript. Contribute to GangHyun95/calendar-todo development by creating an account on GitHub.github.comTo-Do List를 개발하면서, 단순한 리스트 디자인보다는 조금 더 재미있는 디자인을 적용해보고 싶었습니다. 그래서 줄 공책 스타일의 디자인을 적용하기로 결정했습니다. 이 글에서는 줄 공책 같은 디자인을 구현하기 위해 사용한 CSS와 그 원리에 대해 자세히 설명하겠..

↓↓↓↓이 프로젝트의 전체 코드는 GitHub에서 확인하실 수 있습니다.↓↓↓↓https://github.com/GangHyun95/calendar-todo GitHub - GangHyun95/calendar-todo: with typescriptwith typescript. Contribute to GangHyun95/calendar-todo development by creating an account on GitHub.github.com  React를 공부하면서 단순한 To-Do List 대신 조금 더 재미있게 만들고 싶었습니다. 그래서 JavaScript의 Date 객체에 대 해 좀 더 깊이 공부할 겸 달력형 To-Do List를 만들어보기로 했습니다. 이번 포스팅에서는 그 첫 번째 단계로 달력을..