사실 이 사이트는 Next.js로 만들어졌어요. 제가 어제 컨테스트 공지를 뒤늦게 보고 허겁지겁 만들기 시작하느라 순수 html css js로 만들라는 주의사항을 제대로 읽지 않고 만들었습니다ㅠㅠㅠ 그래서 아예 올리지 않으려 했지만 그래도 만든게 아까워서 단순히 다른 분들께 공유해보고자 하는 목적으로 올려봅니다.

https://strawbirds.com/to-do-list

안녕하세요 Computer Science를 전공하고 있는 대학생입니다. 코딩 공부를 제대로 시작한지 얼마 안되었지만 그래도 이것저것 많이 만들어보고 있습니다.

작동 방식은 간단합니다.

오른쪽 위의 플러스 버튼을 누르면 할일을 추가할 수 있고 그 할 일은 회색 박스 안에 공으로 떨어집니다. 빨간색 공은 목표기한(Due Date)이 하루 이내, 주황색은 3일, 초록색은 그 이상 남았다는걸 의미합니다. 물리엔진은 Matter.js를 사용했어요.

할일 편집을 누르시면 할일 목록이 뜨는데 여기서 완료 표시를 누르면 없앨수 있어요.

사실 위에도 언급했다시피 하루 정도만에 만든거라 아직 미완성된 부분이 있습니다. 마우스나 터치로 공을 눌러서 직접 움직이게 하는 기능은 미구현이고 할일 추가할때 날짜 선택하는 창이 미완성이에요.

이 두 기능을 만드려고 하다가 계속 에러와 glitch가 생겨서 못 만들었는데 앞으로 이 부분도 보완할 생각입니다. 또한 디자인 측면에서도 아직은 너무 단촐한데 디자인도 보완할 계획입니다.

읽어주셔서 감사합니다!!