assignment-final-spec.md

세미나 1~4 과제 최종 스펙

세미나 1부터 세미나 4까지 완성한 프로그램의 최종 스펙 문서입니다. 각 항목에 스펙 코드가 있으니, 질문 등을 올릴 때 어떤 스펙을 가리키고 싶다면 해당 코드를 사용하면 됩니다.

대부분은 스펙에 이미 명시되어 있는 내용이지만, 좀더 상세해진 것들도 있으니 꼭 꼼꼼히 확인해주시기 바랍니다.
스펙 이상으로 기능들을 자유롭게 추가하시는 부분은 물론 괜찮습니다. 여기 있는 스펙 문서는 "최소치"에 대한 내용입니다.
아래 내용은 "반드시" 하나도 빠짐없이 구현되어야 합니다. 때문에 스펙이 애매하다고 판단될 경우 반드시 세미나장에게 제보하여, 스펙을 확실하게 인지해 주시기 바랍니다.

전체 ( 17 항목 )

• 로그인 및 토큰 관련
  • AL-01 url을 쳐서 (또는 새로고침으로) 사이트에 접속했을 경우, 스토리지 등에 접근하여 저장된 토큰값이 있는지 확인한다.
  • AL-02 위 항목에 이어, 토큰이 살아있는지 서버에 요청을 보내 확인하고, 살아있다면 자동 로그인, 죽었다면 자동 로그아웃한다.
• 24시간 동안 안 보기 팝업
  • AP-01 url을 쳐서 (또는 새로고침으로) 사이트에 접속했고, 이전 24시간 내에 24시간 동안 안 보기 버튼을 누르지 않았을 경우 팝업이 뜬다.
  • AP-02 해당 팝업에는 그냥 닫는 기능과 24시간 동안 안 보기 기능과 함께 닫는 기능이 제공된다.
  • AP-03 24시간 동안 안 보기 버튼을 클릭했을 경우, 다음 24시간 동안 어떤 경우에도 해당 팝업이 뜨지 않는다.
• 리다이렉션 관련
  • AR-01 로그인되지 않은 상태에서 정확히 /login 이 아닌 다른 어떤 url로 접속했을 경우, 무조건 /login으로 리다이렉트된다.
    • 가령 /, /a, /login/, /login/asdf 모두 /login으로 리다이렉트된다.
    • url query는 고려하지 않아도 괜찮다. (가령 /login?name=김 은 리다이렉트되지 않아도 된다.)
  • AR-02 로그인된 상태에서 정확히 /students 나 student/:id 가 아닌 다른 어떤 url로 접속했을 경우, 무조건 /students로 리다이렉트된다.
    • 가령 /s, /student, /student/1/comment 모두 /students로 리다이렉트된다.
    • 역시 url query는 고려하지 않아도 괜찮다.
  • AR-03 로그인된 상태에서 student/:id로 접속했는데 해당 id의 학생이 존재하지 않을 경우 /students로 리다이렉트되며 사용자에게 notification이 제공된다.
    • 물론 서버의 리스폰스를 받아야 있는지 없는지 알 수 있으므로, 즉시 리다이렉트될 필요는 없다.
    • 역시 url query는 고려하지 않아도 괜찮다.
• 배포 관련
  • AD-01 S3 & Cloudfront 를 이용한 정적 배포로 배포되어야 한다. 문서를 받아올 때 항상 response code가 200이어야 한다.
  • AD-02 빌드 시 소스맵이 생성되어서는 안 된다. 반드시 빌드에 GENERATE_SOURCEMAP=false 변수를 주입한다.
• 코드 퀄리티 관련
  • AC-01 모든 컴포넌트 이름은 PascalCase 이고, 변수 이름은 camelCase 이다. 단, 서버에서 리스폰스가 snake_case 로 오는 경우가 있기 때문에 그 부분에 한해서는 관대하게 처리한다.
  • AC-02 useState 의 초기값에 반드시 100% 예측 가능한 상수만 들어간다.
  • AC-03 TypeScript로 짜여진, axios를 이용한 비동기 처리를 하는, 리액트 컴포넌트 파일이 하나 이상 있어야 한다.
  • AC-04 스타일을 styled-components를 이용해 스타일링한 파일이 3개 이상 있어야 한다.
  • AC-05 스타일을 CSS Modules를 적용해 스타일링한 파일이 3개 이상 있어야 한다.
  • AC-06 스타일을 scss를 적용해 스타일링한 파일이 3개 이상 있어야 한다.
  • AC-07 prettier 가 적용되어 있어야 한다.

로그인 페이지 ( 3 항목 )

• 스타일
  • LS-01 스타일이 못 알아볼 정도는 아니다.
• 로그인 기능
  • LF-01 올바른 username 과 password 를 입력하고 로그인 버튼을 누르면, 서버와 통신한 다음 로그인 처리가 되어 /students 페이지로 자동으로 리다이렉트된다.
  • LF-02 올바르지 않은 username 과 password 를 입력하고 로그인 버튼을 누르면, 서버와 통신한 다음 로그인이 실패되었다는 notification이 사용자에게 적절하게 전달된다.

