[Fix] Modal 구조 수정/버그 수정

[Chiman2937]

📝 변경 사항

💡 구조 수정

기존	변경
ModalContent가 Backdrop 까지 포함	Backdrop 영역까지 ModalProvider가 관리
ModalContent 컴포넌트가 직접 createPortal을 수행	ModalContent는 디자인만 담당 ModalProvider가 createPortal 수행
Modal이 Open될 때만 portal 생성	항상 portal이 존재함

💡버그 수정

• Modal 내부에서 Mousedown 상태에서 Modal 외부에서 Mouseup 시 모달 꺼지는 버그 수정 (반대 동일)
• Modal 내부에서 tab 반복 시 focus가 Modal 외부로 탈출하는 버그 수정
• Modal Open 시 Keyboard 입력으로 진입했을 때 Modal close 이후에 Trigger 요소로 focus 되지 않는 버그 수정

💡 그 외

• ModalContent 컴포넌트에 max-w 스타일을 지정하여 최대 넓이를 지정할 수 있습니다.

  • Modal은 최대 440px - (16px * 2) 만큼 차지 할 수 있습니다. (화면 최대 너비 - 양쪽 여백)

• layout.tsx 에 root 용 div를 추가했습니다.(Modal Open 시 외부 요소 aria-hidden, inert 적용을 위함)

---

🔗 관련 이슈

Closes #113

---

🧪 테스트 방법

• 수동 테스트 검증(로컬 환경)
• 유닛 테스트 검증
• 통합 테스트 검증

---

📸 스크린샷 (선택)

---

📋 체크리스트

• 관련 문서를 업데이트했습니다 (필요한 경우)
• 테스트를 추가/수정했습니다 (필요한 경우)
• Breaking change가 있다면 명시했습니다

---

💬 추가 코멘트

---

CodeRabbit Review는 자동으로 실행되지 않습니다.

Review를 실행하려면 comment에 아래와 같이 작성해주세요

@coderabbitai review

---

Summary by CodeRabbit

• New Features

  • Modal dialogs now feature smooth animations for enhanced visual feedback and responsiveness.

• Bug Fixes

  • Fixed modal closing behavior—modals now only close when clicking outside the modal area.
  • Improved keyboard focus handling for better form input accessibility.

• Style

  • Updated profile edit modal width constraints for improved layout.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

This pull request adds a root wrapper element to the layout, refactors the modal system to include animation support with improved focus management and mouse interaction detection, adjusts modal styling, and adds accessibility improvements to file inputs by preventing tabbing through hidden elements.

Changes

Cohort / File(s)	Summary
Layout root wrapper src/app/layout.tsx	Added a new div with id="root" as an enclosing wrapper around LayoutWrapper within the Providers component.
Modal system refactoring src/components/ui/modal/index.tsx	Integrated animation library (motion/react), added mounted state and modalWrapperRef for tracking, implemented global mousedown/mouseup event listeners for click-outside detection, refactored focus management with delayed setTimeout execution, narrowed inert/aria-hidden targeting to root element, replaced portal-based rendering with conditional rendering inside motion-enabled wrapper, updated focusable element selectors to exclude tabIndex={-1} elements, and added optional className prop to ModalContent for styling customization.
Modal styling adjustments src/components/pages/profile/profile-edit-modal/index.tsx	Added max-w-82.5 CSS class to ModalContent; removed w-full max-w-70.5 width constraints from the form element.
File input accessibility src/components/ui/imageinput/index.tsx	Added tabIndex={-1} attribute to the hidden file input element to exclude it from tab order.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Key areas requiring attention:

• Modal event listener setup and cleanup to prevent memory leaks
• Focus management timing and correctness across different close scenarios
• Mouse interaction detection logic for edge cases (rapid clicks, scroll scenarios)
• Animation library integration and fallback behavior for mounted state
• Verification that inert/aria-hidden application to root element doesn't cause unintended side effects

Suggested reviewers

• wooktori

Poem

🐰 A modal dances now, wrapped in motion's grace,
With click-detection magic and focus'd embrace,
The root finds its anchor, files hide from the tab,
Accessibility blooms—hop, skip, and a jab! ✨

Pre-merge checks and finishing touches

❌ 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%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title in Korean refers to 'modal structure modification/bug fixes', which accurately reflects the main changes involving modal refactoring and bug fixes across multiple related files.
Description check	✅ Passed	PR description is well-structured and covers all required template sections with substantial content.

---

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

[github-actions]

📊 Coverage Report

Status	Build Log	Updated (UTC)
✅ Ready	View Build	2025-12-09 01:31:47

📈 #116을 main에 병합하면 coverage가 0.95% 증가합니다.

Coverage 요약

@@             Coverage Diff             @@
##             main     #116       +/-   ##
===========================================
+ Coverage   30.39%   31.34%    +0.95%     
===========================================
  Files         105      105         0     
  Lines        4188     4252       +64     
  Branches      191      201       +10     
===========================================
+ Hits         1273     1333       +60     
+ Misses       2915     2919        +4     

영향받은 파일

파일	Coverage 변화
/home/runner/work/WeGo_FrontEnd/WeGo_FrontEnd/src/components/ui/imageinput/index.tsx	15.03% (-0.12%) ⬇️
/home/runner/work/WeGo_FrontEnd/WeGo_FrontEnd/src/components/ui/modal/index.tsx	94.11% (-0.11%) ⬇️

[github-actions]

🎨 Storybook Report

ℹ️ Story 변경사항이 감지되지 않았습니다

이 PR에는 Story 변경이 없어서 빌드를 스킵했습니다.

Status	Storybook	Build Log	Updated (UTC)
⏭️ Skipped	-	-	2025-12-09 01:31:21

[github-actions]

🚀 PR Preview Report

✨ Build가 성공적으로 완료되었습니다.

Preview에서 변경사항을 확인하세요.

Status	Preview	Build Log	Updated (UTC)
✅ Ready	Visit Preview	View Logs	2025-12-09 01:32:55

[Chiman2937]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[wooktori]

이런 것까지 생각하신다니.. 대단하십니다👍👍

[wooktori]

고생하셨습니다!