[FEAT] 테스트 결과 화면 구현

[AAminha]

1️⃣ 요약

• 정의하기 테스트 완료 화면 구현 및 API 연동을 진행했습니다. (반응형)
• 설계하기 테스트 완료 화면을 구현했습니다.
• resolved [FEAT] 테스트 결과 화면 구현 #25

2️⃣ 변경사항

기존 코드에 영향을 미치는 변경사항

• 피그마와 구현 화면을 확인해보니 차이나는 요소들이 꽤 있어 전체적인 리팩토링을 진행했습니다. (로직 X / 화면 O)
• 기존의 만들었던 로딩 화면을 반응형으로 수정했습니다.

기존 코드에 영향을 미치지 않는 변경사항

버그 수정을 위한 변경사항

• 카드 이미지가 전부 svg 파일이었는데 파일 용량이 너무 컸던 문제가 있었습니다. 전부 png로 바꾸어 용량을 감소시켰습니다.

3️⃣ 참고사항

• 로딩 화면 활성화를 판별하기 위해 loadingState를 만들었습니다.
• 정의하기 테스트 결과를 state로 관리하기 어려움이 있을 것 같아, defineState를 만들었습니다.
• 결과 화면에서 쓰이는 커스텀 스크롤 바를 구현했습니다.
• 이미지 다운로드 기능 구현을 위해 html2canvas 라이브러리를 추가했습니다.

4️⃣ 추후 작업

• 카카오 공유 기능을 구현해야 합니다.
• 설계하기 결과 화면에 API 연동을 구현해야 합니다.
• 아직 돌아보기 결과 화면을 구현하지 못했습니다.

5️⃣ 리뷰 요구사항

[mungjin01]

수고하셨습니다!