From b906ec18513e671978abd9915a17bae238831f0e Mon Sep 17 00:00:00 2001
From: chu eun ju <chueunju130@gmail.com>
Date: Thu, 11 Dec 2025 12:08:33 +0900
Subject: [PATCH] =?UTF-8?q?=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C=20?=
 =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/app/dashboard/page.tsx | 35 +++++++++++++++++++++--------
 1 file changed, 26 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app/dashboard/page.tsx b/frontend/src/app/dashboard/page.tsx
index f335b8f..e2871e1 100644
--- a/frontend/src/app/dashboard/page.tsx
+++ b/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>
                             )
                           })}
                           {/* 툴팁 - 맨 마지막에 렌더링하여 항상 위에 표시 */}