🚀[기능개선][통계] 레이더 차트 미학습 토픽 기본값 설정으로 그물 형태 유지

[Cassiiopeia]

📝 현재 문제점

• 통계 페이지의 토픽별 분석 레이더 차트에서, 학습 이력이 없는 토픽(정답률 0%)은 값이 0으로 처리되어 차트 중앙 한 점에 모임
• 학습한 토픽이 1~2개뿐일 경우 해당 꼭짓점만 외곽으로 뻗어나와 전체 차트가 선 또는 뾰족한 모양으로 표시됨
• 거미줄(그물) 형태가 아니라 사용자가 전체 토픽 커버리지를 한눈에 파악하기 어려움

🛠️ 해결 방안 / 제안 기능

• 미학습 토픽(정답률 0%)에 시각적 최솟값(10)을 부여하여 차트 중심에서 약간 뻗어나온 형태로 표시
• PolarRadiusAxis의 도메인을 [0, 100]으로 고정하여 recharts의 자동 축소를 방지
• 실제 학습 데이터가 없는 상태에서도 거미줄 외형이 유지되어 전체 토픽 구조를 직관적으로 파악 가능

변경이후

⚙️ 작업 내용

• client/src/components/StatsRadarChart.tsx 수정
  • 미학습 토픽 value: 0 → 10 (시각적 최솟값)
  • PolarRadiusAxis 추가: domain={[0, 100]}, 눈금·축선 숨김

🙋‍♂️ 담당자

• 프론트엔드: Cassiiopeia

[Cassiiopeia]

Guide by SUH-LAB

브랜치

20260427_#315_레이더_차트_미학습_토픽_기본값_설정으로_그물_형태_유지

커밋 메시지

레이더 차트 미학습 토픽 기본값 설정으로 그물 형태 유지 : feat : {변경 사항에 대한 설명} https://github.com/passQL-Lab/passQL/issues/315

[Cassiiopeia]

레이더 차트 미학습 토픽 기본값 설정으로 그물 형태 유지

개요

통계 페이지의 토픽별 분석 레이더 차트에서 학습 이력이 없는 토픽의 값이 0으로 처리되어 차트 중앙에 한 점으로 모이는 문제가 있었다. 학습한 토픽이 1~2개뿐일 경우 해당 꼭짓점만 외곽으로 뻗어나와 전체 차트가 선 또는 뾰족한 모양으로 표시되었다. 미학습 토픽에 시각적 최솟값을 부여하고 차트 축 도메인을 고정하여 거미줄 형태가 항상 유지되도록 개선하였다.

변경 사항

프론트엔드

• client/src/components/StatsRadarChart.tsx
  • 미학습 토픽(정답률 0%) value를 0 → 10으로 변경하여 차트 중심에서 약간 뻗어나온 형태로 표시
  • PolarRadiusAxis 컴포넌트 추가: domain={[0, 100]} 고정으로 recharts 자동 스케일 축소 방지
  • 눈금(tick={false})과 축선(axisLine={false}) 숨김 처리로 기존 UI 유지

주요 구현 내용

recharts의 RadarChart는 기본적으로 데이터 최댓값 기준으로 축 스케일을 자동 조정한다. 미학습 토픽이 다수일 때 모든 값이 0에 가까워 스케일이 극도로 축소되고, 학습된 토픽 하나만 외곽으로 돌출되는 현상이 발생하였다.

PolarRadiusAxis에 domain={[0, 100]}을 명시하여 스케일을 항상 0~100 고정으로 유지하고, 미학습 토픽에 최솟값 10을 부여해 전체 꼭짓점이 첫 번째 동심원 안쪽에 고르게 위치하도록 하였다. 최솟값을 10으로 설정한 것은 학습 데이터가 있는 토픽(최소 1% 이상)과 시각적으로 명확히 구분되면서도 차트 전체 비율상 튀지 않는 수치로 조정한 결과이다.

주의사항

• 미학습 토픽의 표시값(10)은 실제 정답률이 아닌 시각적 표현용 값이다. 툴팁이나 수치 레이블을 추가할 경우 실제 값(0%)과 표시값(10)의 불일치가 노출될 수 있으므로 별도 처리가 필요하다.
• 추후 학습 데이터가 쌓일수록 차트 형태가 점점 실제 실력을 반영하는 방향으로 자연스럽게 변화한다.