프리온보딩 인턴쉽 프론트엔드 사전과제

제출기한: ~04.09, ~04.14

과제 제한사항

레파지토리 이름: wanted-pre-onboarding-frontend
레파지토리 상태: Public
레파지토리 제출: 반드시 루트페이지 링크
과제 제출 이후: 코드 변경 지양

라이브러리 

react $ npx create-react-app
react router dom $ npm install react-router-dom@6
axios $ npm i axios
sass $ npm i sass
gh-pages $ npm install gh-pages --save-dev

README 작성

프로젝트의 실행 방법:
배포링크:

구현기능

1. /signup : 회원가입과 로그인

이메일 <input data-testid="email-input" />
패스워드 <input data-testid="password-input" />
회원가입 <button data-testid="signup-button">회원가입</button>
로그인 button에 <button data-testid="signin-button">로그인</button>

두 페이지의 UI는 동일해도 무방합니다.
회원가입과 로그인 페이지의 버튼에 부여되는 test-id가 다른 것에 유의해주세요

회원가입과 로그인 페이지에 이메일과 비밀번호의 유효성 검사기능을 구현
이메일 조건: @ 포함
비밀번호 조건: 8자 이상
입력된 이메일과 비밀번호가 유효성 검사를 통과하지 못한다면 button에 disabled 속성

 

회원가입 페이지에서 버튼을 클릭 시 회원가입을 진행: 회원가입이 정상적으로 완료되었을 시 /signin 경로로 이동
로그인 페이지에서 버튼을 클릭 시: 로그인을 진행하고 로그인이 정상적으로 완료되었을 시 /todo 경로로 이동

 

로그인 API는 로그인이 성공했을 시 Response Body에 JWT를 포함해서 응답
응답받은 JWT는 로컬 스토리지에 저장
로컬 스토리지에 토큰이 있는 상태로 /signin 또는 /signup 페이지에 접속한다면 /todo 경로로 리다이렉트
로컬 스토리지에 토큰이 없는 상태로 /todo페이지에 접속한다면 /signin 경로로 리다이렉트

 

2. /todo : 투두 리스트

목록에서는 TODO의 내용과 완료 여부가 표시
TODO의 완료 여부는 <input type="checkbox" />를 통해 표현
TODO는 <li> tag를 이용
<li>
  <label>
    <input type="checkbox" />
    <span>TODO 1</span>
  </label>
</li>
<li>
  <label>
    <input type="checkbox" />
    <span>TODO 2</span>
  </label>
</li>

리스트 페이지에 새로운 TODO를 입력할 수 있는 input과 추가 button
TODO 입력 <input data-testid="new-todo-input" />
TODO 추가 <button data-testid="new-todo-add-button">추가</button>
추가 button을 클릭하면 입력 input의 내용이 새로운 TODO로 추가
TODO를 추가 한 뒤 새로고침을 해도 추가한 TODO가 목록에 보여야 합니다.
TODO의 체크박스를 통해 완료 여부를 수정

 

TODO 우측에 수정버튼과 삭제 버튼
수정 버튼 <button data-testid="modify-button">수정</button>
삭제 버튼 <button data-testid="delete-button">삭제</button>
<li>
  <label>
    <input type="checkbox" />
    <span>TODO 1</span>
  </label>
  <button data-testid="modify-button">수정</button>
  <button data-testid="delete-button">삭제</button>
</li>

투두 리스트의 TODO 우측의 삭제버튼을 누르면 해당 아이템이 삭제

 

TODO 우측의 수정 버튼을 누르면 수정모드가 활성화
수정모드에서는 TODO의 내용이 input창 안에 입력된 형태로 변경
수정 input <input data-testid="modify-input" />
수정모드에서는 TODO의 우측에 제출버튼과 취소버튼이 표시

 

제출버튼 <button data-testid="submit-button">제출</button>
취소버튼 <button data-testid="cancel-button">취소</button>
제출버튼을 누르면 수정한 내용을 제출해서 내용이 업데이트
취소버튼을 누르면 수정한 내용을 초기화 하고, 수정모드를 비활성화

 

 

API 주소: https://pre-onboarding-selection-task.shop/
API 레퍼런스: https://github.com/walking-sunset/selection-task#api