-
농가 평균
-
+
+ 농가 평균
+
{selectedTrait.farmEpd?.toFixed(2) ?? '-'}
{/* 개체 카드 */}
-
-
내 개체
-
+
+ 내 개체
+
{selectedTrait.epd?.toFixed(2) ?? '-'}
diff --git a/frontend/src/app/cow/[cowNo]/genome/_components/normal-distribution-chart.tsx b/frontend/src/app/cow/[cowNo]/genome/_components/normal-distribution-chart.tsx
index 608c8b8..7f34e07 100644
--- a/frontend/src/app/cow/[cowNo]/genome/_components/normal-distribution-chart.tsx
+++ b/frontend/src/app/cow/[cowNo]/genome/_components/normal-distribution-chart.tsx
@@ -811,10 +811,10 @@ export function NormalDistributionChart({
return Math.max(chartX + halfWidth + 5, Math.min(x, chartX + chartWidth - halfWidth - 5))
}
- // 배지 크기 (더 크게)
+ // 배지 크기 (더 크게) - 모바일에서 텍스트가 한 줄로 나오도록 너비 확보
const cowBadgeW = isMobile ? 105 : 135
- const avgBadgeW = isMobile ? 100 : 135
- const regionBadgeW = isMobile ? 105 : 145
+ const avgBadgeW = isMobile ? 118 : 135
+ const regionBadgeW = isMobile ? 125 : 145
const badgeH = isMobile ? 42 : 48
// Y 위치 계산 - 겹치지 않게 배치
diff --git a/frontend/src/app/cow/[cowNo]/page.tsx b/frontend/src/app/cow/[cowNo]/page.tsx
index 6ce7552..09e549c 100644
--- a/frontend/src/app/cow/[cowNo]/page.tsx
+++ b/frontend/src/app/cow/[cowNo]/page.tsx
@@ -17,6 +17,7 @@ import { GenomeTrait } from "@/types/genome.types"
import { useGlobalFilter } from "@/contexts/GlobalFilterContext"
import {
ArrowLeft,
+ ArrowUp,
BarChart3,
CheckCircle2,
Download,
@@ -156,6 +157,7 @@ export default function CowOverviewPage() {
const [geneDataLoading, setGeneDataLoading] = useState(false) // 유전자 데이터 로딩 중
const [loading, setLoading] = useState(true)
const [activeTab, setActiveTab] = useState('genome')
+ const [showScrollTop, setShowScrollTop] = useState(false)
// 검사 상태
const [hasGenomeData, setHasGenomeData] = useState(false)
@@ -220,6 +222,20 @@ export default function CowOverviewPage() {
}
}, [filters.isActive, firstPinnedTrait, chartFilterTrait])
+ // 스크롤 투 탑 버튼 표시 여부
+ useEffect(() => {
+ const handleScroll = () => {
+ setShowScrollTop(window.scrollY > 400)
+ }
+ window.addEventListener('scroll', handleScroll)
+ return () => window.removeEventListener('scroll', handleScroll)
+ }, [])
+
+ // 맨 위로 스크롤
+ const scrollToTop = () => {
+ window.scrollTo({ top: 0, behavior: 'smooth' })
+ }
+
// 유전자 탭 필터 상태
const [geneSearchInput, setGeneSearchInput] = useState('') // 실시간 입력값
const [geneSearchKeyword, setGeneSearchKeyword] = useState('') // 디바운스된 검색값
@@ -1938,6 +1954,17 @@ export default function CowOverviewPage() {
- {cow.cowSex === "암" ? "암소" : "수소"}
+ {cow.cowSex === "수" ? "수소" : "암소"}
|
{cow.damCowId && cow.damCowId !== '0' ? cow.damCowId : '-'}
@@ -1132,7 +1132,7 @@ function MyCowContent() {
{paginatedCows.map((cow) => {
const rank = getRank(cow)
- const isFemale = cow.cowSex === '암'
+ const isFemale = cow.cowSex !== '수'
return (
(1)
+
+ const styles = [
+ {
+ id: 1,
+ name: '기본 프라이머리',
+ className: 'bg-primary text-white shadow-lg hover:bg-primary/90',
+ },
+ {
+ id: 2,
+ name: '그라데이션 블루',
+ className: 'bg-gradient-to-r from-blue-500 to-indigo-600 text-white shadow-xl shadow-blue-500/30 hover:shadow-blue-500/50',
+ },
+ {
+ id: 3,
+ name: '글래스모피즘',
+ className: 'bg-white/80 backdrop-blur-md border border-white/50 text-slate-700 shadow-lg hover:bg-white/90',
+ },
+ {
+ id: 4,
+ name: '아웃라인',
+ className: 'bg-white border-2 border-primary text-primary hover:bg-primary hover:text-white',
+ },
+ {
+ id: 5,
+ name: '미니멀 다크',
+ className: 'bg-slate-800 text-white shadow-lg hover:bg-slate-700',
+ },
+ {
+ id: 6,
+ name: '소프트 그레이',
+ className: 'bg-slate-100 text-slate-600 shadow-md hover:bg-slate-200 hover:text-slate-800',
+ },
+ {
+ id: 7,
+ name: '그린 그라데이션',
+ className: 'bg-gradient-to-r from-emerald-500 to-teal-600 text-white shadow-xl shadow-emerald-500/30',
+ },
+ {
+ id: 8,
+ name: '네온 퍼플',
+ className: 'bg-violet-600 text-white shadow-xl shadow-violet-500/40 hover:shadow-violet-500/60',
+ },
+ {
+ id: 9,
+ name: '오렌지 웜',
+ className: 'bg-gradient-to-r from-orange-400 to-rose-500 text-white shadow-xl shadow-orange-500/30',
+ },
+ {
+ id: 10,
+ name: '심플 화이트',
+ className: 'bg-white text-slate-500 shadow-xl border border-slate-200 hover:text-primary hover:border-primary',
+ },
+ ]
+
+ const icons = [
+ { id: 'arrow', icon: ArrowUp, name: 'ArrowUp' },
+ { id: 'chevron', icon: ChevronUp, name: 'ChevronUp' },
+ { id: 'chevrons', icon: ChevronsUp, name: 'ChevronsUp' },
+ { id: 'move', icon: MoveUp, name: 'MoveUp' },
+ ]
+
+ const [selectedIcon, setSelectedIcon] = useState('arrow')
+ const SelectedIconComponent = icons.find(i => i.id === selectedIcon)?.icon || ArrowUp
+
+ return (
+
+
+ 플로팅 버튼 스타일 데모
+ 원하는 스타일을 선택해보세요. 우하단에 실제 버튼이 표시됩니다.
+
+ {/* 아이콘 선택 */}
+
+ 아이콘 선택
+
+ {icons.map((icon) => {
+ const IconComp = icon.icon
+ return (
+
+ )
+ })}
+
+
+
+ {/* 스타일 선택 그리드 */}
+ 스타일 선택
+
+ {styles.map((style) => (
+
+ ))}
+
+
+ {/* 코드 표시 */}
+
+ 선택한 스타일 코드:
+
+ {`className="${styles.find(s => s.id === selectedStyle)?.className}"`}
+
+
+
+ {/* 스크롤 테스트용 더미 콘텐츠 */}
+
+ 스크롤 테스트
+ 아래로 스크롤해서 버튼 동작을 확인하세요.
+ {Array.from({ length: 20 }).map((_, i) => (
+
+ 더미 콘텐츠 #{i + 1}
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+
+ ))}
+
+
+
+ {/* 실제 플로팅 버튼 */}
+
+
+ )
+}
diff --git a/frontend/src/components/common/global-filter-dialog.tsx b/frontend/src/components/common/global-filter-dialog.tsx
index d5a7c81..b99ae84 100644
--- a/frontend/src/components/common/global-filter-dialog.tsx
+++ b/frontend/src/components/common/global-filter-dialog.tsx
@@ -134,7 +134,7 @@ function SortableTraitItem({
{isPinned && }
- {id}
+ {TRAIT_DISPLAY_NAMES[id] || id}
|