From f39155f2a7c8f439697b3ea20658df3d8670f5ed Mon Sep 17 00:00:00 2001
From: chu eun ju <chueunju130@gmail.com>
Date: Thu, 11 Dec 2025 11:48:08 +0900
Subject: [PATCH] =?UTF-8?q?=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C=20?=
 =?UTF-8?q?=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EB=B0=98=EC=9D=91=ED=98=95=20?=
 =?UTF-8?q?=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 | 102 ++++++++++++++++------------
 1 file changed, 58 insertions(+), 44 deletions(-)

diff --git a/frontend/src/app/dashboard/page.tsx b/frontend/src/app/dashboard/page.tsx
index cd9cc60..f335b8f 100644
--- a/frontend/src/app/dashboard/page.tsx
+++ b/frontend/src/app/dashboard/page.tsx
@@ -64,6 +64,15 @@ export default function DashboardPage() {
   const [stats, setStats] = useState<DashboardStatsDto | null>(null)
   const [farmRanking, setFarmRanking] = useState<FarmRegionRankingDto | null>(null)
 
+  // 모바일 감지 (반응형)
+  const [isMobile, setIsMobile] = useState(false)
+  useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 640)
+    checkMobile()
+    window.addEventListener('resize', checkMobile)
+    return () => window.removeEventListener('resize', checkMobile)
+  }, [])
+
   // 필터에서 고정된 첫 번째 형질 (없으면 '도체중')
   const firstPinnedTrait = filters.pinnedTraits?.[0] || '도체중'
 
