배포 서버에 설계한 데이터베이스를 구축한다.

현재는 임시로 배포한 단일 서버에 데이터베이스를 구축, 추후 데이터베이스 서버가 변경될 수 있음.

데이터베이스 설계 이미지

퀴즈 진행 페이지를 뒤로가기 등을 통해 벗어난 뒤 기존에 등록되어있던 window 이벤트가 해제되지 않아 퀴즈 진행 페이지가 아니어도 새로고침을 했을 때 경고창이 뜨는 현상이 있음.

버그 발생 과정

1. 퀴즈 진행 페이지를 뒤로가기로 벗어난다.
2. 퀴즈 진행 페이지가 아닌 페이지에서 새로고침을 한다.
3. 변경사항이 저장되지 않을 수 있습니다 경고창 발생

예상 해결 방안

페이지가 unload될 때 등록해두었던 이벤트 리스너를 삭제해 해결할 수 있을 것이라고 예상됨.

window.addEventListner('unload', () => removeEventListner~);

기존에 rooms.js 파일을 inMemeory.js 파일로 감싸기

apis/game.js 에서 직접 배열에 접근했던 부분을 rooms.js의 메소드로 변경하기.

Host와 Player를 구분하여 페이지를 제작한다.

Host

• 페이지 상단에 점수 출력 텍스트 출력
• 페이지 하단에 상위 10명의 대시보드 출력

Player

• 페이지 상단에 플레이어 개인순위 출력
• 하단에 상위 10명의 대시보드 출력

하단에 출력되는 대시보드는 동일한 대시보드를 사용함

profileObject에서 이메일 정보를 가져와 쿠키에세팅

key : email
value : user's email

• jwt 토큰 설정 api에 이메일 쿠키 추가

원활한 프로젝트 작업을 위해 초기 폴더 구조를 세팅하고, 코드 스타일을 맞추기 위한 lint 설정 등의 작업.

• 폴더구조 세팅
• 기본적으로 필요한 모듈 설치
• 린트 설정

host의 dashboard에 하드코딩되어있던 순위를,
소켓에서 받아온 실제 순위로 변경.

• HostGameRoom의 GameResult컴포넌트에서 게임 결과 데이터 prop으로 넘김
• 파편화 되어있는 dashBorad 하나로 합치기

• 배포 서버 스펙 정하기.
• 배포완료.

다음 API를 post 형태에서 get 형태로 변경합니다.

사유: post는 서버의 변경사항이 있을 때, 민감한 정보를 보낼 때 사용하나 아래 api들은 여기에 해당되지 않으므로 형태를 get으로 변경합니다.

• 유효한 방의 이름을 체크하는 /checkRoomNumber
• Player의 유효한 닉네임을 체크하는 /setNickname
• 네이버 아이디로 로그인하는 작업을 처리하는 /setJWT

임시서버에 3주차 배포를 진행합니다.

• 네이버 oauth 로그인시 받아온 access_token 분리.
• 토큰으로 네이버 프로필 API에서 정보 요청
• 받아온 정보로 JWT 생성. 쿠키에 설정
• 로그인 완료 후 이동할 페이지로 redirect

FlexibleInput.defaultProps = {
  placeholder: 'placeholder',
  mobileFontSize: '1.5rem',
  callback: undefined,
};

FlexibleInput.propTypes = {
  maxLength: PropTypes.number.isRequired,
  mobileFontSize: PropTypes.string,
  placeholder: PropTypes.string,
  callback: PropTypes.func,
};

• maxLength보다 많이 입력할 경우 입력을 막음
• 글자를 입력할 때마다 남은 글자 수 출력
• callback을 넘겨주면 인자로 value를 넘겨 callback 실행
• mobileFontSize에 따라 글자 요소들 전부 변경 가능
• placeholder 변경 가능
• focus시 placeholder 안 보이게 만들기
• blur(focusOut)시 남은 글자 수 안보이게 만들기
• Enter 키 막기

Player 대기실에서 게임 대기 중 화면이 아니라, 게임이 시작되는 카운트다운 화면이 먼저 렌더링 되는 현상이 있음

방 생성 API 체크 사항

• post 형태
• 방 이름에 대한 유효성 검사를 실시한다.
  • 최대 26자까지 가능
  • 한 Host는 동일한 방의 이름을 가질 수 없음

    DB에서 userid + title에 대해 unique 설정을 해줘야함. client에서는 막았습니다.

