2-07 · Agent 검토 자료를 화면에 표시하기
1. 실습 목표
기존 첫 과정 앱 셸의 검토자료 메뉴에 Agent 검토 자료 요약과 표본 12건의 초안·담당자 확인 필요 상태를 연결합니다.
2. 시작 지점
student/10-working-paper-api-ready의 GET /api/day2/working-paper에서 검증된 표본 12건과 12 / 4 / 8 / 12 집계를 확인했습니다. 이번 실습에서는 이 응답을 검토자료 화면에 연결합니다.
3. 구현 범위 및 요구사항
검토 자료 UI 연결
App.tsx와styles.css만 수정하고 라우터·탭·새 디자인 시스템은 추가하지 않습니다.- Agent 초안과 담당자의 최종 결론을 명확히 구분합니다.
- 검토 자료 오류를 기존 첫 과정 결과와 분리하고 12건 모두 담당자 확인이 필요하다고 텍스트로 표시합니다.
- 첫 과정 대시보드·모집단·예외 이동을 유지하고, working-paper API 오류가 첫 과정 결과를 지우지 않게 합니다.
두 번째 과정 검증
working-paper.json해시와 R-01–R-04가 첫 과정 결과와 같은지 확인합니다.- Agent 초안에는 수행 절차·사실·초안 평가·추가 확인 항목·인용 ID를 표시합니다.
- Python 검사, 프런트 type check·build와 API를 실행합니다.
4. 실습 프롬프트
검토 자료 API를 기존 앱 셸에 연결해 표본별 Agent 초안과 근거를 표시해 주세요.
현재 `GET /api/day2/working-paper`는 검토 자료를 반환하지만 화면에서는 아직 확인할 수 없습니다. 기존 React 메뉴, 컴포넌트와 화면 스타일을 먼저 살펴보고 같은 앱 안에 검토 자료 화면을 연결해 주세요.
구현이 끝나면 사용자가 전체 검토 대상을 살펴보고, 하나를 선택해 Agent 초안과 판단 근거를 함께 확인할 수 있어야 합니다.
- 검토 자료 메뉴와 API 요약 영역 추가
- 전체 검토 대상 목록과 선택한 사례의 상세 영역 연결
- 변경 ID, 거래처, 선정 이유, 기존 판정 상태와 source ID 표시
- Agent 초안과 추가 확인 항목의 구분
- Agent 초안이 담당자의 최종 결론이 아니라는 안내 표시
- 로딩, 빈 결과, 오류와 다시 시도 상태 구분
- 백엔드, 원본 JSON과 기존 대시보드·모집단·예외 화면 유지
기존 화면과 검토 자료 화면을 각각 한 번 확인하고 기존 검사 명령을 실행해 주세요. 구현 후에는 변경 파일, 실제 화면 동작, 검사 통과 여부와 남은 위험만 간단히 알려 주세요.5. 예상 결과
Success
- 체크포인트:
student/11-day2-complete- 검토 자료
12 / 4 / 8 / 12, 모든 표본 담당자 확인 필요- 첫 과정
30 / 29 / 21 / 8 / 1유지- 원본 검토 자료 해시 유지
- 기존 앱 셸에서 첫 과정 결과와 working-paper 표본 12건을 이동하며 확인할 수 있음
6. 대표 실패 사례 및 복구
Failure
- JSON을 프런트에 다시 하드코딩함
- 정상 표본 4건을 담당자 검토 완료로 표시함
- 검토 자료 API 오류 때문에 첫 과정 화면도 빈 결과가 됨
Info
API 응답과 검토 자료 원본을 대조합니다. 복구가 필요하면
student/11-day2-complete를 적용합니다.
직접 확인할 결과
- 기존 첫 과정 내비게이션의 검토자료 메뉴를 열어 working-paper 요약과 표본 목록을 확인합니다.
- 표본
001–004,022–029와12 / 4 / 8 / 12를 API 응답과 대조합니다. - 사례를 선택해 Agent 초안·근거 ID·추가 확인 항목·담당자 확인 필요 상태를 확인합니다.
- working-paper API를 중지해 해당 영역만 오류가 되고 첫 과정 대시보드·예외 화면은 유지되는지 확인합니다.
7. 다음 실습
담당자의 최종 검토 절차 설계하기에서 초안과 최종 검토 결과의 경계를 정의합니다.