데스크탑 유저를 위한 채팅 프로그램
- 다음을 순서대로 실행해주세요
# 1. git clone [깃헙 저장소 주소] $ git clone [email protected]:han-byul-yang/Desktop_Chatting.git # 2. 클론받은 폴더로 이동 $ cd Desktop_Chatting(폴더를 특별히 지정하지 않은 경우) # 3. 폴더 파일 열기 $ code . # 4. dev dependencies를 설치 $ npm install 또는 npm i # 5. 서버 실행(http://localhost:8888) $ npm run dev
- React v18
- Typescript
- Firebase
- 로그인
테스트 유저(이메일/비밀번호) - [email protected]/user11 - [email protected]/user22 - [email protected]/user33
- 회원가입
- 유저 목록
- 1대1 채팅
- 그룹 채팅
- 로그인 오류 발생 시 오류 모달을 띄워줍니다.
- 회원가입 오류 발생 시 오류 모달을 띄워줍니다.
- 회원가입한 유저가 목록에 모두 보여집니다.
- 유저를 클릭하면 닉네임 및 이메일 정보가 띄워집니다.
- 기존의 채팅방 목록으로, 방 클릭 시 채팅할 수 있습니다.
- 채팅방 이름이 유저(나)를 제외한 멤버로 나열 표시됩니다. 유저(나)의 채팅방은 '내 채팅방'으로 표시됩니다.
- 채팅방 생성 시 실시간으로 목록 상단에 표시됩니다.
- 마지막 메세지가 가장 최신인 순으로 채팅방이 실시간 나열 및 표시됩니다.
- 선택한 멤버들의 채팅방이 이미 존재하는 경우 그 기존의 채팅방을 띄워줍니다.
- 멤버들이 모두 속한 채팅방이 없는 경우 새로운 채팅방을 띄워줍니다.
- Enter를 누르면 메세지가 전송되며, Enter+Shift를 누르면 줄바꿈을 할 수 있습니다.
- 이전 메세지 전송 이후 날짜가 변경되면, 새로운 메세지 표시 전에 날짜가 띄워집니다.
- 연속으로 같은 멤버가 메세지를 보내면, 뒤 메세지의 닉네임은 표시가 생략됩니다.
- 연속으로 같은 시&분에 메세지를 보내면, 앞의 시간은 표시가 생략됩니다.
- 채팅방 클릭 시, 스크롤 마지막 위치의 화면이 띄워집니다.
- 유저 목록 페이지의 유저를 클릭하거나, 채팅방 페이지의 채팅 상대 선택 버튼 클릭 후, 상대를 선택하여 채팅을 시작할 수 있습니다.
- 이 때, 아무도 클릭하지 않는 경우 방 생성 버튼이 비활성화 됩니다.
[유저 선택]
[1대1 채팅]
- 채팅방 페이지의 채팅 상대 선택 버튼 클릭 후, 멤버들을 선택하여 채팅을 시작할 수 있습니다.
- 이 때, 아무도 클릭하지 않는 경우 방 생성 버튼이 비활성화 됩니다.
[유저 선택]
[그룹 채팅]
- 유저 목록의 내 프로필을 클릭하면 내 채팅방을 시작할 수 있습니다.
