차트 수정 사항 반영 및 ui 개선

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

@@ -228,13 +228,20 @@ export function CategoryEvaluationCard({
     return entry ? entry[0] : shortName
   }
 
-  // 커스텀 Tick 컴포넌트 (가장 좋은 형질에 배경색 + 클릭 가능)
+  // 커스텀 Tick 컴포넌트 (클릭 시 강조)
-  const CustomAngleTick = ({ x, y, payload }: { x: number; y: number; payload: { value: string } }) => {
+  const CustomAngleTick = ({ x, y, cx, cy, payload }: { x: number; y: number; cx: number; cy: number; payload: { value: string } }) => {
-    const isBest = payload.value === bestTraitName
     const isSelected = selectedTraitName === findTraitNameByShortName(payload.value)
     const textWidth = payload.value.length * 11 + 20
     const textHeight = 28
 
+    // 차트 중심에서 바깥 방향으로 offset 추가
+    const offset = 12
+    const dx = x - cx
+    const dy = y - cy
+    const distance = Math.sqrt(dx * dx + dy * dy) || 1
+    const newX = x + (dx / distance) * offset
+    const newY = y + (dy / distance) * offset
+
     const handleClick = () => {
       const traitName = findTraitNameByShortName(payload.value)
       setSelectedTraitName(prev => prev === traitName ? null : traitName)
@@ -242,18 +249,18 @@ export function CategoryEvaluationCard({
 
     return (
       <g
-        transform={`translate(${x},${y})`}
+        transform={`translate(${newX},${newY})`}
         onClick={handleClick}
         style={{ cursor: 'pointer' }}
       >
-        {(isBest || isSelected) && (
+        {isSelected && (
           <rect
             x={-textWidth / 2}
             y={-textHeight / 2}
             width={textWidth}
             height={textHeight}
             rx={6}
-            fill={isSelected ? '#1F3A8F' : '#1482B0'}
+            fill="#1482B0"
           />
         )}
         <text
@@ -262,8 +269,8 @@ export function CategoryEvaluationCard({
           dy={5}
           textAnchor="middle"
           fontSize={15}
-          fontWeight={(isBest || isSelected) ? 700 : 600}
+          fontWeight={isSelected ? 700 : 600}
-          fill={(isBest || isSelected) ? '#ffffff' : '#334155'}
+          fill={isSelected ? '#ffffff' : '#334155'}
         >
           {payload.value}
         </text>
@@ -417,16 +424,11 @@ export function CategoryEvaluationCard({
             <div className="bg-muted/20 rounded-xl h-full">
               <div className={hideTraitCards ? 'h-[95vw] max-h-[520px] sm:h-[420px]' : 'h-[95vw] max-h-[520px] sm:h-[440px]'}>
                 <ResponsiveContainer width="100%" height="100%">
-                  <RadarChart data={traitChartData} margin={{ top: 25, right: 30, bottom: 25, left: 30 }}>
+                  <RadarChart data={traitChartData} margin={{ top: 40, right: 45, bottom: 40, left: 45 }}>
                     <PolarGrid
                       stroke="#e2e8f0"
                       strokeWidth={1}
                     />
-                    <PolarAngleAxis
-                      dataKey="shortName"
-                      tick={<CustomAngleTick x={0} y={0} payload={{ value: '' }} />}
-                      tickLine={false}
-                    />
                     <PolarRadiusAxis
                       angle={90}
                       domain={[-dynamicDomain, dynamicDomain]}
@@ -469,13 +471,19 @@ export function CategoryEvaluationCard({
                         r: isDesktop ? 3 : 2
                       }}
                     />
+                    {/* PolarAngleAxis를 Radar 뒤에 배치하여 tick이 차트 위에 표시되도록 함 */}
+                    <PolarAngleAxis
+                      dataKey="shortName"
+                      tick={CustomAngleTick}
+                      tickLine={false}
+                    />
                     <RechartsTooltip
                       content={({ active, payload }) => {
                         if (active && payload && payload.length) {
                           const item = payload[0]?.payload
                           const epd = item?.epd ?? 0
-                          const regionEpd = (item?.regionVal ?? 0) * (item?.epd / (item?.breedVal || 1)) || 0
+                          const regionEpd = item?.regionEpd ?? 0
-                          const farmEpd = (item?.farmVal ?? 0) * (item?.epd / (item?.breedVal || 1)) || 0
+                          const farmEpd = item?.farmEpd ?? 0
 
                           return (
                             <div className="bg-foreground px-4 py-3 rounded-lg text-sm shadow-lg">

frontend/src/app/findid/page.tsx

@@ -16,7 +16,7 @@ export default function FindIdPage() {
       <div className="bg-white relative hidden lg:flex items-center justify-center">
         <Image
           src="/logo-graphic.svg"
-          alt="한우 유전능력 컨설팅 로고"
+          alt="한우 유전체 컨설팅 로고"
           fill
           className="object-contain p-16 -translate-y-12 translate-x-24"
           priority
@@ -32,7 +32,7 @@ export default function FindIdPage() {
             <div className="lg:hidden flex justify-center mb-2">
               <Image
                 src="/logo-graphic.svg"
-                alt="한우 유전능력 컨설팅 로고"
+                alt="한우 유전체 컨설팅 로고"
                 width={120}
                 height={120}
                 className="object-contain"

frontend/src/app/findpw/page.tsx

@@ -10,7 +10,7 @@ export default function FindPwPage() {
       <div className="bg-white relative hidden lg:flex items-center justify-center">
         <Image
           src="/logo-graphic.svg"
-          alt="한우 유전능력 컨설팅 로고"
+          alt="한우 유전체 컨설팅 로고"
           fill
           className="object-contain p-16 -translate-y-12 translate-x-24"
           priority
@@ -26,7 +26,7 @@ export default function FindPwPage() {
             <div className="lg:hidden flex justify-center mb-2">
               <Image
                 src="/logo-graphic.svg"
-                alt="한우 유전능력 컨설팅 로고"
+                alt="한우 유전체 컨설팅 로고"
                 width={120}
                 height={120}
                 className="object-contain"

frontend/src/app/login/page.tsx

@@ -70,7 +70,7 @@ export default function LoginPage() {
       <div className="bg-white relative hidden lg:flex items-center justify-center">
         <Image
           src="/logo-graphic.svg"
-          alt="한우 유전능력 컨설팅 로고"
+          alt="한우 유전체 컨설팅 로고"
           fill
           className="object-contain p-16 -translate-y-12 translate-x-24"
           priority
@@ -86,7 +86,7 @@ export default function LoginPage() {
             <div className="lg:hidden flex justify-center mb-2">
               <Image
                 src="/logo-graphic.svg"
-                alt="한우 유전능력 컨설팅 로고"
+                alt="한우 유전체 컨설팅 로고"
                 width={120}
                 height={120}
                 className="object-contain"