역할

• 모든 상담내역을 한눈에 볼 수 있어야합니다.

관리하는 상태(state)

• 현재 눌려진 필터 ⇒ currentFilter
• 모든 상담 내역 ⇒ inquries
• 검색정보 ⇒ searched
• 정렬 ⇒ sortKey
• 현재 페이지 ⇒ page
  • 무한스크롤링으로 데이터 호출할 때 사용됩니다.

책임

• currentFilter 의 변화에 따라 inquires 를 필터링해서 InquiryList 컴포넌트에 건네줍니다.
• sortkey, searched 값에 따라 데이터를 다시 불러옵니다.
• soryKey 의 값은 아래의 3개 중 하나가 될 수 있습니다.
  • 최신
  • 오래된
  • 읽지 않은 메시지
• 리스트에 있는 문의를 더블클릭하면 currentInquiry 와 currentCustomer를 새롭게 세팅합니다.
  • 이때 Inquiry/inquiry-id 채널을 구독합니다. 구독하는 순간 만약 읽지 않은 메시지가 있었다면 읽었다는 신호를 다른 모두에게 보내줍니다.

API

• 문의 내역 불러오기
  • GET api/inquiries?search={searched}&sort={sortKey}&page={page}&limit={LIMIT}
  • 처음 로딩할 때 비동기로 문의 내역 데이터를 불러옵니다.
  • 그 이후로는 웹소켓 통신으로 업데이트 된 데이터를 실시간으로 불러옵니다.
  • 처음에는 최신 문의 20개만 불러온다. 그리고 무한스크롤링 기능을 구현해서 추가 데이터는 추가로 API 호출을 통해 가져옵니다.
• 검색, 정렬, 스크롤에 따라 새롭게 데이터를 불러와야 합니다.
  • 쿼리를 이용합니다.

Websocket

• 웹소켓 서버에서 inquiries라는 이벤트를 구독합니다.

  const socket = io.connect(SERVER);
  // back
  socket.emit('inquiries', function(데이터) {
    // 전송
  });
  
  // front
  // 구독
  socket.on('inquiries', setInquries(data));
  

1. 새로운 문의 또는 채팅이 들어오면 백엔드 서버에서는 inquiries 에 데이터를 전송해줍니다.