backlog를 어떤 방식으로 저장할 지 정하자. issue에 남길지, 엑셀에 남길지?
→ 엑셀에 1차 기록

프로젝트를 하면서 멘탈 관리를 위해 가끔 팀원들과 기분전환하는 건 어떨까?
→ 일주일에 한번씩 가위바위보 이긴 사람이 정한 액티비티 체험하기

작업량 평준화를 위해 작업에 점수를 매기고 (난이도 순, 결정 순서 순 등) 매주 포인트를 종합해 다음주 과제를 선정하자. 예를 들어 지난 주에 작업 점수가 높았다면, 다음 주에는 낮은 작업을 맡을 수 있다.

서비스의 이름은 어떤 것이 좋을까?

• → 피키포키
• 답정너
• 픽폭

→ 아이디어 기획서

• 투표 형태
  • 이상형 월드컵: 사진2, 버튼 2 / 최종 선택이 이기는 투표
  • 메뉴 고르기: 식사 메뉴를 n개로 두고 투표
• 게임 형태
  • n개를 선택하는 방식
    • 로또: 컨퍼런스 등에서 경품 추천에 이용?
    • 제비뽑기
  • 기타
    • 십자말 풀이: 한 단어에 대해 시간을 걸어서 못풀면 block, 풀면 점수를 주는 형태
    • → 가위바위보
    • → 빙고

실제로 서비스 할 수 있을 정도로 완성하기!

• 실시간 퀴즈 참여자 페이지
  • 추가사항
    • 관리자가 게임을 시작했을 때 카운트 다운 출력

개발 첫 주는 각자의 스타일을 맞춰가기 위해서 Pair Programming으로 진행하기로 하였음

• 2주차 PR Merge 담당

  • 이수정

• 프로젝트 기반 작업 (함께, 우선순위: 1)

  • 린트 설정
  • 폴더링
  • ...

• 담당자: 이재민, 조찬기

  • 메인 페이지 (우선순위: 2)
    • 컴포넌트
      • 방 번호 입력칸
        • 방 번호 유효한 지 확인 (6자리가 맞는지)
      • 방 입장하기 버튼
      • 3D 로고 출력 _ 오창영
    • 방 입장
      • 서버 처리
        • 서버로 방 번호 요청
        • 유효성 체크 결과 응답
        • 쿠키에 방 번호 저장
  • 닉네임 설정 페이지 (우선순위: 3)
    • 컴포넌트
      • 닉네임 입력칸
        • 닉네임 유효한지 확인 (3bytes ~ 20bytes 범위)
      • 방 입장하기 버튼
      • 3D 로고 출력 _ 오창영
    • 닉네임 설정
      • 서버 처리
        • 서버로 닉네임 요청
        • 닉네임에 대한 중복검사
          • 성공 시 다음 로직
          • 실패 시 응답
        • 유효성 체크 결과 응답
        • 쿠키에 닉네임 저장
      • 클라이언트 처리
        • 대기실로 페이지 라우팅

• 담당자: 이수정, 오창영

  • 실시간 퀴즈 참여 (우선순위: 3)
    • 컴포넌트
      • 게임이 시작되기 전까지 대기 중 표시
      • 하단에 유저가 입력한 닉네임
      • 유저의 점수 (0점)
    • 소켓 통신
      • 게임 시작 신호가 오면 카운트 다운 출력
  • 실시간 퀴즈 시작(=관리자 대기실 페이지) (우선순위: 4)
    • 컴포넌트
      • 상단 게임 로고, 게임 시작 버튼
      • 접속한 유저의 닉네임 list
      • 하단에 방 번호 및 페이지 주소 출력
    • 게임 시작
      • 소켓 통신
        • 게임 시작 신호 전송

• 시나리오

  • 메인 페이지에서 방번호를 입력하고 들어간 뒤, 관리자가 게임 스타트를 눌렀을 때 사용자 화면에서 카운트 다운이 들어가는 것.

• 테스트 목적과 상황

  • 테스트 목적
    • HTTP 통신 테스트
    • 소켓 통신 기본 기능 테스트
  • 테스트 상황
    • 사용자가 닉네임을 입력한 뒤에 유효성 체크 후 쿠키에 닉네임을 전달해주면 닉네임이 게임 대기실 하단에 출력
    • 플레이어가 닉네임을 입력하고 이름 정하기 버튼을 누르면 관리자 대기실의 대기자 리스트에 추가
    • 관리자가 게임 시작을 눌렀을 때, 사용자의 페이지가 전부 이동

