logo_leaf

프로젝트 소개

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

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

팀원 소개

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

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

프로젝트 발표 영상 Youtube Badge

Video Label

우리의 개발 일지

분야 링크 분야 링크
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

주요 기능

📢 메인 페이지

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

✨ 근처 테마를 추천해요.

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

메인페이지1-min

📢 검색 페이지

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

검색_테마검색

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

검색_모집바로가기

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

검색페이지_방생성 (1)

📢 헤더

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

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

녹화_2023_12_12_14_56_40_416

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

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

헤더_네비게이션_이동 (1) (1)

📢 모집리스트 페이지

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

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

모집리스트_방생성

📢 나의 채팅방 페이지

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

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

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

나의채팅방_마지막메세지

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

나의채팅방_퇴장하기

📢 채팅 페이지

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

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

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

채팅방_추방

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

채팅방 방정보 변경

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

채팅방페이지_안읽은사람수

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

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

채팅방_팝업메세지2

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

채팅방_시간표 불러오기

기술 스택

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

아키텍처

image