[Fix/#134] 예약금결제 스크롤 에러 수정

[jjjsun]

🔢 관련 이슈 링크

• Closes 🐞 [BugFix] 예약금 결제 모달 스크롤 불가 오류 수정 #134

📌 변경사항PR

• ✨Feature: 새로운 기능 추가
• 🐞Bugfix: 버그/오류 수정
• 📃Docs: 문서 수정(README 등)
• 🔨Refactor: 코드 리팩토링 (기능 변경 없음)
• 🧪Test: 테스트 코드 추가/수정
• 🎨UI/UX: 디자인 및 사용성 수정
• ⚙️Setting: 기본 세팅 작업

💻 작업내용

예약금 결제 수단 선택 에서 스크롤이 되지않아서 결제버튼이 보이지 않는 에러가 발생.
모달 하단 영역이 짤리면서 접근이 어려운 문제였기에 수정 진행.

• 모달 전체 레이아웃을 flex-col 구조로 변경해서 헤더는 고정되고, 내부 스크롤만되도록 수정.
• 모달 최대 높이 기준에서 하단에 있는 버튼까지 정상접근 가능하도록 수정

변경전

변경후

🪧 미완성 작업

N/A

🤔 논의 사항 및 참고 사항

현재는 내부 스크롤이 보이도록 유지했는데, 혹시 스크롤바에 대해서는 추후 디자인 변경에 맞춰서 추가 논의 진행하면 될것같습니다

✅ 체크리스트

• 브랜치는 잘 맞게 올렸는지
• 관련 이슈를 맞게 연결했는지
• 로컬에서 정상 동작을 확있했는지
• 충돌은 없는지
• 불필요한 console.log 제거했는지

[coderabbitai]

📝 Walkthrough

Walkthrough

예약금 결제 모달의 스크롤 불가 버그를 수정하는 변경입니다. 접근성 레이블을 정확히 업데이트하고, 모달 레이아웃을 flex 구조로 개선하여 내부 콘텐츠 영역이 스크롤 가능하도록 리구성했습니다.

Changes

Cohort / File(s)	Summary
PaymentModal 레이아웃 개선 src/components/reservation/modals/PaymentModal.tsx	접근성 레이블 업데이트 ("예약 내용 확인모달" → "예약금 결제 모달"), 모달 패널을 flex column 구조로 개선하여 헤더 고정 및 본문 영역 스크롤 가능하도록 수정

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 분

Poem

스크롤이 막혔던 모달 창,
이제 자유롭게 움직여 보네요 ✨
Flex의 마법으로 버튼에 닿고,
예약 여정은 계속된다! 🎉

---

📝 코드 리뷰 피드백

✅ 잘 개선된 부분

• 접근성: 레이블을 "예약금 결제 모달"로 정확히 업데이트해서 스크린 리더 사용자 입장에서도 명확해졌네요.
• 스크롤 구조: flex-1 min-h-0 overflow-y-auto로 본문을 래핑하면 flex 컨테이너에서 안정적인 스크롤이 작동합니다. 이 패턴은 표준적인 해결책입니다.
• 헤더 고정: shrink-0으로 헤더가 축소되지 않게 하면서 스크롤 시에도 상단 버튼(닫기 등)이 항상 보이네요.

💡 체크포인트

• 모바일 기기에서 작은 화면에서도 스크롤이 부드럽게 작동하는지 확인했는지 궁금합니다.
• 기존에 max-height 스타일이 있었다면, 이제 flex-1로 컨테이너 높이에 맞춰지는데, 예상치 못한 높이 변화가 없는지 한 번 확인해보세요.

Great job 이 버그 수정으로 사용자들이 결제 버튼에 쉽게 접근할 수 있을 거 같아요! 🚀

🚥 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
Title check	✅ Passed	PR 제목은 이슈 #134를 명확히 참조하며, 예약금 결제 모달 스크롤 에러 수정이라는 주요 변경사항을 정확히 설명합니다.
Linked Issues check	✅ Passed	모달 레이아웃을 flex-col 구조로 변경하고 헤더 고정, 내부 스크롤 구현으로 이슈 #134의 모든 요구사항을 만족합니다.
Out of Scope Changes check	✅ Passed	변경사항은 PaymentModal.tsx의 접근성 레이블과 스크롤 레이아웃 수정으로, 모두 이슈 #134 범위 내의 변경입니다.
Description check	✅ Passed	PR 설명이 템플릿 구조를 잘 따르고 있으며, 이슈 링크, 변경사항 분류, 상세한 작업 내용, 스크린샷, 체크리스트 등이 모두 작성되어 있습니다.

_{✏️ 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 fix/#134

---

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.}

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
eatsfine	Ready	Preview, Comment	Apr 9, 2026 3:08pm

[coderabbitai]

🧹 Nitpick comments (1)

src/components/reservation/modals/PaymentModal.tsx (1)

223-223: 모바일 viewport 대응으로 dvh 병행을 권장합니다.

max-h-[90vh]는 모바일 브라우저(UI 바 변화)에서 실제 가시 높이와 어긋날 수 있어요. dvh를 병행하면 하단 버튼 접근성이 더 안정적입니다.

예시 코드

- "relative z-10 flex w-[92vw] max-w-md max-h-[90vh] flex-col rounded-2xl bg-white shadow-xl",
+ "relative z-10 flex w-[92vw] max-w-md max-h-[90vh] max-h-[90dvh] flex-col rounded-2xl bg-white shadow-xl",

🤖 Prompt for AI Agents

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

In `@src/components/reservation/modals/PaymentModal.tsx` at line 223, The modal
container string in PaymentModal (the class list containing "relative z-10 flex
w-[92vw] max-w-md max-h-[90vh] ...") should be updated to account for mobile
viewport changes by adding a dvh-based max-height fallback; modify the class
list in PaymentModal.tsx so it includes a dvh utility (e.g., include
max-h-[90dvh] alongside max-h-[90vh] or replace with a combined responsive
approach) to ensure the modal respects dynamic viewport height on mobile
browsers and keeps bottom buttons accessible.

🤖 Prompt for all review comments with AI agents

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

Nitpick comments:
In `@src/components/reservation/modals/PaymentModal.tsx`:
- Line 223: The modal container string in PaymentModal (the class list
containing "relative z-10 flex w-[92vw] max-w-md max-h-[90vh] ...") should be
updated to account for mobile viewport changes by adding a dvh-based max-height
fallback; modify the class list in PaymentModal.tsx so it includes a dvh utility
(e.g., include max-h-[90dvh] alongside max-h-[90vh] or replace with a combined
responsive approach) to ensure the modal respects dynamic viewport height on
mobile browsers and keeps bottom buttons accessible.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 878edc95-335d-48dc-954f-de1c19c6f9bb

📥 Commits

Reviewing files that changed from the base of the PR and between 6e8390e and e12f0ea.

📒 Files selected for processing (1)

• src/components/reservation/modals/PaymentModal.tsx

[dew102938]

확인했습니다. 수고하셨어요!