Issue#70/realtime coinprice component

[kongyb]

개요

• detail페이지의 우측 사이드바에 위치한 실시간 코인정보를 나타내는 컴포넌트 개발

작업사항

• 레이아웃 작업
  • height를 고정으로 지정했는데, css작업때 수정해야할 것 같다.
• 코인의 이미지와 가격정보등을 각각 다른곳에서 받아와야하기 때문에 백엔드 서버에 새로운 api추가
  • 코인의 이미지 정보는 코인마켓캡에서 받아와야하고 서버의 메모리에 저장되어 있는 데이터는 한시간 단위로 갱신되기때문에 실시간 가격정보의 초기값으로 사용하기에는 부적절하다고 판단
  • 요청을 받으면 업비트에서 해당시점의 코인들의 가격정보를 받아와 코인이미지와 결합하여 클라이언트로 전달하고 이는 ServersideProps에서 이루어진다.
• 캔들차트에 사용된 소켓을 이용해 실시간 코인가격정보를 수신하고 컴포넌트에 반영
  • 소켓을 캔들차트와 실시간 가격정보에서 모두 사용하기때문에 [market].tsx에서 소켓관련 커스텀훅을 호출하게 되었는데, 소켓에 정보가 들어와 상태가 변경될때마다 페이지 전체가 업데이트되는 문제가 있음 (Memo??기능을 활용하여 최적화하는 방법을 고려해봐야할듯)
  • 업비트 API에서 소켓으로 전달받는 데이터와 최초에 REST API로 받아오는 데이터간의 속성이 다른 점들이 있음.
    이전에는 CandleData라는 인터페이스를 활용했는데 나중에 한번 타입을 싹 지정하고 사용할 속성들만 새로운 인터페이스를 만들어야할 것 같다. (업비트 API에서 받아오는 데이터의 타입, 실제로 활용되는 컴포넌트에 전달되는 데이터의 타입 분리)

생각해볼점

• 업비트를 참고하여 가격이 상승했으면 컴포넌트내의 가격정보를 빨간색으로, 가격이 하락했으면 가격정보를 파란색으로 렌더하고 싶었지만, MUI에 대한 이해가 부족하여 하지 못했음.
• 내일 CSS작업을 하게되고 일단 상훈님한테 MUI와 theme의 적용방식에 대해 배우고 진행해야할 것 같다.
• 페이지 작업이 진행되면 페이지에서 필요한 모든 데이터를 한번에 백엔드에서 pre-fetch할수 있도록 하는 방법이 어떠할지??

이미지

PR에 해당하는 이슈는 우측의 Development에서 등록해주세요!!

[kongyb]

잘 봤습니다! 백엔드에서 코인코드(티커)리스트를 받고, 그 티커리스트를 사용하여 useRealtimeUPbitData에서 소켓연결을하고, 해당 커스텀훅에서 리턴하는 데이터를 사용하는거죵?

넵, 캔들차트에서 이용하는 소켓이 있고 커스텀 훅으로 분리되어있으므로 해당 로직에 다른 코인들의 정보도 받아와서 가격정보를 갱신하는 방식으로 realtimecoinprice컴포넌트에서 사용할 데이터를 만들어 줍니다.