[REFACTOR] Modal 컴포넌트 ContentClassName 추가

[ujinsim]

🔥 연관 이슈

• close [REFACTOR] Modal 컴포넌트 ContentClassName 추가 #131

🚀 작업 내용

• 모달 배경색 변경을 위해 contentClassName을 추가하였습니다

🤔 고민했던 내용

💬 리뷰 중점사항

Summary by CodeRabbit

릴리스 노트

• Refactor
  • 모달의 내부 콘텐츠 스타일을 외부에서 지정할 수 있도록 개선했습니다. 이제 모달 콘텐츠에 커스텀 클래스 적용이 가능해져 레이아웃 및 스타일 조정이 쉬워집니다.

[coderabbitai]

Walkthrough

Modal 컴포넌트가 내부 컨텐츠 컨테이너의 스타일링을 위해 새로운 선택적 prop contentClassName을 도입하고, 해당 prop을 Modal에서 ModalContent로 전달하도록 시그니처와 전달 흐름을 변경했습니다.

Changes

Cohort / File(s)	Summary
Modal 컴포넌트 및 내용 컨테이너 src/shared/ui/Modal/Modal.tsx	Modal에 contentClassName?: string prop 추가 및 전달. ModalContent 시그니처에 contentClassName?: string 추가하고 내부 컨테이너의 className에 cn으로 병합 적용. 외부 motion 컨테이너의 className 위치 변경.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• [FIX] 레이아웃 겹침 문제 수정  #115 — 동일 Modal 컴포넌트(src/shared/ui/Modal/Modal.tsx)의 z-index / className 관련 변경과 연관 가능.

Suggested reviewers

• JangYEhoon00
• keemsebin

🚥 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 제목은 주요 변경 사항을 명확하게 요약하고 있으며, REFACTOR 타입과 contentClassName 추가라는 구체적인 작업 내용을 포함합니다.
Description check	✅ Passed	PR 설명은 템플릿의 주요 섹션(연관 이슈, 작업 내용, 고민했던 내용, 리뷰 중점사항)을 포함하고 있으며, 작업 내용이 명확히 기술되어 있습니다.
Linked Issues check	✅ Passed	코드 변경 사항은 #131에서 요구하는 Modal 컴포넌트의 className 위치 변경을 충족합니다. contentClassName prop 추가를 통해 내부 요소(ModalContent)에 스타일을 적용할 수 있게 개선되었습니다.
Out of Scope Changes check	✅ Passed	모든 변경 사항이 Modal 컴포넌트의 contentClassName prop 추가와 관련되어 있으며, #131에서 정의한 요구 사항의 범위 내에 있습니다.

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

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/#131-modal

---

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

[github-actions]

Update: 2026년 02월 03일 18시 08분 14초
Storybook 미리보기: https://677a9a76c58a295e9421d3ef-tqcrvrhkhc.chromatic.com/

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@src/shared/ui/Modal/Modal.tsx`:
- Line 65: The className prop in the Modal component is calling the cn() utility
with a single static string (className={cn('fixed inset-0 z-50 flex w-full
items-center justify-center')}), which is unnecessary; change it to use the
string directly (className='fixed inset-0 z-50 flex w-full items-center
justify-center') and remove any now-unused import of cn to keep the Modal
component and its imports clean.
- Line 67: The backdrop div in Modal (Modal.tsx) is currently clickable but not
keyboard-accessible; update the element that uses handleOutsideClick to be
keyboard-interactive by adding role="button", tabIndex={0}, an accessible label
(aria-label="Close modal" or similar), and an onKeyDown handler that calls
handleOutsideClick when the user presses Enter, Space, or Escape; ensure the
handler signature matches handleOutsideClick usage so it can accept the
synthetic/event parameter from both onClick and onKeyDown.

[keemsebin]

변경을 진행했을 때 기존 Modal의 className을 사용하는 코드들은 문제가 생길 것 같습니다. 기존 className을 지우지 않고, 내부에서 사용하는 contentClassName을 별도 props로 지정해줘야 할 것 같아요.

[ujinsim]

변경을 진행했을 때 기존 Modal의 className을 사용하는 코드들은 문제가 생길 것 같습니다. 기존 className을 지우지 않고, 내부에서 사용하는 contentClassName을 별도 props로 지정해줘야 할 것 같아요.

099ea14 수정하였습니다!

[JangYEhoon00]

고생하셨습니다!