From d2d689334dd0dccf7e42ddf0bfde760313d001c9 Mon Sep 17 00:00:00 2001
From: cloud0406 <cloud0406@naver.com>
Date: Fri, 10 Jan 2025 10:29:39 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=E2=99=BB=EF=B8=8F[Refactor]=20=ED=94=84?=
 =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EB=A0=88=EC=8A=A4=EB=B0=94=20100%=20?=
 =?UTF-8?q?=EC=95=88=EB=84=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/progress-bar/ProgressBar.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/progress-bar/ProgressBar.tsx b/src/components/progress-bar/ProgressBar.tsx
index 8041f380..3457c53f 100644
--- a/src/components/progress-bar/ProgressBar.tsx
+++ b/src/components/progress-bar/ProgressBar.tsx
@@ -16,10 +16,12 @@ function ProgressBar({
   const fillColor =
     color || (isPast ? 'bg-gray-dark-02' : 'bg-green-normal-01');
 
+  const limitedPercentage = Math.min(100, Math.max(0, percentage));
+
   return (
     <div
       role="progressbar"
-      aria-valuenow={percentage}
+      aria-valuenow={limitedPercentage}
       aria-valuemin={0}
       aria-valuemax={100}
       className={`h-1 w-full rounded-md bg-gray-normal-01 ${className || ''}`}
@@ -28,7 +30,7 @@ function ProgressBar({
       <div
         className={`h-full rounded-md transition-all duration-300 ${fillColor}`}
         style={{
-          width: `${percentage}%`,
+          width: `${limitedPercentage}%`,
         }}
       />
     </div>

From 82a2d089ddb90f7894850987fe2eda0567e46968 Mon Sep 17 00:00:00 2001
From: cloud0406 <cloud0406@naver.com>
Date: Fri, 10 Jan 2025 10:32:44 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=E2=9C=85[Test]=20=ED=85=8C=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EC=BD=94=EB=93=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/progress-bar/ProgressBar.test.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/progress-bar/ProgressBar.test.tsx b/src/components/progress-bar/ProgressBar.test.tsx
index 67aa3033..fb7d0079 100644
--- a/src/components/progress-bar/ProgressBar.test.tsx
+++ b/src/components/progress-bar/ProgressBar.test.tsx
@@ -16,4 +16,13 @@ describe('ProgressBar', () => {
     const fillBar = screen.getByRole('progressbar').children[0];
     expect(fillBar).toHaveStyle({ width: '25%' });
   });
+
+  it('percentage가 100을 초과할 경우 100%로 제한되는지 확인', () => {
+    render(<ProgressBar percentage={150} />);
+    const progressbar = screen.getByRole('progressbar');
+    const fillBar = progressbar.children[0];
+
+    expect(progressbar).toHaveAttribute('aria-valuenow', '100');
+    expect(fillBar).toHaveStyle({ width: '100%' });
+  });
 });