chipchippoker

• 배포 URL : https://chipchippoker.shop/
• Test ID : yoon1234
• Test PW : password123!

프로젝트 화면

게임 화면

랭킹 화면

가이드북

프로필 화면

npm 설치

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

---

참여자 명단

• 김대원
• 윤예빈
• 최현기

기술스택

• Vue 3.3.11
• Vue-router 4.2.5
• Openvidu-browser 2.29.1
• webstomp-client 1.2.6
• face-api.js 0.22.2

역할

• 김대원
  • Openvidu를 사용한 비디오 캠 기능
  • 관전 기능
  • 방 입장, 방 나가기 기능
• 윤예빈
  • WebStomp를 활용한 게임 기능
  • 실시간 친구 신청 기능
  • 감정 인식 기능
  • UI, UX 디자인, CSS
• 최현기
  • WebStomp를 활용한 게임 기능
  • 매칭 기능
  • 토큰 재발행 기능
  • 소셜 로그인 기능
  • CSS

UI/UX 디자인 (Figma)

Logic Flow

컴포넌트 설계도

프로젝트 구조

📦src
 ┣ 📂components
 ┃ ┣ 📂Cam
 ┃ ┃ ┣ 📜OvVideo.vue
 ┃ ┃ ┗ 📜UserVideo.vue
 ┃ ┣ 📂Main
 ┃ ┃ ┣ 📂Friend
 ┃ ┃ ┃ ┣ 📜MainFriendItem.vue
 ┃ ┃ ┃ ┗ 📜MainFriendList.vue
 ┃ ┃ ┣ 📂Rank
 ┃ ┃ ┃ ┣ 📜MainRank.vue
 ┃ ┃ ┃ ┣ 📜MainRankAllList.vue
 ┃ ┃ ┃ ┣ 📜MainRankFriendList.vue
 ┃ ┃ ┃ ┗ 📜MainRankItem.vue
 ┃ ┃ ┗ 📂Room
 ┃ ┃ ┃ ┣ 📜MainRoom.vue
 ┃ ┃ ┃ ┣ 📜MainRoomFriendList.vue
 ┃ ┃ ┃ ┣ 📜MainRoomItem.vue
 ┃ ┃ ┃ ┗ 📜MainRoomRankList.vue
 ┃ ┣ 📂Modal
 ┃ ┃ ┣ 📂Guide
 ┃ ┃ ┃ ┣ 📜guide1.vue
 ┃ ┃ ┃ ┣ 📜guide2.vue
 ┃ ┃ ┃ ┣ 📜guide3.vue
 ┃ ┃ ┃ ┣ 📜guide4.vue
 ┃ ┃ ┃ ┗ 📜guide5.vue
 ┃ ┃ ┣ 📜ModalCreateRoom.vue
 ┃ ┃ ┣ 📜ModalEnterPassword.vue
 ┃ ┃ ┣ 📜ModalFindFriend.vue
 ┃ ┃ ┣ 📜ModalFindGame.vue
 ┃ ┃ ┣ 📜ModalFindRoom.vue
 ┃ ┃ ┣ 📜ModalGuide.vue
 ┃ ┃ ┣ 📜ModalIconItem.vue
 ┃ ┃ ┣ 📜ModalIconList.vue
 ┃ ┃ ┣ 📜ModalIsExistRoom.vue
 ┃ ┃ ┣ 📜ModalIsFullRoom.vue
 ┃ ┃ ┣ 📜ModalIsPlayingRoom.vue
 ┃ ┃ ┣ 📜ModalLogOut.vue
 ┃ ┃ ┣ 📜ModalMainSettings.vue
 ┃ ┃ ┣ 📜ModalNotExistRoom.vue
 ┃ ┃ ┣ 📜ModalNotificationItem.vue
 ┃ ┃ ┣ 📜ModalNotificationList.vue
 ┃ ┃ ┗ 📜ModalSignOut.vue
 ┃ ┣ 📂Play
 ┃ ┃ ┣ 📜PlayBatting.vue
 ┃ ┃ ┣ 📜PlayController.vue
 ┃ ┃ ┣ 📜PlayEmotion.vue
 ┃ ┃ ┣ 📜PlayEmotionChart.vue
 ┃ ┃ ┣ 📜PlayPlayer.vue
 ┃ ┃ ┗ 📜PlayTalk.vue
 ┃ ┣ 📂Profile
 ┃ ┃ ┣ 📜ProfileHistoryList.vue
 ┃ ┃ ┗ 📜ProfileMyInfo.vue
 ┃ ┗ 📂Wait
 ┃ ┃ ┗ 📜WaitWatcher.vue
 ┣ 📂router
 ┃ ┗ 📜index.js
 ┣ 📂stores
 ┃ ┣ 📜friend.js
 ┃ ┣ 📜game.js
 ┃ ┣ 📜match.js
 ┃ ┣ 📜openvidu.js
 ┃ ┣ 📜room.js
 ┃ ┣ 📜sound.js
 ┃ ┗ 📜user.js
 ┣ 📂views
 ┃ ┣ 📜KakaoSignupView.vue
 ┃ ┣ 📜LoginView.vue
 ┃ ┣ 📜MainView.vue
 ┃ ┣ 📜PlayView.vue
 ┃ ┣ 📜ProfileView.vue
 ┃ ┣ 📜SignupView.vue
 ┃ ┗ 📜WaitView.vue
 ┣ 📜App.vue
 ┣ 📜main.js
 ┗ 📜style.css