[JDDEV-81] [JDDEV-65] [JDDEV-72] 문항 API 연동

[yiyoonseo]

🔗 관련 이슈

• Close #

📝 개요

• 문항 관련 API 연동

⌨️ 작업 상세 내용

API 연동

• questions.ts — API 응답 구조 매핑 (content → question, charLimit → maxLength, result 래퍼 처리)
• questions.ts — getAuthHeaders() 추가, 모든 요청에 Authorization: Bearer 헤더 자동 주입
• questions.ts — fetchQuestions / saveQuestions / fetchSelectedQuestions 3개 함수 구현
• SelectQuestion — candidates API 호출 후 selected: true 항목 자동 선택 상태 복원
• InputSection — sessionStorage 제거, fetchSelectedQuestions API로 문항 로드

💡 코드 설명 및 참고사항

페이지 구조 개선

• questions/page.tsx + QuestionsPageClient.tsx 분리
• write/page.tsx + WritePageClient.tsx 분리
• 원인: "use client" + use(params) 조합에서 Suspense boundary 없이 렌더가 블로킹되는 문제 → async/await 서버 컴포넌트로 분리하여 해결

📸 스크린샷 (UI 변경 시)

🔍 리뷰 요구사항 (Reviewers)

• [ ]

⚠️ 로컬 실행 시 유의사항

Summary by CodeRabbit

• New Features

  • Improved questions selection step with enhanced state management and validation controls
  • Redesigned write step with updated input validation (minimum 10-character requirement)

• Refactor

  • Restructured application components for better data consistency and state handling throughout the application flow

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

The application's questions and write steps are refactored from client-side to server-side async pages. A new question API module manages fetch/save operations. SelectQuestion and InputSection components are updated to use the API and require an applyId prop. QuestionsPageClient and WritePageClient handle the interactive UI and navigation flows.

Changes

Questions and Write Flow Refactor

Layer / File(s)	Summary
Question API module with fetch/save operations jobdri/src/lib/api/questions.ts	Introduces QuestionItem interface and three API functions: fetchQuestions retrieves available questions, saveQuestions persists selections via PUT, and fetchSelectedQuestions loads previously selected questions. All endpoints are authenticated via localStorage token and map server response fields into typed structures.
SelectQuestion component updated for API-driven questions jobdri/src/components/apply/SelectQuestion.tsx	Component now fetches available questions on mount using applyId, initializes selections from fetched selected markers, and tracks loading state. Custom questions are marked with custom: true. The "Add directly" button disables when selection count reaches MAX_SELECT.
InputSection component updated for API-driven selected questions jobdri/src/components/apply/InputSection.tsx	Component fetches selected questions on mount via applyId instead of sessionStorage. Props now require applyId: number. Completion threshold per question is changed from "~50% of maxLength" to "at least 10 characters and no more than maxLength".
Questions page refactored to server-side async with client wrapper jobdri/src/app/apply/virtual/[id]/questions/page.tsx, jobdri/src/app/apply/virtual/[id]/questions/QuestionsPageClient.tsx	QuestionsPage becomes an async server component awaiting params and renders QuestionsPageClient. QuestionsPageClient manages selected questions, calls saveQuestions on confirmation, and navigates to the write step. Footer confirm CTA disables until at least one question is selected.
Write page refactored to server-side async with client wrapper jobdri/src/app/apply/virtual/[id]/write/page.tsx, jobdri/src/app/apply/virtual/[id]/write/WritePageClient.tsx	WritePage becomes an async server component awaiting params and renders WritePageClient. WritePageClient tracks input completion via InputSection ref, displays a modal when input is below the character threshold, and navigates to the result page on valid submission. Footer submit CTA disables until input is complete.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• JobDri-Developer/FrontEnd#53: Previous PR modified the same virtual flow step routes (/apply/virtual/[id]/questions/page.tsx and /write/page.tsx) around params handling and step navigation wiring.
• JobDri-Developer/FrontEnd#57: Earlier PR modified the questions and write flow by updating SelectQuestion and InputSection components with selection callbacks and sessionStorage-driven persistence, which this PR replaces with API-backed data loading.
• JobDri-Developer/FrontEnd#58: Related PR modified the same SelectQuestion and InputSection components for selection change callbacks, persistence, and completion logic.

Poem

🐰 Questions fetched from APIs bright,
Server-side pages, client components light,
Write and select with async flair,
Data flows without a care,
From form to saved, a rabbit's delight!

🚥 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 title is in Korean and uses task tracking IDs (JDDEV-81 [JDDEV-65] [JDDEV-72]) followed by a description of the main change (문항 API 연동 = Question API Integration). While it clearly references the core change—integrating question-related APIs—it lacks clarity for developers unfamiliar with Korean or the specific task context, and the emphasis on task IDs reduces readability.
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-81-apply_questions-api

---

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