🍭 Sweety
make your day more sweet!

프라이빗 채팅 서비스, "Sweety"

안녕하세요, 달콤한 만남을 통해 더 행복한 하루를 만드는 Sweety입니다 :)
Sweety는 원하는 상대와 1:1 채팅, 관심사가 같은 사람들과의 그룹 채팅 서비스를 제공합니다.

🔗 배포 링크

테스트 계정
ID : admin123
PW : admin123!

👩‍💻 역할 분담 👨‍💻

박성후 (FE)	윤석민 (FE)	김다빈 (FE)	정서현 (FE)	채민석 (FE)
회원가입・로그인 페이지(API 연동), 소개 페이지 구현, 피그마 디자인, 궁합점수 계산 함수 제작	채팅 페이지(API 연동 & 소켓 통신) 구현, 프로젝트 초기 설정, 문서 정리 (팀장님)	커뮤니티 페이지(API 연동) 구현, 피그마 디자인, firebase util 함수 제작, 노션 정리	네비게이션 바, 마이 페이지(API 연동) 구현, 피그마 디자인, 회의록 정리, 리드미 작성	홈 페이지・유저 상세 프로필 모달(API 연동) 구현, 피그마 디자인, 유저 랜덤 정렬 함수 제작

✨ 구현 내용

회원가입, 로그인

[ 담당 개발자: 박성후 ]

회원가입 시 유저 유효성 검사 (아이디 중복, 탈퇴 여부) 및 유저 정보 DB 등록
회원가입 시 데이터 유효 검사 (데이터 형식)
로그인 시 유저 유효성 검사 (데이터 유효성 검사)
JWT를 이용한 유저 인증
로그아웃

홈

[ 담당 개발자: 채민석 ]

유저 프로필 리스트 조회 (이성 프로필만 조회 가능, 새로고침 시 랜덤 정렬)
유저 상세 정보 프로필 조회
유저 상세 정보를 바탕으로 클릭한 유저와의 궁합 점수 조회
1:1 채팅 생성 및 채팅방으로 이동 (채팅 기록이 있는 경우 바로 이동)

커뮤니티

[ 담당 개발자: 김다빈 ]

커뮤니티 글 리스트 조회 (최신순 정렬)
커뮤니티 글 작성
커뮤니티 글 수정・삭제 (작성한 유저만 가능)
커뮤니티 글 클릭 시 글 내용 및 유저 상세 정보 조회
그룹 채팅 생성 및 채팅방으로 이동 (채팅 기록이 있는 경우 바로 이동)

채팅

[ 담당 개발자: 윤석민 ]

채팅방 리스트 조회 시 마지막 메세지 및 수신 시간 조회
새로운 유저 입장 시 입장한 유저 알림, 채팅방 퇴장 시 퇴장한 유저 알림
채팅방에 속한 유저들의 온라인/오프라인 상태 조회
실시간 1:1 채팅 및 그룹 채팅 (소켓 통신)
채팅방 나가기

마이페이지

[ 담당 개발자: 정서현 ]

자기소개, 관심사 정보 등록
유저 프로필 정보 수정 시 유효성 검사 (회원가입과 동일)
유저 프로필 정보 수정 시 업데이트 가능 (변경사항 없을 시 disabled)
유저 프로필 정보 업데이트 (firebase, 기본 DB)
조건 만족 시 회원 탈퇴

반응형

유저 플로우

💪 필수 구현 사항

• useState, recoil를 활용한 상태 관리 구현
• styled-component를 활용한 스타일 구현
• react 상태를 통한 CRUD 구현
• 상태에 따라 달라지는 스타일 구현
• firebase custom hook을 통한 비동기 처리 구현
• 유저 인증 시스템(로그인, 회원가입) 구현
• jwt를 이용한 유저 인증 시스템 (로그인, 회원가입)
• 소켓을 이용한 채팅 구현

🛠️ 기술 스택

Enviroment & Config

Development (FrontEnd)

DB

Deploy

Communication