ttab1204 / chat-app

Hello! I'm Juyoung (FE Developer)

🔧 Blog: https://velog.io/@ken1204

📚 React, JS(ES6+), TS, Vue.js, Node.js, MongoDB

chat-app's Issues

LoginPage 제작하기

설명

LoginPage 제작하기

할 일

• LoginPage UI 만들기
• Input validation check 구현
• 로그인 로직 구현
• Redux store에 저장된 User값에 변화 주기

일정

2021.07. 01 ~ 2021.07. 02

[Bug] 모든 유저의 이름이 녹색으로 나오는 오류 발생

설명

본인의 채팅만 자신의 이름 부분이 초록색으로 나와야 하는데, 모든 유저가 초록색으로 나오는 오류 발생

할 일

• 본인의 이름만 초록색으로 나오도록 코드 수정 필요

일정

2021.07.05 ~ 2021.07.06

DB에 저장한 메시지 가져와서 보여주기

설명

Firebase DB에 저장한 메시지 가져온 후 보여주기

할 일

• Firebase DB에서 저장한 메시지 가져오는 함수 작성
• 가져온 메시지들을 화면에 보여주는 UI 만들기

일정

2021.07.05 ~ 2021.07.06

ChatPage UI 만들기

설명

ChatPage UI 구성하기

할 일

• 왼쪽 네비게이션 바 만들기
• Message Header 만들기
• Message Body 만들기

일정

2021.07.02 ~ 2021.07.03

채팅방 이미지 업로드 기능 구현하기

설명

채팅방 이미지 업로드 기능 구현하기

할 일

• 채팅방 이미지 업로드 기능 구현
• 채팅방 이미지 업로드 시 UI 구현
• 채팅방 이미지 업로드 직후 결과 UI 구현

일정

2021.07.05 ~ 2021.07.06

Message 전송 기능 만들기

설명

Message 전송 기능 만들기

할 일

• Message 전송 버튼을 눌렀을 때 irebase database에 저장되도록 하기
• 엔터 키 입력시 이벤트 발생하도록 만들기

일정

2021.07.05 ~ 2021.07.06

[Bug] 업로드 된 채팅이 바로 화면에 반영이 되지 않는 버그

설명

업로드 된 채팅이 바로 화면에 반영이 되지 않는 버그 (새로고침 필요)

할 일

• 업로드 된 채팅이 바로 화면에 반영될 수 있도록 코드 수정 필요

일정

2021.07.05 ~ 2021.07.06

Private, Public 채팅방 구분해주기

설명

Private, Public 채팅방 구분해주기
Private은 DM(유저끼리의 채팅) / Public은 일반 채팅방

할 일

• Private, Public 채팅방 다르게 구분해주기

일정

2021.07.07 ~ 2021.07.08

ChatPage(Message) Header UI 만들기

설명

ChatPage Header 부분 UI 만들기

할 일

• ChatPage(Message) Header UI 만들기
• 모바일 화면 이슈 수정
• 모바일 화면을 위한 Sidebar를 열고 닫을 수 있는 Button 만들고 기능 구현

일정

2021.07.04 ~ 2021.07.05

Direct Message 부분 UI 만들기

설명

Direct Message 부분 UI 만들기

할 일

• Direct Message 부분 UI 만들기 (Sidebar)

일정

2021. 7. 07 ~ 2021.07.08

ChatPage Body 부분 UI 만들기

설명

ChatPage Body 부분 UI 만들기

할 일

• Message Form UI 완성시키기
• TextArea 부분 완성시키기

일정

2021.07.04 ~ 2021.07.05

로그아웃, Profile Image 변경 로직 추가

설명

로그아웃, Profile Image 변경 로직 추가하기

할 일

• 로그아웃 로직 추가
• Profile Image를 변경할 수 있는 로직 추가

일정

2021.07.02 ~ 2021.07.03

채팅 채널 추가 기능 구현

설명

모달창에서 채팅 채널을 추가하는 기능 구현하기

할 일

• 채팅 채널 추가하기 (Firebase DB까지 포함)
• Redux store에 chat room 정보 저장
• 채팅 채널 추가 후 화면에 보여주기

일정

2021.07.04 ~ 2021.07.05

메시지 검색 기능

설명

메시지를 텍스트로 검색했을 때 찾아주는 기능 구현 필요

할 일

• SearchBar에서 메시지를 텍스트로 검색했을 때 찾아주는 기능 구현 필요

일정

2021.07.06 ~ 2021.07.07

메시지 검색 시 다른 방으로 이동해도 같은 메시지가 나오는 버그 발생

설명

메시지 검색 시 다른 방으로 이동해도 같은 메시지가 나오는 버그 발생

할 일

• 다른방으로 이동하면 다른 방의 메시지가 나올 수 있도록 수정하기

일정

2021.07.06 ~ 2021.07.07

Firebase method를 사용해 이미지를 변경했을 때 바로 화면에 렌더링 되지 않는 버그

설명

• Firebase method를 사용해 이미지를 변경했을 때 바로 화면에 렌더링 되지 않는 버그 발생

할 일

• 버그 수정

일정

2021.07.03 ~ 2021.07.04

ChatRooms List UI 만들기

설명

ChatRooms List UI 만들기

할 일

• ChatRooms List UI 만들기 (Sidebar)

일정

2021.07.02 ~ 2021.07.02

유저가 접속중인지 아닌지 여부 확인해서 화면에 보여주기 (기능 미구현)

설명

유저가 접속중인지 아닌지 여부 확인해서 화면에 보여주기

할 일

• 접속중이면 초록색, 미접속 중이라면 회색으로 화면에 보여주는 로직 구현

일정

2021.07.08 ~ 2021.07.09

유저 이름을 선택했을 때 해당 부분 선택된 것으로 보여지게 하기

설명

유저 이름(DirectMessage)을 선택했을 때 해당 부분 선택된 것으로 보여지게 하기 (지금은 눌러도 선택되었다는 표시가 나오지 않음)

할 일

• 선택한 DirectMessage의 방 정보 가져오기
• 해당 방 정보와 일치하면 유저의 uid가 일치하면 background-color를 바꿔주는 로직 구현하기

일정

2021.07.07 ~ 2021.07.08

SignupPage 제작하기

설명

SignupPage 완성시키기

할 일

• SignupPage UI 제작
• 각 input마다 validation check 시키기
• SignupPage API 요청

일정

2021.07.01 ~ 2021.07.02

DirectMessage DB에서 가져와서 화면에 불러오기

설명

Firebase DB에서 데이터 가져온 뒤 화면에 보여주기

할 일

• Firebase DB에 필요한 정보 저장하기
• Firebase DB에서 데이터 가져오기
• Redux store에 user 정보 저장
• Redux를 이용해 user 정보 불러와서 화면에 보여주기

일정

2021. 7. 07 ~ 2021. 07. 08

채팅 알림 기능 구현하기

설명

여러 채팅 방 중에서 내가 현재 있는 채팅방이 아닌 곳에서 다른 사람이 채팅하면 하나의 쪽지당 하나의 Count가 올라가는 알림 구현하기

할 일

• 채팅 알림 UI 만들기
• 채팅 알림 기능 구현

일정

2021.07.08 ~ 2021.07.09

버그

로직을 완성하고 실행을 했을 때, 화면에 이런식으로 나오지 않음. (빨간 Badge가 보이지 않았음)

해결