https://todoapp2304.vercel.app/
- node package 설치
npm install
- 프로젝트 실행
npm start
✅ Assignment 1
- 회원가입과 로그인 페이지에 이메일과 비밀번호의 유효성 검사기능을 구현
- 이메일 조건: @ 포함
- 비밀번호 조건: 8자 이상
✅ Assignment 2
- 회원가입 페이지에서 버튼을 클릭 시 회원가입을 진행하고 회원가입이 정상적으로 완료되었을 시 /signin 경로로 이동
✅ Assignment 3
- 로그인 페이지에서 버튼을 클릭 시, 로그인을 진행하고 로그인이 정상적으로 완료되었을 시 /todo 경로로 이동
- 응답받은 JWT는 로컬 스토리지에 저장
✅ Assignment 4
- 로그인 여부에 따른 리다이렉트 처리
- 로컬 스토리지에 토큰이 있는 상태로 /signin 또는 /signup 페이지에 접속한다면 /todo 경로로 리다이렉트
- 로컬 스토리지에 토큰이 없는 상태로 /todo페이지에 접속한다면 /signin 경로로 리다이렉트
✅ Assignment 5
- /todo경로에 접속하면 투두 리스트의 목록
- TODO의 내용과 완료 여부가 표시
✅ Assignment 6
- 추가 button을 클릭하면 입력 input의 내용이 새로운 TODO로 추가되도록
- 새로고침을 해도 추가한 TODO가 목록에 보여야 함
✅ Assignment 7
- TODO의 체크박스를 통해 완료 여부를 수정
✅ Assignment 8
- TODO 우측에 수정버튼과 삭제 버튼
✅ Assignment 9
- 투두 리스트의 TODO 우측의 삭제버튼을 누르면 해당 아이템이 삭제
✅ Assignment 10
- 투두 리스트의 수정 기능을 구현
- TODO 우측의 수정 버튼을 누르면 수정모드가 활성화
- 수정모드에서는 TODO의 내용을 변경할 수 있어야 함
- 수정모드에서는 TODO의 내용이 input창 안에 입력된 형태로 변경
- 수정모드에서는 TODO의 우측에 제출버튼과 취소버튼이 표시
- 제출버튼을 누르면 수정한 내용을 제출해서 내용이 업데이트 될 수 있도록 함
- 취소버튼을 누르면 수정한 내용을 초기화 하고, 수정모드를 비활성화
📦src
┣ 📂components
┃ ┣ 📂core
┃ ┃ ┗ 📜page.js
┃ ┗ 📂todo
┃ ┃ ┗ 📜todoItem.js
┣ 📂configs
┃ ┣ 📂api
┃ ┃ ┣ 📜auth.js
┃ ┃ ┗ 📜todo.js
┃ ┗ 📜networkHandler.js
┣ 📂hooks
┃ ┗ 📜useAuth.js
┣ 📂pages
┃ ┣ 📜signin.js
┃ ┣ 📜signup.js
┃ ┗ 📜todo.js
┣ 📂stylesheets
┃ ┣ 📂components
┃ ┃ ┣ 📂core
┃ ┃ ┃ ┗ 📜page.scss
┃ ┃ ┗ 📂todo
┃ ┃ ┃ ┗ 📜todoItem.scss
┃ ┗ 📜globals.scss
┗ 📜index.js