[FIX] 레이아웃 겹침 문제 수정

[ujinsim]

🔥 연관 이슈

• close [FIX] 레이아웃 겹침 문제 수정 #114

🚀 작업 내용

Drawer 배경에 z-index를 지정하여 레이아웃 겹침 문제 수정했습니다

🤔 고민했던 내용

💬 리뷰 중점사항

Summary by CodeRabbit

릴리스 노트

• 버그 수정
  • 모달, 드로어 및 헤더 컴포넌트의 레이어링 순서를 조정하여 UI 요소의 올바른 표시 순서를 보장합니다.

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

[coderabbitai]

개요

UI 컴포넌트들의 z-index를 조정하여 레이아웃 겹침 문제를 해결합니다. Drawer의 배경에 z-50을 추가하고, Modal 컨테이너와 ModalContent의 z-index를 z-50으로 통일하며, Header의 반응형 z-index 클래스를 제거합니다.

변경사항

집단 / 파일(들)	변경 요약
Z-index 조정 src/shared/ui/Drawer/Drawer.tsx, src/shared/ui/Modal/Modal.tsx	Drawer 배경에 z-50 추가, Modal 컨테이너 및 ModalContent의 z-index를 z-30/z-40에서 z-50으로 증가하여 스택 순서 조정
Header 스타일 정리 src/shared/ui/Header/Header.tsx	반응형 z-index 유틸리티(md:z-20) 제거, z-10으로 통일

예상 코드 리뷰 노력

🎯 1 (Trivial) | ⏱️ ~5분

• 모든 변경사항이 CSS 클래스명 수정으로 일관되고 반복적인 패턴
• 제어 흐름이나 로직 변경 없음
• 스타일링 레이어 조정만 포함

관련 가능성 있는 PR

• [FIX] Drawer 각 자식에게 Key 지정 #113: Drawer 컴포넌트의 배경 및 패널 요소 수정 (메인 PR은 z-index 클래스 변경, 해당 PR은 정적 키 추가)

제안 라벨

bug, fix

제안 리뷰어

• yougyung
• keemsebin

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 (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목이 변경 사항의 주요 내용을 명확하게 설명하고 있습니다. '[FIX] 레이아웃 겹침 문제 수정'은 코드 변경의 핵심(z-index 조정을 통한 레이아웃 겹침 문제 해결)을 정확히 반영합니다.
Description check	✅ Passed	PR 설명에서 '연관 이슈'와 '작업 내용' 섹션은 작성되었으나, '고민했던 내용'과 '리뷰 중점사항' 섹션이 비어있습니다. 주요 정보는 제공되었으므로 pass로 평가합니다.
Linked Issues check	✅ Passed	PR의 코드 변경(Drawer, Header, Modal의 z-index 조정)이 연관 이슈 #114의 '레이아웃 겹침 문제 수정' 목표를 충족합니다.
Out of Scope Changes check	✅ Passed	모든 변경 사항(Drawer 배경 z-50 추가, Header md:z-20 제거, Modal z-index z-50 상향)이 레이아웃 겹침 문제 해결이라는 연관 이슈 범위 내에 있습니다.

✨ 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/#112

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5b59691 and dd7a265.

📒 Files selected for processing (3)

• src/shared/ui/Drawer/Drawer.tsx (1 hunks)
• src/shared/ui/Header/Header.tsx (1 hunks)
• src/shared/ui/Modal/Modal.tsx (2 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/shared/ui/Modal/Modal.tsx (1)

src/shared/index.ts (1)

• cn (35-35)

🔇 Additional comments (3)

src/shared/ui/Drawer/Drawer.tsx (1)

36-36: 배경 레이어에 z-index가 올바르게 적용되었습니다.

백드롭(backdrop)에 z-50을 추가하여 레이아웃 겹침 문제를 해결했습니다. 패널 컨테이너(line 41)와 동일한 z-index 레벨을 사용하며, DOM 순서에 따라 백드롭이 패널 뒤에 올바르게 렌더링됩니다.

src/shared/ui/Header/Header.tsx (1)

16-16: 반응형 z-index를 제거하여 일관성을 개선했습니다.

md:z-20을 제거하고 모든 화면 크기에서 z-10으로 통일했습니다. 헤더가 오버레이 컴포넌트(Modal, Drawer의 z-50) 아래에 올바르게 위치하며, 코드가 더 간결해졌습니다.

src/shared/ui/Modal/Modal.tsx (1)

49-49: Modal과 Drawer의 동시 열림 시나리오 검증 필요

웹 검색 결과, Material-UI에서 Drawer가 Modal을 기반으로 하기 때문에 동일한 z-index(1300)를 가지게 되며, Modal을 Drawer 위에 표시하려 할 때 Modal이 Drawer 뒤에 나타나는 문제가 보고되었습니다. 같은 z-index를 가지면 어느 것이 위에 나타날지는 자동으로 결정되므로, 변경 사항에서 Modal과 Drawer의 컨테이너가 모두 z-50으로 설정되면 렌더링 순서에 따라 겹침 순서가 결정됩니다.

실제 코드베이스에서 Modal과 Drawer가 동시에 열리는 시나리오를 찾을 수 없었으므로, 다음을 확인하기를 권장합니다:

• Modal과 Drawer를 동시에 사용하는 페이지나 컴포넌트가 있는지 확인
• 있다면 어느 것이 위에 표시되어야 하는지 정의하고, 필요시 하나의 z-index를 높여서 명확한 계층 구조 설정

---

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: 2025년 11월 22일 19시 00분 02초
Storybook 미리보기: https://677a9a76c58a295e9421d3ef-dknqwosgpb.chromatic.com/