그때 그 시절 감성 채팅

✋ 소개

드라마 스물 다섯, 스물 하나를 보던 중 컴퓨터를 이용해 채팅을 하는 장면을 보고 마우스가 없던 시절의 채팅을 구현해보고자 하였습니다. 그래서 키보드만을 이용해서 채팅을 다른 사람과 채팅을 해 볼 수 있는 프로그램을 만들어 보았습니다. 프로그램을 사용하는 모든 과정에서 마우스는 전혀 필요가 없도록 구현하였으며 텍스트 기반의 명령어 방식을 통해 진행되도록 구현하였습니다.

🧑‍🤝‍🧑 구성원

• 백엔드 및 프론트엔드 : 1명

💻 기술 스택

• TypeScript, React
• Firebase, NextAuth, TailwindCSS

사용 방법

텍스트 기반의 명령어를 이용하여 사용해야 하기 때문에 상호 작용할 수 있는 모든 것에는 명령어가 함께 표시되어야 했습니다. 그리고 명령어를 입력할 수 있는 입력창도 고정되어야만 했습니다. 따라서 다음과 같은 컨셉으로 모든 화면을 구성하게 되었습니다.

내가 기여한 기능

로그인

• 이메일/비밀번호 로그인
• Google 로그인
• GitHub 로그인

채팅

• 실시간 채팅
• 사용자 접속/퇴장 메세지 표시

실시간 데이터 반영

• Firebase Realtime Database 기능을 활용하여 데이터 실시간 반영
  • 로비에서의 새로운 채팅방 생성 및 삭제
  • 채팅방 접속 인원

채팅방이 생성되고 참여 인원이 업데이트되는 것이 실시간으로 반영

채팅방 탐색

• 방향키를 통해 채팅방을 탐색할 수 있으며 E 명령어를 통해 접속할 수 있습니다.

채팅방 생성

• 채팅방 생성 페이지는 C 명령어를 통해 들어갈 수 있으며 항목을 입력 후 쉽게 생성할 수 있습니다.

프로필 수정

• 채팅방 생성 페이지는 P 명령어를 통해 들어갈 수 있으며 항목을 입력 후 쉽게 수정할 수 있습니다.

로그아웃

• L 명령어를 통해 로그아웃할 수 있습니다.