Frontend — resultViewer 서브 컴포넌트 (14개) - xxriny/KNU-PROJECT GitHub Wiki
1. src/components/resultViewer/SharedComponents.jsx
| 라인 | 코드 | 설명 |
|---|---|---|
| 3 | StatCard |
숫자 통계 카드(라벨, 값, 색상) |
| 13 | PriorityBadge |
Must/Should/Could 우선순위 배지(빨강/노랑/초록) |
| 26 | StatusBadge |
Pass/Fail/Error/Needs_Clarification 등 상태 배지 |
| 42 | Section |
제목+아이콘+children 래퍼 컨테이너 |
| 53 | EmptyState |
데이터 없을 때 "~가 없습니다" 메시지 |
2. src/components/resultViewer/resultUtils.js
| 라인 | 코드 | 설명 |
|---|---|---|
| 5 | toCompactModuleLabel() |
"핵심 분석 모듈:" 접두사 제거 → 짧은 라벨 |
| 14 | buildReqFunctionNameMap() |
mapped_requirements → {REQ_ID: 기능명} 맵 빌드 |
| 29 | layerBadgeTone() |
레이어명 → Tailwind 배지 색상 클래스 반환 |
3. src/components/resultViewer/OverviewTab.jsx
| 라인 | 코드 | 설명 |
|---|---|---|
| 1–20 | import/state 추출 | useAppStore에서 모든 결과 데이터 구조 분해 |
| 21–80 | 통계 계산 | 요구사항 수, MoSCoW 분포, 카테고리 집계, 오버뷰 데이터 합성(projectOverview 우선, 없으면 폴백) |
| 81–130 | 의사결정 라벨링 | saStatus + criticalGaps + highRiskReqs 기반 → "진행 가능"/"정보 보강 필요"/"주의 필요" |
| 131–230 | PM 요약 UI | 통계 카드, 카테고리 막대그래프, 리스크 목록 |
| 231–310 | SA 요약 UI | 기술 타당성, 구현 난이도, 판정 근거, 대안, 건너뛴 단계 |
| 311–357 | 권장 다음 단계 + 상단 카드 | next_actions 순서형 리스트, 막힌 항목·주요 컴포넌트·외부 의존 경계 수 |
4. src/components/resultViewer/RTMTab.jsx
| 라인 | 코드 | 설명 |
|---|---|---|
| 1–57 | 테이블 렌더링 | ID, 카테고리, 설명, 우선순위 배지, 의존성, 테스트 기준 6열 테이블 |
5. src/components/resultViewer/ContextTab.jsx
| 라인 | 코드 | 설명 |
|---|---|---|
| 1–15 | import | useAppStore, lucide 아이콘, Section |
| 16–25 | 분기 | context_spec 있으면 일반, 없고 sa_reverse_context만 있으면 ReverseContextTab |
| 26–100 | 일반 ContextTab | 프로젝트 요약, 핵심 결정사항, 미해결 질문, 기술 스택 제안, 리스크, 다음 단계 |
| 101–180 | ReverseContextTab() |
역분석 요약, 구조 하이라이트, 관측 기술스택, 의존성 관찰, 리스크, 검증 단계 |
6. src/components/resultViewer/TopologyTab.jsx
| 라인 | 코드 | 설명 |
|---|---|---|
| 1–18 | 렌더 | semantic_graph 유효 시 <TopologyGraph> 렌더링, 없으면 EmptyState |
7. src/components/resultViewer/SAArchitectureTab.jsx
| 라인 | 코드 | 설명 |
|---|---|---|
| 1–50 | 레이어 메타 / 정규화 | layerMeta 5+1 레이어 정의, normalizeLayer() |
| 51–100 | 레이어 보드 | useMemo 그룹화, 레이어 카드 렌더(클릭 → 필터) |
| 101–165 | 인터페이스 계약 탐색 | 검색/필터 UI, inferCommType() (API/UI/Event/Internal 분류) |
| 166–210 | toHumanReadableTitle() |
영어 인터페이스명 → 한국어 번역(phrase 규칙 + word 사전) |
| 211–320 | 계약 카드 | 커뮤니케이션 타입 배지, Input→Output 시각화, 레이어 배지 |
| 321–393 | 통계 카드 + 가드레일 | 매핑 요구사항·활성 레이어·계약·가드레일 수 |
8. src/components/resultViewer/SASecurityTab.jsx
| 라인 | 코드 | 설명 |
|---|---|---|
| 1–30 | 유틸 함수 | toCompactModuleLabel(), extractFileRoot(), toKoreanFunctionName(), isLikelyFilePath() |
| 31–70 | 데이터 매핑 | sa_phase7·sa_phase5에서 req별 타이틀/파일루트 역추적 |
| 71–100 | getBoundaryVisual() |
Trust Boundary 종류별 이모지 |
| 101–140 | RBAC 역할 | 역할 pill 배지 렌더링 |
| 141–175 | Trust Boundaries | 경계 카드(이모지+이름+데이터+통제) |
| 176–260 | 권한 매트릭스 | 요구사항·역할·접근수준 3열 테이블(최대 16행) |
9. src/components/resultViewer/SATopologyTab.jsx
| 라인 | 코드 | 설명 |
|---|---|---|
| 1–30 | 상태 추출 | sa_phase8의 topo_queue, cyclic_requirements, parallel_batches, dependency_sources |
| 31–60 | reqMeta 빌드 |
sa_phase5 매핑에서 이름·레이어 추출 |
| 61–100 | cyclePathMap |
DFS로 순환 의존성 경로 탐색 |
| 101–130 | phaseGroups |
batches → Phase 그룹 또는 단일 순차 큐 |
| 131–170 | 순환 경고 UI | 순환 의존 모듈 버튼 + 클릭 시 경로 펼치기 |
| 171–192 | 실행 그룹 UI | Phase별 카드 — 순번·REQ_ID·기능명·레이어 배지 |
10. src/components/resultViewer/SASystemDiagramTab.jsx
| 라인 | 코드 | 설명 |
|---|---|---|
| 1–15 | import | SAArtifactGraph, normalizeContainerDiagramForGraph, StatCard |
| 16–36 | 요약 통계 + 그래프 | 컴포넌트·외부시스템·연결 수, normalizeContainerDiagramForGraph() → <SAArtifactGraph> 620px |
11. src/components/resultViewer/SAFlowchartTab.jsx
| 라인 | 코드 | 설명 |
|---|---|---|
| 1–15 | import | SAArtifactGraph, normalizeFlowchartForGraph, buildReqFunctionNameMap |
| 16–35 | REQ→기능명 매핑 | reqFunctionNameMap 생성 → stage별 function_names 주입 |
| 36–55 | 요약 + 그래프 | Stage 수, Parallel 수, 완전성 + 560px 그래프 |
12. src/components/resultViewer/SAUMLComponentTab.jsx
| 라인 | 코드 | 설명 |
|---|---|---|
| 1–20 | import | SAArtifactGraph, normalizeUMLForGraph |
| 21–40 | 보기 모드 | expandedLayer 상태 — 기본 "cluster", 클릭 시 "detail" 전환 |
| 41–60 | 대규모 그래프 감지 | relations ≥ 600 시 dense 모드 표시 |
| 61–82 | 그래프 렌더 | 클러스터 노드 클릭 → 해당 레이어 상세 보기 |
13. src/components/resultViewer/SAInterfacesTab.jsx (
| 라인 | 코드 | 설명 |
|---|---|---|
| 1–20 | import | buildReqFunctionNameMap, layerBadgeTone, Section |
| 21–45 | 계약 테이블 | 계약 ID, 레이어, 인터페이스명, Input/Output 미리보기, 상세 열 |
| 46–80 | 펼치기/접기 | expandedContractId 토글 → Input/Output Full JSON 표시 |
| 81–110 | I/O 포맷팅 | formatIoPreview() 86자 truncate, formatExpandedIo() JSON pretty-print |
| 111–165 | Guardrails | 보안 키워드 하이라이트(mTLS, 최소 권한 등 → 앰버 색상) |
14. src/components/resultViewer/SADecisionTableTab.jsx
| 라인 | 코드 | 설명 |
|---|---|---|
| 1–15 | import | buildReqFunctionNameMap, layerBadgeTone |
| 16–30 | 톤 함수 | restrictionTone() Internal/Public, actionTone() ALLOW/REVIEW |
| 31–104 | Decision 테이블 | 요구사항·Layer·Restriction·Roles·Action 5열 테이블(최대 40행) |