TodoList with TanStack Query

기능 설명

/auth

• 로그인 폼
  • 이메일, 비밀번호 유효성 체크
  • 조건 만족 시, 로그인 버튼 활성화
• 회원가입 버튼
• 로그인 버튼: 로그인 API 호출
  • 응답으로 받은 토큰은 로컬 스토리지에 저장
  • 로그인 여부는 redux가 전역 상태 관리
  • 다음 번 로그인 시 토큰이 존재한다면 루트 경로로 리다이렉트
  • 토큰이 유효하지 않다면 사용자에게 알리고 로그인 페이지로 리다이렉트

/auth/signup

• 회원가입 폼
  • 로그인 폼과 같은 컴포넌트를 사용

/

• Todo Create 폼

  • Todo 추가 버튼을 클릭하면 할 일 추가.
  • Todo Title Input 에서 엔터를 치면 Todo Content로 포커스 이동
  • Todo Content Input 에서 엔터를 치면 추가를 클릭한 효과
  • Todo Create 폼이 비워져 있다면 사용자에게 알림

• TodoList 표출

  • 등록된 Todo가 없다면 '할일을 추가해주세요' 문구 표출
  • Todo 수정 버튼을 클릭하면 수정 모드가 활성화, 수정 내용을 제출하거나 취소 가능.
  • Todo 삭제 버튼을 클릭하면 해당 Todo 삭제 가능.

• 새로고침을 했을 때 상태 유지.

/[todoID]

• 화면 내에서 Todo List와 개별 Todo의 상세를 확인 가능
• 개별 Todo를 조회 순서에 따라 페이지 뒤로가기를 통하여 조회 가능.

위키페이지

wiki

Getting Started

0. 클론 설치

~/workspace > git clone https://github.com/uhj1993/wanted-pre-onboarding-challenge-fe-1.git

1. 클라이언트

~/workspace > cd wanted-pre-onboarding-challenge-fe-1/client/
~/workspace/wanted-pre-onboarding-challenge-fe-1/client > yarn && yarn build && yarn start

2. 서버

~/workspace/wanted-pre-onboarding-challenge-fe-1 > cd server
~/workspace/wanted-pre-onboarding-challenge-fe-1/server > yarn && yarn start # http://localhost:8080

3. 접속

http://localhost:3000/auth