[FE/React] SQLD 과목 번호 표시 수정: 배열 인덱스 대신 과정 정의 | 개발일지

분야: FE
기술 스택: React · TypeScript

문제와 원인

SQLD에서 “SQL 기본 및 활용” 기록만 남으면 화면에는 1과목으로 표시됐다. 과목 번호를 과정 정의 대신 화면 배열의 categoryIndex + 1로 계산했기 때문이다. “데이터 모델링의 이해”를 두 번째 위치에 놓으면 같은 이유로 2과목으로 바뀌었다.

수정 전 코드

과목 번호 표시

화면 배열의 인덱스로 번호를 계산했다.

examType === "IPEP" ? "실기" : `${categoryIndex + 1}과목`

수정 후 코드

recordSubjectOrder · recordSubjectLabel

정식 과목명과 등록된 별칭으로 과정 정의를 조회하고, 정의의 순서를 과목 번호로 사용했다. 실기 과정은 실기, 정의에 없는 과목은 과목으로 표시한다.

export function recordSubjectOrder(examType: ExamType, category: string) {
  const index = courseDefinition(examType).subjects.findIndex(
    s => s.name === category || s.aliases.some(alias => alias === category),
  );
  return index < 0 ? Number.MAX_SAFE_INTEGER : index + 1;
}

export function recordSubjectLabel(examType: ExamType, category: string) {
  if (examType === "IPEP") return "실기";
  const number = recordSubjectOrder(examType, category);
  return number === Number.MAX_SAFE_INTEGER ? "과목" : number + "과목";
}

기록 정렬과 과목 번호 표시

기록 정렬에도 같은 순서 함수를 사용하고 slice()로 만든 표시용 복사본을 정렬한다.

stats.categoryStats.slice().sort((a, b) =>
  recordSubjectOrder(examType, a.category) -
  recordSubjectOrder(examType, b.category)
)

화면의 과목 번호는 계산한 라벨을 사용한다.

<span className="subject-order">
  {recordSubjectLabel(examType, item.category)}
</span>

검증 결과

네 입력의 표시 비교

일부 과목만 기록된 상태, 표시 순서를 바꾼 상태, 실기 과정의 동일한 네 입력으로 수정 전후 표시 문자열을 비교했다. 잘못된 번호는 2개에서 0개로 줄었다.

입력 조건	기대 결과	수정 전	수정 후
SQL 기본 및 활용만 학습	`2과목`	`1과목`	`2과목`
모델링을 첫 번째 위치에 표시	`1과목`	`1과목`	`1과목`
모델링을 두 번째 위치에 표시	`1과목`	`2과목`	`1과목`
실기 과정	`실기`	`실기`	`실기`

같은 과정·과목·표시 위치 네 입력을 로컬 Node에서 각 1회 다시 실행했다. SQL 기본 및 활용은 2과목으로, 두 번째 위치의 모델링은 1과목으로 표시됐다.