123

src/app/components/GradeIcon.tsx

@@ -0,0 +1,45 @@
+export function GradeIcon({ grade, width = 32, height = 32, className }: { grade: number; width?: number; height?: number; className?: string }) {
+  // grade: 0~7 (bronze, silver, gold, platinum, diamond, master, grandmaster, god)
+  const gradeImages = [
+    "/svgs/01_bronze.svg",
+    "/svgs/02_silver.svg.svg",
+    "/svgs/03_gold.svg",
+    "/svgs/04_platinum.svg",
+    "/svgs/05_diamond.svg",
+    "/svgs/06_master.svg",
+    "/svgs/07_grandmaster.svg",
+    "/svgs/08_god.svg",
+  ];
+
+  const gradeIndex = Math.min(7, Math.max(0, grade));
+  const imageSrc = gradeImages[gradeIndex];
+
+  return (
+    <img
+      src={imageSrc}
+      alt={`등급 ${gradeIndex + 1}`}
+      width={width}
+      height={height}
+      className={className}
+      style={{ width, height }}
+    />
+  );
+}
+
+// 등급 숫자를 등급 이름으로 변환하는 함수
+export function getGradeName(grade: number): string {
+  const gradeNames = [
+    "Bronze",
+    "Silver",
+    "Gold",
+    "Platinum",
+    "Diamond",
+    "Master",
+    "Grandmaster",
+    "God",
+  ];
+  
+  const gradeIndex = Math.min(7, Math.max(0, grade));
+  return gradeNames[gradeIndex];
+}
+