boostcamp-2020 / project18-b-web-duxit

🎲 야찌⛵️ 팀의 웹 기반 스토리텔링 보드게임 <Duxit> 🐤

DUXIT : 웹 기반 스토리텔링 보드게임 🃏

DUXIT은 여러분의 ⭐️ 스타⭐️ 를 먹고 삽니다.

이슈 PR 언제나 환영입니다. 🙌

공개 주소 ✨

배포 URL : https://duxit.ga/
데모 영상 : https://bit.ly/duxit-데모영상

DUXIT은 어떤 게임인가요? 🐥

• DUXIT은 스토리텔링 보드게임 DIXIT을 웹으로 옮긴 온라인 게임입니다.
• 번갈아가면서 각 플레이어는 스토리텔러가 되고, 자신이 가지고 있는 6장의 카드 중 하나를 고릅니다. 고른 카드에 대한 주제도 함께 정합니다.
• 스토리텔러를 제외한 플레이어들은 자신이 갖고 있는 6장의 카드 중 주제와 가장 유사한 카드 한 장을 고릅니다. 모든 플레이어가 선택한 카드가 한번에 공개되면, 스토리텔러를 제외한 플레이어는 스토리텔러가 어떤 카드를 냈을까?를 추측하며 한 장의 카드를 고릅니다.
• 이후 각 플레이어가 선택한 카드의 주인이 공개되며 정해진 점수산출 방식에 의해 말을 움직입니다. 가장 먼저 결승점에 도달하거나, 카드가 소진되었을 때 가장 멀리 말을 움직인 사람이 승리하는 게임입니다.
• DUXIT은 최소 3인, 최대 6인까지 참여 가능합니다.

Team. YAHTZEE 🎲

WIKI link!

J035 김민성	J060 김해람	J109 안샛별	J208 최진혁
@Front-line-dev	@ramram1048	@sbyeol3	@jinhyukoo

🙌 든든한 멘토님인 크롱과 함께 합니다 🦖

Development Stack ⚙️

division	stack
Web
Front-end
Back-end
Production
Code Management
Formatting

project18-b-web-duxit's Issues

음성채팅은 뭐로할지 기술 스택 고민??

💁 설명

기술스택 생각 안해본것같은데 정해보면 좋을것같네요~
일단 Web Audio 던져봅니다~ https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API

Fetch 에러처리를 try/catch 형식으로 변경

에러처리를 하려면 try/catch 로 비동기 로직을 감싸거나, Promise.catch 를 사용해서 해보시죠.
그러면 더 코드가 명시적으로 에러를 어떻게 만드는지 구분해서 표현하는 것이라 좋기도하고요.

Originally posted by @crongro in #54 (comment)

[BUG] 백엔드 NODE_ENV 설정 안되어 있음

🚒 버그 설명

팀원이 이해할 수 있도록 자세하게 구체적으로 작성합니다. 담당자도 함께 할당해주세요.

백엔드 스크립트에 mode 옵션이 안되어있음

✔️ 기대하는 결과

구체적으로 어떤 결과가 나오게 수정해야 하는지 작성합니다.

dev, prod 각 모드에 맞게 실행되도록 수정

🗒 참고자료

보여지는 에러인 경우 스크린샷도 함께 첨부합니다.

카드 선택시 움직이는 애니메이션

💁 설명

자신의 카드, 혹은 남의 카드에 마우스를 가져다 뒀을 때 적절한 애니메이션이 나와야 한다

📑 체크리스트

구현해야 하는 이슈 체크리스트

• 내 카드를 선택할 때 마우스를 올리면 카드 크기가 약간 확대 되면서 위로 올라간다
• 스토리텔러가 카드를 고를 때 마우스를 올린 카드와 같은 순번의 뒤집어진 카드가 다른 사람들에게 확대 되면서 위로 올라가게 보여야 한다
• 내가 다른 사람의 카드를 고를 때 마우스를 올리면 (카드 주위에서 빛이 나야 한다) <- 바뀔 수 있음

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

처음에는 :hover를 사용하면 된다고 생각했는데 스토리텔러가 카드를 고를 때에도 똑같은 상황이 발생해야하니 약간 다른 방식으로 구현해야겠다

음성 채팅 연결