• 시나리오 진행에 필요한 값

  • 방 입장
    • 요청 : 방 번호(string)
    • 응답 : 성공/실패 메시지({isSuccess: boolean})
  • 닉네임 생성
    • 요청 : 닉네임(string)
    • 응답 : 성공/실패 메시지({isSuccess: boolean})

• 시나리오 진행하는데 필요한 조건

  • 사용자 닉네임 입력에는 기타 보안적인 공격이 들어오지 않는다고 가정한다.
  • 사용자가 브라우저를 껐다 켜지 않는다고 가정한다.
  • 중복된 닉네임을 가진 사용자는 들어오지 않는다고 가정한다.

• 시나리오를 완료했을 때 보장해야 하는 결과

  • 사용자가 닉네임을 설정하고 들어오면 관리자 대기실 페이지에 사용자의 닉네임들이 나타난다.
  • 관리자가 게임을 시작하면 사용자도 게임이 시작되어야 한다. (카운트 다운)

1. 로그인을 누르면 Oauth (네이버)로 로그인한다.
2. Oauth로 로그인하면 자동으로 로그인이 완료되고 방 선택 페이지로 이동한다.
3. 로그인된 사용자가 메인 페이지에서 방 만들기를 선택하면 방 선택 페이지로 이동한다.
4. 방 선택 페이지에서 방을 누르면 방 상세 페이지(퀴즈, 분석 탭이 있는 페이지)로 이동한다.
5. 관리자가 방을 열면 6자리 코드가 생성되고, 퀴즈 대기실 관리자 페이지로 이동한다.
6. 방이 열리면 해당 방으로 유저가 입장할 수 있고, 퀴즈 대기실 Player 페이지로 이동한다.
7. 관리자가 퀴즈를 생성할 수 있다.

• host
  • 메인 페이지
    • 방 만들기 버튼을 통해 로그인 페이지로 이동
  • 로그인 페이지
    • 소셜 로그인을 진행한다.
    • 로그인 성공 시 방 선택 페이지로 이동
  • 방 선택 페이지
    • 방을 만들면 방 리스트에 방의 정보가 추가된다.
    • 방 정보를 클릭하면 방 상세 페이지로 이동한다.
  • 퀴즈 생성 페이지
    • 템플릿을 편집할 수 있다.

• 테스트 목적
  • 소켓 구현으로 방 나눠지는지 확인
  • 방 열고 닫았을 때 정상 동작 확인(player 관점)
  • OAuth 로그인 제대로 이루어지는지 확인(로그인 여부에 따라 메인 페이지에서의 분기)
  • 방 생성 시 DB에 추가되었는지 확인
  • 방 선택 페이지에서 DB에 존재하는 방 리스트 올바른 출력
  • 방 번호 입력, 닉네임 생성, 방 생성 Input 유효성 검사

• 인메모리 내 열려있는 방의 목록
  • 방 번호
  • 방 이름
  • Host ID : oauth 계정 정보
• DB의 Host가 가지고 있는 방의 목록
• 방 번호
• 닉네임

• 방 내부의 퀴즈 꾸러미 설정에 대한 내용은 구현하지 않는다.
• 더미데이터 없음
• 방 상세 페이지에서 방 이름은 수정하지 않는 것으로 한다. (아직)
• 닉네임에는 대소문자 구분을 한다.
• 닉네임에는 영문 대소문자, 한글, 숫자만 입력 가능하다.
• 방 이름에는 특수문자 중 공백만 사용 가능하다.

• 로그인을 한 상태에서 방 만들기를 클릭하면 방 선택 페이지로 이동한다.
• 방을 생성하거나 선택하고, 방 상세 페이지로 이동한다.
• 방 상세 페이지에선 방 열기 버튼을 누를 수 있다.
• 방이 열리고 Player가 입장하면 해당 코드에 맞는 방으로만 입장한다.
• 닉네임 생성 성공 시 인메모리의 방 데이터에 닉네임이 들어가야 하고, 입장되어야 한다.
• 방 입장 성공 시 닉네임 생성 페이지로 이동한다.
• 방 생성 성공 시 DB에 삽입되고, 방 선택 페이지의 리스트에 추가된다.

오창영, 이재민, 이수정

