hyunjin0910/Todolist

여러 라이브러리, 프레임워크 적용해보는 투두리스트

프로젝트 실행방법

yarn start

배포 링크 & 데모 영상

👉 과제 링크

사용한 라이브러리

• UI
  • emotion
  • feather-icon
  • ant design
• React Router
• Axios
• Redux-toolkit
• React-query

작업 내용

1. Redux-toolkit으로 작업

✍️ 작업 내용 기록

2. React-query로 변경

✍️ 작업 내용 기록

3. 백엔드 API로 작업 (현재 진행 중)

• 기술 스택: TypeScript, node(express), Mysql

페이지 설명

1. 홈 화면

• 사이트에 들어가면 가장 처음에 나오는 화면
• 로그인 페이지 or 회원가입 페이지로 이동 가능

2. 회원 가입 페이지

유효성 검사

• 이메일 조건: @ 포함
• 비밀번호 조건: 8자 이상
• 입력된 이메일과 비밀번호가 위 조건을 만족할 때만 버튼이 활성화 (회색 -> 파란색으로 변경)

3. 로그인 페이지

유효성 검사

• 이메일 조건: @ 포함
• 비밀번호 조건: 8자 이상
• 입력된 이메일과 비밀번호가 위 조건을 만족할 때만 버튼이 활성화 (회색 -> 파란색으로 변경)

토큰

• 로그인 성공 시 해당 유저의 토큰이 로컬 스토리지에 "TOKEN"이라는 키로 저장됨
• 로컬 스토리지에 토큰이 있는 상태에서 로그인 페이지 접속 시 /todo 경로로 리다이렉트 됨

4. 할일 목록 페이지

• /todo경로에 접속하면 투두 리스트의 목록을 볼 수 있음
• 체크 박스 클릭을 통해 완료 여부를 표시할 수 있음
• "추가하기" 버튼을 클릭해서 새로운 할 일을 추가할 수 있음
• 연필 모양 아이콘 클릭 시 수정 가능
  • “제출” 버튼을 누르면 입력한 내용으로 할일이 수정됨
  • “취소" 버튼을 누르면 내용이 수정되지 않고 유지
• 휴지통 모양 아이콘 클릭 시 삭제 가능