모바일 반응형 ui 수정

frontend/src/app/cow/[cowNo]/genome/_components/category-evaluation-card.tsx

@@ -522,18 +522,18 @@ export function CategoryEvaluationCard({
               </div>
 
               {/* 범례 */}
-              <div className="flex items-center justify-center gap-5 sm:gap-8 py-3 border-t border-border">
+              <div className="flex items-center justify-center gap-4 sm:gap-6 py-3 border-t border-border">
-                <div className="flex items-center gap-2">
+                <div className="flex items-center gap-1.5 sm:gap-2">
-                  <div className="w-4 h-4 rounded" style={{ backgroundColor: '#10b981' }}></div>
+                  <div className="w-3 h-3 sm:w-4 sm:h-4 rounded" style={{ backgroundColor: '#10b981' }}></div>
-                  <span className="text-base text-muted-foreground">보은군 평균</span>
+                  <span className="text-sm text-muted-foreground">보은군 평균</span>
                 </div>
-                <div className="flex items-center gap-2">
+                <div className="flex items-center gap-1.5 sm:gap-2">
-                  <div className="w-4 h-4 rounded" style={{ backgroundColor: '#1F3A8F' }}></div>
+                  <div className="w-3 h-3 sm:w-4 sm:h-4 rounded" style={{ backgroundColor: '#1F3A8F' }}></div>
-                  <span className="text-base text-muted-foreground">농가 평균</span>
+                  <span className="text-sm text-muted-foreground">농가 평균</span>
                 </div>
-                <div className="flex items-center gap-2">
+                <div className="flex items-center gap-1.5 sm:gap-2">
-                  <div className="w-4 h-4 rounded" style={{ backgroundColor: '#1482B0' }}></div>
+                  <div className="w-3 h-3 sm:w-4 sm:h-4 rounded" style={{ backgroundColor: '#1482B0' }}></div>
-                  <span className="text-base font-semibold text-foreground">{formatCowNoShort(cowNo)} 개체</span>
+                  <span className="text-sm font-medium text-foreground">{formatCowNoShort(cowNo)} 개체</span>
                 </div>
               </div>
 

frontend/src/app/cow/[cowNo]/page.tsx

@@ -10,6 +10,7 @@ import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog"
 import { Badge } from "@/components/ui/badge"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { useToast } from "@/hooks/use-toast"
+import { useMediaQuery } from "@/hooks/use-media-query"
 import { ComparisonAveragesDto, TraitComparisonAveragesDto, cowApi, genomeApi, geneApi, GeneDetail, GenomeRequestDto, mptApi, MptDto } from "@/lib/api"
 import { CowDetail } from "@/types/cow.types"
 import { GenomeTrait } from "@/types/genome.types"
@@ -146,6 +147,7 @@ export default function CowOverviewPage() {
   const from = searchParams.get('from')
   const { toast } = useToast()
   const { filters } = useGlobalFilter()
+  const isMobile = useMediaQuery("(max-width: 640px)")
 
   const [cow, setCow] = useState<CowDetail | null>(null)
   const [genomeData, setGenomeData] = useState<GenomeTrait[]>([])
@@ -1629,17 +1631,27 @@ export default function CowOverviewPage() {
                         const PaginationUI = () => {
                           if (sortedData.length <= GENES_PER_PAGE) return null
 
-                          // 표시할 페이지 번호들 계산 (현재 페이지 기준 앞뒤 2개씩)
+                          // 표시할 페이지 번호들 계산 (모바일: 3개 단순, 데스크탑: 5개 + 1/마지막 고정)
                           const getPageNumbers = () => {
                             const pages: (number | string)[] = []
-                            const showPages = 5
+                            const showPages = isMobile ? 3 : 5
-                            let start = Math.max(1, geneCurrentPage - 2)
+                            const offset = isMobile ? 1 : 2
+                            let start = Math.max(1, geneCurrentPage - offset)
                             let end = Math.min(totalPages, start + showPages - 1)
 
                             if (end - start < showPages - 1) {
                               start = Math.max(1, end - showPages + 1)
                             }
 
+                            // 모바일: 현재 페이지 기준 앞뒤만 표시 (1, 마지막 고정 없음)
+                            if (isMobile) {
+                              for (let i = start; i <= end; i++) {
+                                pages.push(i)
+                              }
+                              return pages
+                            }
+
+                            // 데스크탑: 1과 마지막 페이지 고정
                             if (start > 1) {
                               pages.push(1)
                               if (start > 2) pages.push('...')
@@ -1658,7 +1670,7 @@ export default function CowOverviewPage() {
                           }
 
                           return (
-                            <div className="px-4 py-3 bg-muted/30 border-t flex flex-col sm:flex-row items-center justify-between gap-3">
+                            <div className="px-3 sm:px-4 py-3 bg-muted/30 border-t flex flex-col sm:flex-row items-center justify-between gap-3">
                               <span className="text-sm text-muted-foreground">
                                 전체 {sortedData.length.toLocaleString()}개 중 {startIndex + 1}-{Math.min(endIndex, sortedData.length)}번째
                               </span>
@@ -1668,7 +1680,7 @@ export default function CowOverviewPage() {
                                   size="sm"
                                   onClick={() => setGeneCurrentPage(1)}
                                   disabled={geneCurrentPage === 1}
-                                  className="px-2"
+                                  className="px-2.5 h-9 text-sm"
                                 >
                                   «
                                 </Button>
@@ -1677,7 +1689,7 @@ export default function CowOverviewPage() {
                                   size="sm"
                                   onClick={() => setGeneCurrentPage(p => Math.max(1, p - 1))}
                                   disabled={geneCurrentPage === 1}
-                                  className="px-2"
+                                  className="px-2.5 h-9 text-sm"
                                 >
                                   ‹
                                 </Button>
@@ -1688,12 +1700,12 @@ export default function CowOverviewPage() {
                                       variant={geneCurrentPage === page ? "default" : "outline"}
                                       size="sm"
                                       onClick={() => setGeneCurrentPage(page)}
-                                      className="px-3 min-w-[36px]"
+                                      className="px-2.5 min-w-[36px] h-9 text-sm"
                                     >
                                       {page}
                                     </Button>
                                   ) : (
-                                    <span key={idx} className="px-1 text-muted-foreground">...</span>
+                                    <span key={idx} className="px-1 text-sm text-muted-foreground">...</span>
                                   )
                                 ))}
                                 <Button
@@ -1701,7 +1713,7 @@ export default function CowOverviewPage() {
                                   size="sm"
                                   onClick={() => setGeneCurrentPage(p => Math.min(totalPages, p + 1))}
                                   disabled={geneCurrentPage === totalPages}
-                                  className="px-2"
+                                  className="px-2.5 h-9 text-sm"
                                 >
                                   ›
                                 </Button>
@@ -1710,7 +1722,7 @@ export default function CowOverviewPage() {
                                   size="sm"
                                   onClick={() => setGeneCurrentPage(totalPages)}
                                   disabled={geneCurrentPage === totalPages}
-                                  className="px-2"
+                                  className="px-2.5 h-9 text-sm"
                                 >
                                   »
                                 </Button>