프로젝트 소개

방탈출 테마 추천 및 방탈출 인원 모집 서비스

더 이상 혼방(혼자 방탈출)하지 마세요 !

팀원 소개

J002 강창한 - BE	J030 김정민 - BE	J054 박정석 - FE	J099 이선예 - FE

팀노션 | 기획 | 디자인 | 회의록 | 우리의 개발 과정 - 노션 | 트러블슈팅 - 노션

프로젝트 발표 영상

우리의 개발 일지

분야	링크	분야	링크
FE	🚀 성능 최적화(디바운스와 쓰로틀링) - wiki	BE	[BE] 채팅방 이벤트 정리 - wiki
FE	채팅-1 채팅을 어떻게 저장할까?	BE	[BE] 안읽은 사람수 계산하기 - wiki
FE	채팅-2 읽지 않은 사람 수를 어떻게 계산할까?	BE	[BE] 크롤러 캐싱 - wiki
FE	채팅-3 프로필을 보여주는 경우	BE	[BE] 네이버 소셜 로그인
FE	채팅-4 프로필을 보여주는 경우	BE	[BE] 테마 관련 API 캐싱적용
FE	채팅-5 프로필을 보여주는 경우	BE	[BE] S3을 사용해보았어요
FE	무한스크롤과 IntersectionObserver hook 만들기	BE	[BE] 성능테스트 환경 구축
FE	recoil의 atomFamily 사용하기	BE	[BE] 채팅 아키텍처 구성하기
FE	반응형 스켈레톤 UI 만들기	BE	[BE] swagger가 작성한 코드보다 길어질 때 - wiki
FE	svg파일을 React에서 컴포넌트처럼 사용하기	BE	[BE] @OptionalGuard 데코레이터 - wiki

주요 기능

📢 메인 페이지

✨ 랜덤 장르 별로 테마를 추천 받을 수 있어요.

✨ 근처 테마를 추천해요.

✨ 테마포스터를 클릭해서 상세정보 모달을 볼 수 있어요.

📢 검색 페이지

✨ 테마를 검색할 수 있어요.

✨ 특정 테마의 모집바로가기 기능을 제공해요.

✨ 특정 테마로 바로 그룹방을 생성할 수 있어요.

📢 헤더

✨ 네이버 소셜 로그인을 할 수 있어요.

✨ 최초 로그인시 회원가입을 진행해요.

✨ 네비게이션 바로 다른 페이지로 이동할 수 있어요.

✨ 검색어 입력 및 검색 페이지로 이동 할 수 있어요.

📢 모집리스트 페이지

✨ 그룹방을 탐색하고, 입장할 수 있어요.

✨ 그룹방을 생성할 수 있어요.

📢 나의 채팅방 페이지

✨ 사용자가 속하고 있는 방의 리스트를 볼 수 있어요.

✨ 해당 방에 대한 간략한 정보를 확인할 수 있어요.

✨ 해당 방에 마지막으로 보낸 메세지, 시각을 확인할 수 있어요.

✨ 채팅방에 입장, 퇴장할 수 있어요.

📢 채팅 페이지

✨ 소통할 수 있는 채팅 기능을 제공해요.

✨ 자연스러운 채팅 UX를 위해 신경썼어요.

✨ 방장은 참여하고 있는 유저를 추방할 수 있어요.

✨ 방장은 해당 방의 정보를 변경할 수 있어요.

✨ 각 채팅별 읽지 않은 사람 수를 확인할 수 있어요.

✨ 이전 채팅을 불러와도 보던 채팅을 유지할 수 있어요.

✨ 스크롤이 올라가있으면 다른 사람의 채팅을 팝업 메세지로 확인할 수 있어요.

✨ 선택한 테마의 실시간 시간표를 불러올 수 있어요.

기술 스택

구분	기술 스택
공통
앞단
뒷단
저장소
지속적 통합 & 배포

아키텍처