실시간 채팅 서비스 웹

프로젝트 소개

• 해당 프로젝트는 socket.io 학습을 위해 제작한 실시간 채팅 서비스를 웹으로 구현한 것 입니다.
• 친구목록 페이지를 통해 친구 검색, 친구 추가, 추천 친구 추가등의 기능을 이용할 수 있습니다.
• 채팅방 목록 페이지에서는 채팅방 검색, 생상, 퇴장의 기능이 있습니다.
• 채팅 페이지에서는 같은 방에있는 유저들과 실시간으로 채팅을 나눌 수 있습니다.

팀원 구성

박병근	최형순
@Dejong1706	@HS980924

1. 개발 환경

• Front : NextJs, Tailwindcss, typescript, jwt, socket.io, dayjs, react-calendar
• Back-end : express.js, typescript, bcrypt, jwt
• 버전 및 이슈관리 : Github
• 협업 툴 : Discord

2. 역할 분담

🍊박병근

• UI
  • 페이지 : 로고, 로그인, 회원가입, 친구목록, 채팅방목록, 채팅방
• 기능
  • 친구(검색, 추가, 상세정보), 추천 친구 추가, 채팅방목록(검색, 생성, 퇴장), 실시간 채팅
    

👻최형순

• 기능
  • 서버 API 제작

3. 개발 기간 및 작업 관리

개발 기간

• 전체 개발 기간 : 2023-12 ~ 2024-01

작업 관리

• Git과 Distcord를 이용하여 소통하며 내용을 공유하였습니다.
• 주 3~4회씩 회의를 진행하며 개발 방향성에 대한 고민을 하였습니다.

4. 페이지별 기능

[로고화면]

• 로그인 이전 대기 화면입니다.

초기화면

[로그인]

• 이메일 주소와 비밀번호를 입력후 로그인 버튼을 누르면 유효성 검사가 실시됩니다.
• 이메일 주소 형식이 다르거나, 비밀번호가 특수문자, 숫자, 문자의 조합으로 이루어져있지 않은 경우 경고 문구가 화면에 나타납니다.
• 유효성 검사에 통과 된 후 로그인 버튼을 누르면 친구목록 페이지로 이동하게 됩니다.

로그인

[회원가입]

• 사용자의 이름, 이메일 주소, 비밀번호를 입력받습니다.
• 로그인과 같은 방식의 유효성 검사를 진행합니다, 유효성 검사에 통과되게 되면 회원가입이 성공합니다.

회원가입

[로그아웃]

• 친구목록 페이지 좌측하단에 나기기 버튼을 클릭하면 로그아웃 됩니다.
• 로그아웃시 로컬 저장소의 토큰 값과 사용자 정보를 삭제하고 초기화면으로 이동합니다.

[친구 목록]

• 상단 배너
  • 검색 : 이름, 이메일이 일치하는 경우 해당 사용자를 보여줍니다.
  • 친구 추가 : 사용자 고유 ID와 이메일을 통해서 친구 추가를 할 수 있습니다.
• 좌측 탭 메뉴 : 친구 목록, 채팅방 페이지로 이동합니다, 로그아웃
• 친구 추가가 되어있는 친구들의 목록이 표시됩니다.
• 친구 클릭시 상세 정보가 담겨져 있는 모달이 표시됩니다.
• 추천 친구를 클릭하여 나와 친구 추가가 되어있지 않은 유저들의 목록이 표시됩니다.

친구 목록

[채팅방 목록]

• 상단 배너
  • 검색 : 채팅방 제목 혹은 채팅방 인원에 이름이 일치하는 경우 해당 채팅방을 보여줍니다.
  • 채팅방 생성 : 원하는 수 만큼의 친구를 선택하여 초대할 수 있습니다.(한 명 클릭시 해당 채팅방의 제목은 상대방 이름이 되고 두 명 이상 초대시 채팅방 이름을 정할 수 있습니다.)
• 자신이 초대되어있는 채팅방들을 확인 할 수 있습니다.
• 우측 버튼을 클릭하여 채팅방 나가기 버튼을 확인 후 클릭시 해당 채팅방을 나가게 됩니다.
• 읽지 않은 메시지는 누적되어 가장 마지막 메시지가 채팅방 목록에 보여지게 됩니다, 또한 읽지 않은 메시지 수 만큼의 숫자를 확인 할 수 있습니다.

[채팅방]

• 실시간으로 채팅방 인원들과 메시지를 송수신 할 수 있습니다.
• 하루가 지날 경우 날짜 표시선이 나타납니다.
• 채팅 읽음, 읽지 않음 표시가 처리되었습니다.
• 채팅방을 선택하지 않아있으면 채팅방을 선택해 달라는 컴포넌트가 보이게 됩니다.

채팅방 목록	채팅방

[반응형]

• 크게 스마트폰, 태블릿, 데스크탑의 사이즈로 구분하여 반응형 디자인으로 표시하였습니다.
• 너무 작은 스마트폰에서는 레이아웃이 꺠져 보일 수 있습니다.

메인	채팅방목록	채팅방

5. 개선 목표

• API 모듈화 : API를 불러오는 코드의 반복이 많아 모듈화
• 상태끌어올리기를 통한 props 전달을 redux를 사용하여 상태관리