m4nd4r1n / wanted-pre-onboarding-frontend Goto Github PK

📖 Description

• 이슈/PR 템플릿 생성
• 필요한 패키지 설치 및 설정
• 불필요한 패키지, 파일 삭제

📖 Description

README를 작성합니다.

📌 Todo

• 이름 작성
• 프로젝트 실행 방법 작성
• 배포 링크 작성

📖 Description

로그아웃 기능을 추가합니다.

📌 Todo

• 로그아웃 기능 구현

📖 Description

투두 리스트를 구현합니다.

📌 Todo

• /todo 경로에 접속하면 투두 리스트 렌더링
  • 목록에서는 TODO의 내용과 완료 여부를 표시
  • TODO의 완료 여부는 <input type="checkbox" />를 통해 표현
  • TODO는 <li> tag를 이용해 감싸기
• 새로운 TODO를 입력할 수 있는 input과 추가 button 구현
  • input에는 data-testid="new-todo-input" 속성을 부여
  • button에는 data-testid="new-todo-add-button" 속성을 부여
  • 새로고침을 해도 추가한 TODO가 목록에 보이도록 구현
• TODO의 체크박스를 통해 완료 여부를 수정할 수 있도록 구현
• TODO 우측에 수정버튼과 삭제 버튼 구현
  • 수정 버튼에는 data-testid="modify-button" 속성을 부여
  • 삭제 버튼에는 data-testid="delete-button" 속성을 부여
  • 수정 버튼을 누르면 수정모드가 활성화
  • 수정모드에서는 TODO의 내용이 input창 안에 입력된 형태로 변경
    • 수정 input창에는 data-testid="modify-input" 속성을 부여
  • 수정모드에서는 TODO의 우측에 제출버튼과 취소버튼이 표시
    • 제출버튼에는 data-testid="submit-button" 속성을 부여
    • 취소버튼에는 data-testid="cancel-button" 속성을 부여
  • 취소버튼을 누르면 수정한 내용을 초기화 하고, 수정모드를 비활성화

📖 Description

API 요청이 실패한 경우 사용자에게 에러 메시지를 출력하도록 합니다.

📌 Todo

• API 요청 실패 시 에러 메시지 추가

📖 Description

로그인, 회원가입 기능을 구현합니다.

📌 Todo

• /signup 경로에 회원가입 기능 개발
  • 회원가입 button에 data-testid="signup-button" 속성을 부여
  • 회원가입이 정상적으로 완료되었을 시 /signin 경로로 이동
• /signin 경로에 로그인 기능 개발
  • 로그인 button에 data-testid="signin-button" 속성을 부여
  • 로그인이 정상적으로 완료되었을 시 /todo 경로로 이동
  • 응답받은 JWT는 로컬 스토리지에 저장
• 이메일 input에 data-testid="email-input" 속성을 부여
• 패스워드 input에 data-testid="password-input" 속성을 부여
• 이메일과 비밀번호의 유효성 검사기능을 구현
  • 이메일 조건: @ 포함
  • 비밀번호 조건: 8자 이상
  • 유효성 검사를 통과하지 못한다면 button에 disabled 속성을 부여
• 로컬 스토리지에 토큰이 있는 상태로 /signin 또는 /signup 페이지에 접속한다면 /todo 경로로 리다이렉트
• 로컬 스토리지에 토큰이 없는 상태로 /todo페이지에 접속한다면 /signin 경로로 리다이렉트

📖 Description

로그인, 회원가입 페이지에 스타일을 적용합니다.

📌 Todo

• 로그인 페이지 스타일 적용
• 회원가입 페이지 스타일 적용

📖 Description

공백이 없는 긴 문자열을 등록하면 수정/삭제 버튼을 클릭할 수 없는 버그를 수정합니다.

📌 Todo

• 수정/삭제 버튼이 보이도록 수정

📖 Description

todo 페이지에 스타일을 적용합니다.

📌 Todo

• todo 페이지 스타일 적용

📖 Description

사용하지 않는 불필요한 파일과 패키지를 정리합니다.

📌 Todo

• 불필요한 파일, 패키지 정리

📖 Description

build 이후 실행 스크립트를 추가합니다.

📌 Todo

• build 이후 실행 스크립트 추가