{"id":18073226,"url":"https://github.com/de-v-log/wasd","last_synced_at":"2026-02-16T13:07:11.498Z","repository":{"id":260088922,"uuid":"861451706","full_name":"De-v-log/wasd","owner":"De-v-log","description":"Spring/WebSocket을 이용한 게임 파트너 매칭 및 실시간 채팅 제공 서비스","archived":false,"fork":false,"pushed_at":"2024-12-15T09:48:06.000Z","size":7022,"stargazers_count":1,"open_issues_count":5,"forks_count":2,"subscribers_count":0,"default_branch":"dev","last_synced_at":"2025-04-12T05:12:48.747Z","etag":null,"topics":["jpa","spring","websocket"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/De-v-log.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-22T23:18:15.000Z","updated_at":"2024-12-15T09:48:10.000Z","dependencies_parsed_at":"2024-10-30T23:06:51.596Z","dependency_job_id":null,"html_url":"https://github.com/De-v-log/wasd","commit_stats":null,"previous_names":["de-v-log/wasd"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/De-v-log%2Fwasd","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/De-v-log%2Fwasd/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/De-v-log%2Fwasd/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/De-v-log%2Fwasd/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/De-v-log","download_url":"https://codeload.github.com/De-v-log/wasd/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248519556,"owners_count":21117761,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jpa","spring","websocket"],"created_at":"2024-10-31T10:05:39.564Z","updated_at":"2025-10-08T20:14:15.999Z","avatar_url":"https://github.com/De-v-log.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WASD\n\n\u003cdiv align=\"center\"\u003e\n\u003cimg width=\"40%\" alt=\"image\" src=\"readmeImages/logo.png\"\u003e\n\u003c/div\u003e\n\n## ✨ 프로젝트 소개\n\n### 마음이 맞는 사람과 게임을 즐기고 싶다면 WASD를 사용해 보세요\n1. **자주 하는 게임과 선호 스타일을 입력하세요!**  \n   저희가 비슷한 관심사를 가진 그룹을 추천해 줄게요\u003cbr\u003e\n   자세히 입력할수록 더 잘 맞는 파트너를 추천해 드려요 🫡\n2. **마음이 맞는 유저끼리 그룹을 형성하세요!**  \n   그룹 내에서 자유롭게 채팅하며 서로의 생각을 공유해 보세요 \u003cbr\u003e\n   실시간으로 이루어지는 채팅과 함께 재밌는 게임을 즐길 수 있어요 😊\n\n## 🔍 주요 기능\n- `맞춤형 그룹 추천` **입력하신 정보**를 기반으로 잘 맞을 것 같은 그룹을 추천해 드려요.\n- `그룹 참여` **마음이 맞는 유저**끼리 그룹을 형성해서 같이 즐겨보세요.\n- `실시간 채팅` **실시간으로 채팅**하며 자유롭게 내 생각을 펼쳐보세요.\n- `소셜 로그인` **카카오톡**, **구글**, **네이버** 아이디만 있다면 누구나 쉽게 가입할 수 있어요.\n\n[//]: # (# Game Partner Matching \u0026 Real-Time Voice Chat Service)\n## 📆 프로젝트 기간\n**2024.08.26 ~ 2024.11.27**\n\n[//]: # (## 🌐 배포 주소)\n[//]: # (**개발 버전** : [http://~~~.com]http://~~~.com)\n\n## 📒 기술스택\n\n#### FRONT-END\n\n\u003cimg src=\"https://img.shields.io/badge/HTML-E34F26?style=for-the-badge\u0026logo=html5\u0026logoColor=white\"/\u003e \u003cimg src=\"https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge\u0026logo=JavaScript\u0026logoColor=black\"/\u003e \u003cimg src=\"https://img.shields.io/badge/CSS-1572B6?style=for-the-badge\u0026logo=css3\u0026logoColor=white\"/\u003e\n\n#### BACK-END\n\n\u003cimg src=\"https://img.shields.io/badge/Spring Boot-6DB33F?style=for-the-badge\u0026logo=springboot\u0026logoColor=white\"/\u003e \u003cimg src=\"https://img.shields.io/badge/Spring Security-6DB33F?style=for-the-badge\u0026logo=springsecurity\u0026logoColor=white\"/\u003e \u003cimg src=\"https://img.shields.io/badge/MongoDB-47A248?style=for-the-badge\u0026logo=mongodb\u0026logoColor=white\"/\u003e \u003cimg src=\"https://img.shields.io/badge/PosdtgreSQL-4169E1?style=for-the-badge\u0026logo=postgresql\u0026logoColor=white\"/\u003e \u003cimg src=\"https://img.shields.io/badge/Web Socket-black?style=for-the-badge\u0026logo=\u0026logoColor=white\"/\u003e\n\n\n## 🧱 ERD\n\n\u003cimg width=\"35%\" alt=\"db_pgsql\" src=\"readmeImages/db_pgsql.png\"\u003e \u003cimg width=\"35%\" alt=\"db_mongo\" src=\"readmeImages/db_mongo.png\"\u003e\n\n\n\u003cbr/\u003e\n\n## 🏗️ 서비스 아키텍처\n\n\u003cimg width=\"80%\" alt=\"architecture\" src=\"readmeImages/architecture.png\"\u003e\n\n\n## 화면 구성 📺\n|                           로그인                           |                           에러페이지                           |                                                             |\n|:-------------------------------------------------------:|:---------------------------------------------------------:|:-----------------------------------------------------------:|\n|   \u003cimg width=\"\" src=\"readmeImages/result/login.png\"/\u003e   |  \u003cimg width=\"\" src=\"readmeImages/result/errorPage.png\"/\u003e  |                                                             |\n|                     회원가입 (회원 정보 입력)                     |                      회원가입 (선호 게임 선택)                      |                     회원가입 (선호 게임 정보 입력)                      |  \n| \u003cimg width=\"\" src=\"readmeImages/result/signup_1.png\"/\u003e  |  \u003cimg width=\"\" src=\"readmeImages/result/signup_2.png\"/\u003e   |   \u003cimg width=\"\" src=\"readmeImages/result/signup_3.png\"/\u003e    |  \n|                          그룹 목록                          |                         그룹 정보 조회                          |                            그룹 생성                            |\n| \u003cimg width=\"\" src=\"readmeImages/result/groupList.png\"/\u003e | \u003cimg width=\"\" src=\"readmeImages/result/groupDetail.png\"/\u003e |   \u003cimg width=\"\" src=\"readmeImages/result/groupNew.png\"/\u003e    |\n|                          그룹 참여                          |                          그룹 채팅방                           |                           프로필 수정                            |\n| \u003cimg width=\"\" src=\"readmeImages/result/groupJoin.png\"/\u003e |  \u003cimg width=\"\" src=\"readmeImages/result/groupChat.png\"/\u003e  | \u003cimg width=\"\" src=\"readmeImages/result/profileUpdate.png\"/\u003e |\n\n\n## 🤔️ 기술적 의사 결정\n\u003cdetails\u003e\n\u003csummary\u003e사용된 기술을 선택한 이유와 근거\u003c/summary\u003e\n\n| 요구 사항                | 선택지                           | 핵심 기술을 선택한 이유 및 근거                                                                                                                                     |\n|:-------------------------:|:------------------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------|\n| 게임\u003cbr\u003e데이터\u003cbr\u003e관리\u003cbr\u003e방식      | - PostgreSQL\u003c/br\u003e- MongoDB    | - 게임 데이터를 관리하는 과정에서 테이블 간의 복잡한 관계로 인해 성능 저하 및 관리가 어려움\u003cbr\u003e - 스키마의 유연성을 위해 JSON 타입을 지원하는 MongoDB 도입\u003cbr\u003e\u003cimg width=\"500\" src=\"readmeImages/mongoDB.png\"/\u003e |\n| 맞춤형\u003cbr\u003e그룹\u003cbr\u003e추천\u003cbr\u003e알고리즘 | - 기본 조건 필터링\u003cbr\u003e- 가중치 기반 점수 부여 | - 사용자가 입력한 프로필 정보와 그룹 정보 간의 유사성을 비교하여 맞춤형 점수를 계산\u003cbr\u003e- 게임 속성, 게임 시간대 등을 기준으로 높은 연관성을 가진 그룹 추천\u003cbr\u003e- 효율적인 필터링을 위해 기본 조건(인원수 미달 그룹) 선별                     |\n\n\u003c/details\u003e\n\n\u003cbr/\u003e\n\n\n[//]: # (## 🛠️ 트러블슈팅)\n\n[//]: # (\u003cdetails\u003e)\n\n[//]: # (\u003csummary\u003e문제가 발생했을 때 우리는 이렇게 해결했습니다.\u003c/summary\u003e)\n\n[//]: # ()\n[//]: # (### webRTC 연결 관련 이슈)\n\n[//]: # (|진행 순서| 내용|)\n\n[//]: # (|:---|:---|)\n\n[//]: # (| 😱 문제 |미디어 스트림을 접근 권한을 허가 혹은 거부하지 않으면 소켓이 연결되지 않아 게임을 제대로 진행이\u003cbr/\u003e불가능하다.\u003cbr/\u003e내 소리를 다른 사람은 들을 수 없으나 나는 다른 사람의 소리를 들을 수 있는 문제가 있음|)\n\n[//]: # (|🤔 원인|미디어 스트림 접근 권한을 요청할 때 코드의 흐름이 정지되기 때문에 이후 코드가 실행되지 않으므로\u003cbr/\u003e소켓 연결이 되지 않음\u003cbr/\u003e미디어 스트림 권한이 처리되지 않았을 때 다른 사용자가 rtc연결을 요청시 나의 미디어 스트림이\u003cbr/\u003eundefined 상태이므로 상대의 음성은 들리나 나의 음성이 전달되지 않음|)\n\n[//]: # (|😭 시도| • getUserMedia\u0026#40;\u0026#41;를 별개의 useEffect로 분리하여 소켓과 rtc를 연결하는 로직에 병렬적으로 처리되게 구현\u003cbr/\u003e이 경우 미디어스트림을 허가하기 전에 rtc연결을 요청하므로 내 로컬스트림이 undefined 인 문제가 발생함\u003cbr/\u003e• getUserMedia\u0026#40;\u0026#41;함수를 소켓 연결 이후에 호출하도록 변경함. 그러나 이 경우 다른 사용자가 rtc연결을\u003cbr/\u003e요청했을 때마이크 접근 권한을 허가하거나 거부하지 않은 상태이면 나의 미디어스트림이 undefined 인\u003cbr/\u003e경우가 발생하므로 나의 말을 다른 사람이 들을 수가 없음     |)\n\n[//]: # (|😄 해결| • getUserMedia\u0026#40;\u0026#41;함수를 별개의 useEffect를 이용해 병렬적으로 처리하는 로직은 그대로 둠\u003cbr/\u003e• 요청을 받아 rtc연결을 실행하거나, 내가 새로운 rtc연결을 시도하고자 하는 경우 사용자가 마이크 사용을\u003cbr/\u003e허가/거부하지 않은 상태면 반복문과 함께 Promise, setTimeOut으로 구현한 sleep함수를 이용해 코드의\u003cbr/\u003e흐름을 막음\u003cbr/\u003e• 사용자가 마이크 사용을 허가한 경우 그대로 연결을 진행함, 사용을 거부한 경우 본인의 마이크는 사용이\u003cbr/\u003e불가능하지만 사용자가 의도한 것이므로 특별히 예외처리하지 않음 |)\n\n[//]: # ()\n[//]: # ()\n[//]: # ()\n[//]: # (\u003c/details\u003e)\n\n\n\n\u003cbr/\u003e\n\n## 개발자 소개\n\n|                                       이유진                                        |                                       강성현                                        |                                                                                                            \n|:--------------------------------------------------------------------------------:|:--------------------------------------------------------------------------------:|  \n| \u003cimg width=\"160px\" src=\"https://avatars.githubusercontent.com/u/81798918?v=4\" /\u003e | \u003cimg width=\"160px\" src=\"https://avatars.githubusercontent.com/u/83094369?v=4\" /\u003e |                   \n|                      [@y-00jin](https://github.com/y-00jin)                      |                       [@keartt](https://github.com/keartt)                       |\n|                               FRONT-END \u0026 BACK-END                               |                                        BACK-END                                        |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fde-v-log%2Fwasd","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fde-v-log%2Fwasd","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fde-v-log%2Fwasd/lists"}