202603223 #324 버그fe 스크롤 버그 수정 필요

[yyunee]

스크롤 버그 수정 v2

Summary by CodeRabbit

릴리스 노트

• 버그 수정

  • 모바일 기기에서 브라우저 주소창의 동적 변화에 따른 화면 높이 계산을 개선했습니다.

• 스타일

  • 전체 페이지의 높이 관련 스타일을 동적 뷰포트 계산으로 업데이트했습니다.

• 기타

  • 피드백 모달에서 익명 저장 정보를 명시했습니다.

[coderabbitai]

Warning

Rate limit exceeded

@yyunee has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 7 minutes and 3 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 0213ce41-152b-4a10-bb62-eb06b44470d2

📥 Commits

Reviewing files that changed from the base of the PR and between 3a127b4 and 56211b6.

📒 Files selected for processing (3)

• frontend/src/components/Sidebar.module.css
• frontend/src/index.css
• frontend/src/pages/AdminDashboard.module.css

전체 요약

모바일 브라우저 주소 표시줄로 인한 뷰포트 높이 문제를 해결하기 위해 App.jsx의 useEffect 훅에서 --vh CSS 변수를 동적으로 계산하고, 전체 프론트엔드 페이지 및 컴포넌트의 고정 100vh 단위를 calc(var(--vh, 1vh) * 100) 기반 높이 계산으로 변경합니다.

변경 사항

Cohort / File(s)	Summary
뷰포트 높이 변수 설정 frontend/src/App.jsx	window.innerHeight에서 계산한 --vh CSS 변수를 동적으로 설정하고 resize 이벤트 리스너로 유지하는 useEffect 훅 추가. AdminRoute 래퍼의 들여쓰기 조정.
레이아웃 높이 업데이트 frontend/src/components/Layout.jsx, frontend/src/index.css	root 컨테이너와 #root 요소의 높이를 100vh에서 calc(var(--vh, 1vh) * 100)으로 변경. #root에 margin과 padding 추가.
페이지별 높이 계산 변경 frontend/src/pages/Home.module.css, frontend/src/pages/LoginAndSignUp.module.css, frontend/src/pages/AdminHome.module.css, frontend/src/pages/Board.module.css, frontend/src/pages/external/External.module.css	여러 페이지의 컨테이너, 오버레이, 모바일 사이드바 높이를 고정 100vh에서 CSS 변수 기반 calc 계산으로 업데이트.
사이드바 피드백 모달 및 스타일 frontend/src/components/Sidebar.jsx, frontend/src/components/Sidebar.module.css	피드백 모달 설명 텍스트에 익명 저장 안내 문구 추가. 모바일 오버레이 높이를 calc 기반으로 변경하고, feedbackTriggerWrap의 padding-top 제거.

예상 코드 리뷰 노력

🎯 3 (Moderate) | ⏱️ ~20 minutes

가능한 관련 이슈

• ❗ [버그][FE] 스크롤 버그 수정 필요 #324: 본 PR의 --vh CSS 변수 및 calc(var(--vh, 1vh) * 100) 대체 변경이 모바일 스크롤 작동 문제를 직접 해결할 수 있습니다.

가능한 관련 PR

• [Fe] 317 버그출석관리 세션 삭제 안 열림 이슈 #318: Sidebar 컴포넌트 (Sidebar.jsx, Sidebar.module.css)를 함께 수정하며, 피드백 모달 워크플로우 및 관련 CSS 구현과 연관됩니다.
• [FE]피드백 모달 수정 #325: App.jsx, Sidebar.jsx, Sidebar.module.css, index.css 등 동일한 파일의 동일한 코드 레벨 요소를 수정하여 직접적으로 관련됩니다.
• [FE] SISC1-216 [FEAT] 외부페이지 제작(동아리소개, 임원소개, 운용포트폴리오) #175: 동일한 프론트엔드 CSS 파일 (frontend/src/pages/external/External.module.css)을 수정하며, 컨테이너/헤더 min-height 스타일 변경이 겹칩니다.

제안하는 검토자

• discipline24

시 🐰

뷰포트 높이의 까다로운 수수께끼를,
동적 변수로 우아하게 풀었네요! ✨
100vh는 이제 과거,
계산된 --vh가 새 시대를 열었구나,
모바일 화면도 이제 행복하리. 📱

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

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.
Title check	❓ Inconclusive	PR 제목이 여러 개의 분리된 변경사항들을 다루고 있으며, 주요 변경사항인 뷰포트 높이 CSS 변수 도입을 명확하게 반영하지 못하고 있습니다.	제목을 더 명확하고 구체적으로 수정하십시오. 예를 들어 '뷰포트 높이 버그 수정을 위해 --vh CSS 변수 도입' 또는 'Chrome 스크롤 버그 수정을 위한 뷰포트 높이 개선'과 같이 실제 변경사항을 정확히 반영하는 제목이 필요합니다.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 202603223_#324-버그fe-스크롤-버그-수정-필요

---

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

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

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@frontend/src/App.jsx`:
- Around line 42-54: The CSS usages of var(--vh) in frontend/src/index.css and
frontend/src/components/Sidebar.module.css must include a fallback so initial
render before the useEffect in App.jsx (setVh) doesn't produce invalid heights;
update any occurrences of height: calc(100 * var(--vh)) to the safe pattern
height: calc(var(--vh, 1vh) * 100) (or equivalent calc(var(--vh, 1vh) *
100vh/100) if you prefer), keeping App.jsx's useEffect and setVh unchanged.

In `@frontend/src/index.css`:
- Around line 54-56: Replace the fixed height declaration `height: calc(100 *
var(--vh))` on `#root` with a flexible min-height using the CSS variable fallback
pattern: use `min-height: calc(var(--vh, 1vh) * 100)` so the element can grow
and won’t clip scrollable content (this aligns with AdminHome, LoginAndSignUp,
External, Home, Board patterns and avoids interaction issues with Layout.jsx's
overflow: 'hidden').

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 85df7d28-4b39-494e-8e9e-5aca488e5ce3

📥 Commits

Reviewing files that changed from the base of the PR and between c467396 and 3a127b4.

📒 Files selected for processing (10)

• frontend/src/App.jsx
• frontend/src/components/Layout.jsx
• frontend/src/components/Sidebar.jsx
• frontend/src/components/Sidebar.module.css
• frontend/src/index.css
• frontend/src/pages/AdminHome.module.css
• frontend/src/pages/Board.module.css
• frontend/src/pages/Home.module.css
• frontend/src/pages/LoginAndSignUp.module.css
• frontend/src/pages/external/External.module.css

[sangkyu39]

good