[FE] - 차트교체 및 무한스크롤을 통한 패칭 구현

[BHyeonKim]

📝 요약(Summary)

캔들스틱 차트 변경 (Amcharts5 => lightweight-charts

로컬에서 빌드파일 실행시에는 lighthouse지표가 90점이상 높게 나왔지만 배포를 lighthouse를 돌렸을 때는 점수가 50~60점 사이로 낮게 나왔습니다.
이유는 배포환경에서는 백엔드가 계속 켜져있어서 차트 데이터가 DB에 많이 축적이 되었고, 프론트엔드 차트에서는 DB에 쌓인 차트데이터를 한번에 렌더링 하려다 보니 렌더링시 차트때문에 긴 시간동안 blocking되었습니다.

시도: Amcharts5에 페이지네이션 적용

이를 해결하기 위해 한번에 모두 불러오던 과거 시계열 데이터를 페이지네이션을 적용하는 시도를 했습니다.
다만 Amcharts5에 페이지네이션을 적용했을 때 기대되는 동작은 사용자의 스크롤 이벤트를 감지해서 데이터를 다음 시계열 데이터를 패칭하고 sliding window처럼 보여주는 것을 기대했습니다.

하지만 Amcharts5에 페이지네이션을 적용했을때 sliding window처럼 보여지는 것이 아닌, 사용자의 스크롤에 따라 과거 데이터를 순차적으로 패칭해서 보여주되, 기존에 존재하던 시계열 데이터도 보여주게 되있어서 사용자가 왼쪽으로 스크롤 할수록 차트는 줌 아웃이 되어서 캔들이 작게 보여지는 현상이 일어났습니다.

이는 Amcharts5의 기본동작으로 이를 override하려고 했지만 되지가 않아서 캔들차트에 사용되는 차트를 교체하기로 했습니다.

결론: lightweight-charts로 교체

결론적으로 lightweight-charts로 교체하였고 아래의 기능을 추가했습니다.

• 무한스크롤을 통한 데이터 패칭
• Interval 선택기능 추가 : 1분봉, 3분봉 등
• 툴팁 추가

추가적으로 lightweight-charts를 선언형 컴포넌트로 사용할 수 있도록 래핑하는 작업을 하였습니다.

Sentry 설정 추가

운영환경에서의 에러로깅과 성능측정을 위해 Sentry 설정을 추가했습니다.

사이드바 닫히도록 변경

사이드바에서 코인 아이템 링크를 클릭시 사이드바가 닫히도록 변경했습니다.

🛠️ PR 유형

어떤 변경 사항이 있나요?

• 새로운 기능 추가
• 버그 수정
• CSS 등 사용자 UI 디자인 변경
• 코드에 영향을 주지 않는 변경사항(오타 수정, 탭 사이즈 변경, 변수명 변경)
• 코드 리팩토링
• 주석 추가 및 수정
• 테스트 추가, 테스트 리팩토링
• 빌드 부분 혹은 패키지 매니저 수정
• 문서 수정
• 파일 혹은 폴더 수정/삭제

💬 공유사항 to 리뷰어

ex) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이 있을까요?

📸스크린샷 (선택)

✅ PR Checklist

PR이 다음 요구 사항을 충족하는지 확인하세요.

• 커밋 메시지 컨벤션에 맞게 작성했습니다.
• 변경 사항에 대한 테스트를 했습니다.(버그 수정/기능에 대한 테스트).

Closes #33

[investfuture-sonarqube1]

Quality Gate failed

• 23 New Issues (is greater than 0)
• 0.00% Coverage on New Code (is less than 80.00%)

Project ID: CleanEngine_cleanengine-fe_c6875537-ed9d-4dfe-b79c-ea5cb6d2a0e3

View in SonarQube