refactor: advance to select the rank in statistics

[inkyu0103]

설명

급수에 따른 라켓 통계 데이터를 보여주도록 변경합니다.

관련 이슈

Fix #108

변경사항

BE statistics의 controller / service / repository에서 FE에서 보내는 rank를 받을 수 있도록 인자가 추가되었습니다.

rank는 Query Parameter로 받습니다.

FE

1. 컴포넌트 분리

RacketDetail 컴포넌트는 내용상 3가지 section으로 이루어져 있었습니다.

• 라켓 정보
• 라켓 통계 데이터
• 라켓 리뷰

위 세가지 section은 서로 다른 query를 호출하고 있고, 상태와 관련된 변수를 공유하고 있지 않기 때문에, 분리해도 좋다고 판단하였습니다.

따라서 해당 PR에서는 라켓 통계 데이터를 우선적으로 분리합니다.

분리함으로서 기대할 수 있는 내용은 다음과 같습니다.

• 가독성
• 한 컴포넌트는 하나의 관심사를 가지게 됨
• UI 테스트 용이성
  • 뷰 내부에 로직이 담기지 않은 컴포넌트는 뷰 컴포넌트와 로직 컴포넌트로 분리하여 UI 테스트가 가능하게 됩니다.

2. api 변동 api로 전달하는 인자가 추가되었습니다. (rank)

통계를 이용할 때 사용되는 Rank의 값은 다음과 같습니다.

• ALL
• S
• A
• B
• C
• D

보완할 점

• rank를 변경할 때 깜빡임이 발생합니다.

  • 해당 문제는 Suspense의 Fallback에 의해 발생하는 문제이며, 크리티컬한 이슈가 아니므로, 이슈로 등록하고 추후 처리하도록 합니다. ( #110 )

• { in : ['S', 'A', 'B', 'C', 'D' ] } 에서는 에러가 발생하지 않는데, 배열을 선언하는 경우 type error가 발생합니다. ( #111 )

스크린샷

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
badminton-app	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 15, 2023 8:30am