@@ -718,37 +727,37 @@ export default function DashboardPage() {
                         {farmPositionData.label} 기준
                       </p>
                       {/* 모바일/웹 모두 3열 */}
-                      <div className="grid grid-cols-3 gap-3">
+                      <div className="grid grid-cols-3 gap-3 max-sm:gap-1.5">
                         {/* 순위 카드 */}
-                        <div className="rounded-xl p-4 border border-amber-200 text-center bg-amber-50/30">
-                          <p className="text-sm text-amber-700 font-medium mb-2">순위</p>
-                          <p className="text-2xl font-extrabold text-amber-600">
-                            {farmPositionData.rank ?? '-'}<span className="text-base font-bold text-amber-500">위</span>
+                        <div className="rounded-xl p-4 max-sm:p-3 border border-amber-200 text-center bg-amber-50/30">
+                          <p className="text-sm max-sm:text-xs text-amber-700 font-medium mb-2">순위</p>
+                          <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 border border-blue-200 text-center bg-blue-50/30">
-                          <p className="text-sm text-blue-700 font-medium mb-2">상위</p>
-                          <p className="text-2xl font-extrabold text-blue-600">
-                            {farmPositionData.percentile ?? '-'}<span className="text-base font-bold text-blue-500">%</span>
+                        <div className="rounded-xl p-4 max-sm:p-3 border border-blue-200 text-center bg-blue-50/30">
+                          <p className="text-sm max-sm:text-xs text-blue-700 font-medium mb-2">상위</p>
+                          <p className="text-2xl max-sm:text-lg font-extrabold text-blue-600">
+                            {farmPositionData.percentile ?? '-'}<span className="text-base max-sm:text-sm font-bold text-blue-500">%</span>
                           </p>
                           <p className="text-xs text-blue-500 font-medium mt-1">보은군 내</p>
                         </div>
                         {/* 점수 비교 카드 */}
-                        <div className={`rounded-xl p-4 border text-center ${farmPositionData.farmScore >= 0
+                        <div className={`rounded-xl p-4 max-sm:p-3 border text-center ${farmPositionData.farmScore >= 0
                           ? 'border-emerald-200 bg-emerald-50/30'
                           : 'border-red-200 bg-red-50/30'
                           }`}>
-                          <p className="text-sm text-slate-600 font-medium mb-2">평균대비</p>
-                          <p className={`text-2xl font-extrabold ${farmPositionData.farmScore >= 0 ? 'text-emerald-600' : 'text-red-500'}`}>
+                          <p className="text-sm max-sm:text-xs text-slate-600 font-medium mb-2">평균대비</p>
+                          <p className={`text-2xl max-sm:text-lg font-extrabold ${farmPositionData.farmScore >= 0 ? 'text-emerald-600' : 'text-red-500'}`}>
                             {farmPositionData.farmScore > 0 ? '+' : ''}{farmPositionData.farmScore.toFixed(2)}
                           </p>
                           <p className={`text-xs flex items-center justify-center gap-1 font-medium mt-1 ${farmPositionData.farmScore >= 0 ? 'text-emerald-500' : 'text-red-400'}`}>
                             {farmPositionData.farmScore >= 0 ? (
-                              <><TrendingUp className="w-4 h-4" />높음</>
+                              <><TrendingUp className="w-4 h-4 max-sm:w-3 max-sm:h-3" />높음</>
                             ) : (
-                              <><TrendingDown className="w-4 h-4" />낮음</>
+                              <><TrendingDown className="w-4 h-4 max-sm:w-3 max-sm:h-3" />낮음</>
                             )}
                           </p>
                         </div>
@@ -814,9 +823,14 @@ export default function DashboardPage() {
                         농가: d.hasData ? d.농가 : minBarValue,
                         보은군: d.hasData ? d.보은군 : minBarValue,
                       }))
+                      // 모바일/웹 차트 설정
+                      const labelFontSize = isMobile ? 12 : 16
+                      const barMaxSize = isMobile ? 50 : 70   // 막대 너비 설정
+                      const chartHeight = isMobile ? 300 : 350 // 막대 높이 설정
+                      const chartMarginBottom = isMobile ? 40 : 70
                       return (
-                        <ResponsiveContainer width="100%" height={350}>
-                          <BarChart data={chartData} margin={{ top: 40, right: 10, left: 0, bottom: 70 }} barGap={8} style={{ overflow: 'visible' }}>
+                        <ResponsiveContainer width="100%" height={chartHeight}>
+                          <BarChart data={chartData} margin={{ top: 40, right: 10, left: 0, bottom: chartMarginBottom }} barGap={8} style={{ overflow: 'visible' }}>
                             <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" vertical={false} />
                             <XAxis
                               dataKey="year"
@@ -842,14 +856,14 @@ export default function DashboardPage() {
                             <Bar
                               dataKey="농가"
                               radius={[6, 6, 0, 0]}
-                              maxBarSize={50}
+                              maxBarSize={barMaxSize}
                               label={({ x, y, width, height, index }: any) => {
                                 const item = chartData[index]
-                                if (!item.hasData) return <text x={x + width / 2} y={y - 14} textAnchor="middle" fontSize={14} fontWeight={700} fill="#94a3b8">-</text>
+                                if (!item.hasData) return <text x={x + width / 2} y={y - 14} textAnchor="middle" fontSize={labelFontSize} fontWeight={700} fill="#94a3b8">-</text>
                                 const v = item.농가
                                 // 양수: 막대 위에, 음수: 막대 바로 아래
-                                const labelY = height < 0 ? y + 18 : y - 14
-                                return <text x={x + width / 2} y={labelY} textAnchor="middle" fontSize={14} fontWeight={800} fill="#1F3A8F">{(v > 0 ? '+' : '') + v.toFixed(2)}</text>
+                                const labelY = height < 0 ? y + 20 : y - 14
+                                return <text x={x + width / 2} y={labelY} textAnchor="middle" fontSize={labelFontSize} fontWeight={800} fill="#1F3A8F">{(v > 0 ? '+' : '') + v.toFixed(2)}</text>
                               }}
                             >
                               {chartData.map((entry, index) => (
@@ -859,14 +873,14 @@ export default function DashboardPage() {
                             <Bar
                               dataKey="보은군"
                               radius={[6, 6, 0, 0]}
-                              maxBarSize={50}
+                              maxBarSize={barMaxSize}
                               label={({ x, y, width, height, index }: any) => {
                                 const item = chartData[index]
-                                if (!item.hasData) return <text x={x + width / 2} y={y - 14} textAnchor="middle" fontSize={14} fontWeight={700} fill="#94a3b8">-</text>
+                                if (!item.hasData) return <text x={x + width / 2} y={y - 14} textAnchor="middle" fontSize={labelFontSize} fontWeight={700} fill="#94a3b8">-</text>
                                 const v = item.보은군
                                 // 양수: 막대 위에, 음수: 막대 바로 아래
-                                const labelY = height < 0 ? y + 18 : y - 14
-                                return <text x={x + width / 2} y={labelY} textAnchor="middle" fontSize={14} fontWeight={800} fill="#475569">{(v > 0 ? '+' : '') + v.toFixed(2)}</text>
+                                const labelY = height < 0 ? y + 20 : y - 14
+                                return <text x={x + width / 2} y={labelY} textAnchor="middle" fontSize={labelFontSize} fontWeight={800} fill="#475569">{(v > 0 ? '+' : '') + v.toFixed(2)}</text>
                               }}
                             >
                               {chartData.map((entry, index) => (
@@ -918,41 +932,41 @@ export default function DashboardPage() {
                     }
 
                     return (
-                      <div className="mt-4 grid grid-cols-3 gap-3">
+                      <div className="mt-4 grid grid-cols-3 gap-3 max-sm:gap-1.5">
                         {/* 전년대비 */}
-                        <div className={`rounded-xl p-4 text-center border ${yearOverYear !== null ? (yearOverYear >= 0 ? 'border-blue-200 bg-blue-50/30' : 'border-red-200 bg-red-50/30') : 'border-slate-200 bg-slate-50/30'}`}>
-                          <p className="text-sm text-slate-500 font-medium mb-2">전년대비</p>
+                        <div className={`rounded-xl p-4 max-sm:p-3 text-center border ${yearOverYear !== null ? (yearOverYear >= 0 ? 'border-blue-200 bg-blue-50/30' : 'border-red-200 bg-red-50/30') : 'border-slate-200 bg-slate-50/30'}`}>
+                          <p className="text-sm max-sm:text-xs text-slate-500 font-medium mb-2">전년대비</p>
                           {yearOverYear !== null ? (
-                            <p className={`text-2xl font-extrabold flex items-center justify-center gap-1 ${yearOverYear >= 0 ? 'text-[#1F3A8F]' : 'text-red-500'}`}>
+                            <p className={`text-2xl max-sm:text-lg font-extrabold flex items-center justify-center gap-1 ${yearOverYear >= 0 ? 'text-[#1F3A8F]' : 'text-red-500'}`}>
                               {yearOverYear >= 0 ? '+' : ''}{yearOverYear.toFixed(2)}
-                              {yearOverYear >= 0 ? <TrendingUp className="w-5 h-5" /> : <TrendingDown className="w-5 h-5" />}
+                              {yearOverYear >= 0 ? <TrendingUp className="w-5 h-5 max-sm:w-4 max-sm:h-4" /> : <TrendingDown className="w-5 h-5 max-sm:w-4 max-sm:h-4" />}
                             </p>
                           ) : (
-                            <p className="text-2xl font-extrabold text-slate-400">-</p>
+                            <p className="text-2xl max-sm:text-lg font-extrabold text-slate-400">-</p>
                           )}
                         </div>
                         {/* 보은군대비 */}
-                        <div className={`rounded-xl p-4 text-center border ${vsRegion !== null ? (vsRegion >= 0 ? 'border-emerald-200 bg-emerald-50/30' : 'border-amber-200 bg-amber-50/30') : 'border-slate-200 bg-slate-50/30'}`}>
-                          <p className="text-sm text-slate-500 font-medium mb-2">보은군대비</p>
+                        <div className={`rounded-xl p-4 max-sm:p-3 text-center border ${vsRegion !== null ? (vsRegion >= 0 ? 'border-emerald-200 bg-emerald-50/30' : 'border-amber-200 bg-amber-50/30') : 'border-slate-200 bg-slate-50/30'}`}>
+                          <p className="text-sm max-sm:text-xs text-slate-500 font-medium mb-2">보은군대비</p>
                           {vsRegion !== null ? (
-                            <p className={`text-2xl font-extrabold ${vsRegion >= 0 ? 'text-emerald-600' : 'text-amber-600'}`}>
+                            <p className={`text-2xl max-sm:text-lg font-extrabold ${vsRegion >= 0 ? 'text-emerald-600' : 'text-amber-600'}`}>
                               {vsRegion >= 0 ? '+' : ''}{vsRegion.toFixed(2)}
                             </p>
                           ) : (
-                            <p className="text-2xl font-extrabold text-slate-400">-</p>
+                            <p className="text-2xl max-sm:text-lg font-extrabold text-slate-400">-</p>
                           )}
                         </div>
                         {/* 3년 추세 */}
-                        <div className={`rounded-xl p-4 text-center border ${trend === '상승' ? 'border-blue-200 bg-blue-50/30' : trend === '하락' ? 'border-red-200 bg-red-50/30' : 'border-slate-200 bg-slate-50/30'}`}>
-                          <p className="text-sm text-slate-500 font-medium mb-2">3년 추세</p>
+                        <div className={`rounded-xl p-4 max-sm:p-3 text-center border ${trend === '상승' ? 'border-blue-200 bg-blue-50/30' : trend === '하락' ? 'border-red-200 bg-red-50/30' : 'border-slate-200 bg-slate-50/30'}`}>
+                          <p className="text-sm max-sm:text-xs text-slate-500 font-medium mb-2">3년 추세</p>
                           {trend !== null ? (
-                            <p className={`text-2xl font-extrabold flex items-center justify-center gap-1 ${trend === '상승' ? 'text-[#1F3A8F]' : trend === '하락' ? 'text-red-500' : 'text-slate-500'}`}>
+                            <p className={`text-2xl max-sm:text-lg font-extrabold flex items-center justify-center gap-1 ${trend === '상승' ? 'text-[#1F3A8F]' : trend === '하락' ? 'text-red-500' : 'text-slate-500'}`}>
                               {trend}
-                              {trend === '상승' && <TrendingUp className="w-5 h-5" />}
-                              {trend === '하락' && <TrendingDown className="w-5 h-5" />}
+                              {trend === '상승' && <TrendingUp className="w-5 h-5 max-sm:w-4 max-sm:h-4" />}
+                              {trend === '하락' && <TrendingDown className="w-5 h-5 max-sm:w-4 max-sm:h-4" />}
                             </p>
                           ) : (
-                            <p className="text-2xl font-extrabold text-slate-400">-</p>
+                            <p className="text-2xl max-sm:text-lg font-extrabold text-slate-400">-</p>
                           )}
                         </div>
                       </div>
@@ -1151,7 +1165,7 @@ export default function DashboardPage() {
                                     <span className={`text-sm font-bold ${isPositive ? 'text-[#1F3A8F]' : 'text-red-500'}`}>
                                       {isPositive ? '+' : ''}{avgEpd.toFixed(2)}
                                     </span>
-                                    <span className="flex flex-col items-center px-2 py-0.5 rounded bg-slate-100 text-slate-600">
+                                    <span className="flex flex-col items-center w-[52px] px-1.5 py-0.5 rounded bg-slate-100 text-slate-600">
                                       <span className="text-[10px] font-medium">상위</span>
                                       <span className="text-xs font-bold">{avgPercentile}%</span>
                                     </span>
@@ -1183,9 +1197,9 @@ export default function DashboardPage() {
                                 <span className={`hidden sm:block w-20 text-right text-lg font-bold flex-shrink-0 ml-3 ${isPositive ? 'text-[#1F3A8F]' : 'text-red-500'}`}>
                                   {isPositive ? '+' : ''}{avgEpd.toFixed(2)}
                                 </span>
-                                <span className="hidden sm:flex flex-col items-center w-20 px-3 py-2 rounded-xl flex-shrink-0 bg-slate-100 text-slate-600 ml-3">
+                                <span className="hidden sm:flex flex-col items-center w-[72px] px-2 py-2 rounded-xl flex-shrink-0 bg-slate-100 text-slate-600 ml-3">
                                   <span className="text-xs font-medium leading-tight">상위</span>
-                                  <span className="text-xl font-bold leading-tight">{avgPercentile}%</span>
+                                  <span className="text-lg font-bold leading-tight">{avgPercentile}%</span>
                                 </span>
                               </div>
                             )