ChawChaw : 언어교환 채팅앱 ( 본 서비스는 모바일, 탭, 데스크 탑 사용 가능합니다. )
ChawChaw는 국내 대학교 유학생들 과 국내 재학생 간의 언어소통을 위한 웹 채팅 어플리케이션 입니다.
국내 웹메일을 지원하는 대학을 대상으로 웹메일을 통한 대학생 신분인증 서비스를 지원합니다.
각 대학교 마다 독립적입 커뮤니티를 통해 실질적으로 거리감이 가까운 사람들끼리 1대 1 채팅을 서비스하며 채팅안에서 이미지 전송 및 언어 번역을 통해 언어를 교환할 수 있습니다.
FrontEnd : Typescript React NextJs styled-components stompjs
CI/CD : Frontend Vercel , Backend : Jenkins
Backend : Spring Boot 2.5. Mysql 8.0.23 Java 11
Server : AWS EC2
Version Control : Git
Repository : Github
- 2021년 7월 20일 ~ 2021년 9월 30일
- Frontend : 노두현
- Backend : 하주현 김진현
테마변경
- 웹 애플리 케이션 전반에 걸쳐 다크모드, 라이트 모드 설정이 가능합니다. 한번 설정한 설정은 로컬스토리지에 저장되어 브라우저를 꺼도 설정이 유지가 됩니다.
회원가입
-
일반 회원가입
-
로그인 페이지 → 일반 회원가입 버튼 → 웹메일 인증 페이지
-
웹메일 주소 입력 → 발송하기 버튼 → 웹 메일 유효성 검사 → 웹 메일 인증 번호 발송
-
인증번호 입력 → 회원 정보 입력 버튼 → 웹 메일 인증 번호 유효성 검사 → 회원가입 정보 입력 페이지
-
이메일 유효성 검사 → 이메일 중복검사 → 비밀번호 유효성 검사 → 그외 정보 입력 → 회원가입버튼 → 회원가입 [GUEST]
❗️ [GUSET]는 프로필 작성을 하지 않은 회원으로 채팅기능에 제한이 있습니다.
-
-
소셜 회원가입
- 로그인 페이지 → [카카오, 페이스북 버튼] → 소셜 로그인 인증 → 회원가입 여부 확인
- 비가입 회원인경우 → 회원가입진행 → 웹메일 인증 페에지
- 웹메일 주소 입력 → 발송하기 버튼 → 웹 메일 유효성 검사 → 웹 메일 인증 번호 발송
- 회원가입 버튼 → 회원가입 [GUEST]
로그인
- 일반 로그인
-
로그인 페이지 → 이메일, 비밀번호 입력 → 로그인 버튼 → 로그인
-
학교별 페이지
-
- 소셜 로그인
- 로그인 페이지 → [카카오, 페이스북 버튼] → 소셜 로그인 인증 → 로그인
- 학교별 페이지
헤더
-
프로필
- 프로필 수정 : 프로필 수정 페이지 이동
- 채팅창 : 채팅 페이지 이동
- 설정 : 회원탈퇴 , 소속대학확인, 차단 목록 관리
- 로그아웃 : 로그아웃 → 로그인 페이지 이동
-
새로운 알림
-
새로운 메세지
-
[ 프로필 사진, 이름, 보낸 메세지, 보낸 메세지 시간 ] 이 표시 됩니다.
-
해당 메세지를 클릭하면 채팅방으로 이동합니다.
-
-
좋아요 메세지
- [ 프로필 사진, 이름, 좋아요 , 좋아요취소 , 클릭 시간 ] 이 표시 됩니다.
-
프로필 작성
-
이미지 수정
-
이미지 버튼 → 5MB 이하 이미지 선택 → 이미지 업로드 완료
-
-
이미지 삭제
-
이미지 삭제버튼 → 이미지 삭제 완료
-
-
자기소개 수정
-
코멘트 수정 버튼 → 코멘트 수정 → 업데이트 버튼
-
-
국적, 할수있는 언어, 배우고 싶은언어 추가
- '+' 버튼 → dropbox 버튼 → select 박스에서 원하는 메뉴 선택'+'
- '-' 버튼 → 이전 선택 박스 삭제
❗️ 국적은 최대 2개, 언어는 최대 4개 선택가능 합니다
-
SNS 주소 수정
-
[facebook, instagram] 주소 수정 버튼 → 수정 → 업데이트 버튼
-
-
프로필 업로드 버튼 → 프로필
❗️ 프로필 업로드시 이미지, SNS 주소를 제외하고 국적, 언어, 희망언어 모두 하나이상 선택해야 업로드가 가능합니다.
포스팅 검색
프로필 업로드를 하면 학교별 포스팅 페이지에 포스팅이 올라갑니다. 자기 자신의 포스팅은 볼 수 없습니다. 그리고 자신의 학교에 속한 학생들의 포스팅만 볼 수 있습니다. 포스팅은 자신의 프로필을 기반으로 올라갑니다.
-
검색창에 검색하고 싶은 이름 입력 [이름에 해당 입력한 단어가 들어가면 해당 유저의 포스팅이 검색됩니다.]
-
모국어, 할수 있는 언어, 국적 선택
-
Search 버튼 → 포스팅 검색 화면
❗️자신이 차단한 유저는 검색되지 않습니다.
포스팅 카드
검색화면에서 보이는 포스팅 카드에는 해당유저의 [ 프로필 사진, 이름, 대표 국적, 대표 언어, 대표 희망 언어 , 간략한 자기소개, 포스팅 좋아요, 포스팅이 올라간 후 시간, 포스팅 카드 조회수 ] 가 표시됩니다.
-
해당 유저의 포스팅 카드를 클릭하면 포스트 카드 모달이 뜨며 자세한 해당 유저의 자세한 프로필을 확인 할수 있습니다.
-
포스트 카드 모달에는 [ 프로필 사진, 이름, 국적들, 할 수 있는 언어들, 희망 언어들 , 자기소개 전체, 포스팅 좋아요, 포스팅이 올라간 후 시간, 포스팅 카드 조회수, sns 주소, 좋아요 버튼, 차단 버튼, 채팅버튼 ]게시됩니다.
-
좋아요
- 좋아요 버튼 : 해당 사용자가 좋아요 표시가 되며 해당 사용자의 좋아요 갯수가 1 올라갑니다. → 좋아요 취소 버튼 변환
- 좋아요 취소 버튼 : 좋아요 표시가 취소되며 해당 사용자의 좋아요 갯수가 1 내려갑니다. → 좋아요 버튼 변환
-
차단
- 차단 버튼
- 해당 사용자가 보내는 메세지가 차단
- 사용자와 차단 대상 모두 서로에게 채팅을 걸수 없음
- 차단 상태에서 좋아요 취소는 가능하나 좋아요는 할 수 없음
- 설정 페이지에서 차단목록 관리 가능
- 차단 해제 버튼
- 차단 상태의 모든 기능이 다시 정상화
- 차단 버튼
-
TryChat 버튼
- 채팅방 페이지로 이동
- 해당 사용자와의 채팅방 생성 → 채팅방 목록 추가
- 해당 사용자와의 채팅방이 메인채팅방 → 메세지 입력창 활성화
채팅
-
메인 채팅방
-
헤더
- 홈버튼 : 학교별 포스트 검색 페이지 이동
-
채팅방목록 버튼 [모바일 화면] : 채팅방 목록
- 나가기 버튼 : 채팅방에서 나가기
-
메세지 입력
-
일반 텍스트 : 일반 텍스트 입력후 'enter' 혹은 보내기 버튼을 누르면 메세지 전송 → 메인 채팅방에 메시지
-
이미지 보내기 : 이미지 버튼 누르고 이미지 선택 [5MB 이하 파일] → 이미지 전송 → 메인 채팅방에 이미지 메시지 띄우기
-
메세지 번역 : 헤더에서 번역이 될 언어를 선택 → 번역을 원하는 메시지 박스 클릭 → 번역 버튼 생성 → 번역 버튼 클릭 → 메세지 박스의 언어가 헤더에 선택한 언어로 번역
-
프로필 카드 : 상대방의 프로필 사진 클릭 → 간단한 프로필 카드 모달 생성 → 차단하기 버튼
-
-
-
채팅 목록
[ 프로필 사진, 이름, 마지막으로 보낸 메세지, 최근 메세지 시간, 몇개의 새로운 메세지가 왔는지 ] 가 표시 됩니다.-
상대방에게 새로운 채팅이 올 경우 : 새로운 채팅목록이 생성됩니다.
-
채팅페이지 들어올 때 : 해당 채팅방에서 새로운 메시지의 갯수를 표시합니다.
-
채팅방 입장시 : 채팅방에 들어가면 해당 채팅방의 메세지들은 읽음 표시가 되어 새로운 메세지에서 제외 됩니다.
-
채팅방에서 알림 표시 : 메세지 알림을 제외한 좋아요 알림만 울립니다.
-
❗️ 채팅중 상대방이 차단을 할 경우
- 채팅방은 여전히 존재합니다. 다만 서로 메세지를 보낼수 없습니다.
- 차단 된 채팅방에서 메세지를 보내면 더이상 메세지가 보내지지 않습니다.
- 차단 한 이후의 메세지는 기록에 남겨지지 않습니다.
-
설정
-
회원탈퇴 : 버튼을 누르면 ChawChaw 회원탈퇴가 됩니다. → 로그인 페이지
-
소속 대학교 : 웹메일을 인증한 대학교가 표시됩니다. [ 수정 불가 ]
-
차단 목록 관리 : 차단한 유저 리스트가 표시됩니다.
- 차단 해제 버튼 : 차단한 유저의 차단이 해제됩니다. → 차단 버튼 으로 변경 : 차단을 해제한 유저는 새로고침시 보이지 않습니다.
- 차단 버튼 : 해당 유저를 차단합니다. → 차단 해제 버튼으로 변경
관리자 페이지
-
관리자 페이지 : 관리자 전용 아이디 / 비밀번호로 로그인하면 관리자 페이지로 로그인 됩니다. 유저 아이디는 ChawChaw 서비스만 이용가능하며 관리자 아이디는 관리자 페이지만 이용 가능합니다. 관리자 페이지는 모바일 화면을 지원하지 않습니다. 각 탭은 접을 수 있으며 회원정보검색화면, 통계화면으로 이루어져 있습니다.
-
회원 정보 검색 : 이름, 언어, 희망언어, 나라, 학교, 정렬, 순서 등의 검색조건에 맞게 사용자들을 검색할 수 있습니다. 페이지 네이션을 구현하였습니다.
-
회원 정보 관리 : 회원 정보 검색화면에서 관리하고 싶은 회원을 누르면 해당회원의 정보들을 관리하는 페에지로 넘어갑니다. 해당회원의 프로필과 차단 목록 및 회원 삭제를 할 수 있습니다.
-
통계 : 현재 유저들의 활동을 그래프로 나타내어 시각화 하였습니다.
-
학교 활성도 순위 : 학교별 유저수가 가장많은 10개의 학교를 뽑아 그래프로 나타내었습니다.
-
인기 검색 언어 순위 : 유저가 post 검색창에서 배우고 싶은 언어로 검색한 언어의 순위를 그래프로 나타내었습니다.
-
선택 언어 순위 : 유저가 할 수 있는 언어로 선택한 언어의 순위를 그래프로 나타내었습니다.
-
선택 희망 언어 순위 : 유저가 배우고 싶은 언어로 선택한 언어의 순위를 그래프로 나타내었습니다.
-
- ID : test0@naver.com ~ test19@naver.com
- PW : sssssssS1!
- ID : admin0@chawchaw.kr ~ admin2@chawchaw.kr
- PW : admin123!@#
- 관리자 페이지
- 다중 채팅방
- 다중 채팅방 만들기 페이지
- 다국어 지원 페이지 [ 영어, 중국어, 한국어 ]
- 음성메세지 기능
- 동영상 메세지 기능
- 자동 로그인 확인 기능