• 유효성 검사를 통과할 경우 요청에 따른 새로운 방을 DB에 추가한다.
• 유효성 검사를 통과하지 못할 경우 에러메시지를 전송한다.

6주차 스프린트 추가 기능 구현

• 기존에 존재하던 방을 삭제할 수 있다.
• 방 이름에 대한 유효성 검사 추가
  • 최소 1자 이상, 최대 26자 이하

관련 이슈: #162

EditPage를 리팩토링합니다.

• 해상도가 변해도 레이아웃이 깨지지 않게 수정합니다.
• state 저장하는 방법을 코드리뷰를 반영하여 리팩토링합니다.(불필요한 리렌더링 방지)

상위 Issue #38

Dashboard 제작

구성

• 등수
• 닉네임
• 점수

등수

• 1등은 금메달, 2등은 은메달, 3등은 동메달 이미지 출력
• 4등부터 10등까지는 텍스트로 등수 출력
• 동점자에 대해서 공동 등수 적용

닉네임

• 지정된 영역을 초과할 경우 text-overflow 속성을 사용하여 ...으로 표시

점수

공통

• 하위 등수로 갈수록 그래프 영역이 그라데이션 효과로 점점 어두워짐.
• 지정된 영역을 초과할 경우 text-overflow 속성을 사용하여 ...으로 표시

모바일

• 그래프 영역과 점수 영역 합쳐서 표시

데스크탑

• 최고점수를 100% 기준으로 플레이어들의 점수를 %로 계산하여 그래프 영역을 채움
• 점수 그래프 안에 점수 텍스트 출력
• 점수 그래프에 애니메이션 효과 적용(왼쪽에서 시작하여 그래프의 영역이 넓어짐)

• 로그인 되어있으면 관리자 페이지로 이동
• 로그인 되어 있지 않으면 로그인 페이지로 이동

퀴즈 한 문제가 끝날 때 마다 나오는 그래프를 제작

• 4개 이상 그래프도 출력 가능하게 구현
• colors.ITEM_COLOR의 길이를 초과하는 아이템이 들어갈 경우 'salmon' 색으로 그래프 출력
• 애니메이션 효과 적용(2초)

README에 티타임 때 얘기했던 부분 추가

• 프로젝트에서 중요한 부분을 자세하게 기술
  • 프로젝트 한줄 요약
  • 프로젝트 사용 예시
• 사용하는 기술에 대한 정리
• 각자 담당하고있는(담당했던) 기능들 LIST 연결

프로젝트를 진행하면서 바뀐 작업 목록이 존재합니다.

플레이어 입장에서 문제의 남은시간 표시하는 부분 삭제.
게임 중간에 들어오는 부분 삭제

front

• 문제 진행 view 구현
• 문제 내용 및 버튼 내용을 서버에서 받아온 대로 출력

back

• 게임 진행중인 방의 퀴즈 문제 세트 정보를 가져오는 API 구현
  • get 요청으로 구현

실시간 퀴즈 진행 Host Page를 구현합니다.

오창영(@ocy1011)님이 Host와 Player 인게임 페이지의 통일성을 위해 레이아웃 디자인 작업을 다시 맡아 진행하셨습니다.

체크사항

• 소켓 통신
  • Host가 다음 문제를 클릭하면 Player도 다음 문제가 출력된다.
  • 각 문제의 문항에 맞는 제목과 내용이 Player와 동일하게 출력된다.

    각 문제별 남은 제한 시간이 Player와 동일하게 출력되는 기능은 #74 의 변경 사항에 따라 삭제되었습니다.

• 페이지 View
  • 상단에는 총 문제의 개수와 현재 문제의 번호를 출력한다. (current/total)
  • 중앙에 Host가 저장한 이미지 또는 기본 이미지를 출력한다.
  • 중앙 상단 우측에는 다음 퀴즈로 강제 이동할 수 있는 버튼을 출력한다.
  • 하단에는 문제에 맞는 문항을 출력한다.
  • 각 문제별 남은 제한 시간을 중간 좌측에 출력한다.
  • Host는 문제가 끝날 때 마다 문항별 Player의 선택 현황을 띄운다.
    • 하단에는 문항에 맞는 버튼 모양이 출력된다.
    • 상단에는 문제에 맞는 제목이 출력된다.
    • 중앙에는 Player의 항목 선택 차트가 출력된다.
    • 중앙의 우측 상단에는 다음 퀴즈로 넘어가는 버튼을 출력한다.
      

