fix: 완료된 모임방, 내 모임방 content 가려지는 버그

[ho0010]

📝작업 내용

• 완료된 모임방 view 수정

  • 밖의 영역 스크롤 되는 버그 수정
  • 모달 내부 content 스크롤 숨김 처리
  • content 가려짐 방지를 위한 margin 추가
  

• 내 모임방 view 수정

  • content 가려짐 방지를 위한 margin 추가
  

Summary by CodeRabbit

• 버그 수정

  • 완료된 그룹 모달이 열릴 때 배경 본문 스크롤을 비활성화하고 닫을 때 복원하여 스크롤 누수 문제 개선.

• 스타일

  • 콘텐츠 하단 여백 추가로 목록과 하단 영역 간 간격 개선(두 모달 모두).
  • 그리드를 기본 1열, 넓은 화면에서 2열로 반응형 조정.
  • 단일 아이템이 전체 열을 차지하던 이전 동작 제거로 레이아웃 일관성 개선.
  • 스크롤바 숨김 처리로 보다 깔끔한 표시.

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
thip	Ready	Preview	Comment	Sep 26, 2025 9:51am

[coderabbitai]

Walkthrough

CompletedGroupModal에 모달 마운트/언마운트 시 body 스크롤을 비활성/복원하는 useEffect가 추가되었고, 콘텐츠 그리드/스크롤바 스타일이 조정되었습니다. MyGroupModal에는 콘텐츠 그리드 하단 여백이 추가되었습니다. 데이터 흐름이나 API 호출은 변경되지 않았습니다.

Changes

Cohort / File(s)	Change summary
그룹 모달 동작 및 스타일 src/components/group/CompletedGroupModal.tsx, src/components/group/MyGroupModal.tsx	- CompletedGroupModal: 모달 마운트 시 body 스크롤 비활성, 언마운트 시 복원(useEffect). 콘텐츠 영역에 margin-bottom: 70px 추가, 1→2컬럼 반응형 유지, 단일 아이템 강제 확장 로직 제거, 스크롤바 숨김 스타일 추가(WebKit/IE/Edge/Firefox). - MyGroupModal: 콘텐츠 그리드 컨테이너에 하단 여백 추가(프레젠테이션 변경).

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User as User
  participant UI as CompletedGroupModal
  participant DOM as document.body

  User->>UI: 모달 열기
  activate UI
  UI->>DOM: useEffect on mount: body.style.overflow = "hidden"
  note right of UI: 모달 표시 중 스크롤 비활성

  User-->>UI: 모달 닫기
  UI->>DOM: cleanup on unmount: body.style.overflow = ""
  deactivate UI

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• fix: QA #226: 동일한 그룹 모달 영역에서 레이아웃/스크롤바 스타일을 수정하는 변경과 유사한 스타일 조정.
• feat: group main page & MainHeader component #30: CompletedGroupModal/MyGroupModal 컴포넌트에 대한 초기/관련 수정과 겹치는 파일 및 로직 영역 변경.

Suggested labels

🐞 BugFix, 🎨 Html&css

Poem

달빛 아래 모달이 톡— 열리면,

토끼는 살금살금 스크롤을 멈추네 🐇

바닥엔 여백, 눈엔 고요,

격자도 반짝 두 칸으로 정돈!

닫힘과 함께 바람처럼— 스크롤 되돌아오네.

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	제목은 완료된 모임방과 내 모임방 모달에서 콘텐츠가 가려지는 버그를 직접적으로 언급하여 이 PR의 주요 변경사항을 간결하고 명확하게 요약하고 있습니다.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/QA9-3

Warning

Review ran into problems

🔥 Problems

Errors were encountered while retrieving linked issues.

Errors (1)

• QA9-3: Request failed with status code 404

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

• Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
• Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.

---

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: 0

🧹 Nitpick comments (1)

src/components/group/CompletedGroupModal.tsx (1)

24-29: 중첩 모달 시 body scroll unlock 타이밍 이슈 가능성

현재 Line 24~29에서 모달이 언마운트될 때마다 document.body.style.overflow를 바로 비워 두고 있습니다. 이 패턴은 다른 모달이 동시에 떠 있는 경우(예: 이미 열린 모달 A 위에 모달 B를 연 뒤 B만 닫는 경우)에도 배경 스크롤이 풀려 버리는 상황을 만들 수 있습니다. 공용 훅으로 추출하거나 reference count를 두어 “마지막 모달이 닫힐 때만” overflow를 복원하는 식으로 보완해 주시면 더 안전할 것 같습니다.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between c21ecf3 and ff927b7.

📒 Files selected for processing (2)

• src/components/group/CompletedGroupModal.tsx (2 hunks)
• src/components/group/MyGroupModal.tsx (1 hunks)

🔇 Additional comments (2)

src/components/group/MyGroupModal.tsx (1)

273-288: 하단 여백 추가로 컨텐츠 가림 최소화 👍

Line 281의 margin-bottom: 60px; 덕분에 마지막 카드나 스피너가 모달 하단 요소에 겹쳐 보이지 않을 것 같아요. 의도한 문제를 잘 해결한 것 같습니다.

src/components/group/CompletedGroupModal.tsx (1)

130-150: 콘텐츠 영역 스크롤 UX 개선 확인

Line 136의 margin-bottom: 70px;과 Line 145~149의 스크롤바 숨김 처리로 완료 모달의 하단 겹침 이슈와 스크롤 노출 문제를 동시에 잡은 것 같아요. 시각적으로 더 정돈될 듯합니다.