turbosoft/genome2025
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

대시보드 화면 수정

Browse Source
This commit is contained in:
chu eun ju
2025-12-11 12:08:33 +09:00
parent f39155f2a7
commit b906ec1851
1 changed files with 26 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/app/dashboard/page.tsx
View File

@@ -734,7 +734,7 @@ export default function DashboardPage() {
<p className="text-2xl max-sm:text-lg font-extrabold text-amber-600"> <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> {farmPositionData.rank ?? '-'}<span className="text-base max-sm:text-sm font-bold text-amber-500">위</span>
</p> </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>
{/* 백분율 카드 */} {/* 백분율 카드 */}
<div className="rounded-xl p-4 max-sm:p-3 border border-blue-200 text-center bg-blue-50/30"> <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" /> <circle cx={p.x} cy={p.y} r={15} fill="transparent" />
</g> </g>
))} ))}
{/* 카테고리 라벨 */} {/* 카테고리 라벨 (클릭/호버 가능) */}
{categories.map((cat, i) => { {categories.map((cat, i) => {
const angle = startAngle + i * angleStep const angle = startAngle + i * angleStep
const labelRadius = maxRadius + 22 const labelRadius = maxRadius + 22
const labelX = centerX + labelRadius * Math.cos(angle)
const labelY = centerY + labelRadius * Math.sin(angle)
return ( return (
<text key={cat} <g key={cat}
x={centerX + labelRadius * Math.cos(angle)} className="cursor-pointer"
y={centerY + labelRadius * Math.sin(angle)} onMouseEnter={() => setHoveredIndex(i)}
textAnchor="middle" dominantBaseline="middle" onMouseLeave={() => setHoveredIndex(null)}
className="text-sm font-bold fill-slate-600" 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>
) )
})} })}
{/* 툴팁 - 맨 마지막에 렌더링하여 항상 위에 표시 */} {/* 툴팁 - 맨 마지막에 렌더링하여 항상 위에 표시 */}