1. host가 방 리스트 페이지에서 방을 선택하면 방 선택 화면으로 이동한다.
2. player들의 대기실 입장이 완료되면 host가 퀴즈를 시작한다.
3. 퀴즈가 시작되면 방에 속한 문제들이 설정된 제한 시간에 맞게 진행된다.
4. 각 퀴즈의 끝에는 결과 페이지(Player각자의 점수)가 존재한다.
5. host가 다음 퀴즈의 시작 버튼을 클릭하면 '3번'으로 이동한다.
6. 모든 퀴즈가 종료되면 최종 스코어 보드(10등 까지)가 출력된다.

• 테스트 목적
  • 소켓을 통해 원활한 퀴즈 진행이 되는지 확인
  • 방 생성 및 퀴즈 생성 시 설계된 DB에 잘 맞는지 확인

• host가 갖고 있는 방의 목록
  • 방의 title
  • 방의 id
• 방이 갖고 있는 퀴즈의 목록(package)
  • 퀴즈 title
  • 항목의 수
  • 제한시간
  • 점수
  • 패키지 내의 순서
• 퀴즈 진행에 필요한 각 퀴즈들의 정보
  • 정답
  • 퀴즈 title
  • 항목별 title
• player들의 점수

• 각 퀴즈의 제한 시간이 지나면 해당 문제의 결과를 보여준다.
• host는 각 문제가 끝난 뒤, 다음 퀴즈 버튼을 클릭해야만 다음 퀴즈로 넘어간다.
• 인게임 개발을 위한 package 더미 데이터를 넣고, 해당 package_id를 받아와서 인게임 개발을 진행한다.

• host가 다음 퀴즈의 시작 버튼을 누르면 host와 player가 다음 퀴즈의 화면으로 넘어간다.
• 퀴즈 생성 페이지에서 이미지 업로드를 하면 서버에 저장된다.

이수정, 조찬기

• 참석자가 적은 관계로 화요일 스크럼에서 각자 나뉜 스프린트 확인
• 수요일에 회의실 대여 (18:00 ~ 19:30)
  1. 팀 내부 기술 공유
  2. 소켓 통신 100명까지 스트레스 테스트.

• 조찬기 (DAO 객체)

1. 큰 틀 잡기
2. 중요 정보 .env로 빼기

화요일(2019-12-03) 스크럼 이후에 전체 구조 검토받기.

• 조찬기
• player가 선택한 항목을 서버로 전송하고 총 스코어에 대한 결과값 받기
  • API로 제작 (post)
  • 방 번호, 닉네임, 현재 퀴즈 번호, 선택한 항목을 보내면 정답인지, 추가되는 점수, 합계점수를 return
• player의 퀴즈 최종 결과 페이지
  • 자신의 등수와 최종 점수 표시. (1~3등은 메달 표시)
    • API로 제작 (get)
  • Top 10에 대한 정보는 소켓에서 전송함. (end신호)
• player 새로 고침 및 창 닫기할 때 경고창 띄우기
• 이수정
• host에서 더 이상 퀴즈가 없을 때 다음 퀴즈 버튼 > 최종 결과 등으로 바꾸기

• 이수정
• 모달이 추가되는 부분
  • 방 열때 (방을 여시겠습니까?)
  • 퀴즈 편집 후 저장할 때 (퀴즈를 저장하겠습니까?)
  • 퀴즈 편집에서 나갈 때 (나가면 저장되지 않습니다.)
  • ...

• 조찬기
• 최초 가입자의 회원 정보 (email, id) 저장

• 이수정
• host가 가지고 있는 방들이 출력
• 방 추가 시 DB에 방 추가

• 이수정
• 방에 저장한 퀴즈 list 출력
• 퀴즈 편집 버튼

• 오창영
• 퀴즈를 저장하면 DB에 저장
  • (기존에 존재하는 문제 변경시 update, 새로운 문제 생성시 insert)
• 퀴즈 편집 페이지에 들어왔을 때 기존 퀴즈가 있으면 그대로 가져오기

• 작업이 일찍 끝나는 사람이 있으면 담당할 것

1. 완전한 한글 아니어도 닉네임 검사 통과(2글자부터 통과)> 데모 때 원하는 사람이 많았음.
2. 퀴즈가 진행중인 방에 입장시 (진행중이라 입장이 불가능합니다. 창)
3. 페이지에 대한 비정상 접근 막기
   • 로그인 안한 사용자 접근 막는 기능
   • 있는 URL 이라도, property 없어서 에러 나는 경우 에러 페이지로 보내기
