assignment.md

19.5-rookies Seminar 1 Assignment

due: 2021.09.11(토) 12:00

과제 목적

• React 로 컴포넌트를 다루고 페이지를 만들 수 있다.

과제 스펙

• 디자인 및 기획: 피그마 참조
• 스펙
  1. 종합
     • 추가, 수정, 삭제, 이름으로 필터 기능 및 대시보드가 있는 명단 관리 프로그램이다.
     • 올바른 학년은 1, 2, 3 이고, 올바른 이름은 2글자 또는 3글자 한글이다.
     • 한 학년에 동명이인은 없어야 한다.
     • 필터나 검색, 추가 등의 로직에서 O(n)을 하기 싫고 왠지 이진탐색을 하고 싶을 수 있다. 하지만 성능 최적화와 관련된 부분은 고려하지 않아도 괜찮다.
       • 대부분의 상황에서, 그건 백엔드 개발자가 생각할 부분이다.
       • 하지만 아직 백엔드와의 통신을 배우지 않았기 때문에 불가피하게 해당 로직을 프론트엔드에서 구현해야 한다.
     • 본 스펙에서 명시하지 않은 세세한 부분들은 따로 채점하지 않으며, 본인이 보기에 "옳다"고 생각되는 대로 구현하면 된다.
  2. 데이터
     • 더미 데이터는 이 파일의 데이터를 사용한다.
       • name: 이름
       • grade: 학년
       • profileImg: 프로필 사진 url, 없을 수 ('') 있다. 이 경우 대체 텍스트를 적당히 띄운다.
  3. 헤더
     • 로고 클릭 시 새 탭에서 와플스튜디오 홈페이지 가 열린다.
  4. 대시보드
     • 자유롭게 꾸민다. 총 인원이나 통계 등이 들어갈 수 있다. 빈 칸으로 남겨도 된다.
  5. 리스트
     • 학생들의 목록이 뜬다.
     • 학생이 많아 칸을 넘어갈 시 아래로 스크롤되어 처리되어야 한다.
     • 검색에 뭔가를 입력할 시, 이름으로 필터링한 결과를 보여준다.
       • 따로 엔터를 치거나 등의 활동을 하지 않아도, 그냥 해당 input의 value 를 name이 포함하고 있는 학생 리스트를 출력하면 된다.
       • (ex: 김 입력 -> 김와플 등이 보임)
     • 추가 버튼을 클릭하면 학생을 추가할 수 있는 모달이 뜬다.
       • (필수 아님) 모달 외부를 클릭했을 때 모달이 닫혀야 한다.
       • 추가 버튼을 클릭했을 때
         • 이름이 올바르지 않거나 (2~3글자 한글) 학년이 올바르지 않다면 (1~3) 적당히 alert를 띄운다. (프로필 사진은 어떤 값이든 상관없다)
         • 학생이 추가될 경우 한 학년에 동명이인이 생기는 경우에도 적당히 alert를 띄운다.
         • 이름과 학년이 잘 입력되어 잘 추가할 수 있었다면, 학생을 추가하고, 모달을 닫고, 추가된 학생을 자동으로 '선택'한다.
       • 모달이 열리고 닫힐 때는 서서히 열리고 서서히 닫히는 transition이 있다.
         • 이 사이트 에서 모달이 열리고 닫히는 방식 참고
         • 위 사이트처럼 열릴 때 살짝 이동하는 것까지 전부 구현될 필요는 없으나, 아무튼 뜨거나 사라질 때 서서히 나타났다가 사라지는 효과가 있어야 한다.
     • 선택되지 않은 학생의 경우, 학생 위에 마우스가 올라가 있을 때, 해당 학생을 '선택'할 수 있는 버튼이 뜬다.
       • 클릭했을 때 해당 학생을 '선택'하고, 이때 이미 '선택'된 학생이 있다면, 그 학생은 자동으로 '선택'이 해제된다.
     • 선택된 학생의 경우, 항상 해당 학생을 '선택' 해제할 수 있는 버튼이 떠 있다.
       • 클릭하면 해당 학생을 '선택' 해제한다.
     • 마우스가 올라가 있을 때 버튼이 뜨는 건 수업때 봤던 투두 리스트 사이트 에서 투두 삭제 버튼이 뜨는 방식과 동일하다.
  6. 상세 뷰
     • '선택'된 학생의 상세 뷰이다.
     • 이름과 학년, 프로필 사진 url을 수정할 수 있도록 인풋이 있으며, 각 인풋의 value의 기본값으로는 학생의 이름과 학년이 들어간다.
     • 프로필 사진은 현재 프로필 사진 url에 있는 값이 뜨도록 한다. 대체 텍스트 (혹은 대체 사진)는 적당히 지정한다.
     • 저장 버튼을 클릭하면, 변경사항을 저장한다.
       • 저장할 때 항상 이름은 한글 2글자 혹은 3글자여야 하고, 학년은 1, 2, 3 중 하나여야 한다.
       • 해당 조건이 맞지 않으면 저장이 되지 않고, 이름 또는 학년이 올바르지 않습니다.라는 alert가 뜬다.
     • 삭제 버튼을 클릭하면, 해당 학생을 삭제한다.
       • 자연스럽게, '선택'된 학생이 없는 상태가 된다.

주의사항

• 세미나장의 부족한 센스로 인해 디자인이 별로일 수 있습니다.
  • 스타일을 완벽히 똑같이 가져가실 필요는 없고, 간단한 여백 및 색상 등은 자유롭게 조정하실 수 있습니다.
  • 단, ui 및 스펙과 관련된 것은 변경하실 수 없습니다.
  • ui 역시 좋지는 않습니다만, 난이도 조정을 위해 이렇게 결정되었습니다 (추후 변경될 수 있습니다)
• 기타 꾸미고 싶으신 게 있으시다면 자유롭게 꾸며주셔도 좋습니다.
• react-modal이나 react-bootstrap 등 스타일에 이용되는 라이브러리를 사용하지 말고, Create-React-App이 설치해 준 라이브러리들만 가지고 직접 구현해야 합니다.

제출 방식 및 제출 주의사항

• 해당 문서 참조

참고하면 좋은 것들

• 해당 문서 참조