[coli-geonwoo]

🚩 연관 이슈

closed #509

📝 작업 내용

원인

• #501에서 낮은 화면(높이 500px 이하)의 헤더 제목 넘침을 막으려고 StickyTriSectionHeader의 <header>에 overflow-hidden을 추가했다.
• 언어 선택 메뉴는 헤더 아래(absolute top-full)로 펼쳐지는데, 높이가 고정된 헤더(56/80px)가 넘치는 영역을 잘라 메뉴 전체가 보이지 않았다. 트리거(KR ▾)만 보이고 KR/EN 목록이 가려져 EN을 선택할 수 없었다.
• 타이머 페이지 헤더의 답변 시간 설정 패널(AnswerTimeSetting)도 같은 방식으로 펼쳐져 함께 잘리고 있었다.
• 랜딩 페이지 헤더는 별도 컴포넌트라 영향이 없었다.

수정

• <header>의 overflow-hidden을 제거하고, 제목(HeaderTableInfo, HeaderTitle)이 들어가는 Left/Center 영역에만 overflow-hidden을 적용했다. 제목 넘침 방지는 유지된다.
• StickyTriSectionHeader 테스트 추가 (헤더는 넘침을 숨기지 않고, 제목 영역은 숨김)

검증

• npx vitest run 전체 통과 (535 tests), tsc, eslint, prettier 통과
• jsdom은 실제 잘림을 계산하지 못해 클래스로 검증했다. 브라우저에서 확인 필요:
  • 홈/시간표 구성/타이머 페이지에서 언어 선택 메뉴에 KR/EN이 보이는지
  • 타이머 페이지 답변 시간 설정 패널이 보이는지
  • 높이 500px 이하 화면에서 긴 시간표 이름·주제가 헤더 밖으로 넘치지 않는지

🏞️ 스크린샷 (선택)

🗣️ 리뷰 요구사항 (선택)

🤖 Generated with Claude Code

Summary by CodeRabbit

• 개선 사항
  • 헤더의 왼쪽 및 가운데 제목 영역에서 넘치는 내용을 숨기고, 오른쪽 메뉴는 헤더 경계를 넘어 표시되도록 변경했습니다.

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: f3337845-d4fe-4ad2-bad5-07e7e78f264d

📥 Commits

Reviewing files that changed from the base of the PR and between 8018451 and 25d33e9.

📒 Files selected for processing (2)

• src/layout/components/header/StickyTriSectionHeader.test.tsx
• src/layout/components/header/StickyTriSectionHeader.tsx

Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.

---

Walkthrough

StickyTriSectionHeader에서 헤더 전체의 overflow-hidden을 제거하고, 왼쪽과 가운데 제목 영역에 적용했습니다. 테스트는 헤더와 두 제목 영역의 클래스를 확인합니다.

Changes

공통 헤더 넘침 처리

Layer / File(s)	Summary
헤더와 제목 영역의 넘침 처리 및 검증 src/layout/components/header/StickyTriSectionHeader.tsx, src/layout/components/header/StickyTriSectionHeader.test.tsx	헤더 전체의 overflow-hidden을 제거하고 Left와 Center 영역에 적용했습니다. 테스트는 헤더에 해당 클래스가 없고 두 제목 영역의 부모 요소에는 있는지 확인합니다.

Priority: ➖ Normal

Estimated code review effort: 2 (Simple) | ~8 minutes

Change: Bug fix · Severity of issue fixed: Medium

Suggested reviewers: useon

Merge Risk: ⚪ Minimal · up to 25d33

The change removes clipping from the shared header while retaining it around title areas. Current page layouts keep dropdowns outside those clipped areas, and no actionable merge risk remains.

🚥 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 2 functions across 2 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	제목은 공통 헤더의 언어 선택 메뉴가 잘리는 문제를 수정한다는 주요 변경 사항을 명확하게 설명합니다. 실제 변경 사항인 헤더의 overflow 처리 범위 조정과 일치합니다.
Linked Issues check	✅ Passed	직접 연결된 이슈 #509의 코딩 요구사항을 충족합니다. StickyTriSectionHeader의 <header>에서 overflow-hidden을 제거했습니다. Left와 Center 제목 영역에만 overflow-hidden을 적용했습니다. 추가된 테스트는 헤더에 해당 클래스가 없고 두 제목 영역에 해당 클래스가 있는지 확인합니다…
Out of Scope Changes check	✅ Passed	변경 범위는 #509와 직접 관련된 두 파일로 제한됩니다. 공통 헤더의 넘침 처리 구현과 그 동작을 검증하는 테스트만 추가 또는 수정했습니다. 관련 없는 변경은 확인되지 않습니다.

• 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

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{토끼가 헤더를 살펴보네
제목은 각자 안에서 멈추고
메뉴는 아래로 폴짝 펼쳐져
KR과 EN이 모습을 보이네
당근처럼 깔끔한 테스트 한 줄}

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

[github-actions]

🚀 Preview 배포 완료!

환경	URL
Preview	열기
API	Dev 환경

PR이 닫히면 자동으로 정리됩니다.

[github-actions]

🧹 Preview 배포가 정리되었습니다.