4. 없는 URL로 접근했을 때 404 페이지
5. reducer action 타입 리팩토링
6. PropType이 적혀있지 않은 파일 리팩토링 (airbnb lint에 규칙에 따라 proptype을 적어주세요)

정상접근에 대한 모든 시나리오 구현

방 입장

1. (host) 네이버 아이디로 로그인
2. (host) 유저에게 딸린 방 list 페이지가 출력됨.
3. (host) 방 list 중 방을 클릭하면 해당 방에 대한 정보(퀴즈)를 볼 수 있음.
4. (host) 방 상세 페이지에서 방을 열면 게임 진행으로 넘어감.

게임 진행

1. (player) 생성된 방 번호와 닉네임을 입력하고 입장. 게임시작까지 대기
2. (host) 게임 시작 버튼을 눌러 시작.
3. (player) 매 퀴즈마다 제한된 시간 내에 퀴즈를 풀이.
4. (host) 퀴즈 제한 시간보다 빨리 끝내는 경우 다음 퀴즈 버튼을 누름.
5. (host) 마지막 퀴즈가 끝난 후 10등까지 등수 표시
6. (player) 마지막 퀴즈가 끝난 후 자신의 점수와 등수 확인.

퀴즈 편집

1. (host) 방 상세 페이지에서 퀴즈 편집 버튼 클릭
2. (host) 기존의 퀴즈가 있다면 기존 퀴즈를 그대로 불러오고 없다면 새로운 상태 출력
3. (host) 저장 버튼을 누르면 그동안 만들었던 퀴즈가 저장됨.

• 현재 구현된 페이지(뷰)에 대한 정상 동작 확인

• 데이터베이스 data (DB 정보는 클라우드 private 폴더에 존재)
  • dummy데이터 삭제.

• 비정상 접근은 없다고 가정한다.
  • 퀴즈 중간에 Player가 입장
  • 로그인 안한 사용자가 HOST 페이지로 접근
  • 퀴즈 진행 페이지에 대한 URL 직접 접근(nickname 페이지, 방번호 페이지)

• HOST 정상 동작 체크
  • 로그인 > 방 리스트 페이지 > 방 상세 페이지 (퀴즈 시작) > 퀴즈 대기실 > 퀴즈 진행
  • 로그인 > 방 리스트 페이지 > 방 상세 페이지 (퀴즈 편집) > 퀴즈 편집 페이지 (퀴즈 편집)
  • 로그인 > 방 리스트 페이지 > 방 추가 > 리스트 페이지에 새로운 방 추가
• Player 정상 동작 체크
  • 퀴즈 진행 시 항목 선택에 따른 결과 출력
  • 퀴즈 진행이 끝나면 본인 등수 및 TOP 10 출력

오창영, 이수정, 조찬기

• 버전 1.0 배포
• 수요일 회의실 대여 (18:00 ~ 19:00)
  • 팀 내부 기술 공유

• (현재는 jwt 토큰이 존재하면 바로 이동하도록 구현)
• 네이버 아이디로 로그인 검수 완료

• 게임 결과 페이지를 별도의 페이지로 추출하기

• Dashboard 0명일 때 처리 : 오창영
• fetch 받아올 때 loading 창 : 오창영
• 닉네임 입력
  • 불완전한 한글/2글자 통과
  • slash (/) 입력 못하도록 막기 (주소로 판단되는 현상이 있음)
• [Host] 퀴즈 페이지의 선택지 레이아웃 Player 와 다르게 바꾸기.
• 방 이름이 게임을 시작한 대기실에 출력되게 하기

Host가 만든 퀴즈로 Player와 플레이한다.
비정상 입장에 따른 접근을 막는다. (로그인 안한 사용자)
네이버 아이디로 로그인 검수를 마쳐, 로그인 가능하도록 한다.

[HOST] 방 선택 페이지

1. 네이버 아이디로 로그인
2. 로그인한 유효한 사용자일 때만 접근
3. 기존의 방을 삭제할 수 있다.
4. 방 이름에 공백을 입력했을 때, 추가되지 않도록 한다.

[HOST] 방 상세 페이지

1. 방 선택 페이지에서 방 상세 페이지로 이동
2. 방에 맞는 퀴즈 list가 출력된다.
3. 퀴즈가 없으면 시작 버튼이 비활성화 된다.
4. 퀴즈가 있으면 시작 버튼이 활성화 된다.

[HOST] 게임 진행