💁 설명

보다 즐거운 게임 진행을 위한 음성 채팅 기능 구현하기

📑 체크리스트

구현해야 하는 이슈 체크리스트

• WebRTC를 활용한 음성 채팅 기능
• 다수의 유저 사용할 수 있는 음성 채팅 기능 구현

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

로그용 데이터베이스 탐색

💁 설명

일정하게 구조화된 데이터를 쌓아야 하는 프로젝트가 아니기 때문에
로그를 쌓을 수 있는 데이터베이스를 찾아서 정해봅시다!

📑 체크리스트

구현해야 하는 이슈 체크리스트

• 로그 쌓기에 적합한 DB를 찾아봅니다.

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 관련 자료는 슬랙이나 코멘트로 달아주세요

투표시간 화면 만들어두기 (2주차)

💁 설명

투표 기능을 제외한 부분을 2주차에 완성한다.
백로그 65, 72번

📑 체크리스트

구현해야 하는 이슈 체크리스트

• 화면 상단에 주제어가 보여야한다.
• 화면 상단에 진행바를 통해 남은 시간을 확인할 수 있어야 한다.

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 2주차 단계에서는 오리 아바타라던가 카드같은게 필수사항이 아니게 되어있어요~~

다른 플레이어들이 카드 고를 때 텍스트 표현

💁 설명

백로그 54번

다른플레이어 카드선택 대기화면
카드를 이미 고른 플레이어
화면 상단의 강조 텍스트를 통해
주제를 확인할 수 있어야 한다.

📑 체크리스트

• 텍스트 표현
• 투표시간이 되었을 때 텍스트가 사라져야 함

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

백로그 39번과 같은 내용이 아닌가? 싶다

게임 시작 기능 구현

💁 설명

플레이어가 모두 '준비 완료' 상태가 될 경우 알림 메세지와 함께 게임이 시작될 수 있게 로직을 구현한다.

📑 체크리스트

구현해야 하는 이슈 체크리스트

• 모든 유저에게 5초간 알림메세지 출력
• 메세지 출력 이후 유저들에게 게임 화면 보여주기

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 유저들 간 동기화를 고려하여 코드를 짜면 좋을 것 같습니다.

이야기꾼에게 메세지 출력하기

💁 설명

이야기꾼이 된 유저에게 이야기꾼이 되었다는 알림 메세지를 출력해준다.

📑 체크리스트

구현해야 하는 이슈 체크리스트

• 이야기꾼에게 알림 메세지 출력

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 턴은 서버에서 관리하기 때문에 socket을 활용하여 클라이언트에게 정보를 전달하면 될 것 같습니다.
• 다른 유저에게 알림이 가지 않게 주의해주세요.

이야기꾼이 아닌 자신의 카드 고르기 <아니에요> 버튼

💁 설명

백로그 45번
남은 플레이어가 카드 고르는 화면에서 특정 카드를 클릭하고 아니에요 버튼을 클릭하면 자신이 가지고 있는 카드 6장을 다시 볼 수 있다

📑 체크리스트

구현해야 하는 이슈 체크리스트

• 아니에요 버튼
• 아니에요 버튼 동작

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

이야기꾼 카드 고를 때 대기 텍스트 출력

💁 설명

백로그 47번
이야기꾼 카드선택 대기화면에서 나머지 플레이어는 화면에 출력된 텍스트를 통해 이야기꾼이 카드와 주제를 고르고 있음을 확인할 수 있어야 한다

📑 체크리스트

구현해야 하는 이슈 체크리스트

• 텍스트 오브젝트
• 이야기꾼이 카드를 선택하면 텍스트가 없어짐

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

[Guesser Waiting] 이야기꾼 카드 고를 때 오리와 카드 표현

💁 설명

백로그 48번
이야기꾼 카드선택 대기화면
나머지 플레이어
화면에 출력된 오리와 카드를 통해
이야기꾼의 오리와 카드를 화인할 수 있어야 한다

📑 체크리스트

구현해야 하는 이슈 체크리스트

• 오리 표현
• 카드 표현
• 이야기꾼이 선택하는 카드는 확대되어서 보여져야 한다
• 이야기꾼이 카드를 고르면 오리와 고르지 않은 카드가 없어져야 한다
• 이야기꾼이 최종적으로 고른 카드가 화면 위로 올라가야 한다

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

