대시보드 화면 수정

frontend/src/app/dashboard/page.tsx

@@ -734,7 +734,7 @@ export default function DashboardPage() {
                           <p className="text-2xl max-sm:text-lg font-extrabold text-amber-600">
                             {farmPositionData.rank ?? '-'}<span className="text-base max-sm:text-sm font-bold text-amber-500">위</span>
                           </p>
-                          <p className="text-xs text-amber-600 font-medium mt-1">/{farmPositionData.totalFarms} 농가</p>
+                          <p className="text-xs text-amber-600 font-medium mt-1">/{farmPositionData.totalFarms}개 농가</p>
                         </div>
                         {/* 백분율 카드 */}
                         <div className="rounded-xl p-4 max-sm:p-3 border border-blue-200 text-center bg-blue-50/30">
@@ -1076,19 +1076,36 @@ export default function DashboardPage() {
                               <circle cx={p.x} cy={p.y} r={15} fill="transparent" />
                             </g>
                           ))}
-                          {/* 카테고리 라벨 */}
+                          {/* 카테고리 라벨 (클릭/호버 가능) */}
                           {categories.map((cat, i) => {
                             const angle = startAngle + i * angleStep
                             const labelRadius = maxRadius + 22
+                            const labelX = centerX + labelRadius * Math.cos(angle)
+                            const labelY = centerY + labelRadius * Math.sin(angle)
                             return (
-                              <text key={cat}
-                                x={centerX + labelRadius * Math.cos(angle)}
-                                y={centerY + labelRadius * Math.sin(angle)}
-                                textAnchor="middle" dominantBaseline="middle"
-                                className="text-sm font-bold fill-slate-600"
+                              <g key={cat}
+                                className="cursor-pointer"
+                                onMouseEnter={() => setHoveredIndex(i)}
+                                onMouseLeave={() => setHoveredIndex(null)}
+                                onClick={() => setHoveredIndex(hoveredIndex === i ? null : i)}
                               >
-                                {cat}
-                              </text>
+                                {/* 호버 영역 확대 */}
+                                <rect
+                                  x={labelX - 25}
+                                  y={labelY - 12}
+                                  width={50}
+                                  height={24}
+                                  fill="transparent"
+                                />
+                                <text
+                                  x={labelX}
+                                  y={labelY}
+                                  textAnchor="middle" dominantBaseline="middle"
+                                  className={`text-sm font-bold transition-colors ${hoveredIndex === i ? 'fill-[#1F3A8F]' : 'fill-slate-600'}`}
+                                >
+                                  {cat}
+                                </text>
+                              </g>
                             )
                           })}
                           {/* 툴팁 - 맨 마지막에 렌더링하여 항상 위에 표시 */}