From 1e0139f33d32116a055176c36e82a6f28e54c2e1 Mon Sep 17 00:00:00 2001
From: harry <jhlee@eroun.ai>
Date: Fri, 20 Mar 2026 14:41:58 +0900
Subject: [PATCH 1/3] =?UTF-8?q?hotfix:=20=EB=8B=A8=EC=9D=BC=20=EC=B9=B4?=
 =?UTF-8?q?=ED=85=8C=EA=B3=A0=EB=A6=AC=20100%=20=EC=8B=9C=20=EB=8F=84?=
 =?UTF-8?q?=EB=84=9B=20=EC=B0=A8=ED=8A=B8=20=EB=A0=8C=EB=8D=94=EB=A7=81=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

- SVG arc path가 360도(시작점==끝점)일 때 렌더링되지 않는 문제를 circle 엘리먼트로 대체하여 수정
- 범례 퍼센트 라벨 위치를 왼쪽으로 조정하여 100% 표시 시 박스 초과 방지
---
 src/utils/generateCategorySvg.ts | 42 ++++++++++++++++++++------------
 1 file changed, 26 insertions(+), 16 deletions(-)

diff --git a/src/utils/generateCategorySvg.ts b/src/utils/generateCategorySvg.ts
index 52be5f1..de229bb 100644
--- a/src/utils/generateCategorySvg.ts
+++ b/src/utils/generateCategorySvg.ts
@@ -61,21 +61,31 @@ export function generateCategorySvg(stats: TCategoryStats, theme: Theme = 'light
       const angleSize = percentage * 360;
       const endAngle = currentAngle + angleSize;
 
-      // 원형 조각 경로
-      const startX = pieCenterX + radius * Math.cos((currentAngle - 90) * Math.PI / 180);
-      const startY = pieCenterY + radius * Math.sin((currentAngle - 90) * Math.PI / 180);
-      const endX = pieCenterX + radius * Math.cos((endAngle - 90) * Math.PI / 180);
-      const endY = pieCenterY + radius * Math.sin((endAngle - 90) * Math.PI / 180);
-      const largeArcFlag = angleSize > 180 ? 1 : 0;
-
-      const path = `
-        <path
-          d="M ${pieCenterX} ${pieCenterY} L ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY} Z"
-          fill="${category.color}"
-          stroke="${colors.background}"
-          stroke-width="1"
-        />
-      `;
+      let path: string;
+
+      if (angleSize >= 359.99) {
+        // 100%인 경우 arc 대신 원을 그림 (SVG arc는 시작점==끝점이면 렌더링 안됨)
+        path = `
+          <circle cx="${pieCenterX}" cy="${pieCenterY}" r="${radius}" fill="${category.color}"
+            stroke="${colors.background}" stroke-width="1" />
+        `;
+      } else {
+        // 원형 조각 경로
+        const startX = pieCenterX + radius * Math.cos((currentAngle - 90) * Math.PI / 180);
+        const startY = pieCenterY + radius * Math.sin((currentAngle - 90) * Math.PI / 180);
+        const endX = pieCenterX + radius * Math.cos((endAngle - 90) * Math.PI / 180);
+        const endY = pieCenterY + radius * Math.sin((endAngle - 90) * Math.PI / 180);
+        const largeArcFlag = angleSize > 180 ? 1 : 0;
+
+        path = `
+          <path
+            d="M ${pieCenterX} ${pieCenterY} L ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY} Z"
+            fill="${category.color}"
+            stroke="${colors.background}"
+            stroke-width="1"
+          />
+        `;
+      }
 
       // 퍼센트 라벨
       const midAngle = currentAngle + angleSize / 2;
@@ -97,7 +107,7 @@ export function generateCategorySvg(stats: TCategoryStats, theme: Theme = 'light
       legends += `
         <rect x="${legendStartX}" y="${legendY}" width="10" height="10" fill="${category.color}" rx="2" ry="2" />
         <text x="${legendStartX + 16}" y="${legendY + 9}" class="legend-text">${capitalizedName}</text>
-        <text x="${legendStartX + 135}" y="${legendY + 9}" class="legend-value">${percentage}%</text>
+        <text x="${legendStartX + 125}" y="${legendY + 9}" class="legend-value">${percentage}%</text>
       `;
     });
   }

