From 775e412d0abed17acd0bc8227025ef581d7e1b5b Mon Sep 17 00:00:00 2001
From: eil-you <qldirl123@gmail.com>
Date: Thu, 13 Aug 2026 19:18:23 +0900
Subject: [PATCH] =?UTF-8?q?fix(app):=20=EC=BD=94=EC=8A=A4=20=ED=83=AD=20?=
 =?UTF-8?q?=EC=8A=A4=ED=85=9D=20=EB=B2=88=ED=98=B8=EB=A5=BC=20=EC=BD=94?=
 =?UTF-8?q?=EC=8A=A4=20=EB=82=B4=20=EC=83=81=EB=8C=80=20=EC=88=9C=EB=B2=88?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=ED=91=9C=EC=8B=9C=20(#290)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../course/components/course-page.tsx         | 18 ++++++++++----
 app/src/test/course-page.test.tsx             | 24 +++++++++++++++++++
 2 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/app/src/features/course/components/course-page.tsx b/app/src/features/course/components/course-page.tsx
index e6105c9..ef276da 100644
--- a/app/src/features/course/components/course-page.tsx
+++ b/app/src/features/course/components/course-page.tsx
@@ -176,9 +176,9 @@ function CourseCard({
       </button>
       {isOpen ? (
         <ul className="divide-y divide-border border-t border-border">
-          {course.steps.map((step) => (
+          {course.steps.map((step, index) => (
             <li key={step.stepOrder}>
-              <CourseStepRow courseId={course.courseId} step={step} />
+              <CourseStepRow courseId={course.courseId} displayOrder={index + 1} step={step} />
             </li>
           ))}
         </ul>
@@ -210,7 +210,15 @@ function isCourseCompleted(course: CourseItem): boolean {
   return course.steps.length > 0 && course.steps.every((step) => step.state === "COMPLETED");
 }
 
-function CourseStepRow({ courseId, step }: { courseId: number; step: CourseStep }) {
+function CourseStepRow({
+  courseId,
+  displayOrder,
+  step,
+}: {
+  courseId: number;
+  displayOrder: number;
+  step: CourseStep;
+}) {
   const isLocked = step.state === "LOCKED";
   const href = getStepHref(courseId, step);
 
@@ -220,14 +228,14 @@ function CourseStepRow({ courseId, step }: { courseId: number; step: CourseStep
         isLocked ? "bg-surface-muted text-ink-muted" : "bg-primary text-primary-fg"
       }`}
     >
-      {isLocked ? <LockIcon aria-hidden="true" className="size-4" /> : step.stepOrder}
+      {isLocked ? <LockIcon aria-hidden="true" className="size-4" /> : displayOrder}
     </span>
   );
 
   const body = (
     <span className="min-w-0 flex-1">
       <span className="block text-xs font-semibold text-ink-muted">
-        STEP {step.stepOrder} · {step.estimatedMinutes}분
+        STEP {displayOrder} · {step.estimatedMinutes}분
       </span>
       <span
         className={`mt-0.5 block truncate text-base font-semibold ${
diff --git a/app/src/test/course-page.test.tsx b/app/src/test/course-page.test.tsx
index 75aa37c..cfee93d 100644
--- a/app/src/test/course-page.test.tsx
+++ b/app/src/test/course-page.test.tsx
@@ -44,6 +44,17 @@ const courseCompleted: CourseItem = {
   ],
 };
 
+/** stepOrder는 코스 무관 전역 순번이라 두 번째 이후 코스는 1보다 큰 값에서 시작한다(이슈 290). */
+const secondCourseWithGlobalStepOffset: CourseItem = {
+  courseId: 2,
+  title: "디자인 패턴",
+  category: "CS",
+  steps: [
+    { stepOrder: 13, topic: "생성 패턴 개요와 싱글턴", estimatedMinutes: 10, state: "SOLVABLE" },
+    { stepOrder: 14, topic: "팩토리 메서드", estimatedMinutes: 10, state: "LOCKED" },
+  ],
+};
+
 describe("CoursePage", () => {
   beforeEach(() => {
     vi.mocked(getCourses).mockReset();
@@ -176,4 +187,17 @@ describe("CoursePage", () => {
 
     expect(screen.queryByText("배열")).not.toBeInTheDocument();
   });
+
+  it("전역 stepOrder가 아니라 코스 안 순번으로 STEP 번호를 표시한다", async () => {
+    vi.mocked(getCourses).mockResolvedValue({ items: [secondCourseWithGlobalStepOffset] });
+
+    render(<CoursePage />);
+
+    await screen.findByText("생성 패턴 개요와 싱글턴");
+
+    expect(screen.getByText(/STEP 1 ·/)).toBeInTheDocument();
+    expect(screen.getByText(/STEP 2 ·/)).toBeInTheDocument();
+    expect(screen.queryByText(/STEP 13/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/STEP 14/)).not.toBeInTheDocument();
+  });
 });