요구분석

실전압축개발자 토이프로젝트 - 채팅프로그램

제약 조건

• DB는 없습니다.
• 방 번호는 숫자 4자리로 구분합니다.
• 방 번호에 있는 사람들 끼리만 채팅이 가능합니다.
• 사용자가 닉네임을 설정하고 들어갈 수 있습니다.
• 닉네임에 특정한 특수문자는 막아야합니다. (SQL Injection, HTML Injection 방지)

기술

• Front-end : React (Typescript)
• Back-end : Express (Javascript)
• socket : Socket.io

React는 class형 컴포넌트, 함수형 컴포넌트 어떤것을 사용해도 괜찮습니다.

화면

방 번호 입력

1. 방 번호는 4자리의 숫자로 구분되어야 합니다.
2. 방 번호를 입력하고 입장하기를 누른 경우 방이 존재하지 않는다면 경고를 띄웁니다.
   • 경고의 형태는 자유입니다.
3. 방 번호를 입력하고 방 만들기를 누르면 방을 생성합니다.
4. 이미 존재하는 방인경우 경고를 띄웁니다.

옵션

1. 방 번호를 입력함과 동시에 유효성 검사를 실행합니다. (숫자로만 이루어져 있는지)
2. 유효성에 맞지 않은 경우 input태그에 테두리 색을 변경해 경고를 띄웁니다.
3. input태그 아래에 작은 경고 메시지를 표시합니다.

닉네임 입력

1. 닉네임은 4~6자리의 영어 대소문자로 제한합니다.
2. 동일한 닉네임이 방에 존재하는경우 경고를 띄웁니다.
3. 닉네임에 대한 유효성 검사를 실행합니다.

옵션

1. 닉네임을 입력할 때마다 유효성 검사를 실행합니다.
2. 유효성에 맞지 않은 경우 input태그에 테두리 색을 변경해 경고를 띄웁니다.
3. input태그 아래에 작은 경고 메시지를 표시합니다.

채팅 화면

1. 채팅 화면에는 채팅을 올린 사람의 닉네임과 채팅 내용이 보여야 합니다.
2. 하단에는 메시지를 보낼 메시지박스가 존재해야합니다.
3. 엔터 키를 누르면 메시지가 전송되어야합니다.

옵션

1. 전송 버튼을 누르면 메시지가 전송됩니다.
2. 채팅방에 입장한 인원의 알림을 표시합니다.