[fix] PhotoModal 이미지 잘림 수정

[suhyun113]

문제

활동사진 모달에서 특정 가로 너비 또는 스와이프 시, 이미지가 좌우로 잘려서 인접한 이미지의 일부가 살짝 보이는 현상이 있었습니다. 특히 가로가 넓은 이미지일수록 잘 보였고, 아래 이미지를 자세히 보면 오른쪽에 약간 다음 이미지가 미리 보이는 것을 확인할 수 있습니다.

수정 전	수정 후

원인

ImageContainer의 padding: 0 60px이 Swiper 뷰포트를 컨텐츠 영역 안쪽으로 제한하면서, loop 모드의 translate3d 슬라이드 위치 계산에 오차가 발생했기 때문입니다.

수정 전	수정 후

[수정 전]                                  [수정 후]
ImageContainer (padding: 0 60px)          ImageContainer (padding 없음)
  └─ Swiper (width: 컨텐츠 영역만)          └─ Swiper (width: 전체)
      └─ slide                                  └─ slide
          └─ image                                  └─ SlideInner (padding: 0 60px)
                                                        └─ image

Swiper 뷰포트 ≠ 컨테이너 너비 Swiper 뷰포트 = 컨테이너 너비
→ translate3d 오차로 잘림 → 오차 없음

수정

ImageContainer에 있던 padding을 SlideInner 래퍼로 이동하여 Swiper 뷰포트가 컨테이너 전체와 일치하도록 했습니다.

파일	변경 내용
PhotoModal.styles.ts	ImageContainer에서 padding 제거, SlideInner 스타일 컴포넌트 추가
PhotoModal.tsx	SwiperSlide 내부에 SlideInner 래퍼 적용

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
moadong	Ready	Preview, Comment	Jun 21, 2026 1:53pm

[coderabbitai]

Warning

.coderabbit.yaml has a parsing error

The CodeRabbit configuration file in this repository has a parsing error and default settings were used instead. Please fix the error(s) in the configuration file. You can initialize chat with CodeRabbit to get help with the configuration file.

💥 Parsing errors (1)

Validation error: Invalid regex pattern for base branch. at "reviews.auto_review.base_branches[0]"

⚙️ Configuration instructions

• Please see the configuration documentation for more information.
• You can also validate your configuration using the online YAML validator.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Walkthrough

PhotoModal의 모바일 이미지 잘림 문제를 수정합니다. ImageContainer에 overflow: hidden 및 모바일 margin-top을 추가하고, 기존 SlideInner의 모바일 margin-top을 제거했습니다. Swiper 슬라이드 내부는 Styled.SlideInner + Styled.Image 래퍼 구조로 변경되었습니다.

Changes

PhotoModal 이미지 잘림 수정

Layer / File(s)	Summary
ImageContainer/SlideInner 모바일 레이아웃 및 슬라이드 구조 변경 frontend/src/pages/ClubDetailPage/components/PhotoModal/PhotoModal.styles.ts, frontend/src/pages/ClubDetailPage/components/PhotoModal/PhotoModal.tsx	ImageContainer에 overflow: hidden과 media.mobile의 margin-top(calc(60px + var(--rn-safe-top, 0px)))을 추가하고, SlideInner 모바일 스타일에서 margin-top을 제거하여 padding: 0 16px만 남겼습니다. PhotoModal.tsx에서는 Swiper에 width/height: 100% 스타일을 지정하고, 슬라이드 내부를 Styled.SlideInner + Styled.Image 래퍼 구조로 변경했으며, 기존 SwiperSlide 직접 스타일 전달 방식은 제거되었습니다.

예상 코드 리뷰 노력

🎯 2 (Simple) | ⏱️ ~10 minutes

관련 PR

• Moadong/moadong#965: Swiper 기반 PhotoModal의 ImageContainer 및 슬라이드 뷰어 레이아웃을 함께 수정한 동일 컴포넌트 계열 변경입니다.
• Moadong/moadong#1653: 동일한 PhotoModal 컴포넌트의 Safe Area 및 모바일 레이아웃을 수정한 PR과 직접적으로 연관됩니다.

제안 레이블

💻 FE, 🛠Fix

제안 리뷰어

• seongwon030

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목이 변경사항의 핵심 목표를 명확하게 표현하고 있으며, PhotoModal의 이미지 잘림 수정이라는 주요 변경사항을 정확히 설명하고 있습니다.
Linked Issues check	✅ Passed	PR의 모든 코드 변경사항이 #1744에서 요구한 체크리스트 항목(ImageContainer padding 제거, SlideInner 추가, SwiperSlide 래퍼 적용)을 완벽하게 이행하고 있습니다.
Out of Scope Changes check	✅ Passed	모든 변경사항이 PhotoModal 이미지 잘림 수정이라는 명확한 범위 내에 있으며, 해당 목표 달성을 위해 필요한 구조 재설계만 포함하고 있습니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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 docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/#1744-fix-photomodal-image-clip-MOA-996

---

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

[gemini-code-assist]

Code Review

This pull request refactors the layout of the PhotoModal component by introducing a new SlideInner styled component to replace inline styles on Swiper and SwiperSlide, and adjusts padding and margins for mobile devices. The reviewer suggests also reducing the padding to 16px on tablet devices to maximize the image display area since navigation buttons are hidden in that view.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

태블릿 환경(media.tablet)에서도 이전/다음 버튼(NavButton)이 숨겨지기 때문에, 좌우에 60px의 큰 여백을 유지할 필요가 없습니다. 태블릿 환경에서도 모바일과 마찬가지로 패딩을 16px로 줄여 이미지가 더 크게 보일 수 있도록 개선하는 것이 좋습니다.

Suggested change

	${media.mobile} {
	padding: 0 16px;
	margin-top: calc(60px + var(--rn-safe-top, 0px));
	}
	${media.tablet} {
	padding: 0 16px;
	}
	${media.mobile} {
	padding: 0 16px;
	}

[github-actions]

✅ UI 변경사항 없음

구분	링크
📖 Storybook	https://67904e61c16daa99a63b44a7-iekyblodga.chromatic.com/

전체 60개 스토리 · 23개 컴포넌트

[seongwon030]

몰랐는데 빠르게 찾아서 수정해주셔서 감사합니다 ~