매 라운드 시작 할 때 텔러 여부, 카드 목록 받아오기

💁 설명

각 턴이 새로 시작될 때마다 텔러 여부와 카드 6장 목록을 받아와서 렌더링한다.

📑 체크리스트

구현해야 하는 이슈 체크리스트

• 텔러일 때 / 아닐 때 텍스트 보여주기
• 카드 6장 저장하기

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

다른 플레이어들이 카드 고르기 기다릴 때 상단 게이지

💁 설명

백로그 52번
다른플레이어 카드선택 대기화면
카드를 이미 고른 플레이어
화면 상단의 게이지가 줄어드는 것을 보고
시간 제한의 경과를 확인할 수 있어야 한다.

📑 체크리스트

구현해야 하는 이슈 체크리스트

• 화면 상단에 게이지 표시
• 게이지가 시간에 따라 줄어들어야 함
• 게이지가 줄어드는 중 색이 변해야 함
• 게이지가 완전히 줄어들었으면 다음 화면으로 넘어가야 함

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

남은 플래이어가 카드를 고르는 화면의 상단 게이지 기능과 같은 기능 아닌가? 생각이 든다

로비로 돌아가는 기능 구현

💁 설명

원치 않은 게임에 참여했을 경우 로비로 돌아가기 위한 기능을 구현한다.

📑 체크리스트

구현해야 하는 이슈 체크리스트

• 로비로 돌아가기 버튼 구현
• 버튼을 클릭했을 경우 유저가 해당 게임방을 벗어날 수 있게 로직 구현
• 해당 게임방에서 나간 유저의 데이터가 삭제되게 구현

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

이동 애니메이션 적용 시 실시간 좌표값 읽어오는 방법 토의

💁 설명

• 캐릭터가 점 A를 시작으로 A->B->C 순서대로 이동한다고 칠때
• 점 B에 도착하기 전에 C로 이동하는 명령을 내리면
• A->B 도중의 위치에서 출발하지 않고
• B로 순간이동한 뒤 C로 이동하게되는 문제가 있는데요.

https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

이거를 이용하면 잘 해결할 수 있을지도?????
나중에 찬찬히 읽어보고 적용해보고 싶습니다.

이야기꾼 주제 입력하는 화면

💁 설명

이야기꾼이 카드를 선택하면 주제를 입력하는 화면이 나타난다.

백로그 35번, 36번, 37번

📑 체크리스트

구현해야 하는 이슈 체크리스트

• 배경 뒷쪽 어둡고 흐리게 (딤효과)
• 텍스트
• 카드 확대된 화면
• 인풋창
• 확인, 다시선택 버튼
  • 확인 버튼 (백로그 37번)
  • 다시 선택 버튼 (백로그 36번)

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 이전 화면의 상단 진행바는 어둡고 흐려지지 않아야함. 즉
  카드 고르는 화면(흐려져야함) < 주제 입력하는 화면 < 프로그레스바(흐려지지 말아야함)
  순으로 z-index가 높아야할듯
• 카드, 인풋창, 버튼을 form으로 감싸면 사용하기 쉬울듯??

[BUG] SCSS 구조나 중복으로 import 되는 문제

🚒 버그 설명

팀원이 이해할 수 있도록 자세하게 구체적으로 작성합니다. 담당자도 함께 할당해주세요.

common.scss가 중복되어 사용되는 문제

✔️ 기대하는 결과

구체적으로 어떤 결과가 나오게 수정해야 하는지 작성합니다.

더 나은 퍼포먼스를 위해 중복되어 들어가는 SCSS 구조를 리팩토링합시다.

🗒 참고자료

보여지는 에러인 경우 스크린샷도 함께 첨부합니다.

• 해람님이 찾아주신 스택오버플로우

좌표 계산 방식 ratio VS transform(zoom)

💁 설명

(x,y) 좌표에 카드를 두고 싶다. 문제는 사용자의 환경에 따라 화면의 크기와 비율이 바뀐다는 점이다.
이 때, 비율 방식과 transform(줌) 방식을 사용 가능하다

📑 체크리스트

비율 방식 장점