1. 방 상세 페이지에서 게임 시작을 누른다.
2. 퀴즈가 없으면 시작되지 않는다.
3. 퀴즈가 있으면 게임이 시작되어 대기실로 이동한다.
4. 처음 생성되는 방은 111111이 아닌 랜덤한 방으로 출력되도록 로직을 변경한다.
5. 참여 인원이 1명 이상이여야 게임이 시작된다.
6. 참여 인원이 0명이 되면 게임이 중단된다.
7. 풀이 중인 인원에 맞게 n명이 풀이 중 문구가 출력된다.
8. 풀이 중인 인원이 0명이면(참여 인원이 전부 정답을 선택하면) 다음퀴즈로 넘어간다.
9. 맨 마지막 퀴즈가 끝난 후에는 '다음퀴즈' 버튼이 아닌 '최종결과' 버튼이 출력된다.

[Player] 게임 진행

1. 퀴즈가 진행되고 있는 방에는 입장할 수 없다.
2. 최종 결과 페이지가 나온 이후 페이지를 변경할 때 alert가 출력되지 않는다.
3. 최종 결과 페이지에서 나가기 버튼을 누르면 메인으로 이동한다.

[HOST] 퀴즈 편집

1. 방 id와 일치하는 정보를 불러온다.
2. 정보가 없다면 새로운 빈 퀴즈를 추가한다.
3. 나가기 버튼을 누르면 방 리스트 페이지로 나갈 수 있다.
4. 저장하기 버튼을 누르면 데이터베이스로 퀴즈 정보가 저장된다.
5. 퀴즈 삭제 버튼을 누르면 퀴즈셋에서 선택한 퀴즈가 삭제된다.
6. (옵션) 썸네일을 드래그해서 순서를 바꾼다.

• 모바일에서 글자가 깨지지 않는지 UI 확인
• Host가 만든 퀴즈에 대한 게임 정상 동작 확인

• 데이터베이스 DATA
  • User
  • Quizset
    • Quiz
    • Item
  • Room

• 퀴즈가 없으면 게임 시작 불가

• 로그인하지 않았으면 Host 페이지에 접근이 불가능
• 퀴즈가 없으면 게임 시작 불가
• 퀴즈가 존재하면 방에 맞는 게임 시작
• 퀴즈가 진행된 방에는 입장 불가
• 여러 방이 동시에 실행해도 방 마다 설정한 게임이 동작

오창영, 이수정, 조찬기

• (수요일 ~)
  • 최종 배포
  • 프로젝트 소개 영상 제작
    • 영상 시나리오는 어떻게 할까
  • 프로젝트 소개 내용 정리
  • README 작성

• 퀴즈 편집 페이지 이미지 삭제 버튼
• 대시보드 최고점이 0점일 때 그래프 채워져 있는 현상 제거
• 방 상세 페이지, 방 편집 페이지에도 뒤로가기 버튼 있으면 좋을듯
• 퀴즈 편집 페이지 점수, 시간 선택

• 방 번호 입력 Input maxLength 설정, Input type number 변경
• 닉네임 입력 페이지에 유효하지 않은 닉네임 안내
• 닉네임 입력 Input maxLength 설정
• 방 번호, 닉네임 입력에 slash(/) 입력 못하도록 막기 (주소로 판단되는 현상이 있음)
• Host 접근 검사하는 미들웨어 (user.js, edit.js, room.js의 GET /quizset/:roomId 부분)
• quizset 가져오는 api user.js로 변경

• 퀴즈 페이지에서 이미지 없는 경우 기본 이미지 출력(로고)
• nginx proxy 설정을 위한 api 호출 주소 변경
  • /api/~ 형태
• SubResult에서 정답 표시 변경
• 호스트가 대기자 기다릴 때 뒤로 가기(나가기) 버튼 필요함 - 모바일 위해서
• Host 인게임에도 중간 결과 나올 때 게임 끝내는 버튼 있으면 좋을 거 같음(카훗은 있음)
• Host 페이지 이미지 비율에 맞게 출력되도록 변경

• 다크모드 대응
• Edit transaction으로 리팩토링 해보기
• Player 게임 로딩할 때 랜덤 명언 출력으로 바꾸기
• 방 이름이 게임을 시작한 대기실에 출력되게 하기
• 모든 플레이어가 정답을 선택하면 자동으로 다음 퀴즈로 넘어가기
• Player 입장 후 기다릴 때 몇명이 접속했는지 등을 표시