From c45aae4e0a9df686c4989935642699e8c162a032 Mon Sep 17 00:00:00 2001
From: harry <jhlee@eroun.ai>
Date: Fri, 20 Mar 2026 14:53:27 +0900
Subject: [PATCH 2/3] =?UTF-8?q?hotfix:=20Rank=20=EB=B0=95=EC=8A=A4=20?=
 =?UTF-8?q?=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=98=A4=EB=B2=84=ED=94=8C?=
 =?UTF-8?q?=EB=A1=9C=EC=9A=B0=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 슬래시 뒤 총원 숫자를 작은 폰트(12px)로 분리 표시하여 박스 내 공간 확보
---
 src/utils/generateStatsSvg.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/utils/generateStatsSvg.ts b/src/utils/generateStatsSvg.ts
index 1b6c85f..5b6b21d 100644
--- a/src/utils/generateStatsSvg.ts
+++ b/src/utils/generateStatsSvg.ts
@@ -24,6 +24,11 @@ const themes: Record<Theme, ThemeColors> = {
 export function generateStatsSvg(stats: Tstats, theme: Theme = 'light'): string {
   const colors = themes[theme];
 
+  const rankParts = stats.wargame_rank.split('/');
+  const rankDisplay = rankParts.length === 2
+    ? `<tspan class="stat-value">${rankParts[0]}</tspan><tspan class="rank-total" dx="1">/</tspan><tspan class="rank-total" dx="1">${rankParts[1]}</tspan>`
+    : `<tspan class="stat-value">${stats.wargame_rank}</tspan>`;
+
   return `
 <svg xmlns="http://www.w3.org/2000/svg" width="390" height="190" viewBox="0 0 390 190" fill="none">
   <style>
@@ -32,6 +37,7 @@ export function generateStatsSvg(stats: Tstats, theme: Theme = 'light'): string
     .user-name { font: 700 28px 'JetBrains Mono', monospace; fill: ${colors.text}; }
     .stat-label { font: 400 10px 'JetBrains Mono', monospace; fill: ${colors.subText}; }
     .stat-value { font: 700 18px 'JetBrains Mono', monospace; fill: ${colors.text}; }
+    .rank-total { font: 700 12px 'JetBrains Mono', monospace; fill: ${colors.title}; }
     .top-label { font: 500 12px 'JetBrains Mono', monospace; fill: ${colors.title}; }
     .top-value { font: 700 20px 'JetBrains Mono', monospace; fill: ${colors.accent}; }
   </style>
@@ -61,7 +67,7 @@ export function generateStatsSvg(stats: Tstats, theme: Theme = 'light'): string
   <g transform="translate(137, 105)">
     <rect x="0" y="0" width="115" height="70" fill="${colors.cardBackground}" rx="8" ry="8"/>
     <text x="57.5" y="16" class="stat-label" text-anchor="middle">Rank</text>
-    <text x="57.5" y="48" class="stat-value" text-anchor="middle">${stats.wargame_rank}</text>
+    <text x="57.5" y="48" text-anchor="middle">${rankDisplay}</text>
   </g>
 
   <g transform="translate(259, 105)">

From d6d22204281c1365c7b3b846481801253adafe68 Mon Sep 17 00:00:00 2001
From: harry <jhlee@eroun.ai>
Date: Fri, 20 Mar 2026 14:56:22 +0900
Subject: [PATCH 3/3] =?UTF-8?q?hotfix:=20Rank=20=ED=91=9C=EC=8B=9C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=EC=97=90=20=EB=A7=9E=EC=B6=B0=20=ED=85=8C?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/__tests__/utils/generateStatsSvg.test.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/__tests__/utils/generateStatsSvg.test.ts b/src/__tests__/utils/generateStatsSvg.test.ts
index 8ce86c2..8b3b76e 100644
--- a/src/__tests__/utils/generateStatsSvg.test.ts
+++ b/src/__tests__/utils/generateStatsSvg.test.ts
@@ -20,7 +20,8 @@ describe('generateStatsSvg 유틸리티 함수 테스트', () => {
     // 사용자 데이터가 SVG에 포함되어 있는지 확인
     expect(result).toContain('testuser');
     expect(result).toContain('50');
-    expect(result).toContain('200/1000');
+    expect(result).toContain('200');
+    expect(result).toContain('1000');
     expect(result).toContain('20.00%');
     expect(result).toContain('5000');
   });