• 비율 방식은 (50%, 30%) 이런식으로 가로의 50%와 세로의 30%를 찾아서 오브젝트를 배치할 수 있다
• 어떤 비율이나 해상도에서도 깨지지 않는 화면을 보여줄 수 있다

비율 방식 단점

• 사용자의 화면비율에 따라 보이는 화면이 다르다. 여러가지 비율을 고려해야 한다.
• 오브젝트가 움직이는것을 transition으로 처리하는데, 윈도우의 크기가 바뀔때에도 렌더링을 다시 해야하기 때문에 애니메이션이 꼬일 수 있다.

비율 설정을 잘 못해서 카드가 엄청나게 겹치는 경우

줌 방식 장점

• 줌 방식은 하나의 Div를 만들어 두고 그 Div를 확대, 축소 해서 화면을 표현한다. (100, 200)
• 어떤 비율이나 해상도에서도 같은 화면을 보여줄 수 있다.

줌 방식 단점

• 같은 비율을 유지해야하기 때문에 설정된 비율과 다르면 잘리는 부분 혹은 빈 부분이 생긴다.
• 프로그레스바와 같은 UI가 있기에 잘리는 선택은 하지 못해서 사실상 빈 공간이 생기는 방식이라고 보면 된다.

화면 비율이 맞지 않아서 엄청나게 빈 공간이 생기는 경우

🚧 주의 사항

카드가 손에 보이는 연출이 있기 때문에 줌 방식을 채택 할 경우 의도한 UX가 안 나올 수 있음
그래서 개인적으로 비율 방식을 추천

이야기꾼이 카드 고를때 화면 상단에 남은 시간 표현

💁 설명

백로그 49번
이야기꾼이 카드 고를때 화면 상단에 남은 시간이 표현되어야 한다

📑 체크리스트

구현해야 하는 이슈 체크리스트

• 화면 상단에 게이지 표시
• 게이지가 시간에 따라 줄어들어야 함
• 게이지가 줄어드는 중 색이 변해야 함
• 게이지가 완전히 줄어들었으면 다음 화면으로 넘어가야 함

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

이야기꾼과 다른 플레이어 모두에게 보여야 한다.
[이야기꾼에게만 해당] 이야기꾼이 카드를 고르지 못한 경우 카드가 랜덤으로 골라지고 카드의 디폴트 주제가 들어간다

배포 서버에서 sudo 사용 시 비밀번호를 물어보는 문제

💁 설명

ncloud 배포 서버에서 sudo 사용 시 비밀번호를 물어보는 문제.

배포 시 프론트엔드 빌드 결과물을 nginx 폴더에 넣는 과정에서
NGINX 폴더가 root 폴더에 있다보니 cp 명령어 사용시 root권한이 필요한데 이때 sudo를 치면 비밀번호를 물어보고 있습니다
수동 배포를한다면 그냥 비밀번호 치면되는데 자동 배포를 하려하면 root 비밀번호를 GitHub Secret같은곳에 넣어둬야된다거나... 여러 보안 취약점이 발생한다고 느껴집니다~~

1줄요약: 자동배포 하려면 비밀번호를 물어보지 않도록 잘 설정이 되어있어야 할 듯 합니다~~

남은 플레이어가 카드 고르는 화면 레이아웃

💁 설명

이야기꾼이 카드를 선택하여 주제가 정해지면 남은 플레이어들이 카드를 고르는 화면을 구성한다.
사진에는 "당신은 이야기꾼입니다. ~~" 라는 텍스트가 적혀있는데 실제로는 이야기꾼이 제시한 주제와 함께 적절한 텍스트가 주어져야 한다.

백로그 39, 40, 41번

📑 체크리스트

구현해야 하는 이슈 체크리스트

• 상단 진행바
• 이야기꾼이 지정한 주제
• 자신의 카드 6장 펼쳐진 모습

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 이야기꾼이 카드를 선택하는 화면과 비슷한(또는 동일한) UI/UX를 제공해야 한다.

게임 코드에 대한 메세지 출력 다르게 하기

💁 설명

• 게임 코드가 잘못된 경우 / 이미 시작된 경우 / 인원이 모두 찬 경우
• 각각의 케이스에 대해 메세지 다르게 보여주어야 클라이언트가 이해하기 좋을 듯 합니다