1. 404 페이지에 대한 처리
2. url로 직접 접근 시 prop가 없어서 생기는 오류

• 404 페이지 구현
• cannot find property 에러 해결
• 해결 방법을 모든 페이지에 적용

전체 테이블을 관리하는 Manager 객체 생성

• connection pool을 관리
• 쿼리(문자열)을 입력받아 수행해주는 공통 메소드
  • query(query, params)

각 테이블의 CRUD를 담당하는 객체 생성 (메소드 없이 구조만)

• 1. user
• 2. room
• 3. quizSet
• 4. quiz
• 5. item
• 6. analysis

팀에서 검토

• 검토 후 이상 없음

• 네이버 아이디로 로그인 버튼 생성
• 토큰 검사 후 로그인 되어있으면(토큰이 있음) 방 선택 페이지로 이동)

이전 버전에서는 게임 대기실이 어느 방으로 들어가든 똑같이 들어갔지만,
이번 버전대에서는 Host가 연 방에 맞게 들어가도록 업데이트 합니다.

체크 사항

• 같은 방에 들어온 Player만 Host 페이지에 출력
• Host가 방을 열었을 때 인메모리 내에 존재하지 않는 방을 생성, 방 번호 Return
• Host가 방의 퀴즈를 시작하면 해당 방의 Player 게임만 시작
• Player가 방을 나갔을 때 player list에서 해당 player 삭제
• Host가 방을 나갔을 때 해당 방에 연결된 player 연결 종료

ver 1.1

단일 방 상세 페이지의 동작에 따른 방 정보와 관련된 백엔드 동작을 구현한다.

체크 사항

• 방에 대한 정보를 요청하면 요청에 따른 값(퀴즈 꾸러미)을 전송한다.
• 방 이름을 수정하면 수정사항이 반영된다.

상황 1

1. PC 방 만들기 실행
2. 모바일로 번호, 닉네임 입력 후 입장

PC 관리자 페이지에 모바일 유저가 접속한 것이 나타나지 않음.
관리자가 게임 시작을 눌러도 모바일 페이지에서 반응 없음

상황 2

1. 모바일 방 만들기 실행
2. 같은 모바일 기기, 브라우저에서 번호, 닉네임 입력 후 입장

모바일 관리자 페이지에 모바일 유저가 접속한 것이 나타나지 않음.
관리자가 게임 시작을 눌러도 모바일 페이지에서 반응 없음

이유 분석

소켓을 보내는 것을 localhost로 보내서 문제 발생

• player 브라우저에서 새로 고침을 막음
• player 브라우저에서 창 닫기할 때 경고창 띄우기

player가 선택한 항목을 서버로 전송하고 총 스코어에 대한 결과값을 받는 post 방식 API

중간 결과 페이지

1. 하단에 지금까지 점수의 합계 표시
2. 직전 결과를 적용해 정답, 오답에 따라 다른 페이지 출력.
3. 정답인 경우 추가되는 점수 보임

• API 구현.
• 결과 값에 따라 타이머 종료 후 중간 결과 페이지 출력.

Related : #74 #75

기존에 대기실, 로딩중, 게임 진행으로 나뉜 페이지 를 하나로 통합.
통합 후 각각 컴포넌트를 render 하는 구조로 변경

• 진행 대기 페이지
• 로딩중 페이지
• 퀴즈 페이지
• 퀴즈 후 중간결과 페이지

socket.js의 handleOpenRoom에서 inMemory의 getQuizset 관련 메소드 호출

inMemory의 getQuizset 메소드에서 dbManager에서 가져온 raw 쿼리를 가공해 JSON으로 넘겨줌
(형태는 기존 roomTemplate에 있던 모양과 동일하게 가공)

async await에 주의.

• rooms.getQuizset 메소드 구조 만들기
• 더미 데이터 db에 추가하기.
• dbManager.quizset의 getQuizset 메소드 만들기.
• dbManager의 메소드를 rooms의 메소드에서 호출
• 방 리스트 페이지와 연동해서 quizset을 가져옴

