모아데이터 기업 과제 넷째 날
심박수, 차트 합치기
휘건님이 작업하신 심박수 차트 부분과 나의 차트 부분을 합쳤다.
합치고 나니 더욱 실감나졌다 !
또한 datepicker에 startDate, endDate에 따라 차트가 그려지도록 구현을 완료했다.
상세정보 데이터 출력
사진에는 반영되었는데, 상단의 회원 상세 정보 부분도 수정을 완료했다.
파라미터로 사용자의 번호를 받아오고, 기존에 리코일로 저장된 사용자 데이터에서 번호로 필터를 한 후, 사용자의 데이터를 받아왔다.
오늘, 일주일, 전체 버튼
하단에 오늘, 일주일, 전체 버튼을 클릭하면 setState를 통해 데이터가 바뀌어 datepicker 부분도 동시에 변경되도록 수정 완료했다.
오늘, 일주일 관련 코드는 휘건님이 작성해놓으셨고, 전체 날짜를 불러오는 부분은 내가 휘건님이 작성하신 기존 코드를 이용해서 리팩토링을 진행했다.
해당 기능이 심박수, 걸음수 두 번 밖에 사용되지 않지만, 여러 개의 함수를 만들어놔서 따로 적용하고 싶지 않아 데이터를 파라미터로 받는 방법을 사용하지는 않았다.
대신 파라미터로 사용자의 번호를 받고, type이라는 파라미터로 심박수, 걸음수 어떤 부분에서 버튼 클릭이 진행되었는지 확인한 후 해당 타입에 맞는 데이터를 가공해서 데이터 내 첫 번째 날짜와 마지막 날짜를 구해서 출력했다.
이 기능을 구현하는 과정 중 datepicker와 버튼 간에 연동하는 부분에서 어려움이 있었다. 휘건님과 재석님의 도움이 컸다!
결론적으로 이 기능은 버튼이 클릭될 때마다 datepicker에서 관리하는 상태와는 별개로 또 상태를 바꿔주는 부분이 필요했다. 그래서 그 부분을 추가했더니 datepicker에서 날짜를 선택할 때와 아래 버튼을 클릭했을 때 둘 다 원하는 대로 작동했다.
또한 이를 바탕으로 회원관리 메뉴 페이지에서의 오늘, 1주일, 전체 페이지의 버튼 클릭 기능도 구현 완료할 수 있었다.
데이터가 없을 때
기존에 나는 데이터가 없을 때 따로 해당 날짜에 0이라는 데이터를 삽입해서 화면에 출력되도록 구현했다. 하지만 뭔가 부족하다고 생각했을 때, 휘건님이 데이터가 없을 때 차트를 출력하지 말고 데이터가 없다는 것을 시각적으로 알리는 기능으로 구현해보자고 말씀하셨다.
위의 사진이 결과물이다. 아직 style 관련해서 수정을 진행하지 못해 왼쪽으로 살짝 쏠려있다.
user마다 데이터가 3일 밖에 없었고, 그 날짜 사이에도 간격이 넓었기 때문에 datepicker나 버튼을 눌렀을 때 빈 차트를 많이 볼 수 밖에 없었다. 그러므로 기존에 내가 생각했던 방법보다 이 방법이 사용자에게 데이터를 전달하기 좋은 방법이라고 생각했다.
대부분의 기능 구현이 완료되어 이제 다 합친 후 팀원들과 피드백 과정을 거치는 부분만 진행하면 완료일 듯 하다.
