assignment.md

19.5-rookies Seminar 2 Assignment

due: 2021.09.25(토) 12:00

과제 목적

• 라우팅으로 여러 페이지를 다룰 수 있다.
• Context를 이용한 클라이언트 상태관리를 할 수 있다.
• S3과 Cloudfront를 이용해 사이트를 배포할 수 있다.

과제 스펙 (피그마)

• 세미나 1 과제의 스펙에서 다음 항목이 변경 / 추가된다.
• 변경
  • 학생 목록이 비어 있을 때 뷰가 생겼다.
  • 이제 다른 건 몰라도 학생 목록 데이터는 App.js의 useState 말고 Context 를 통해 관리한다.
  • 이름과 학년은 수정 불가능한 필드가 된다. 해당 두 필드는 disabled 상태로 두어야 한다.
  • 프로필 사진은 원래 학생 생성 시 저장할 수 있던 필드였으나, 이제 학생 수정시에만 지정할 수 있다. 학생 생성 시에는 이름과 학년만 작성한다.
  • 선택 뷰에 있던 삭제 및 수정 기능이 상세 페이지로 옮겨지고, 선택 시 상세 뷰로 갈 수 있다 (피그마 참조)
    • 이제 선택 뷰에서 수정은 못한다.
  • 각 화면 url 의 조건이 변경 및 추가되었다.자세한 내용은 아래에 있다.
    • 메인 화면 (학생 리스트 화면): /students
    • 학생 상세 화면: /student/:id
    • 로그인 화면: /login
• 추가
  • 대시보드가 필수 스펙이 된다.
    • 차트를 만들어야 한다. 하지만 차트를 직접 만드는 건 불필요한 에너지와 시간 소모가 크다. recharts 라이브러리의 pie chart 를 이용하여, 학년별 학생 수 비율을 파이 그래프 형태로 표현해야 한다.
    • 피그마에 대충 올려놓긴 했으나 위치를 정확하게 지킬 필요는 없다. 이외 스펙은 자유이다.
  • 삭제는 위험한 기능이다. 항상 컨펌 후 삭제해야 한다.
    • 학생 삭제 버튼을 누르면 정말 삭제하시겠습니까? 라는 내용의 컨펌 창이 뜨고, 거기서 확인 버튼을 누르면 삭제해야 한다. 기본 내장된 window.confirm 말고, 개인적으로 커스텀된 Confirm 이라는 이름의 컴포넌트를 만들어서 이용하도록 한다.
  • 학생에 lock 기능이 추가된다.
    • lock된 학생은 다음 효과를 가진다.
      • 앞에 락 아이콘이 뜬다 (아이콘은 피그마 참조)
      • 삭제 및 수정할 수 없다. (삭제 버튼, 필드 수정 인풋 등, 저장 버튼 disabled 처리)
    • 학생을 락 / 언락하는 방법은 피그마를 참조한다.
  • 학생에 전화번호 필드가 추가된다.
    • 수정 가능한 필드이며, 좋은 사용자 경험을 위해 숫자만 입력해도 자동으로 010-1234-5678 과 같은 형태로 포매팅되어야 한다.
      • 코너케이스 자세히 파고 들어가면 스펙이 복잡해지는데, 아래처럼 "비어 있는 상태에서 시작해서 사용자가 숫자만 입력했을 때 잘 포매팅되기만 하면" 된다. 이외는 채점하지 않는다.
        1. 비어 있는 상태에서 010 입력 -> 010
        2. 1 입력 -> 010-1
        3. 234 입력 -> 010-1234
        4. 5678 입력 -> 010-1234-5678
  • 학생에 이메일 필드가 추가된다.
    • 모든 학생은 @waffle.hs.kr 이메일 주소를 가진다고 가정한다.
    • 인풋은 @ 이하를 입력받지 않고, username 만 입력하면 @이하는 자동으로 뒤에 붙어 있는 ui 이다. (피그마 참조)
    • 물론 실제 데이터는 @waffle.hs.kr까지 포함해서 저장되어야 한다.
  • 학생에 전공 필드가 추가된다.
    • 모든 학생의 전공은 다음 다섯 가지 중 하나이다: frontend, backend, android, iOS, design
    • 이 필드는 인풋이 아닌 드롭다운을 이용하여 값을 설정할 수 있도록 한다.
    • 커스텀 드롭다운 필드를 만들 수 있다면 만들고, 힘들다면 html에 내장된 <select> 태그를 이용한다.
  • 학생 상세 정보 페이지가 추가된다.
    • 이메일, 전화번호, 전공 필드를 수정 / 저장하고, 학생을 삭제할 수 있다.
    • 학생의 잠김 상태를 설정 / 해제할 수 있다.
    • 학생에게 남긴 코멘트를 보고, 코멘트를 남길 수 있다. (과제 3에서 구현할 기능이니, 창만 만들어 둔다.)
  • 로그인 페이지가 추가된다.
    • 로그인 기능 자체는 세미나 3 과제에서 구현한다. 지금은 그냥 피그마대로 만들어 두기만 하고, 아이디 비번을 입력하든 말든 로그인 버튼을 누르면 로그인이 됐다고 치게끔 구현한다.
    • 로그인되어있지 않은데 현재 경로가 /login 이 아니라면, 항상 /login 으로 리다이렉트된다.
    • 로그인되어있는데 현재 경로가 /login 이라면, 항상 /students 로 리다이렉트된다.
  • 로그인되어 있다면 url은 자유이나, 만약 잘못된 (어디에도 맞지 않는) url을 입력했다면 /students 로 리다이렉트된다.
  • 배포를 해야 한다.
    • aws 개인 계정을 생성하고, 그를 이용해 만든 사이트를 빌드하고 S3과 cloudfront에 배포한다.
    • cloudfront에 배포된 url을 PR과 리드미에 첨부한다.

참고

• 데이터 타입은 dummy-db.json 에 있는 형식을 사용하면 나중에 편하다.