학생 목록 페이지 ( 23 항목 )

• 헤더
  • SH-01 상단에 헤더가 있다.
  • SH-02 왼쪽에는 와플스튜디오 로고와 와플고등학교 명단 관리 프로그램이라는 텍스트가 있고, 클릭 시 와플스튜디오 홈페이지로 링크된다.
  • SH-03 오른쪽에는 로그아웃 버튼이 있어서, 클릭 시 로그아웃 처리된다.
• 대시보드
  • SD-01 헤더 밑에는 대시보드가 있으며, 다음 두 가지 정보가 포함된다.
    • 내 학생 목록의 학년별 비율에 대한 Pie Chart
    • 전체 학생 목록의 학년별 인원수에 대한 정보
  • SD-02 대시보드의 항목들 중 내 학생들 인원 비율 정보는, 내가 학생을 추가 || 수정할 시 자동으로 업데이트된다.
  • SD-03 대시보드의 항목들 중 전체 학생들 학년별 인원수 정보는 3초마다 자동으로 업데이트된다.
• 좌하단 학생 목록
  • SL-01 위에서부터 (이름 학년 인풋과 검색 버튼), (학생 리스트), (학생 추가 버튼)의 순서로 UI가 위치한다.
  • SL-02 이름과 학년 인풋에 각각 검색하고자 하는 이름과 학년을 입력할 수 있다.
  • SL-03 검색 버튼을 누를 경우 url query 에 `name=${이름}`, `grade=${학년}` 이 세팅된다.
    • 가령 이름에 김, 학년에 1을 입력하고 검색을 눌렀을 경우 /students?name=김&grade=1로 url이 변경된다.
    • 세미나 3 과제까지처럼, 검색 버튼을 누르지 않았는데 필터가 자동으로 적용되어서는 안 된다.
  • SL-04 현재 url query에 맞게 학생 목록이 필터되어 출력된다.
    • 이름의 경우 검색 이름이 학생 이름에 포함되어야 하고, 학년은 검색 학년이 학생 이름과 일치해야 한다.
    • 가령 name=김 일 경우 이름에 김이 포함되는 학생들이 리스트에 뜨게 된다.
    • 올바르지 않은 query에 대해 리다이렉션이 구현되거나 notification이 제공되는 등의 기능은 없어도 괜찮다.
  • SL-05 url query를 바로 적용하여 접속할 때에도, 쿼리가 잘 반영되어 있어야 한다.
    • 가령 브라우저에 /students?grade=2 를 직접 입력해서 접속했을 경우, 학년 인풋에 2가 자동으로 들어가 있고, 목록은 학년이 2인 학생들로 필터링되어 있어야 한다.
  • SL-06 학생 리스트에는 이름과 학년이 뜨고, hover 시 학생을 선택할 수 있는 버튼이 떠야 한다.
  • SL-07 학생을 선택할 수 있는 버튼은 학생의 선택 상태에 따라 다르게 보여야 한다.
    • 가령 정답 사이트에는 화살표가 왼쪽 / 오른쪽을 보도록 구현되어 있다.
  • SL-08 학생 선택 버튼 클릭 시, 학생의 선택 상태를 토글한다.
    • 만약 학생이 기존에 선택되지 않았다면 선택하고 (이때 다른 학생이 이미 선택되어 있었다면, 자연히 그 학생은 선택이 해제된다),
    • 기존에 선택되었었다면 선택을 해제한다.
  • SL-09 맨 아래의 추가 버튼을 클릭하면 학생을 추가할 수 있는 모달이 오픈된다. 모달에는 이름과 학년을 입력할 수 있는 인풋, 모달을 닫는 버튼, 학생을 추가하는 버튼이 있다.
  • SL-10 학생 추가 모달이 열리고 닫힐 때에는 transition 효과가 있어야 한다.
  • SL-11 학생 추가 모달의 닫기 버튼을 클릭할 경우, 입력되어 있는 값을 초기화하고 모달을 닫는다.
  • SL-12 학생 추가 모달의 추가 버튼을 클릭할 경우, 입력된 값을 통해 학생 추가 요청을 보낸다.
    • validation 처리를 프론트에서 할지 말지는 자유이다. (세미나 2 과제에서는 필수였지만)
  • SL-13 학생 추가에 성공했을 경우, 입력된 값을 초기화하고, 모달을 닫고, 추가한 학생이 학생 리스트에 자동으로 반영되어 있어야 하며, 추가한 학생을 자동으로 "선택"한다.
  • SL-14 학생 추가에 실패했을 경우, 입력된 값은 그대로 두고, 모달도 그대로 두고, 실패 사유에 대한 notification을 사용자에게 제공한다.
