내부통제 AX 실습 교재

1-04 · 검토 현황과 사례 근거 연결하기

1. 실습 목표

student/01-population-ready에서 만든 앱 셸을 유지한 채 첫 과정 집계, 검토 필요 8건 목록과 선택 사례 상세를 같은 API 응답으로 표시합니다. 수강생은 이미 만든 화면이 업무 화면으로 채워지는 변화를 확인합니다.

2. 시작 지점

student/03-controls-persisted의 판정 API와 SQLite에서 30 / 29 / 21 / 8 / 1을 확인했습니다. 이번 단계에서는 대시보드·예외 목록·사례 상세를 같은 앱 셸에 연결합니다.

3. 구현 범위 및 요구사항

대시보드와 예외 목록

  • frontend/src/App.tsx와 styles.css만 수정하고 새 패키지·라우터는 추가하지 않습니다.
  • 전체·유효·정상·검토 필요·입력 오류와 CHG-2608-022–029 목록을 같은 API에서 읽습니다.
  • 불러오는 중·API 오류·다시 시도를 실제 결과와 구분하고 색만으로 상태를 전달하지 않습니다.

선택 사례 상세

  • 기존 응답과 React 선택 상태를 재사용합니다.
  • change_id, 사유, R-01–R-04의 통과·실패·평가 불가, 승인·증빙 ID를 표시합니다.
  • 사례를 바꾸면 이전 상세가 남지 않고 키보드로도 목록을 선택할 수 있어야 합니다.
  • 사례를 바꾸면 제목·사유·규칙·근거 ID가 함께 바뀌어야 합니다.

4. 실습 프롬프트

Claude Code에 붙여 넣을 프롬프트
판정 API의 집계와 예외 상세를 기존 앱 셸에 연결해 주세요.
 
현재 백엔드는 판정 결과를 계산하고 저장하지만 화면에서는 전체 집계와 사례별 판정 근거를 충분히 확인할 수 없습니다. `App.tsx`, `styles.css`와 기존 컴포넌트를 먼저 확인해 주세요.
 
구현이 끝나면 사용자가 대시보드에서 전체 결과를 살펴보고, 예외 목록에서 사례를 선택해 규칙별 상태와 근거를 확인할 수 있어야 합니다.
 
- 대시보드, 모집단, 예외 목록과 선택 사례 상세의 기존 내비게이션 연결
- 선택 사례의 변경 ID, 예외 사유, R-01–R-04 상태와 승인·증빙 ID 표시
- `fail`과 `not_applicable`, 로딩·오류·다시 시도 상태 구분
- 색상 외 텍스트 표현과 키보드 조작을 포함한 선택 상태 제공
- 백엔드, 패키지와 실행·저장 동작 유지
- 검증 완료 상태의 조기 표시 금지
 
서로 다른 예외 사례 두 건을 전환해 보고 기존 검사 명령을 실행해 주세요. 구현 후에는 변경 파일, 실제 화면 동작, 검사 통과 여부와 남은 위험만 간단히 알려 주세요.

5. 예상 결과

Success

  • 체크포인트: student/04-day1-ui-ready
  • 집계 30 / 29 / 21 / 8 / 1, 예외 022–029
  • 023: 승인 없음, R-02 실패, R-03·R-04 평가 불가
  • 024: R-03 실패
  • 사례 전환 뒤 제목·사유·규칙·근거가 같은 change_id를 표시
  • 앱 셸에서 대시보드·모집단·예외·사례 상세를 이동할 수 있음

6. 대표 실패 사례 및 복구

Failure

  • 화면마다 고정 배열을 두거나 상세 데이터를 다시 하드코딩함
  • 검토 자료·라우터까지 한 번에 추가해 변경 범위를 키움
  • API 오류 때문에 기존 화면 전체를 성공 또는 빈 결과로 바꿈

화면과 API 응답을 비교하는 방법

두 PowerShell 터미널을 모두 ai-coding-class-pwc-practice/practice/workspace에서 엽니다.

첫 번째 터미널에서 백엔드를 실행합니다.

npm run start:backend

두 번째 터미널에서 프런트엔드를 실행하고 브라우저로 http://127.0.0.1:5173을 엽니다.

npm run dev:frontend
  1. 브라우저에서 F12를 누르고 Network 탭을 엽니다.
  2. 화면을 새로고침하고 control-test/run 요청을 선택한 뒤 Response에서 exceptions를 찾습니다.
  3. 화면에서 CHG-2608-023과 CHG-2608-024를 차례로 선택합니다.
  4. 화면의 제목·사유·규칙·근거가 응답에서 같은 change_id를 가진 항목과 일치하는지 확인합니다.

오류 화면과 복구도 확인하려면 첫 번째 터미널에서 Ctrl+C를 눌러 백엔드만 끄고 화면을 새로고침합니다. API 오류가 표시되면 첫 번째 터미널에서 npm run start:backend를 다시 실행한 뒤 화면의 다시 시도를 누릅니다.

직접 확인할 결과

  1. 모집단·대시보드·예외·사례 상세를 같은 앱 셸에서 이동합니다.
  2. CHG-2608-023과 024를 번갈아 선택해 상세가 해당 사례로 교체되는지 확인합니다.
  3. 백엔드를 중지해 오류와 다시 시도를 확인합니다.
  4. 키보드로 예외 목록을 이동해 선택 사례의 제목·사유·규칙·근거가 함께 바뀌는지 확인합니다.

7. 다음 실습

첫 과정 결과 검증하고 복구하기에서 API·SQLite·화면·원본을 함께 대조합니다.