fix: 튜토리얼 스텝 상단 헤더 스크롤 시 고정되도록 처리

[whghdus]

Summary

• 튜토리얼 스텝 화면(TutorialStepLayout)의 상단 헤더(건너뛰기 버튼 포함)에 sticky top-0 z-10을 적용해 스크롤 시에도 항상 화면 상단에 고정되도록 처리
• 기존에도 헤더는 스크롤 컨테이너 밖에 있어 구조적으로 스크롤 영향을 받지 않았지만, 명시적으로 고정 처리하여 더 견고하게 보완
• 모든 튜토리얼 스텝 콘텐츠는 기존 overflow-y-auto 구조로 이미 스크롤 가능함을 확인 (데스크톱/모바일 뷰포트에서 실제 동작 검증 완료)

Closes #244

Test plan

• pnpm lint / pnpm typecheck / pnpm build 통과 (pre-push 훅)
• 브라우저에서 /tutorial/replay/steps 진입 후 여러 스텝을 스크롤하며 헤더 고정 및 콘텐츠 스크롤 확인 (데스크톱, 모바일 375x812 뷰포트)

🤖 Generated with Claude Code

Summary by CodeRabbit

• 스타일
  • 튜토리얼 진행 중 상태 표시줄이 화면 상단에 고정되어 스크롤해도 계속 표시됩니다.
  • 리플레이 모드와 일반 모드에서 동일한 고정 위치가 적용됩니다.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
brifo-front	Ready	Preview	Sep 19, 2026 1:02pm UTC

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository: Team-BRIFO/BRIFO-front/.coderabbit.yaml

Review profile: CHILL

Plan: Essentials

Run ID: 875d2454-65ba-4904-852d-ff7d418654c3

📥 Commits

Reviewing files that changed from the base of the PR and between 1ae6f40 and adef563.

📒 Files selected for processing (1)

• src/components/feature/tutorial/TutorialStepLayout.tsx

Included review availability: 3 reviews are currently available. Your included PR review attempts over the past 7 days set your current allowance at 5 reviews per hour.

---

Walkthrough

TutorialStepLayout의 StatusBar에 sticky top-0 z-10을 추가했습니다. 리플레이 모드와 일반 모드에 동일하게 적용되며, 일반 모드의 기존 우측 패딩 조정은 유지됩니다.

Changes

튜토리얼 헤더 고정

Layer / File(s)	Summary
StatusBar 고정 위치 적용 src/components/feature/tutorial/TutorialStepLayout.tsx	리플레이 모드와 일반 모드의 StatusBar에 sticky top-0 z-10을 추가했습니다. 일반 모드의 [&>div:last-child]:px-0 스타일은 유지됩니다.

Priority: ⬇️ Low

Estimated code review effort: 1 (Trivial) | ~5 minutes

Change: Bug fix

🚥 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%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 1 files.	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	PR 제목은 TutorialStepLayout의 상단 헤더를 스크롤 시 고정하는 주요 변경 사항을 명확하게 설명합니다.
Linked Issues check	✅ Passed	직접 연결된 이슈 #244의 요구사항을 충족합니다. TutorialStepLayout의 StatusBar에 일반 모드와 replay 모드 모두 sticky top-0이 적용되었습니다. z-10도 추가되어 헤더가 콘텐츠 위에 표시됩니다. 헤더의 건너뛰기 버튼은 기존 StatusBar 구조로 유지됩니다. 콘텐츠 영역은 기존 section의…
Out of Scope Changes check	✅ Passed	변경은 src/components/feature/tutorial/TutorialStepLayout.tsx의 헤더 고정 스타일 추가로 한정됩니다. z-10 추가와 두 모드의 동일한 고정 동작은 #244의 헤더 표시 요구사항을 지원합니다. 관련 없는 변경은 확인되지 않습니다.

• Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

---

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