• 우하단 학생 정보 칸
  • SR-01 학생이 선택되지 않았을 경우 적절한 placeholder 뷰가 제공된다.
  • SR-02 학생이 선택되었을 경우 오른쪽 위에 학생 상세페이지로 가는 링크 버튼이 있고, 가운데에 프사 자리가 있고 (테두리 동그랗게 처리), 밑에 이름과 학년 정보가 제공된다.
  • SR-03 상세페이지로 가는 링크 버튼을 클릭하면 해당 학생의 id를 이용하여 `/student/${id}` 로 이동된다.

학생 상세 페이지 ( 22 항목 )

• 헤더
  • DH-01 페이지 상단에 헤더가 위치한다.
  • DH-02 헤더 왼쪽에는 학생 목록으로 돌아가기 버튼이 있어서, 클릭하면 /students로 리다이렉트된다.
  • DH-03 헤더 오른쪽에는 잠금, 삭제, 저장 버튼이 존재한다.
  • DH-04 잠금 버튼을 클릭하면 해당 학생을 즉시 잠근다. 잠긴 학생은 삭제하거나 정보를 수정할 수 없으며, 삭제 버튼과 저장 버튼 역시 disable된다.
    • 이때 수정 중인 정보가 있었다면 어떻게 해야 하는지 상당히 애매해지는데, 수강생의 주관에 맞게 적당히 구현하도록 한다. 저장하고 잠그라는 노티를 띄우는 방식 등등..
  • DH-05 잠금 버튼을 다시 클릭하면 잠금이 해제되며, 잠기기 전으로 돌아간다.
  • DH-06 삭제 버튼을 클릭하면 학생을 삭제하는 컨펌 창이 뜬다.
  • DH-07 학생 삭제 컨펌 창에서 다시 삭제 버튼을 누를 경우 학생을 삭제한 다음 컨펌창을 닫고 /students로 리다이렉트하고 학생이 삭제되었다는 notification을 사용자에게 제공한다. 당연히 학생 리스트에 삭제한 학생이 떠서는 안 된다.
  • DH-08 저장 버튼을 클릭하면 해당 학생의 수정된 정보를 저장 (PATCH) 한다.
  • DH-09 저장에 성공했을 경우 성공했다는 적절한 notification이, 실패했을 경우 실패 사유에 대한 적절한 notification이 사용자에게 제공된다.
  • DH-10 학생을 잠그거나 / 해제하거나 / 수정할 경우 서버에서 코멘트를 자동으로 추가한다. 따라서 코멘트 목록을 자동으로 다시 불러온다.
• 프로필 영역
  • DP-01 프사가 왼쪽에, 이름과 학년이 오른쪽에 적절한 스타일로 제공된다.
• 정보 수정 영역
  • DI-01 위에서부터 휴대폰 번호, 이메일, 전공, 프로필 사진 url을 변경할 수 있는 인풋들이 제공된다.
  • DI-02 휴대폰 번호를 수정할 경우 아래 조건에 맞추어 자동으로 format 된다.
    • 빈 칸에서 시작해 입력할 때 기준으로,
      • 000 -> 0000 변경 ==> 000-0 으로 포맷
      • 000-0000 -> 000-00000 변경 ==> 000-0000-0 으로 포맷
      • 13자리 이상의 입력은 무시 (가령 000-0000-0000 -> 000-0000-00000 ==> 000-0000-0000 유지)
  • DI-03 이메일은 @waffle.hs.kr 이 뒤에 자동으로 붙어있다고 가정하고 (스타일은 예제 사이트 참조), 해당 부분 앞 부분만 수정 가능해야 한다.
    • 때문에 '@' 이나 ' ' 등의 입력이 들어오면 무시하거나 notification을 제공해야 한다.
  • DI-04 전공은 frontend, backend, android, iOS, design 중 하나를 선택하는 드롭다운 (혹은 선택 목록) 을 통해 입력 가능해야 한다.
    • 전공을 삭제할 수 있는 기능은 없어도 괜찮다. 전공이 정해져 있지 않을 경우(null) 어떻게 보여줄지에 대한 부분은 자유롭게 처리한다. 단 null인데 frontend가 선택되어 있다거나 하는 등은 당연히 안 된다.
  • DI-05 프로필 사진 url 인풋은 일반적인 인풋으로 구현한다.
• 코멘트 영역
  • DC-01 학생의 코멘트 목록과 코멘트 입력 창이 적절한 UI로 구성되어 있다.
  • DC-02 코멘트 목록이 페이지네이션되어 있다. 스크롤을 이용한 페이지네이션이어야 하며, infinite scroll 또는 virtual scroll 로 제공된다.
  • DC-03 모종의 이유로 코멘트가 추가될 경우, 저장된 코멘트 목록 데이터를 싹 날리고 page=1부터 다시 로드하는 방향으로 구현되어야 한다.
  • DC-04 코멘트 추가하는 인풋에 코멘트 내용을 쓰고 작성 버튼을 누르면 코멘트가 추가된다.
  • DC-05 코멘트가 추가될 경우 코멘트 목록에 자동으로 보여야 한다.
  • DC-06 코멘트 데이터는 좌측에 내용이 plain text로, 우측에 작성 시간이 MM월 DD일 HH시 mm분 포맷으로 보여야 한다.