경로당은 고령층을 위한 커뮤니티 플랫폼으로, 사용자가 집에서 편하게 동네 친구를 사귀고 자유롭게 소통할 수 있는 SNS 및 채팅 서비스를 제공합니다. MZ세대의 대표 랜덤 채팅 서비스인 **아자르(Azar)**와 고령층 대상 커뮤니티 앱 **시놀(Sinol)**을 벤치마킹하여, 보다 간편한 사용자 인터페이스와 시니어를 위한 맞춤형 기능을 구현하였습니다.
- 랜덤 오픈 채팅: 다양한 사람들과 랜덤으로 소통할 수 있는 기능
- 화상 채팅: 영상 통화를 통해 더욱 깊이 있는 소통 경험 제공
- 커뮤니티 생성 및 참여: 사용자가 동네 커뮤니티를 쉽게 만들고 모집할 수 있는 기능
- 실시간 알람 서비스:
- 사용자 정의 알람 설정: 채팅 알람 및 커뮤니티 알림을 사용자가 원하는 대로 설정 가능
- Spring Boot Scheduler: 동적 스케줄링 기능 구현
Database
middleware
- JWT: 인증 및 권한 부여
메인 개발 툴
버전 관리 및 소스 코드 저장소
| 채호정 | 최근태 | 도승우 | 한승희 | 김강민 |
|
|
|
|
|
| BE 팀장 오픈 채팅 |
BE 랜덤 화상채팅 1대1 화상채팅 |
BE 커스텀 알람 게시글/좋아요 알람 |
BE 깃 관리자 게시판 댓글 마이페이지 |
BE OAuth2 로그인 JWT토큰 로그인/회원가입 |
📋 더 자세히 보기
-작성
📋 커뮤니티 서비스
- 메인 페이지에서 경로당에 입장하면 게시글 목록이 나옵니다.
- 게시글 번호, 게시글 내용, 작성자(이메일), 작성일, 조회수, 좋아요 개수를 확인할 수 있습니다.
- 게시글 내용을 클릭하면 해당 게시글 단일 조회가 가능합니다.
- 한페이지가 게시글 목록 10개 조회가 가능하고 페이징 기능을 통해 페이지를 넘길 수 있습니다.
- 웹 기반 텍스트 에디터인 CKEditor를 사용해서 내용을 작성할 수 있습니다.
- 등록한 글을 수정시에 이미지를 올릴 수 있습니다.
- 해당 게시글 작성자만 수정, 삭제 버튼이 보입니다.
- 게시글 제목, 작성자 프로필 사진, 작성자(이메일), 작성일, 조회수, 게시글 내용, 좋아요, 댓글 수, 댓글이 나옵니다.
- 현자 사용자의 이메일과 프로필 사진이 보입니다.
- 댓글을 등록하면 실시간으로 렌더링이 됩니다.
- 댓글에 대댓글을 작성할 수 있습니다.
- 댓글과 대댓글의 색이 구분됩니다.
- 현재 사용자가 작성한 댓글에만 수정, 삭제 버튼이 보입니다.
- 댓글을 삭제하면 '삭제된 댓글입니다'로 표시됩니다.
- 회원 정보 수정, 현재사용자가 작성한 게시글, 댓글, 좋아요한 게시글 페이지로 이동이 가능합니다.
- 탈퇴하기 버튼이 존재합니다.
- 프로필 사진이 수정 가능합니다
- 현재 사용자가 작성한 게시글 목록 확인이 가능합니다.
- 게시글 제목을 누르면 해당 게시글 페이지로 이동합니다.
- 현재 사용자가 작성한 댓글 목록 확인이 가능합니다.
- 해당 댓글 내용, 작성일, 게시글 제목 확인이 가능합니다.
- 댓글을 누르면 해당 댓글이 작성된 게시글 페이지로 이동합니다.
- 사용자가 좋아요한 게시글 목록 확인이 가능합니다.
- 게시글 제목을 누르면 해당 게시글 페이지로 이동합니다.
- 탈퇴하기 버튼을 누르면 디비에서 사용자의 정보가 사라집니다.
- 탈퇴한 사용자가 작성한 게시글의 작성자는 '탈퇴한 사용자입니다.'로 표시됩니다.
- 새 글 등록 시 이미지 업로드가 실패하는 문제가 있었습니다. 이는 게시글 ID가 자동 생성된 후 그 ID를 기반으로 이미지 객체를 생성하고 저장하는 로직이었기 때문에, 아직 저장되지 않은 게시글에 이미지를 첨부하려다 보니 생긴 문제입니다. 현재 글 수정시에만 이미지 등록이 가능한 상태입니다.
- 댓글 목록을 js에 많이 의존하여 코드를 작성했습니다.
- 마이페이지 댓글 목록에서 하나의 댓글을 누르면, 해당 게시물 페이지로 이동해서 바로 댓글로 갈 수 있도록 만들어야 합니다. ajax로직 수정이 필요해보입니다.
- 게시글 검색 기능(키워드로 검색)
- 게시글 카테고리 구분
- 댓글 페이징
- 관리자 페이지 만들기
📋 화상채팅 서비스
WebSocket, Spring, WebRTC를 활용하여 구현한 1대1 랜덤 화상 채팅 입니다. 사용자는 간단한 인터페이스를 통해 다른 사용자와 실시간으로 화상 대화를 할 수 있습니다. 랜덤 매칭 기능을 통해 새로운 사람들과 쉽게 연결할 수 있습니다.
- 1대1 랜덤 매칭: 사용자를 무작위로 매칭하여 화상 채팅을 연결합니다.
- 실시간 화상 통화: WebRTC를 이용한 안정적인 실시간 영상 및 음성 통화 기능.
- 채팅 메시지: 화상 통화 중 텍스트 메시지를 주고받을 수 있습니다.
- 사용자 상태 표시: 사용자 퇴장 시 알림메세지를 표시합니다.
- 애플리케이션에 접속하면 "랜덤 채팅 시작" 버튼이 표시됩니다.
- 버튼을 클릭하여 다른 사용자와 매칭을 시도합니다.
- 매칭이 성공하면 화상 통화가 시작됩니다.
- 통화 중에는 음성, 영상 및 텍스트 채팅을 이용할 수 있습니다.
- 통화를 끊으시면 다시 랜덤채팅 메인화면으로 돌아갑니다.
📋 알람기능 구현
사용자가 추가한 알람들의 리스트를 보여주는 화면입니다. 각 알람은 수정 및 삭제가 가능하며, 알람은 설정한 시간에 맞춰 작동합니다.
사용자가 알람을 생성할 수 있는 화면입니다. 알람 메시지와 시간과 요일을 설정하고, 알람을 활성화할 요일을 선택할 수 있습니다. 알람은 동적 스케줄링을 통해 선택된 요일과 시간에 맞춰 작동합니다. 커스텀 알람을 웹소켓으로 구현할 때 클라이언트 입력을 수신 받는 handlermessage에서 순환 참조가 발생하여 AplicationEvent를 활용하여 커스텀 서비스를 직접 참조 하지 않도록 구현하여 순환참조를 해결하였습니다.
수정된 알람은 리스트에서 실시간으로 반영되며, 사용자가 설정한 새로운 시간과 메시지로 업데이트됩니다.
기존 알람을 수정할 수 있는 화면입니다. 알람 시간을 변경하고 요일을 추가/제거할 수 있으며, 메시지 역시 수정 가능합니다.
사용자가 설정한 알람 외에도 댓글 및 좋아요 알림을 실시간으로 받을 수 있습니다.
알림 리스트는 최신 알림부터 보여지며, 각 알림의 상세 내용이 표시됩니다.
알람은 알람 타입에 따라 구별되어 리스트을 받을 수 있습니다.
댓글 및 좋아요 알림같은 경우 클릭 시 읽음 처리가 되며 알림 리스트에 더이상 나오지 않게 하였고 게시물 api로 이동할 수 있도록 설계하였습니다.