Task Detail List - programmers-kdt-full-stack-3rd/live-chat GitHub Wiki

백엔드(BE) 상세 Task 목록

1. 회원가입 및 로그인

1. 회원가입 API 구현

   • POST /api/users/register 엔드포인트 생성
   • 요청 바디의 이메일, 비밀번호, 이름 유효성 검사
   • 이메일 인증 토큰 검사
   • 비밀번호 해싱 처리
   • 사용자 정보 DB에 저장 및 응답

2. 로그인 API 구현

   • POST /api/users/login 엔드포인트 생성
   • 요청 바디 유효성 검사
   • 사용자 인증
   • JWT 토큰 발급 및 응답

2. 메일 인증

1. 인증 번호 생성, 수정, 삭제 API 구현

   • POST, PUT, DELETE /api/auth/email/verification 엔드포인트 생성
   • 요청 바디의 이메일 유효성 검사
   • PUT, DELETE 이메일 인증 토큰 검사
   • POST, PUT 랜덤 인증번호(4자리) 생성 및 해싱 처리
   • DB에서 리소스 생성, 수정, 삭제
   • JWT 토큰 발급 및 응답

2. 인증 메일 발송 API 구현

   • POST /api/auth/email/send-verification 엔드포인트 생성
   • 요청 바디의 이메일 주소 유효성 검사
   • 이메일 인증 토큰 검사
   • 인증 번호 복호화
   • Nodemailer로 인증 이메일 발송
   • JWT 토큰 발급 및 응답

3. 인증 번호 검사 API 구현

   • POST /api/auth/email/verify 엔드포인트 생성
   • 요청 바디의 인증번호와 이메일 주소 유효성 검사
   • 이메일 인증 토큰 검사
   • 메일 인증 번호 검사
   • JWT 토큰 발급 및 응답

3. 채팅방 관리 API 구현

• POST, GET, PUT, DELETE /api/chatrooms/:id 엔드포인트 생성
• 요청 바디 유효성 검사
• 채팅방 생성, 조회, 수정, 삭제 로직
• 응답으로 요청된 채팅방 정보 반환

4. 채팅방 사용자 목록 조회 API 구현

• GET /api/chatroom/users/:room 엔드포인트 생성
• :room을 통해 특정 채팅방의 사용자 목록 조회
• 응답으로 사용자 목록 반환

5. 실시간 채팅 기능

• 클라이언트 연결 처리
• 채팅방 입장 및 퇴장 이벤트 처리
• 메세지 송수신 이벤트 처리
• 사용자 목록 업데이트

프론트엔드(FE) 상세 Task 목록

1. 회원가입 및 로그인

1. 회원가입 페이지 구현

   • 회원가입 폼 컴포넌트 생성
   • 입력 필드 유효성 검사
   • 회원가입 API 호출 및 응답 처리
   • 회원가입 성공 시 로그인 페이지로 리다이렉트

2. 로그인 페이지 구현

   • 로그인 폼 컴포넌트 생성
   • 입력 필드 유효성 검사
   • 로그인 API 호출 및 응답 처리
   • 로그인 성공 시 메인 페이지로 리다이렉트

3. JWT 토큰 저장 및 관리

   • 로그인 성공 시 JWT 토큰 로컬 스토리지에 저장
   • 요청 시 JWT 토큰을 포함하여 API 호출

2. 채팅방 관리

1. 채팅방 생성

   • UI 구성
     • 채팅방 생성 폼 컴포넌트 작성
     • 이름 입력 필드 및 제출 버튼 생성
   • 상태 관리
     • 채팅방 이름 상태 관리
     • 입력 필드 값 상태 업데이트
   • API 호출
     • POST /api/chatrooms 엔드포인트 호출
     • 채팅방 생성 후 응답 처리 및 상태 업데이트

2. 채팅방 조회

   • UI 구성
     • 채팅방 목록 컴포넌트 작성
     • 채팅방 항목을 리스트로 표시
   • 상태 관리
     • 채팅방 목록 상태 관리
     • 컴포넌트 마운트 시 API 호출하여 목록 업데이트
   • API 호출
     • GET /api/chatrooms 엔드포인트 호출
     • 응답으로 받은 채팅방 목록 상태 업데이트

3. 채팅방 수정

   • UI 구성
     • 채팅방 수정 폼 컴포넌트 작성
     • 이름 입력 필드 및 수정 버튼 생성
   • 상태 관리
     • 선택한 채팅방 정보 상태 관리
     • 입력 필드 값 상태 업데이트
   • API 호출
     • PUT /api/chatrooms/:id 엔드포인트 호출
     • 채팅방 수정 후 응답 처리 및 상태 업데이트

4. 채팅방 삭제

   • UI 구성
     • 채팅방 항목에 삭제 버튼 추가
   • 상태 관리
     • 채팅방 목록 상태 업데이트
   • API 호출
     • DELETE /api/chatrooms/:id 엔드포인트 호출
     • 채팅방 삭제 후 응답 처리 및 상태 업데이트

3. 실시간 채팅 기능

1. 클라이언트 연결 처리

   • UI 구성
     • 채팅 메시지 입력 폼 및 전송 버튼 생성
     • 채팅 메시지 표시 영역 생성
   • 상태 관리
     • 메시지 상태 및 사용자 입력 상태 관리
     • 소켓 연결 상태 관리
   • Socket.io 클라이언트 초기화
     • 서버와의 연결 설정 및 이벤트 핸들러 등록

2. 채팅방 입장 및 퇴장 이벤트 처리

   • Socket.io 이벤트 처리
     • JoinRoom 이벤트 발생 시 서버로 전송
     • 서버로부터 message 이벤트 수신 시 메시지 상태 업데이트

3. 메시지 송수신 이벤트 처리

   • Socket.io 이벤트 처리
     • chatMessage 이벤트 발생 시 서버로 전송
     • 서버로부터 message 이벤트 수신 시 메시지 상태 업데이트

4. 사용자 목록 업데이트

   • Socket.io 이벤트 처리
     • 서버로부터 roomUsers 이벤트 수신 시 사용자 목록 상태 업데이트