LIAR GAME

📅 개발 기간 : 23.11.06 ~ 23.11.17

💁‍♀️ 프로젝트 소개

LIAR GAME 은 주어진 제시어에 대해 거짓말을 하고 있는 사람을 찾는 게임인 소켓 기반 통신 앱입니다.
채팅방에 입장하면 라이어를 제외한 인원들에게만 제시어가 주어집니다.
참가자들은 채팅으로 대화하며, 투표를 통해 제시어를 아는 척 거짓말하는 라이어를 찾습니다.

'라이어 게임' 테스트 계정 정보

아이디	비밀번호
12345	12345

서비스를 구경하고 싶으시다면 위의 테스트 계정 정보로 로그인하거나 회원 가입 후 사용하실 수 있습니다.

👪 빼빼로조 팀원 소개

이용훈 Frontend & 팀장	박수연 Frontend	박혜민 Frontend	심정아 Frontend	이연수 Frontend

💻 팀원 별 구현 사항

이름	역할	개발 내용
이용훈	팀장	게임 생성 유저 초대 초대 알림 프로젝트 전체 관리
박수연	팀원	회원가입 로그인 프로필 수정
박혜민	팀원	전체 채팅 게임 목록 조회
심정아	팀원	게임 채팅 라이어 투표 전체 UI 관리
이연수	팀원	게임 시작 키워드 및 카테고리 랜덤 지정 라이어 랜덤 지정

✅ 필수 구현 사항

• useState 또는 useReducer를 활용한 상태 관리 구현
• Sass, styled-component, emotion, Chakra UI, tailwind CSS 등을 활용한 스타일 구현
• react 상태를 통한 CRUD 구현
• 상태에 따라 달라지는 스타일 구현
• custom hook을 통한 비동기 처리 구현
• 유저인증 시스템(로그인, 회원가입) 구현
• jwt등의 유저 인증 시스템 (로그인, 회원가입 기능)
• 소켓을 이용한 채팅 구현

🛠️ 주요기능 요약

⭐ 라이어 게임

• 사용자들과 실시간 채팅을 통해 라이어 게임을 할 수 있도록 게임 로직을 만들었습니다.

⭐ 메인 페이지 게임방 리스트, 정보 실시간 확인

• 메인 페이지에서 게임이 새로 만들어지는지, 게임이 진행 중인지 대기 중인지, 사용자가 입장하고 퇴장하는 모든 것이 실시간으로 모든 사용자에게 공유됩니다.

⭐ 메인페이지 메인 채팅 기능, 모든 사용자 확인, 프로필 확인 및 수정

• 메인 페이지에서는 모든 사용자가 하나의 채팅방으로 전체 채팅을 할 수 있습니다.
• 메인 페이지에서 모든 사용자 리스트 확인 및 프로필 수정이 가능합니다.

⭐ 회원가입, 로그인 기능 및 인증, 404페이지

• 회원가입과 로그인을 할 수 있습니다. (이미지 추가 가능, 유효성 검사)
• 인증이 안된 사용자가 다른 페이지로 접근할 시 로그인 페이지로 이동됩니다.
• 구현 안 된 주소로 이동 시 404페이지로 이동합니다.

⭐ 게임 생성 및 사용자 초대

• 게임 방을 생성할 수 있고 원하는 사용자를 초대할 수 있습니다.
• 초대된 사용자는 실시간으로 화면에 초대 메시지지 창이 보이고 수락 시 게임방으로 입장합니다.
  
  

💻 개발 스택

🌙 환경

🌙 개발

🌙 소통

🗂 디렉토리 구조

📦src
 ┣ 📂assets
 ┃ ┣ 📜bg.png
 ┃ ┗ 📜logo1.png
 ┣ 📂components
 ┃ ┣ 📂Game
 ┃ ┃ ┣ 📂GameChat
 ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┣ 📂GameStart
 ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┣ 📂Timer
 ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┗ 📂Vote
 ┃ ┃ ┃ ┣ 📜CalculateVote.tsx
 ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┣ 📂Login
 ┃ ┃ ┣ 📂LoginForm
 ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┗ 📂SignUpModal
 ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┣ 📂Main
 ┃ ┃ ┣ 📂CreateGameModal
 ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┣ 📂GameCard
 ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┣ 📂GameLists
 ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┗ 📂UserConfigModal
 ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┗ 📂common
 ┃ ┃ ┣ 📂Loader
 ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┣ 📂ToastNotice
 ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┣ 📂UserCard
 ┃ ┃ ┃ ┗ 📜index.tsx
 ┃ ┃ ┣ 📜ChatBubble.tsx
 ┃ ┃ ┣ 📜MyChatBubble.tsx
 ┃ ┃ ┗ 📜SystemChat.tsx
 ┣ 📂data
 ┃ ┗ 📜category.json
 ┣ 📂firebase
 ┃ ┗ 📜firebase.ts
 ┣ 📂hooks
 ┃ ┣ 📜useAuth.ts
 ┃ ┣ 📜useFetch.ts
 ┃ ┣ 📜useFireFetch.ts
 ┃ ┣ 📜useInput.ts
 ┃ ┗ 📜useSocket.ts
 ┣ 📂pages
 ┃ ┣ 📂Game
 ┃ ┃ ┗ 📜index.tsx
 ┃ ┣ 📂Login
 ┃ ┃ ┗ 📜index.tsx
 ┃ ┗ 📂NotFound
 ┃ ┃ ┗ 📜index.tsx
 ┣ 📂recoil
 ┃ ┗ 📂atoms
 ┃ ┃ ┣ 📜authState.ts
 ┃ ┃ ┗ 📜userState.ts
 ┣ 📂socket
 ┃ ┗ 📜socket.ts
 ┣ 📂theme
 ┃ ┗ 📜index.ts
 ┣ 📜App.tsx
 ┣ 📜index.css
 ┣ 📜main.tsx
 ┗ 📜vite-env.d.ts

🐼 시연 영상

1. 회원가입, 로그인, 메인페이지, 프로필 변경

• 회원가입, 로그인할 수 있고 메인페이지에서 사용자의 프로필을 변경할 수 있습니다.

default.mp4

2. 게임 생성, 친구 초대, 유저 입장 퇴장 실시간

• 게임을 생성하면서 게임 사용자 수 설정과, 친구초대를 할 수 있습니다.
• 초대받으면 화면에 초대메시지가 보이고, 수락 시 게임방으로 이동하고, 사용자의 입장 퇴장이 실시간으로 보입니다.

default.mp4

3. 게임 플레이

• 사용자가 게임방에 입장하면 메인화면에서 실시간으로 사용자 수가 변하는 게 보입니다.
• 게임 시작 시 키워드가 제공되며 사용자의 순서가 무작위로 바뀌면서 개인 발언을 할 수 있는 시간으로 바뀝니다.
• 개인 발언이 끝나면 40초간 자유 채팅을 할 수 있는 시간을 주고 끝이 나면 투표버튼이 활성화되고, 투표할 수 있게 됩니다.
• 투표가 끝나면 결과가 화면에 표시됩니다.

default.mp4