ver 1.1

• 페이지 출력
  • 상단 중앙 게임 로고, 상단 좌측 방번호 출력
  • 상단 우측 게임 시작 버튼 출력
  • 하단 방번호 및 페이지 주소 출력
• 소켓 통신
  • 상단 게임 시작 버튼을 눌렀을 때 Player 대기실의 화면에서 게임 카운트다운 프로그래스바가 출력된다.
  • Player가 접속하면 유저의 닉네임이 추가된다.
  • Player의 전체 접속 인원이 출력된다.

• client_id 와 redirect_uri 등록
• 인증 시작하기
• 프로필 조회 오픈 API 실행

front

• 페이지 구성

  • 방 번호를 입력하는 input tag
  • 입장 button
  • copyright footer

• 입장할 수 없는 경우 (오류) 에러 메시지 출력

  • snack bar로 구현

back

• 방 번호 검사 API

  • 방 번호 input Validation을 실행한다.
  • 번호의 방이 열려있는지 여부를 boolean 형태로 가져온다.
  • 검사를 통과하면 닉네임 설정 페이지로 이동한다.
  • 검사를 통과하지 못하면 front에 에러메시지를 출력한다.

• 방 번호 검사

  • 6자리, 숫자로 이루어져있는지 검사

• 특정 번호의 방의 열려있는지 검사

상세 방 페이지 내 네비게이션 바 중 퀴즈 탭 메뉴 컴포넌트를 구현합니다.

• 방에 소속된 전체 퀴즈 데이터를 받아 리스트 형태로 출력한다.
• 우측 상단에는 퀴즈 편집 버튼이 있으며, 버튼을 누르면 퀴즈 편집 페이지로 이동한다.
• 퀴즈는 저장된 순서대로 출력된다.
  • 퀴즈 list 출력 값
    • 각 퀴즈의 title
    • 각 퀴즈의 항목 수
    • 각 퀴즈의 제한 시간
    • 각 퀴즈의 점수

상위 컴포넌트: #35

front

• 페이지 구성

  • 닉네임을 입력하는 input tag
  • 입장 button
  • copyright footer

• 닉네임 validation 실패시 (오류) 에러 메시지 출력

  • snack bar로 구현

back

• 방 입장 API

  • 닉네임 input Validation요청을 실행한다.
  • 검사를 통과하지 못하면 front에 에러메시지를 출력한다.
  • 검사를 통과하는 경우 게임 대기실 페이지로 이동

• 닉네임 검사

  • 20byte 로 이루어져있는지 검사 (한글 10자, 영어 20자)
  • 입장하려고 하는 방에 그 닉네임이 이미 사용 중인지 검사

유저에게 경고 및 안내 시 출력할 Modal창의 컴포넌트화를 진행해 모든 Modal 창이 동일한 형태로 출력할 수 있도록 구현합니다.

관련 이슈

아래 이슈들은 Modal 컴포넌트가 추가되어야하는 이슈입니다.

#35 #33 #38

상황

네이버 아이디로 로그인 후, 방 리스트 페이지가 나타나기 전 404페이지가 잠깐 나타남.

해결 방안

1. 404 페이지에서 메시지가 잠시 늦게 나타나도록 변경

ver 1.1

방 선택 페이지에서 방을 누르면 나타나는 방 상세 페이지의 프론트엔드 동작을 구현한다.

체크 사항

• 시작하기 버튼 클릭
  • 퀴즈가 없는 경우 시작할 수 없도록 한다.
  • [ ] 시작하기 버튼을 클릭하면 퀴즈를 시작할 것인지 확인하는 Modal 창이 출력된다.

    현재 구현된 Modal 컴포넌트가 한 페이지에 모달이 여러 개 일 때 동시에 출력되는 이슈가 있어 해당 Modal 기능은 필수적인 것이 아니라고 판단해 삭제되었습니다.

  • 유저가 시작하기를 선택하면 Host의 퀴즈 대기실을 띄운다.
• 상단 Navigation bar 클릭
  • 퀴즈 탭을 클릭하면 퀴즈 꾸러미 리스트가 렌더링 된다.
  • 분석 탭을 클릭하면 퀴즈 꾸러미의 분석 내용이 렌더링 된다.
