교안 학습 목표와 면접 답변 펼침 UI 개선

[bam090]

요약

교안의 학습 목표를 본문 중복 없이 Hero에서 먼저 보여주고, 면접 답변이 있는 교안에만 학습자가 선택해서 열 수 있는 별도 펼침 UI를 추가합니다.

주요 변경

• Markdown의 학습 목표 원문을 Hero로 이동하고 본문 중복 제거
• 면접 답변 예시가 있는 교안에만 보기/숨기기 disclosure 제공
• 답변 공개 상태를 진도 저장과 분리하고 재진입·새로고침·완료 토글 후 닫힘 유지
• disclosure의 aria-controls, aria-expanded, 포커스 이동과 320px 레이아웃 보강
• prose 인라인 코드에 --color-surface-raised(#141d35)와 #e26b60 적용
• 콘텐츠 파일은 변경하지 않고 렌더링과 회귀 테스트만 수정

검증 결과

• 관련 테스트: 66/66 PASS
• npm run check: 628개 중 626 PASS, 0 FAIL, 2 환경 의존 SKIP
• 콘텐츠 검증 및 정적 build: PASS
• git diff --check: PASS
• 데스크톱·320px 격리 브라우저: PASS
• console warning/error: 0
• 인라인 코드 대비: 5.176:1
• test_engineer 재검증: P0/P1/P2 0, must-fix 0

환경 의존 통합 테스트 2건은 기본 검증 환경에서 의도적으로 skip되며 실패 테스트는 없습니다.

체크리스트

• 변경을 src/app.js, styles/app.css, tests/accessibility.test.js, tests/course-separation.test.js로 제한
• content/** 변경 없음
• 학습 목표 Hero와 본문 중복 제거 검증
• 답변 disclosure의 상태 분리·포커스·ARIA 검증
• 320px 및 색상 대비 검증
• 전체 테스트·콘텐츠 검증·build 통과
• GitHub Actions CI 확인
• CodeRabbit 실제 리뷰와 미해결 스레드 확인
• 최종 병합 게이트 승인

Summary by CodeRabbit

• 새로운 기능
  • 학습 목표를 본문과 분리해 상단 영역에 표시합니다.
  • 면접 답변 예시를 숨김 상태로 제공하며 버튼으로 펼치고 접을 수 있습니다.
  • 답변 공개 상태에 따라 버튼 문구와 접근성 정보가 변경되고, 적절한 위치로 포커스가 이동합니다.
• 스타일 개선
  • 학습 목표와 답변 영역의 시각적 구분 및 포커스 표시를 강화했습니다.
  • 작은 화면에서 답변 토글 버튼이 전체 너비로 표시됩니다.
  • 인라인 코드 색상을 일관된 테마 색상으로 개선했습니다.
• 접근성 개선
  • 관련 영역의 키보드 탐색과 색상 대비를 보완했습니다.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 42e44d4b-db00-4f43-b31a-6ba04b5b3d2b

📥 Commits

Reviewing files that changed from the base of the PR and between 895dde0 and c525d69.

📒 Files selected for processing (4)

• src/app.js
• styles/app.css
• tests/accessibility.test.js
• tests/course-separation.test.js

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

📝 Walkthrough

Walkthrough

Markdown의 학습 목표와 면접 답변 예시를 별도 영역으로 분리했습니다. 면접 답변 토글, 접근성 속성, 포커스 이동을 추가했습니다. 관련 스타일과 접근성 검증도 갱신했습니다.

Changes

교안 콘텐츠 및 접근성

Layer / File(s)	Summary
교안 섹션 분리 및 렌더링 src/app.js, tests/course-separation.test.js	renderLesson이 학습 목표를 별도 영역에 표시하고 면접 답변 예시를 disclosure 영역으로 렌더링합니다. 분리된 섹션은 본문에서 제외합니다.
면접 답변 토글 및 포커스 처리 src/app.js, tests/course-separation.test.js	handleClick이 답변 표시 상태, aria-expanded, 버튼 문구, 포커스를 갱신합니다. 공개·숨김, 재렌더링, 완료 상태 동작을 검증합니다.
콘텐츠 스타일 및 접근성 검증 styles/app.css, tests/accessibility.test.js	학습 목표와 면접 답변의 레이아웃을 추가합니다. 인라인 코드 배경을 var(--color-surface-raised)로 통일하고 색상 대비 검증을 토큰 기반으로 변경합니다.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Merge Risk: ⚪ Minimal · up to c525d

학습 목표와 면접 답변 펼침 UI를 제한된 렌더링·스타일·회귀 테스트 범위에서 변경했으며, 현재 병합을 막는 실행 가능한 위험은 없습니다. 일반적인 확인과 리뷰 후 병합 가능합니다.

Sequence Diagram(s)

sequenceDiagram
  participant 학습자
  participant handleClick
  participant 면접답변영역
  학습자->>handleClick: 면접 답변 버튼 클릭
  handleClick->>면접답변영역: 표시 상태와 aria-expanded 변경
  면접답변영역-->>handleClick: 답변 표시 또는 숨김
  handleClick-->>학습자: 답변 영역 또는 버튼으로 포커스 이동

Loading

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	제목은 학습 목표 표시와 면접 답변 펼침 UI라는 주요 변경 사항을 정확하고 간결하게 설명합니다.
Docstring Coverage	✅ Passed	Docstring check was indeterminate for this PR — some files could not be analyzed in time. Not blocking.
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.

✨ 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 codex/lesson-ui-disclosure

---

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