📑 체크리스트

구현해야 하는 이슈 체크리스트

• 3가지 케이스에 대해 다른 메세지를 보여준다.

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

[BUG] 방이 나가졌는데도 서버 메모리에 게임정보가 남아있음

🚒 버그 설명

팀원이 이해할 수 있도록 자세하게 구체적으로 작성합니다. 담당자도 함께 할당해주세요.

1. 게임을 생성
2. 게임 코드 복사하고 나감
3. 그 게임에 코드를 입력해서 들어갈 수 있음

✔️ 기대하는 결과

구체적으로 어떤 결과가 나오게 수정해야 하는지 작성합니다.

못들어가야됨. 남아있으면 서버에 메모리가 점점 커지다가 터질 가능성~

🗒 참고자료

보여지는 에러인 경우 스크린샷도 함께 첨부합니다.

ESLint와 Prettier 설정

💁 설명

VSCode에서 저장시 자동 바꿔주기 기능을 사용하기 위한 준비

1. npm i -D eslint prettier eslint-plugin-prettier eslint-config-prettier 글로벌로 설치도 가능하긴 하다
2. VSCode 확장앱 ESLint, Prettier - Code formatter 설치
3. VSCode Workspace 설정 (한 사람이 하고 Git에 올리면 됨)
   
   

{
  // Set the default
  "editor.formatOnSave": false,
  // Enable per-language
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "editor.codeActionsOnSave": {
    // For ESLint
    "source.fixAll.eslint": true
  }
}

이 작업을 하면 .vscode 폴더에 settings.json이 생성되며 Git에 올리면 모든 사람들이 받아서 쓸 수 있다.

4. 환경설정 만들기 (이 작업도 한 사람이 하면 된다)

• npx eslint --init 하고 질문에 대답한다. (포맷은 JSON으로 한다)
• prettier와 연결 시켜주기 위해 .eslintrc.json에 다음의 옵션을 추가한다

// 복붙하지 말고 중복된 부분을 찾아서 잘 이어줘야한다
{
  "plugins": ["prettier"],
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": "error"
  }
}

• .prettierrc.json도 위와 같이 만들 수 있으나 미리 설정 된 파일을 수정하는게 더 빠르다

{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "semi": true,
  "useTabs": false,
  "arrowParens": "avoid",
  "endOfLine": "auto"
}

📑 체크리스트

ESLint와 Prettier를 둘 다 사용하는 이유?

• 두개의 역할이 겹치는 부분도 있지만 안 겹치는 부분도 있어서

VSCode 확장앱을 설치하는 이유?

• 확장앱은 node_modules 폴더에서 eslint 모듈을 찾아서 VSCode와 연결시켜준다

🚧 주의 사항

참고한 사이트

https://code.visualstudio.com/docs/editor/multi-root-workspaces

https://velog.io/@recordboy/ESLint-Prettier-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0

채팅방 전송 기능 구현

💁 설명

게임 화면 내 우측 탭 채팅 전송 기능 구현

📑 체크리스트

구현해야 하는 이슈 체크리스트

• 채팅창의 input 클릭 시 텍스트 작성 가능
• input 작성 후 전송 버튼 클릭 시 전송
• 빈 문자열 또는 250자를 초과하는 경우 전송이 되지 않게 핸들링

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 빈 문자열 또는 250자를 초과하는 경우 전송이 되지 않게 꼼꼼하게 테스트

남은시간에 따라 조절되는 progress bar 구현

💁 설명

Github 이슈 설명

📑 체크리스트

구현해야 하는 이슈 체크리스트

• 시간은 파라미터로 조절
• 남은 시간에 따라 움직이는 애니메이션 구현

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 주의 사항 1
• 주의 사항 2

채팅 전송 이벤트 핸들링 구현

💁 설명

채팅창 내에서 이루어지는 동작들에 대해 관리할 수 있게 로직 구현하기

📑 체크리스트

구현해야 하는 이슈 체크리스트

• 전송 버튼을 누르거나 Enter를 누를 경우 채팅이 전송된다.
• 전송이 될 경우 Input 창은 비워지게 구현한다.
• 채팅이 전송되면 socket.io를 통해 다른 사람들에게도 채팅창에 채팅이 보이게 구현한다.

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

