Repository files navigation
해당 프로젝트는 socket.io 학습을 위해 제작한 실시간 채팅 서비스를 웹으로 구현한 것 입니다.
친구목록 페이지를 통해 친구 검색, 친구 추가, 추천 친구 추가등의 기능을 이용할 수 있습니다.
채팅방 목록 페이지에서는 채팅방 검색, 생상, 퇴장의 기능이 있습니다.
채팅 페이지에서는 같은 방에있는 유저들과 실시간으로 채팅을 나눌 수 있습니다.
Front : NextJs, Tailwindcss, typescript, jwt, socket.io, dayjs, react-calendar
Back-end : express.js, typescript, bcrypt, jwt
버전 및 이슈관리 : Github
협업 툴 : Discord
UI
페이지 : 로고, 로그인, 회원가입, 친구목록, 채팅방목록, 채팅방
기능
친구(검색, 추가, 상세정보), 추천 친구 추가, 채팅방목록(검색, 생성, 퇴장), 실시간 채팅
전체 개발 기간 : 2023-12 ~ 2024-01
Git과 Distcord를 이용하여 소통하며 내용을 공유하였습니다.
주 3~4회씩 회의를 진행하며 개발 방향성에 대한 고민을 하였습니다.
초기화면
이메일 주소와 비밀번호를 입력후 로그인 버튼을 누르면 유효성 검사가 실시됩니다.
이메일 주소 형식이 다르거나, 비밀번호가 특수문자, 숫자, 문자의 조합으로 이루어져있지 않은 경우 경고 문구가 화면에 나타납니다.
유효성 검사에 통과 된 후 로그인 버튼을 누르면 친구목록 페이지로 이동하게 됩니다.
로그인
사용자의 이름, 이메일 주소, 비밀번호를 입력받습니다.
로그인과 같은 방식의 유효성 검사를 진행합니다, 유효성 검사에 통과되게 되면 회원가입이 성공합니다.
회원가입
친구목록 페이지 좌측하단에 나기기 버튼을 클릭하면 로그아웃 됩니다.
로그아웃시 로컬 저장소의 토큰 값과 사용자 정보를 삭제하고 초기화면으로 이동합니다.
상단 배너
검색 : 이름, 이메일이 일치하는 경우 해당 사용자를 보여줍니다.
친구 추가 : 사용자 고유 ID와 이메일을 통해서 친구 추가를 할 수 있습니다.
좌측 탭 메뉴 : 친구 목록, 채팅방 페이지로 이동합니다, 로그아웃
친구 추가가 되어있는 친구들의 목록이 표시됩니다.
친구 클릭시 상세 정보가 담겨져 있는 모달이 표시됩니다.
추천 친구를 클릭하여 나와 친구 추가가 되어있지 않은 유저들의 목록이 표시됩니다.
친구 목록
상단 배너
검색 : 채팅방 제목 혹은 채팅방 인원에 이름이 일치하는 경우 해당 채팅방을 보여줍니다.
채팅방 생성 : 원하는 수 만큼의 친구를 선택하여 초대할 수 있습니다.(한 명 클릭시 해당 채팅방의 제목은 상대방 이름이 되고 두 명 이상 초대시 채팅방 이름을 정할 수 있습니다.)
자신이 초대되어있는 채팅방들을 확인 할 수 있습니다.
우측 버튼을 클릭하여 채팅방 나가기 버튼을 확인 후 클릭시 해당 채팅방을 나가게 됩니다.
읽지 않은 메시지는 누적되어 가장 마지막 메시지가 채팅방 목록에 보여지게 됩니다, 또한 읽지 않은 메시지 수 만큼의 숫자를 확인 할 수 있습니다.
실시간으로 채팅방 인원들과 메시지를 송수신 할 수 있습니다.
하루가 지날 경우 날짜 표시선이 나타납니다.
채팅 읽음, 읽지 않음 표시가 처리되었습니다.
채팅방을 선택하지 않아있으면 채팅방을 선택해 달라는 컴포넌트가 보이게 됩니다.
채팅방 목록
채팅방
크게 스마트폰, 태블릿, 데스크탑의 사이즈로 구분하여 반응형 디자인으로 표시하였습니다.
너무 작은 스마트폰에서는 레이아웃이 꺠져 보일 수 있습니다.
API 모듈화 : API를 불러오는 코드의 반복이 많아 모듈화
상태끌어올리기를 통한 props 전달을 redux를 사용하여 상태관리
About
No description, website, or topics provided.
Resources
Stars
Watchers
Forks
You can’t perform that action at this time.
