기술 과제 - 채팅 클라이언트 개발

목차

• 개발 환경
• 빌드 및 실행하기
• 기능 요구사항
• 주요 기능
• 화면 구성

개발 환경

• 기본 환경

  • IDE: Visual Studio Code
  • OS: Mac
  • GIT

• Frontend

  • React (v18.3.1)
  • React Router DOM (v6.24.1)
  • Socket.IO Client (v4.7.5)
  • Axios (v1.7.2)

• Infra

  • AWS EC2, PM2, Docker

빌드 및 실행하기

터미널 환경

• Git, Node.js는 설치되어 있다고 가정합니다.

• .env 파일 설정

REACT_APP_BACKEND_URL=http://localhost:5001

$ git clone https://github.com/juhwano/backend-challenge-chat-client.git
$ cd backend-challenge-chat-client
$ npm install
$ npm start

기능 요구사항

개요

• 채팅 시스템의 클라이언트 부분을 구현합니다.
• 사용자는 웹 인터페이스를 통해 실시간으로 메시지를 주고받을 수 있습니다.
• 1:1 채팅 및 그룹 채팅을 모두 지원합니다.

필수사항

• 사용자 로그인 및 로그아웃 기능을 제공합니다.
• 실시간 채팅이 가능한 환경을 구성합니다.
• 1:1 채팅 및 그룹 채팅을 모두 지원합니다.
• 사용자 검색 기능을 제공합니다.
• 사용자의 접속 상태를 표시합니다.
• 채팅방 생성 및 참여 기능을 제공합니다.

제약사항

• 그룹 채팅의 인원은 최대 100명으로 제한합니다.
• 사용자가 전달할 수 있는 메시지는 텍스트만 가능합니다.
• 텍스트 메시지의 길이는 1,000자로 제한합니다.

주요 기능

사용자 관리

• 닉네임 설정을 통한 간편 로그인/로그아웃
• 사용자 검색 기능
• 사용자 접속 상태 표시 (온라인/오프라인)

채팅방 관리

• 1:1 채팅방 생성 및 참여
• 그룹 채팅방 생성 및 참여
• 채팅방 목록 조회 및 페이지네이션

메시지 관리

• 실시간 메시지 전송 및 수신
• 메시지 길이 제한 (1,000자)
• 시스템 메시지 표시 (입장, 퇴장)

화면 구성

홈 화면

• 닉네임 설정 및 로그인/로그아웃
• 사용자 검색 기능
• 1:1 채팅 목록 (로그인 시)
• 그룹 채팅 목록
• 그룹 채팅방 생성 버튼 (로그인 시)

채팅방 화면

• 채팅방 이름 표시
• 메시지 목록 (사용자 메시지, 다른 사용자 메시지, 시스템 메시지)
• 메시지 입력 영역 (글자 수 제한 표시)
• 전송 버튼
• 나가기 버튼