구함 사전 온보딩 FE 인턴십 사전 과제

by

뭐해?

사전 온보딩 프런트 엔드 인턴십(4월) | 구함

Pre-onboarding 인턴십은 학생들이 동료들과 함께 다양한 회사에서 기술 과제를 수행하는 교육 인턴십 프로젝트입니다. 취업(이직)을 희망하는 신입생/후배라면 누구나 참가 신청이 가능합니다.

'추천 관련글,

www.wanted.co.kr

무엇을 만들어야 할까요?

1. 로그인/회원가입

  • /가입하기 노선에 회원가입 기능을 개발해주세요
  • /징후 경로에 대한 로그인 기능을 개발하십시오.
  • 페이지에 이메일 입력, 비밀번호 입력, 제출 버튼이 포함된 형태로 구성해주세요.
    • 이메일 입력 데이터 테스트=”이메일 입력” 재산을 주다
    • 비밀번호 입력에 데이터 테스트=”비밀번호 입력” 재산을 주다
    • 회원가입 페이지에서 회원가입 버튼을 데이터 테스트=”가입 버튼” 재산을 주다
    • 로그인 페이지에서 로그인 버튼 data-testid=”로그인 버튼” 재산을 주다
  • 두 페이지 모두 동일한 UI를 가질 수 있습니다.
  • 회원가입 페이지와 로그인 페이지의 버튼에 부여되는 test-id는 서로 다릅니다.
<!-- 예시 -->
<input data-testid="email-input" />
<input data-testid="password-input" />
<button data-testid="signup-button">회원가입</button>

과제 1

  • 회원가입 및 로그인 페이지에서 이메일 및 비밀번호 확인 기능을 구현해 주세요.
    • 이메일 용어: @ 포함하다
    • 비밀번호 조건: 8자 이상
    • 이메일 및 비밀번호 검증 조건은 별도의 조건을 추가하지 않고 위 설명대로만 진행(예: 비밀번호 검증에 특수문자 포함, 비밀번호 확인 조건 추가 등 새로운 조건 추가 자제)
  • 입력한 이메일과 비밀번호가 유효성 검사를 통과하지 못하면 버튼이 장애가 있는 재산을 주다
  • 보안상의 이유로 실제 사용하고 있는 이메일과 비밀번호 대신 테스트 이메일과 비밀번호를 사용하는 것을 권장합니다.

과제 2

  • 회원가입 페이지에서 버튼을 클릭하면 회원가입이 진행되며 정상적으로 회원가입이 완료되면 /징후 길을 가주세요

과제 3

  • 로그인 페이지에서 버튼을 클릭하면 로그인 후 정상적으로 로그인 됩니다. /모두 길을 가주세요
    • 로그인 API는 로그인에 성공하면 응답 본문에 포함된 JWT로 응답합니다.
    • 받은 JWT를 로컬 저장소에 저장합니다.

과제 4

  • 로그인 여부에 따라 리디렉션 처리를 구현하십시오.
    • 로컬 스토리지의 토큰 사용 /징후 또는 /가입하기 페이지에 접속하면 /모두 경로로 리디렉션하십시오
    • 로컬 저장소에 토큰이 없는 경우 /todo 페이지에 접속하면 /징후 경로로 리디렉션하십시오

2. 할 일 목록

과제 5

  • /todo 경로 접속 시 Todo 목록을 볼 수 있도록 해주세요.
  • 목록에는 TODO가 무엇인지, 완료 여부가 표시되어야 합니다.
  • TODO 완료 여부 통해 표현해주세요
  • TODO는
  • 태그로 포장
<li>
  <label>
    <input type="checkbox" />
    <span>TODO 1</span>
  </label>
</li>
<li>
  <label>
    <input type="checkbox" />
    <span>TODO 2</span>
  </label>
</li>

과제 6

  • 목록 페이지에 새로운 TODO를 입력하기 위한 입력 및 추가 버튼을 생성해주세요.
    • TODO 입력 입력에는 다음이 포함됩니다. 데이터 테스트=”new-todo-입력” 재산을 주다
    • TODO 버튼 추가 data-testid=”new-todo-add-button” 재산을 주다
  • 추가 버튼을 클릭하면 입력 입력 내용이 새로운 TODO로 추가됩니다.
  • TODO를 추가한 후 새로고침해도 추가된 TODO가 목록에 나타나야 합니다.
<input data-testid="new-todo-input" />
<button data-testid="new-todo-add-button">추가</button>

과제 7

  • TODO 체크박스를 통해 완료 상태를 편집할 수 있도록 허용해 주세요.

과제 8

  • TODO 오른쪽에 편집 버튼과 삭제 버튼을 생성합니다.
    • 편집 버튼에서 data-testid=”수정 버튼” 재산을 주다
    • 삭제 버튼 데이터 테스트=”삭제 버튼” 재산을 주다
<li>
  <label>
    <input type="checkbox" />
    <span>TODO 1</span>
  </label>
  <button data-testid="modify-button">수정</button>
  <button data-testid="delete-button">삭제</button>
</li>

과제 9

  • 할일 목록 삭제 기능을 구현해주세요
    • 할일 목록에서 TODO 오른쪽의 삭제 버튼을 클릭하면 해당 항목이 삭제됩니다.

과제 10

  • 할일 목록 편집 기능을 구현해주세요
    • TODO 오른쪽의 편집 버튼을 클릭하면 편집 모드가 활성화되어 있는지 확인합니다.
    • 편집 모드에서 TODO의 내용을 변경할 수 있어야 합니다.
    • 편집모드에서 TODO의 내용을 입력창에 입력된 형태로 변경합니다.
      • 입력 편집 창에서 data-testid=”수정-입력” 재산을 주다
    • 편집 모드에서 TODO 오른쪽에 제출 버튼과 취소 버튼을 표시하십시오.
      • 제출 버튼에서 데이터 테스트=”제출 버튼” 재산을 주다
      • 취소 버튼 데이터 테스트=”취소 버튼” 재산을 주다
    • 콘텐츠가 업데이트될 수 있도록 변경 사항을 제출하려면 제출 버튼을 클릭하십시오.
    • 취소 버튼을 누르면 수정된 내용이 초기화되고 편집 모드가 비활성화됩니다.
<input data-testid="modify-input" />
<button data-testid="submit-button">제출</button>
<button data-testid="cancel-button">취소</button>

예


구현 전 설계