/Square-with-me-FE

일상 공유 플랫폼 ▇ WITH ME (네모위드미)

Primary LanguageJavaScript

▇ WITH ME (네모위드미)

💡 혼자가 아쉬운 사람들을 위한! 다른 사람과 함께 집중하자!
자신의 흔적을 남기고 타인이 그것에 공유해주는 교류의 장!
누군가가 지켜봐주고 있다는 느낌을 받으면 더 잘할 수 있다!
서로 관심을 가져준다면 흐트러지지 않고 더욱 몰입해서 열심히 할 수 있어요!

🙆 무엇이든 함께 할 수 있는 실시간 화상 채팅 🙆‍♂️


바로가기


팀원 소개

Name GitHub / Contact Position
장혜진🔰 https://github.com/zinny22 FE / React
박수민 https://github.com/clappingmin FE / React
윤현정 https://github.com/yun2021 FE / React

프로젝트 기간

기간 (2022)
총 기간 2월 25일 ~ 4월 8일 (6주)
배포일 4월 1일
사용자 설문조사 4월 1일 ~ 4월 7일
서비스 개선 4월 1일 ~ 4월 8일

기술 스택




프로젝트 구조

아키텍처


전체 기능

  1. 로그인, 회원가입
  2. 카카오 소셜 로그인
  3. 실시간 화상 채팅
  4. 실시간 이모티콘
  5. 공용 타이머
  6. 화상 채팅 방 검색 및 카테고리별 필터링
  7. 마이페이지에서 참여기록 그래프로 확인
  8. 뱃지 열람 및 대표 뱃지 설정
  9. 반응형 웹

주요 기능

⏱ 공용 타이머
  • 시간 제한을 필요로 하는 작업을 할 때 사용자들이 함께 정한 시간 동안 집중할 수 있도록 공용 타이머 기능을 구현했습니다.
  • 시간 제한을 필요로 하는 작업의 예: 스터디, 운동, 스케치, 마피아 게임 등

타이머

👥 실시간 화상 채팅
  • 마이크 on/off , 카메라 on/off 기능을 통해 화상채팅 사용자들이 자율적으로 선택해 사용할 수 있으며,
    이모티콘을 눌러 간단한 감정 표현도 주고받을 수 있습니다.

채팅 이모티콘

📊 기록 그래프
  • 사용자가 ▇ WITH ME 에서 얼마만큼 활동했는지 시각적으로 볼 수 있도록 마이페이지를 그래프 형태로 표현했습니다.
  • 오늘과 이번 주 참여 기록에서는 카테고리별 참여 기록을, 이번 달 참여 기록에서는 하루 총 참여 시간을 확인할 수 있습니다.
  • 뱃지를 함께 볼 수 있도록 구성해 사용자가 서비스를 이용하며 성취감을 느낄 수 있도록 하고
    원하는 대표 뱃지를 설정해 다른 참여자에게 보여줄 수 있도록 구현했습니다.

마이페이지 기록


FE 기술적 도전 및 트러블 슈팅 - WIKI 🔥

1. 타이머 신호 중복 문제
2. 방 유저 퇴장 인식 문제
3. 방 내부 유저 인식 문제 - 1
4. 방 내부 유저 인식 문제 - 2