• 상단 헤더 출력
  • 상단 좌측에는 방 이름이 출력된다.
  • 상단 좌측의 방 이름은 수정이 가능하게 한다.
    • 우측에 편집이 가능한 버튼 추가
    • 클릭하면 편집 Modal 출력

front

• 점수 및 결과 표시 (맞았는지 틀렸는지)

Related #74

props가 넘어가지 않았음..

• 헤더
  • 취소 버튼 클릭
  • 저장 버튼 클릭
    • 미완성된 템플릿이 있다면 "미완성된 퀴즈가 있으면 게임을 시작할 수 없습니다. 그대로 저장하시겠습니까?" 모달 -> 취소/저장
    • 전체 퀴즈 등록(서버로 전송)
• 네비게이션(작업 목록)
  • 등록된 퀴즈 대표 이미지 출력
  • 드래그 앤 드랍으로 순서 변경
  • 이미지 클릭 시 해당 퀴즈 상세 편집 화면 오른쪽 섹션에 출력
  • 이미지 오른쪽 상단 취소 버튼 클릭하여 등록된 퀴즈 삭제
  • 템플릿 추가 버튼 클릭
    • 클릭 시 템플릿 선택 모달
    • 취소/저장 버튼 클릭
• 섹션
  • N지 선다 항목 설정
    • 채워지지 않은 항목은 다르게 표현(색x, 체크박스x)
    • 각 항목의 오른쪽에 체크 박스(정답 체크 - 다중 체크 가능)
  • 문제 설명, 내용 추가
    • 타이틀 입력
    • 제한 시간 입력
    • 이미지 등록
    • 점수 입력

• 페이지 구성

  • 방 만들기 버튼
  • 방 리스트
  • 방 만들기 모달

• 방 만들기 로직

  • 방 만들기 버튼을 누르면 방 만들기 모달 등장
  • 방 만들기 모달에서 방 이름 입력
  • 방 이름 입력 후 확인 버튼을 누르면 방 생성
  • 생성된 방이 방 리스트에 추가

6주차 스프린트 기능 추가

• 방 이름에 공백을 입력했을 때, 추가되지 않도록 한다.
• 방 삭제 버튼을 만들고, 해당 방을 삭제했을 때 삭제되도록 한다.

관련 이슈: #162

• 메인페이지 하단에서 애니메이션으로 등장
  • 3초 동안 등장하였다가 사라짐
• onToast 함수를 실행할 때마다 애니메이션을 재시작.

• 로딩 이미지 애니메이션
• 하단 닉네임 출력
• Host가 게임 시작 신호를 보내면 카운트 다운

• 점수에 따른 순위 정렬

  • 점수를 기준으로 내림차순 정렬
  • 동점자가 있을 경우 글자를 기준으로 오름차순 정렬
  • 동점자는 공동 순위 적용

• 플레이어 개인 점수, 순위 전송

  • 플레이어에겐 개인 점수 순위 데이터를 전송한다.

• Player가 페이지를 새로고침 했을 때 연결은 끊기지만 inMemory 내에서 그대로 저장되어있음
• Player가 페이지를 나갔을 때 연결은 끊기지만 unmount 이벤트가 아니기 때문에 inMemory에 그대로 저장되어 있음.

예상 해결 방안

• 사용자가 페이지를 새로고침 또는 나가기를 하는 경우, 안내 후 소켓 통신을 끊고 /(메인페이지)로 넘어가야함 (beforeunload 이벤트 활용)
• 소켓에서는 연결이 끊기는 유저에 대한 검사가 이뤄져야 함.

//연결시 
this.roomNumber = ?
this.nickname = ?

//연결 해제시
removePlayer(this.roomNumber, this.nickname)

dbManager

• dbManager 객체에 유저를 db에 저장하는 메소드 구현.

Issue

• 정상적인 로직으로는 방 번호 입력 -> 닉네임 입력 순서로 입장해야 하지만 url을 통해 시도할 수 있다.

To do

• 닉네임 페이지 url을 통해 들어가면 첫 페이지로 redirect

자신의 등수와 최종 점수를 받아오는 get방식의 API

Top 10에 대한 정보는 소켓에서 전송함. (end신호)

• get방식 API 제작
• 자신의 등수, 점수를 표시하고 1~3등의 경우 메달을 표시함
• 소켓으로 받아온 top 10의 정보를 표시함