jihyun-yun42 / wanted-pre-onboarding-frontend Goto Github PK

• /signup 경로로 설정

• 이메일 input, 비밀번호 input, 제출 button이 포함된 형태로 구성

• input에 속성 부여
  이메일 input에 data-testid="email-input"
  패스워드 input에 data-testid="password-input"
  button에 data-testid="signup-button"

• 유효성 검사기능을 구현
  이메일 조건: @ 포함
  비밀번호 조건: 8자 이상
  유효성 검사를 통과하지 못한다면 button에 disabled 속성 부여

• 회원가입 완료시 /signin 경로로 이동

• /signin 경로로 설정

• 이메일 input, 비밀번호 input, 제출 button이 포함된 형태로 구성

• input에 속성 부여
  이메일 input에 data-testid="email-input"
  패스워드 input에 data-testid="password-input"
  button에 data-testid="signin-button"

• 유효성 검사기능을 구현
  이메일 조건: @ 포함
  비밀번호 조건: 8자 이상
  유효성 검사를 통과하지 못한다면 button에 disabled 속성 부여

• 응답받은 JWT는 로컬 스토리지에 저장

• 로그인 완료시 /todo 경로로 이동

• 토큰이 있는 상태로 /signin 또는 /signup 페이지에 접속한다면 /todo 경로로 리다이렉트

• 토큰이 없는 상태로 /todo페이지에 접속한다면 /signin 경로로 리다이렉트

• �CREATE
  input에는 data-testid="new-todo-input" 속성 부여
  button에는 data-testid="new-todo-add-button" 속성 부여

TODO를 추가 한 뒤 새로고침을 해도 추가한 TODO가 목록에 보여야 함

• READ
  /todo경로에 접속시 투두 리스트의 목록보이게 하기
  TODO의 완료 여부는 로 표현

<li>
  <label>
    <input type="checkbox" />
    <span>TODO 1</span>
  </label>
</li>
<li>
  <label>
    <input type="checkbox" />
    <span>TODO 2</span>
  </label>
</li>

• UPDATE
  TODO의 체크박스를 통해 완료 여부 수정

수정 버튼에는 data-testid="modify-button" 속성 부여
삭제 버튼에는 data-testid="delete-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 우측의 수정 버튼을 누르면 수정모드 활성화
수정 input창에는 data-testid="modify-input" 속성 부여

수정모드에서는 TODO의 우측에 제출버튼과 취소버튼이 표시
제출버튼에는 data-testid="submit-button" 속성 부여
취소버튼에는 data-testid="cancel-button" 속성 부여

취소버튼을 누르면 수정한 내용을 초기화 하고, 수정모드를 비활성화

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