Rich Web
요구사항
- 기능
- 기본 채팅방 목록은 임의로 정의합니다. 새로운 채팅방을 만드는 기능은 없어도 됩니다.
- 채팅방 목록에서 채팅을 하고자 하는 사람을 선택하면, 해당 사람과 채팅할 수 있는 화면이 표시됩니다.
- 채팅 화면에서 메시지를 입력하면 채팅화면에 표시됩니다. 초기 메시지는 임의로 구성하면 됩니다.
- 채팅 화면에서 다시 채팅방 목록으로 돌아갈 수 있어야 합니다.
- 여기에 명시되지 않은 부분은 일반적인 채팅 어플리케이션 기준으로 구현하시면 됩니다. (안 읽은 사람 수 같은 고급 기능을 구현할 필요는 없습니다)
- 날짜 구분 선
- 안 읽은 메시지 표시 기능
- 서버 구현은 필요하지 않습니다. 서버에 데이터를 요청해 받아오는 가상의 메소드를 만들어 사용
- src/lib 폴더에 테스트 데이터와 가상 메소드 구현.
기술 스택
- React, React-router-dom, Styled-components, Styled-reset, Context API
설명
- Context API 는 Header 컴포넌트에서 라우트 위치가 채팅방에 들어갈 때 마다 상대방 이름을 표기 해 주기 위해 사용하였습니다.