[JDDEV-70] [JDDEV-69] 결과 페이지 구현

[yiyoonseo]

🔗 관련 이슈

• Close #

📝 개요

• 모의 자소서 제출 후 결과 페이지 전체를 구현했습니다.

⌨️ 작업 상세 내용

결과 페이지 UI 구성

• ApplyResult — 전체 레이아웃 (Trybar + Sidebar + 콘텐츠 영역)
• Trybar — 몇 번째 시도인지 표시 (sequence API 연동)
• Sidebar / SidebarItem — 개요 / 개선안 상세 토글, 문항별 sub 아이템
• OverviewSection — 총점 원형 그래프 + 피드백 + 3개 요약 카드
• ScoreCircle — SVG stroke-dashoffset 기반 원형 점수 그래프
• Alret — 점수 기준 경고/완료 아이콘 + 메시지
• SummaryCard — 직무적합도 / 성과구체성 / 완성도 카드 (60점 이하 빨간색)

개선안 상세 (DetailSection)

• 왼쪽: 질문 + 답변 텍스트 (분석 구간 하이라이트)
• 오른쪽: DetailAnnotationPanel — reason / sentence / 개선 예시
• 하이라이트 클릭 시 해당 분석만 오른쪽에 표시, 재클릭 시 전체 복원
• highlightStyles.ts — proven / mentioned / fabricated 상태별 default · selected 스타일 분리

색상 토큰 추가 (color.css)

토큰	값	용도
green-150	#F3F9E5	proven 하이라이트 배경
green-700	#50B100	proven 텍스트
pink-100	#FFEFFB	mentioned 하이라이트 배경
pink-200	#FFE1F8	mentioned 하이라이트 hover
pink-400	#FF29D1	mentioned 텍스트

ChipTag 상태 추가

• proven (적절함) / mentioned (신뢰성 부족) / fabricated (구체성 부족) 뱃지

API 연동 수정

• saveApply 요청 바디 오류 수정 (answers 배열 정상 전송)
• fetchSelectedQuestions index 기반 ID 매핑 → analysis.questions 인덱스 조회로 통일
• 결과 페이지 레이아웃 높이 수정 (h-screen → h-full, 헤더 영역 제외)

💡 코드 설명 및 참고사항

🔗 연관 API

• GET /api/mock-applies/{id}/analysis
• GET /api/mock-applies/{id}/sequence
• GET /api/mock-applies/{id}/questions
• PATCH /api/mock-applies/{id}/answers

📸 스크린샷 (UI 변경 시)

🔍 리뷰 요구사항 (Reviewers)

• [ ]

⚠️ 로컬 실행 시 유의사항

Summary by CodeRabbit

• New Features
  • Added application analysis results page displaying score, feedback, and performance metrics
  • Implemented overview view with overall score and category breakdowns (job fit, impact, completeness)
  • Added detailed view with text highlighting in answers based on analysis categories
  • Included navigation between individual questions and application attempts
  • Added score-based status indicators with visual alerts for performance below threshold

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

This PR implements a complete result analysis page for applicant assessments. It adds server-side routing, API data models with auth-protected fetch helpers, and a hierarchical UI displaying test scores, detailed question analysis with text highlighting, and improvement suggestions.

Changes

Apply Result Analysis Page

Layer / File(s)	Summary
API and auth header foundation jobdri/src/lib/auth.ts, jobdri/src/lib/api/result.ts, jobdri/src/lib/api/questions.ts	New getAuthHeaders() helper exports bearer token from localStorage. New result.ts module defines SequenceResult, AnalysisQuestion, AnalysisResult types and fetchSequence/fetchAnalysis functions using auth headers. Auth error handling refactored to multiline constructor.
Server route and client entry point jobdri/src/app/apply/virtual/[id]/result/page.tsx, jobdri/src/app/apply/virtual/[id]/result/ResultPageClient.tsx, jobdri/src/app/LayoutShell.tsx	Page converted from client component using use(params) to async server component awaiting params, delegating UI to ResultPageClient. Main layout element updated with h-screen class for full viewport height.
Colors, highlights, and chip styling jobdri/src/styles/color.css, jobdri/src/components/apply/result/highlightStyles.ts, jobdri/src/components/common/chips/ChipTag.tsx	CSS adds --color-green-150 and highlight variables for proven/mentioned/fabricated states (green/pink/red). New HighlightStatus type and highlightStyles map provide Tailwind classes for default/selected variants. ChipTag extended to support new highlight states.
Atomic UI components jobdri/src/components/apply/result/ScoreCircle.tsx, jobdri/src/components/apply/result/Alret.tsx, jobdri/src/components/apply/result/SummaryCard.tsx	ScoreCircle renders SVG circular progress with clamped score calculation. Alret displays warning/check icon and Korean message based on score threshold (< 60). SummaryCard shows metric with score and optional warning styling.
Sidebar and navigation structure jobdri/src/components/apply/result/Sidebar.tsx, jobdri/src/components/apply/result/SidebarItem.tsx, jobdri/src/components/apply/result/Trybar.tsx	Sidebar manages overview/detail toggle and question selection with accordion state. SidebarItem renders main/sub item variants with selected styling and optional arrow icon. Trybar fetches attempt sequence and displays numbered attempts.
Answer detail analysis with highlights jobdri/src/components/apply/result/DetailSection.tsx, jobdri/src/components/apply/result/DetailAnotationPannel.tsx	DetailSection splits answer text into analysis-based segments, renders clickable highlights with status-based styling, and toggles selected analysis. DetailAnnotationPanel displays per-analysis reason, quoted sentence, and shared improvement example with status labels.
ApplyResult orchestrator and overview display jobdri/src/components/apply/result/ApplyResult.tsx, jobdri/src/components/apply/result/OverviewSection.tsx	Main ApplyResult fetches questions and analysis on mount, manages overview/detail state, and wires navigation sidebar, score display, and conditional detail/overview sections. OverviewSection renders score circle, alert status, and three summary cards (job fit, impact, completeness).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• JobDri-Developer/FrontEnd#61: The main PR adds the virtual result route and its ResultPageClient/ApplyResult rendering, while that PR's WritePageClient saves answers and navigates to this new result page.
• JobDri-Developer/FrontEnd#60: Main PR introduces getAuthHeaders() in auth.ts, and that PR's updated questions API module builds request headers via this new helper.
• JobDri-Developer/FrontEnd#57: Both PRs touch the result page module (page.tsx), with the main PR refactoring it to async server component and that PR updating layout Tailwind styling.

Suggested reviewers

• minnngo

🐰 A result page blooms so bright,
With scores and analyses in sight,
Korean wisdom guides the way,
Each highlight marks what's here to stay,
Try by try, the path comes clear! 🌟

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title "JDDEV-70 결과 페이지 구현" clearly indicates the implementation of a results page (결과 페이지 구현 = "implementing results page"), which aligns with the main objective. However, the title is in Korean and uses a Jira ticket reference, making it less descriptive for those unfamiliar with the ticket system. The core change is accurately captured but could be more explicit about scope.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/JDDEV-70-result_page-feat

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[minnngo]

으 악 수고 많았다ㅠㅠ