메인 페이지 - 대기실 코드 입력하기 기능 구현

💁 설명

• 사용자가 <코드 입력하기> 버튼을 클릭했을 때 발생하는 기능 구현

📑 체크리스트

구현해야 하는 이슈 체크리스트

• <코드 입력하기> 버튼 클릭 시 코드 입력하는 input와 입장 버튼이 생긴다.
• 방 코드 입력 시 유효한 코드인 경우 해당 방으로 이동
• 잘못된 코드 입력 시 input 창 하단에 에러 문구 렌더

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 유효한 경우 이동하게 하는 기능을 최우선적으로 구현한다.

GameEngine의 Constructor를 실제 우리가 사용하기 편하게 바꿉시다

💁 설명

지금 게임 엔진을 사용해 레이아웃을 만든 실제 코드를 보면

  const Header = new GameObject();
  Header.addClass('waiting-header');
  Header.attachToRoot();

  const NicknameHelpText = new TextObject();
  NicknameHelpText.setContent('게임에 참여할 닉네임을 정해주세요');
  NicknameHelpText.addClass('waiting-nickname-help');
  NicknameHelpText.attachToObject(Header);

  const InputWrapper = new GameObject();
  InputWrapper.addClass('waiting-input-wrapper');
  InputWrapper.attachToObject(Header);

이렇게 되있는데 constructor에 넣는 parameter가 없는 상태입니다.
이거를 자주 사용되는 코드, 예를들면 addClass같은걸 Constructor에서 바로 이용할 수 있도록 해봅시다~~

예시)

  const InputWrapper = new GameObject({
    class: ['waiting-input-wrapper'],
    parent: Header,
  });

이야기꾼이 카드 고를 때 상단 진행바 표시

💁 설명

카드를 선택하고 주제를 입력할 때까지 남은 시간을 확인할 수 있어야 한다. 60초??

📑 체크리스트

구현해야 하는 이슈 체크리스트

• HTMLElement 구현
• 애니메이션 구현
• setTimeout 구현

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• setTimeout 시의 action은 일단 alert같은 임시 함수로 떼워둬도 좋을것같아요!!

남은 플레이어가 카드 골랐을때 재확인 화면

💁 설명

#19

백로그 43, 44, 45번

준비 상태 관리 후 게임 시작 이벤트

💁 설명

게임 준비 관련 서버기능 구현

📑 체크리스트

구현해야 하는 이슈 체크리스트

• 플레이어들의 준비 상태 관리
• 모두 준비가 되면 게임 스타트 이벤트 보냄

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 주의 사항 1
• 주의 사항 2

클래스 다이어그램 작성

💁 설명

게임엔진 구현을 위해 클래스 다이어그램을 작성한다.

📑 체크리스트

구현해야 하는 이슈 체크리스트

• 함께 클래스 다이어그램을 작성한다.

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 편집 링크 : https://app.creately.com/diagram/AsPiqfGa0d0/edit

준비 상태 관리

💁 설명

준비완료/준비해제 버튼을 구현하고 각 버튼을 눌렀을 때 해당 이벤트가 발생하게 구현한다.

📑 체크리스트

구현해야 하는 이슈 체크리스트

• 준비완료 버튼 구현
• 준비해제 버튼 구현
• 상태에 따라 적절한 버튼이 등장하게 구현
• 준비가 안된 상태에서 준비완료 버튼을 누르면 유저의 상태를 '준비 상태'로 변경
• 준비가 된 상태에서 준비해제 버튼을 누르면 유저의 상태를 '준비 안됨'으로 변경

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 채팅창에 유저의 상태를 출력해야 할 상황이 생길 수 있으니 이를 염두에 두고 코드를 짜도록 하자.

백로그 생성

💁 설명

프로젝트 기능을 기획하여 백로그를 생성한다.

📑 체크리스트

구현해야 하는 이슈 체크리스트

• 팀원 모두가 참여하여 백로그를 생성한다.
• 빠진 부분이 없는지 확인한다.

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 구체적으로 작성하도록 노력한다.

메인 페이지 - 방 만들기 기능 구현

💁 설명

• 방 만들기 버튼을 클릭하면 방을 개설한다.

