커리큘럼
home
React
home

밴드(사랑방) 커뮤니티 - 게시판, 단체 채팅

Created
2025/02/03 06:10
Tags

관심 있는 수업이 없어도 걱정하지 마세요.

'사랑방' 페이지를 통해 같은 관심사를 가진 회원들과 소통하며 즐겁게 시간을 보낼 수 있습니다.

시클시클에는 '사랑방'이라는 공간이 있습니다. 이곳에서는 원하는 수업을 듣는 것뿐만 아니라, 평소 관심 있는 주제에 대한 '사랑방'을 생성하고, 멤버로 참여할 수 있습니다.
'사랑방'의 게시판 기능실시간 단체 채팅 기능은 같은 관심사를 가진 시니어들이 언제든지 새로운 소셜 네트워크를 형성할 수 있도록 지원합니다.

사랑방 (커뮤니티) 기능

메인에서 사랑방을 클릭하여, 최신 사랑방 페이지로 입장합니다.
사랑방 리스트/생성API
최신 사랑방 리스트에서 사랑방 만들기 버튼을 통해 원하는 사랑방을 생성할 수 있습니다.
사랑방 가입 API
원하는 사랑방을 클릭해, 사랑방 가입 버튼을 누르면 가입이 완료됩니다.
내 사랑방 목록 / 사랑방 삭제
*내 사랑방 목록
*사랑방 삭제
내 사랑방 페이지에서 본인이 만든 사랑방을 삭제할 수 있습니다.
‘게시판’ 클릭 시 해당 밴드의 게시글 목록으로 연결되며,
‘채팅방 클릭 시 해당 밴드의 실시간 단체 채팅으로 연결됩니다.

사랑방 게시판 기능

*게시판 목록 페이지
*게시글 작성 페이지
게시판 목록에서 게시글 생성 버튼을 통해 게시글 생성이 가능합니다.
댓글등록 API
게시글 상세 페이지에서 댓글을 작성한 뒤 등록을 누르면 댓글이 생성됩니다.

사랑방 채팅 기능

사랑방 단체 채팅 API - send bird
내 사랑방 목록에서 채팅방 버튼을 통해 사랑방 멤버 간의 실시간 단체 채팅이 가능합니다.
좌측에는 해당 사랑방 가입 멤버 목록과 그들의 online/offline 상태가 나타나며, 메세지를 입력 후 send를 누르면 메세지 전송이 완료됩니다.

Background Task

커뮤니티 CRUD
사랑방 커뮤니티의 생성, 가입, 삭제, 모임장 이전, 게시물과 댓글의 CRUD, 좋아요 기능 등의 API를 구현하였습니다.
인가 - 토큰을 통한 유효성 검증
모임장, 사랑방 멤버, 비 멤버를 구분하여 각 API에 접근할 수 있는 권한에 따라 토큰을 통해 유효성을 검증하고 인가 과정을 거치게 됩니다.
사랑방 커뮤니티의 생성, 삭제, 이전 관련 API는 모임장만 접근할 수 있습니다.
게시물, 댓글의 생성과 조회는 해당 사랑방의 멤버만, 삭제와 수정은 해당 게시물의 작성자만 가능합니다.
채팅 기능
사랑방 생성 시 밴드 멤버들이 소통할 수 있는 채팅방이 생성됩니다.
유저가 사랑방 채팅 페이지에 들어올 때 샌드버드 채팅방에도 입장합니다.
참여자 목록을 볼 수 있습니다.
한 번에 20개씩 메세지를 로드합니다.
실시간으로 메세지를 수신합니다.
빈칸이면 메세지를 보내지 않습니다.
5초마다 유저 상태를 확인하고 유저가 오프라인이 되면 샌드버드 채팅방으로 퇴장시킵니다.

도입한 이유

프로젝트에 두 가지 채팅 기능을 구현해야 했기에, 웹소켓 외에도 다른 기술을 도전해 보고 싶었습니다. 그래서 SendBird라는 서드파티 서비스를 도입했습니다. SendBird는 별도의 서버 구축이 필요 없고, 보안이 강화된 안정적인 채팅 인프라를 제공합니다. 현재는 재정적인 이유로 무료 버전을 사용하고 있어 모든 기능을 활용할 수는 없지만, SendBird는 파일 전송, 참여자 목록 관리, 웹훅(Webhook), 통화 기능, 화면 공유 기능, 녹화 기능 등 다양한 기능을 지원합니다. 프로젝트가 성장했을 때 이러한 기능들을 쉽게 통합하고 확장할 수 있다는 점 또한 SendBird를 선택한 중요한 이유라고 생각했습니다.

트러블 슈팅

문제 :
특정 사랑방에서만 게시물 생성 시 유효한 멤버가 아니라는 404 에러가 발생했습니다.
원인 분석 :
게시물 생성 코드를 확인해 보니 게시물 생성 로직은 정상적으로 작동하지만, 게시물 생성 후 멤버들에게 알림을 보내는 로직에서 에러가 나는 것을 발견했습니다. 사랑방 멤버들은 band_member 테이블에서 관리되는데 유저 탈퇴 후 band_member 테이블에서 해당 유저의 데이터도 삭제 처리되어야 했지만, 로직 구현이 안 되어 탈퇴한 유저에게 알림을 보내려다 404 에러가 발생했음을 확인했습니다.
해결 :
cascade 옵션을 통해 유저 데이터 삭제 시 band_member 데이터를 연동하여 삭제하는 방법도 있었지만, 유저 탈퇴 시 soft-delete 처리를 통해 삭제 처리하였기에, 쿼리를 통해 따로 해당 유저의 가입한 모든 사랑방의 band_member 데이터를 삭제하는 로직을 추가하였습니다.
게시글 조회 API / 게시글 등록 API