📌 TODO List Project

Next.js와 Typescript를 이용해 구현한 투두리스트 작성 웹 페이지

🔗 배포 링크

https://sunnwave.github.io/todo-list-assignment/

⚙️ 주요 기능

🌀 헤더

• 헤더의 로고 클릭 시 할 일 목록 페이지(홈 화면)으로 이동한다

📝 할 일 목록 페이지(홈 화면)

• 미완료한 일과 완료한 일을 구분하여 화면에 보여준다
• 입력창에 새로운 할 일 작성 후 추가하기 버튼 클릭 또는 엔터키 입력 시 새로운 할 일이 추가된다
• 각각 TODO 항목들의 체크박스 클릭 시 완료 상태를 변경한다.

<웹페이지 화면>

<태블릿 화면>

<모바일 화면>

✏️ 할 일 상세 페이지

• TODO 항목의 항목 이름, 첨부 이미지, 메모 등의 상세 정보를 화면에 보여준다.
• 상단의 TODO 입력창에서 TODO의 이름과 체크박스로 진행 상태를 수정할 수 있다.
• 첨부 이미지를 수정할 수 있다.
• 메모를 수정할 수 있다.
• 수정사항이 발생했을 시 수정 완료 버튼이 활성화되고 수정완료 버튼 클릭 시 내용이 수정되고 할 일 목록 페이지로 이동한다.
• 삭제하기 버튼 클릭시 해당 TODO가 삭제되고 할 일 목록 페이지로 이동한다.

<웹페이지 화면>

<태블릿 화면>

<모바일 화면>