📑 체크리스트

구현해야 하는 이슈 체크리스트

• 방 만들기 버튼 클릭 시 서버에 방 개설에 대한 request를 날린다.
• 정상적으로 개설 시 success response

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

음성 채팅 해제

💁 설명

유저가 원할 때 음성 채팅에서 나갈 수 있게 해제 기능 구현하기

📑 체크리스트

구현해야 하는 이슈 체크리스트

• 음성 채팅에서 나가지는지 확인

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 해제한 후 다시 연결 할 수 있게 구현할 것

게임방 코드 View 구현

💁 설명

자신이 속한 게임방의 코드를 볼 수 있게 UI를 구현한다.

📑 체크리스트

구현해야 하는 이슈 체크리스트

• 대기실 화면 우측 하단에 게임방 코드를 보여준다.

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

2주차 배포

💁 설명

2주차 스프린트 끝! 코드 프리징 후 클라우드 서버 배포

📑 체크리스트

구현해야 하는 이슈 체크리스트

• 배포 쉘 스크립트 작성
• 프론트 서버
• 백 서버

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 깃허브 액션에 대해 공부해보자.

음성채팅을 위한 PeerJS 서버 만들기~~

💁 설명

진혁님의 PeerJS를 위한 서버를 만들어봅시다 ~~
기존 backend 코드에 삽입이 가능할 것 같으니 그것도 참고합시다 ~~

참고자료: https://github.com/peers/peerjs-server#combining-with-existing-express-app

ncloud 서버 설정

💁 설명

nCloud 서버 설정합니다.

📑 체크리스트

구현해야 하는 이슈 체크리스트

• ssh 키설정
• 노드 설치
• git clone

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 외부에서 DB root로 접속하지 못하게 권한 설정

2주차에 필요한 서버 API 명세서 작성

💁 설명

서버 API 개발 전 명세서를 작성한다.

📑 체크리스트

구현해야 하는 이슈 체크리스트

• 함께 서버 2주차 API 명세서를 작성한다.

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

메인 페이지 구현

💁 설명

사용자가 메인 페이지에 들어갔을 때 방 만들기, 코드 입력하기 버튼을 보고 선택할 수 있도록 구현한다.

📑 체크리스트

구현해야 하는 이슈 체크리스트

• 메인 URL 접속 시 메인 페이지 렌더링
• 방 만들기 버튼과 코드 입력하기 버튼 렌더링

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

logger 설정하기

💁 설명

게임 log 관리를 위한 logger를 설정하자. winston을 사용하기로 한다.

📑 체크리스트

구현해야 하는 이슈 체크리스트

• logger 설정
• 작업 환경 설정

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

Socket.io CORS

💁 설명

socket.io CORS 설정

📑 체크리스트

• 서버 OK?
• 클라이언트 OK?

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

dev 와 prod의 주소가 다르기 때문에 유의

웹팩/바벨/린트 등 환경설정

💁 설명

디렉토리 구조 잡고 depenedency들 설치합시다~~`

📑 체크리스트

구현해야 하는 이슈 체크리스트

• FE
  • 바벨
  • 웹팩
  • eslint
  • prettier
  • stylelint
  • dotenv 템플릿
• BE
  • 바벨
  • 웹팩
  • eslint
  • prettier
  • dotenv 템플릿
• nginx (필요없으면 안할수도~~???)

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 배포 후 확인

좌측 탭 기능 구현 - 인원 및 점수

💁 설명

게임 화면 내 좌측 탭에 전체 플레이어 인원 수 및 점수 렌더

📑 체크리스트

구현해야 하는 이슈 체크리스트

• 좌측 탭 레이아웃 설정
• 좌측 탭에 현재 접속한 인원 수 렌더
• 각 플레이어마다 현재 점수 렌더 (게임 시작 전에는 0)

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

닉네임 12글자 제한 두기

💁 설명

레이아웃 width 제한으로 닉네임이 길면 레이아웃 깨짐

📑 체크리스트

구현해야 하는 이슈 체크리스트

• 닉네임 수동변경 시 12글자 이하로 할 수 있게 추가

🚧 주의 사항

이슈를 구현할 때 유의깊게 살펴볼 사항

• 주의 사항 1
• 주의 사항 2