Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Rate limit exceeded@suhyun113 has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 18 minutes and 10 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (1)
Warning
|
| Cohort / File(s) | Summary |
|---|---|
Z_INDEX 상수화 frontend/src/styles/zIndex.ts |
Z_INDEX 상수 추가: header:1000, floatingButton:1050, overlay:1100, modal:1200. |
Header / ScrollToTopButton 업데이트 frontend/src/components/common/Header/Header.styles.ts, frontend/src/components/common/ScrollToTopButton/ScrollToTopButton.styles.ts |
하드코딩 z-index를 Z_INDEX.header, Z_INDEX.floatingButton로 변경; Z_INDEX import 추가. |
Modal 스타일 중앙화 및 포지셔닝 frontend/src/components/common/Modal/Modal.styles.ts |
Z_INDEX import 추가; Overlay에 position: fixed 및 z-index: ${Z_INDEX.overlay} 적용; Container에 position: relative 및 z-index: ${Z_INDEX.modal} 추가. |
PhotoModal 정규화 frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoModal/PhotoModal.styles.ts |
Z_INDEX.overlay로 ModalOverlay z-index 변경 및 @supports 블록 포맷 수정(백드롭 필터 조건 처리 정상화). |
불필요 z-index 제거 frontend/src/pages/AdminPage/auth/LoginTab/LoginTab.styles.ts |
LoginBox에서 z-index: 10 제거. |
ApplicantsListTab 스타일 파일 삭제 frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/ApplicantsListTab.styles.ts |
파일 전체 삭제 — 다수의 styled-components (Container, Title, Header, AddButton 등)와 모든 export 제거. |
ClubDetailPage z-index 조정 frontend/src/pages/ClubDetailPage/components/BackNavigationBar/BackNavigationBar.styles.ts, frontend/src/pages/ClubDetailPage/components/ClubDetailFooter/ClubDetailFooter.styles.ts |
BackNavigationContainer z-index 1→100 변경, ClubDetailFooterContainer z-index 100→1050로 변경 및 주석 추가. |
Estimated code review effort
🎯 4 (Complex) | ⏱️ ~45 minutes
- 주의할 점:
ApplicantsListTab.styles.ts전체 삭제: 관련 컴포넌트에서 해당 스타일 참조(임포트) 제거 또는 대체 여부 확인 필요.- Modal/Overlay z-index·position 변경: 포털, 모달 겹침, 포커스/스크롤 잠금 영향 검증 필요.
- ClubDetailFooter z-index 증가(→1050): 다른 플로팅 요소(예: 버튼, 알림)와의 쌓임 순서 충돌 여부 확인.
- 스타일 상수(
Z_INDEX) 값 일관성 및 다른 스타일 파일들의 누락된 마이그레이션 확인.
Possibly related issues
- [refactor] MOA-397 z-index 기준으로 리팩토링한다 #905: 중앙화된 Z_INDEX 상수 도입 및 여러 styled-components의 z-index를 상수로 교체하는 작업과 일치함 — 이 PR의 목적과 직접적으로 연관됩니다.
Possibly related PRs
- [fix] 메인/상세 페이지 UI 레이아웃 통일화 및 마진 수정 #812: Header z-index 변경 이력이 있어
Header.styles.ts관련 변경과 코드 레벨로 연결될 가능성이 높음. - [feature] 상세 페이지 푸터 디자인 변경 #795:
ClubDetailFooter.styles.ts관련 변경 이력이 있어 z-index 조정과 관련된 충돌 또는 의존성 점검 대상임.
Suggested labels
🛠Fix
Suggested reviewers
- seongwon030
- oesnuj
- lepitaaar
- Zepelown
Pre-merge checks and finishing touches
❌ Failed checks (1 warning, 1 inconclusive)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Out of Scope Changes check | ApplicantsListTab.styles.ts 파일의 모든 스타일 컴포넌트 제거는 z-index 리팩터링 범위를 벗어나며, 이 변경에 대한 설명이 PR에서 불명확합니다. | ApplicantsListTab.styles.ts 삭제가 MOA-397과 직접 관련이 있는지 확인하고, 별도의 이슈로 분리하거나 변경 사유를 PR 설명에 명확히 기술하시기 바랍니다. | |
| Title check | ❓ Inconclusive | PR 제목이 '리팩토링한다'로 다소 모호하며, z-index 레이어링 개선에 대한 구체적인 설명이 부족합니다. | 제목을 더 구체적으로 개선하여 '[refactor] z-index 레이어링 상수화 및 정리' 또는 유사한 표현으로 수정하는 것을 권장합니다. |
✅ Passed checks (3 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Linked Issues check | ✅ Passed | PR의 변경사항이 MOA-397의 모든 주요 목표를 충족합니다: Z_INDEX 상수화, 기존 컴포넌트의 z-index 값 리팩터링, 불필요한 z-index 제거 완료. |
| Docstring Coverage | ✅ Passed | No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. |
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.
Comment @coderabbitai help to get the list of available commands and usage tips.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
frontend/src/components/common/Header/Header.styles.ts (1)
3-3: 헤더 z-index를 Z_INDEX.header로 교체해 전역 레이어링 기준과 일관성이 잘 맞습니다전역 헤더를
Z_INDEX.header로 고정해두면 플로팅 버튼·모달 오버레이 등과의 우선순위가 명확해져 유지보수에 유리해 보입니다.
한편, 같은 파일의Nav(Line 80100,148,z-index: 1)와MenuButton(Line 139z-index: 3)처럼 헤더 내부 전용 레이어링 숫자는 지금처럼 소수(1,3)를 쓰는 것도 괜찮지만, 나중에 혼동을 줄이기 위해 “헤더 내부 전용”임을 주석으로 남기거나 파일 로컬 상수로 분리하는 것도 고려해볼 만합니다.Also applies to: 5-18
📜 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.
📒 Files selected for processing (12)
frontend/src/components/common/CustomDropDown/CustomDropDown.styles.ts(2 hunks)frontend/src/components/common/Header/Header.styles.ts(2 hunks)frontend/src/components/common/Modal/Modal.styles.ts(2 hunks)frontend/src/components/common/ScrollToTopButton/ScrollToTopButton.styles.ts(1 hunks)frontend/src/pages/AdminPage/auth/LoginTab/LoginTab.styles.ts(0 hunks)frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/ApplicantsListTab.styles.ts(2 hunks)frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab.styles.ts(3 hunks)frontend/src/pages/AdminPage/tabs/ApplicationListTab/ApplicationListTab.styles.ts(2 hunks)frontend/src/pages/ClubDetailPage/components/BackNavigationBar/BackNavigationBar.styles.ts(2 hunks)frontend/src/pages/ClubDetailPage/components/ClubDetailFooter/ClubDetailFooter.styles.ts(1 hunks)frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoModal/PhotoModal.styles.ts(2 hunks)frontend/src/styles/zIndex.ts(1 hunks)
💤 Files with no reviewable changes (1)
- frontend/src/pages/AdminPage/auth/LoginTab/LoginTab.styles.ts
🧰 Additional context used
📓 Path-based instructions (2)
frontend/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
frontend/**/*.{ts,tsx,js,jsx}: Replace magic numbers with named constants for clarity
Replace complex/nested ternaries withif/elseor IIFEs for readability
Assign complex boolean conditions to named variables for explicit meaning
Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle)
Use unique and descriptive names for custom wrappers/functions to avoid ambiguity
Define constants near related logic or ensure names link them clearly to avoid silent failures
Break down broad state management into smaller, focused hooks/contexts to reduce coupling
Files:
frontend/src/components/common/ScrollToTopButton/ScrollToTopButton.styles.tsfrontend/src/styles/zIndex.tsfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab.styles.tsfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/ApplicantsListTab.styles.tsfrontend/src/pages/AdminPage/tabs/ApplicationListTab/ApplicationListTab.styles.tsfrontend/src/components/common/Header/Header.styles.tsfrontend/src/pages/ClubDetailPage/components/ClubDetailFooter/ClubDetailFooter.styles.tsfrontend/src/pages/ClubDetailPage/components/PhotoList/PhotoModal/PhotoModal.styles.tsfrontend/src/components/common/Modal/Modal.styles.tsfrontend/src/pages/ClubDetailPage/components/BackNavigationBar/BackNavigationBar.styles.tsfrontend/src/components/common/CustomDropDown/CustomDropDown.styles.ts
frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
Use consistent return types for similar functions/hooks
Files:
frontend/src/components/common/ScrollToTopButton/ScrollToTopButton.styles.tsfrontend/src/styles/zIndex.tsfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab.styles.tsfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/ApplicantsListTab.styles.tsfrontend/src/pages/AdminPage/tabs/ApplicationListTab/ApplicationListTab.styles.tsfrontend/src/components/common/Header/Header.styles.tsfrontend/src/pages/ClubDetailPage/components/ClubDetailFooter/ClubDetailFooter.styles.tsfrontend/src/pages/ClubDetailPage/components/PhotoList/PhotoModal/PhotoModal.styles.tsfrontend/src/components/common/Modal/Modal.styles.tsfrontend/src/pages/ClubDetailPage/components/BackNavigationBar/BackNavigationBar.styles.tsfrontend/src/components/common/CustomDropDown/CustomDropDown.styles.ts
🧠 Learnings (2)
📚 Learning: 2025-11-25T14:08:23.234Z
Learnt from: CR
Repo: Moadong/moadong PR: 0
File: frontend/.cursorrules:0-0
Timestamp: 2025-11-25T14:08:23.234Z
Learning: Applies to frontend/**/*.{ts,tsx,js,jsx} : Replace magic numbers with named constants for clarity
Applied to files:
frontend/src/styles/zIndex.tsfrontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab.styles.tsfrontend/src/components/common/Header/Header.styles.ts
📚 Learning: 2025-11-25T14:08:23.234Z
Learnt from: CR
Repo: Moadong/moadong PR: 0
File: frontend/.cursorrules:0-0
Timestamp: 2025-11-25T14:08:23.234Z
Learning: Applies to frontend/**/*.{ts,tsx,js,jsx} : Define constants near related logic or ensure names link them clearly to avoid silent failures
Applied to files:
frontend/src/styles/zIndex.ts
🧬 Code graph analysis (8)
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab.styles.ts (1)
frontend/src/styles/zIndex.ts (1)
Z_INDEX(1-8)
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/ApplicantsListTab.styles.ts (1)
frontend/src/styles/zIndex.ts (1)
Z_INDEX(1-8)
frontend/src/pages/AdminPage/tabs/ApplicationListTab/ApplicationListTab.styles.ts (1)
frontend/src/styles/zIndex.ts (1)
Z_INDEX(1-8)
frontend/src/components/common/Header/Header.styles.ts (1)
frontend/src/styles/zIndex.ts (1)
Z_INDEX(1-8)
frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoModal/PhotoModal.styles.ts (1)
frontend/src/styles/zIndex.ts (1)
Z_INDEX(1-8)
frontend/src/components/common/Modal/Modal.styles.ts (1)
frontend/src/styles/zIndex.ts (1)
Z_INDEX(1-8)
frontend/src/pages/ClubDetailPage/components/BackNavigationBar/BackNavigationBar.styles.ts (1)
frontend/src/styles/zIndex.ts (1)
Z_INDEX(1-8)
frontend/src/components/common/CustomDropDown/CustomDropDown.styles.ts (1)
frontend/src/styles/zIndex.ts (1)
Z_INDEX(1-8)
🔇 Additional comments (10)
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab.styles.ts (1)
5-5: LGTM! 중앙화된 z-index 상수를 올바르게 적용했습니다.하드코딩된 z-index 값을
Z_INDEX.dropdown으로 일관되게 교체하여 리팩토링 목표에 부합합니다.Also applies to: 141-141, 308-308
frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoModal/PhotoModal.styles.ts (2)
17-20: LGTM! @supports 블록 구문이 수정되었습니다.backdrop-filter의 @supports 블록이 올바른 형식으로 수정되었습니다.
3-3: Change verified; z-index hierarchy is appropriate and consistent with design system.The increase from hardcoded 100 to
Z_INDEX.overlay(1100) properly resolves the stacking issue where the photo modal was hidden behind the footer (1050), scroll button (1050), and header (1000). This aligns with the consistent modal z-index pattern used throughout the codebase—including the commonModalcomponent which uses the sameZ_INDEX.overlay(1100) for its overlay andZ_INDEX.modal(1200) for modal content. The internal hierarchy within PhotoModal (overlay 1100 > elements 2-3) is correct, and no stacking conflicts exist with other UI elements.frontend/src/styles/zIndex.ts (1)
1-8: z-index 계층 구조를 검토하고 확인하세요.중앙화된 z-index 상수 정의가 잘 구성되어 있습니다. 다만 PR 설명에서 요청한 대로 계층 순서를 확인해주세요:
floating(1050)이header(1000)보다 높은데, 플로팅 버튼이 전역 헤더 위에 표시되는 것이 의도된 동작인지 확인 필요- 각 계층 간 큰 간격(예: 100→1000)은 향후 중간 레이어 추가를 위한 것으로 보이지만, 이것이 의도된 설계인지 확인 필요
Based on learnings, 매직 넘버를 명명된 상수로 교체하는 코딩 가이드라인을 올바르게 따르고 있습니다.
frontend/src/pages/ClubDetailPage/components/BackNavigationBar/BackNavigationBar.styles.ts (1)
1-1: LGTM! sticky 요소에 적절한 z-index를 사용합니다.하드코딩된 값(1)을
Z_INDEX.sticky(100)로 교체하여 sticky 내비게이션 바에 적절한 레이어링을 적용했습니다.Also applies to: 15-15
frontend/src/components/common/ScrollToTopButton/ScrollToTopButton.styles.ts (1)
1-1: LGTM! 플로팅 버튼에 올바른 z-index 레이어를 적용했습니다.하드코딩된 1000을
Z_INDEX.floating(1050)으로 교체하여 중앙화된 플로팅 레이어를 사용합니다.Also applies to: 8-8
frontend/src/pages/AdminPage/tabs/ApplicationListTab/ApplicationListTab.styles.ts (1)
1-1: LGTM! 드롭다운 메뉴에 중앙화된 z-index를 적용했습니다.하드코딩된 10을
Z_INDEX.dropdown으로 교체하여 다른 드롭다운 컴포넌트들과 일관된 레이어링을 적용했습니다.Also applies to: 189-189
frontend/src/components/common/Modal/Modal.styles.ts (1)
1-1: LGTM! 모달 컴포넌트에 올바른 z-index 계층을 적용했습니다.
Overlay에Z_INDEX.overlay(1100) 사용Container에position: relative와Z_INDEX.modal(1200) 추가로 명시적인 stacking context 생성모달이 다른 모든 UI 요소 위에 올바르게 표시되도록 설정되었습니다.
Also applies to: 8-8, 17-18
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/ApplicantsListTab.styles.ts (1)
1-1: 드롭다운 메뉴의 z-index를 전역 Z_INDEX.dropdown으로 통일한 점 좋습니다하드코딩 값(10)을 제거하고
Z_INDEX.dropdown을 사용해 다른 드롭다운들과 레이어링 기준이 맞춰져서, 이후 전역 z-index 정책 변경 시 추적·관리하기 쉬워질 것 같습니다.Also applies to: 177-190
frontend/src/components/common/CustomDropDown/CustomDropDown.styles.ts (1)
1-1: 공통 드롭다운 OptionList도 Z_INDEX.dropdown으로 맞춘 선택이 적절합니다전역
Z_INDEX.dropdown을 사용해 개별 페이지/컴포넌트의 메뉴와 레이어 우선순위가 일관되게 유지되므로, 헤더·모달 등과의 충돌 가능성이 줄어들 것 같습니다.Also applies to: 10-26
| bottom: 0; | ||
| width: 100%; | ||
| z-index: 100; | ||
| z-index: 1050; // TODO: Portal로 모달 분리 후 header보다 낮게 재조정 |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
중앙화된 Z_INDEX 상수를 사용하세요.
이 파일만 매직 넘버(1050)를 사용하고 있어 이번 리팩토링의 목적과 일관성이 없습니다. Z_INDEX.floating을 import하여 사용해야 합니다.
다음 diff를 적용하세요:
import styled from 'styled-components';
+import { Z_INDEX } from '@/styles/zIndex';
export const ClubDetailFooterContainer = styled.div`
position: sticky;
bottom: 0;
width: 100%;
- z-index: 1050; // TODO: Portal로 모달 분리 후 header보다 낮게 재조정
+ z-index: ${Z_INDEX.floating}; // TODO: Portal로 모달 분리 후 header보다 낮게 재조정
padding: 10px 40px;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| z-index: 1050; // TODO: Portal로 모달 분리 후 header보다 낮게 재조정 | |
| import styled from 'styled-components'; | |
| import { Z_INDEX } from '@/styles/zIndex'; | |
| export const ClubDetailFooterContainer = styled.div` | |
| position: sticky; | |
| bottom: 0; | |
| width: 100%; | |
| z-index: ${Z_INDEX.floating}; // TODO: Portal로 모달 분리 후 header보다 낮게 재조정 | |
| padding: 10px 40px; | |
| `; |
🤖 Prompt for AI Agents
In
frontend/src/pages/ClubDetailPage/components/ClubDetailFooter/ClubDetailFooter.styles.ts
around line 7, replace the hard-coded z-index: 1050 with the centralized
constant by importing Z_INDEX and using Z_INDEX.floating; modify the file to add
the import from your shared constants (e.g., import { Z_INDEX } from
'path/to/constants') and change the CSS rule to use Z_INDEX.floating so the
component aligns with the project-wide z-index conventions.
- position: fixed 중복 선언
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
frontend/src/components/common/Modal/Modal.styles.ts (1)
15-26: Container의 z-index는 전역 레이어 순서에는 직접적인 영향이 없습니다.현재 구조에서는
Container가Overlay(position: fixed; z-index: Z_INDEX.overlay)의 자식이라,z-index: ${Z_INDEX.modal}값은 전역 스택을 1200까지 끌어올리지는 못하고 오버레이 내부 요소 간 순서에만 영향을 줍니다. 팀에서Z_INDEX.modal을 “전역 1200 레이어”로 인식하고 있다면, 여기서는 z-index를 생략하거나 “로컬 레이어링 용도”라는 주석을 추가하는 정도를 고려해봐도 좋겠습니다.
📜 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.
📒 Files selected for processing (1)
frontend/src/components/common/Modal/Modal.styles.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
frontend/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
frontend/**/*.{ts,tsx,js,jsx}: Replace magic numbers with named constants for clarity
Replace complex/nested ternaries withif/elseor IIFEs for readability
Assign complex boolean conditions to named variables for explicit meaning
Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle)
Use unique and descriptive names for custom wrappers/functions to avoid ambiguity
Define constants near related logic or ensure names link them clearly to avoid silent failures
Break down broad state management into smaller, focused hooks/contexts to reduce coupling
Files:
frontend/src/components/common/Modal/Modal.styles.ts
frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
Use consistent return types for similar functions/hooks
Files:
frontend/src/components/common/Modal/Modal.styles.ts
🧬 Code graph analysis (1)
frontend/src/components/common/Modal/Modal.styles.ts (1)
frontend/src/styles/zIndex.ts (1)
Z_INDEX(1-8)
🔇 Additional comments (1)
frontend/src/components/common/Modal/Modal.styles.ts (1)
1-7: Overlay의 z-index 상수화 및 fixed 포지셔닝이 적절합니다.전역
Z_INDEX.overlay사용으로 매직 넘버가 제거되었고,inset: 0+position: fixed조합으로 전체 화면 오버레이 요구사항도 충족합니다. 이 변경 자체로는 별다른 이슈 없어 보입니다.
oesnuj
left a comment
oesnuj
left a comment
There was a problem hiding this comment.
각 컴포넌트 파일 내부에서만 의미 있는 순서라면 굳이 전역으로 뺄 필요는 없을 것 같아요.
추가로 z-index 숫자 간격은 어떤 기준으로 설정하신 건가요?
만약 중간에 새로운 레이어가 추가되어야 한다면 어떤 방식으로 관리하면 좋을지 궁금합니다!
| export const Z_INDEX = { | ||
| dropdown: 10, // 드롭다운/메뉴 | ||
| sticky: 100, // 페이지 내 스티키 바 | ||
| header: 1000, // 전역 헤더 | ||
| floating: 1050, // 플로팅 버튼 | ||
| overlay: 1100, // 모달 오버레이 | ||
| modal: 1200, // 모달 본체 | ||
| }; No newline at end of file |
There was a problem hiding this comment.
JS의 const는 재할당만 막고 속성 수정은 막지 못하는데, TypeScript의 as const로 리터럴 타입으로 만들면 개발 과정에서 실수로 저 객체 값을 수정하는 걸 방지할 수 있어요!
export const Z_INDEX = {
dropdown: 10,
...
modal: 1200,
} as const;타입스크립트 쓴다면 상수 객체에 붙여주는 게 좋습니다!
There was a problem hiding this comment.
dropdown, sticky는 페이지 내 스타일이라 굳이 전역으로 뺄 필요가 없는 것 같네요!!
반영하겠습니당
frontend/src/styles/zIndex.ts
Outdated
| dropdown: 10, // 드롭다운/메뉴 | ||
| sticky: 100, // 페이지 내 스티키 바 | ||
| header: 1000, // 전역 헤더 | ||
| floating: 1050, // 플로팅 버튼 |
There was a problem hiding this comment.
floating 네이밍이 조금 애매한 것 같아요.
실제로 어떤 용도로 쓰이는지에 따라 이름 바꾸면 어떨까요?
There was a problem hiding this comment.
z-index 간격은 기존에 사용되고 있는 파일들의 중복된 값을 기준으로 설정했습니다!
더 좋은 기준이 있다면 이후 같이 의논하면 좋을 것 같아여!
중간에 새로운 레이어가 추가되어야 한다면, z-index 쌓임 문제가 발생하지 않도록 숫자 간격을 조정해주면 될 것 같습니다!
There was a problem hiding this comment.
floating네이밍이 조금 애매한 것 같아요.실제로 어떤 용도로 쓰이는지에 따라 이름 바꾸면 어떨까요?
음 floating이 떠있다는 의미도 되고, 주로 화면에 항상 노출되는 버튼을 플로팅 버튼이라 많이 이야기하는 것 같아서 나름의 용도에 맞게 지어본건데... 혹시 더 나은게 있다면 추천해줄 수 있나요?
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab.styles.ts (1)
5-5: Z_INDEX 도입 의도에 맞게 드롭다운 z-index도 상수로 치환하는 것이 좋겠습니다이 파일에서
Z_INDEX를 이미 import 하고 있으니, 드롭다운 성격의 메뉴인StatusSelectMenu/ApplicantAllSelectMenu의z-index: 10도 전역 레이어링 기준(Z_INDEX.dropdown)을 사용하면 의도가 더 분명해지고, 이후 레이어 조정 시 관리가 쉬울 것 같습니다.예시 수정안:
-import { Z_INDEX } from '@/styles/zIndex'; +import { Z_INDEX } from '@/styles/zIndex'; @@ export const StatusSelectMenu = styled.div<{ open: boolean }>` @@ - box-shadow: 0px 1px 8px 0px #0000001f; - z-index: 10; + box-shadow: 0px 1px 8px 0px #0000001f; + z-index: ${Z_INDEX.dropdown}; @@ export const ApplicantAllSelectMenu = styled.div<{ open: boolean }>` @@ - box-shadow: 0px 1px 8px 0px #0000001f; - z-index: 10; + box-shadow: 0px 1px 8px 0px #0000001f; + z-index: ${Z_INDEX.dropdown};이렇게 맞춰두면 PR 설명에 적어주신 계층 순서(
dropdown → sticky → header → floating → overlay → modal)와도 자연스럽게 정합성이 맞습니다.Also applies to: 131-144, 297-310
📜 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.
📒 Files selected for processing (6)
frontend/src/components/common/CustomDropDown/CustomDropDown.styles.ts(1 hunks)frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/ApplicantsListTab.styles.ts(0 hunks)frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab.styles.ts(1 hunks)frontend/src/pages/AdminPage/tabs/ApplicationListTab/ApplicationListTab.styles.ts(1 hunks)frontend/src/pages/ClubDetailPage/components/BackNavigationBar/BackNavigationBar.styles.ts(2 hunks)frontend/src/styles/zIndex.ts(1 hunks)
💤 Files with no reviewable changes (1)
- frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsListTab/ApplicantsListTab.styles.ts
🚧 Files skipped from review as they are similar to previous changes (4)
- frontend/src/pages/ClubDetailPage/components/BackNavigationBar/BackNavigationBar.styles.ts
- frontend/src/components/common/CustomDropDown/CustomDropDown.styles.ts
- frontend/src/styles/zIndex.ts
- frontend/src/pages/AdminPage/tabs/ApplicationListTab/ApplicationListTab.styles.ts
🧰 Additional context used
📓 Path-based instructions (2)
frontend/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
frontend/**/*.{ts,tsx,js,jsx}: Replace magic numbers with named constants for clarity
Replace complex/nested ternaries withif/elseor IIFEs for readability
Assign complex boolean conditions to named variables for explicit meaning
Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle)
Use unique and descriptive names for custom wrappers/functions to avoid ambiguity
Define constants near related logic or ensure names link them clearly to avoid silent failures
Break down broad state management into smaller, focused hooks/contexts to reduce coupling
Files:
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab.styles.ts
frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
Use consistent return types for similar functions/hooks
Files:
frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantsTab.styles.ts
There was a problem hiding this comment.
Actionable comments posted: 1
📜 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.
📒 Files selected for processing (2)
frontend/src/pages/ClubDetailPage/components/BackNavigationBar/BackNavigationBar.styles.ts(1 hunks)frontend/src/styles/zIndex.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- frontend/src/styles/zIndex.ts
🧰 Additional context used
📓 Path-based instructions (2)
frontend/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
frontend/**/*.{ts,tsx,js,jsx}: Replace magic numbers with named constants for clarity
Replace complex/nested ternaries withif/elseor IIFEs for readability
Assign complex boolean conditions to named variables for explicit meaning
Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle)
Use unique and descriptive names for custom wrappers/functions to avoid ambiguity
Define constants near related logic or ensure names link them clearly to avoid silent failures
Break down broad state management into smaller, focused hooks/contexts to reduce coupling
Files:
frontend/src/pages/ClubDetailPage/components/BackNavigationBar/BackNavigationBar.styles.ts
frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
Use consistent return types for similar functions/hooks
Files:
frontend/src/pages/ClubDetailPage/components/BackNavigationBar/BackNavigationBar.styles.ts
| width: 100%; | ||
| height: 70px; | ||
| z-index: 1; | ||
| z-index: 100; |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
중앙화된 Z_INDEX 상수를 사용해야 합니다.
이 PR의 핵심 목표는 하드코딩된 z-index 값을 중앙화된 상수로 마이그레이션하는 것입니다. 현재 100이라는 매직 넘버를 직접 사용하고 있지만, zIndex.ts에 정의된 Z_INDEX.sticky를 사용해야 합니다. 다른 컴포넌트들(Header, Modal 등)도 모두 Z_INDEX 상수를 import하여 사용하고 있습니다.
다음 diff를 적용하여 중앙화된 상수를 사용하세요:
import styled from 'styled-components';
+import { Z_INDEX } from '@/styles/zIndex';
export const BackNavigationContainer = styled.div`
display: none;
@media (max-width: 500px) {
position: sticky;
top: 0;
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
height: 70px;
- z-index: 100;
+ z-index: ${Z_INDEX.sticky};
background-color: white;
}
`;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| z-index: 100; | |
| import styled from 'styled-components'; | |
| import { Z_INDEX } from '@/styles/zIndex'; | |
| export const BackNavigationContainer = styled.div` | |
| display: none; | |
| @media (max-width: 500px) { | |
| position: sticky; | |
| top: 0; | |
| display: flex; | |
| flex-direction: row; | |
| align-items: center; | |
| width: 100%; | |
| height: 70px; | |
| z-index: ${Z_INDEX.sticky}; | |
| background-color: white; | |
| } | |
| `; |
🤖 Prompt for AI Agents
In
frontend/src/pages/ClubDetailPage/components/BackNavigationBar/BackNavigationBar.styles.ts
around line 14, the z-index is hardcoded as 100 — replace this magic number with
the centralized constant: import Z_INDEX from the shared zIndex.ts and use
Z_INDEX.sticky instead of 100 so the component follows the project-wide z-index
constants used by Header, Modal, etc.; update the import statements accordingly
and ensure the styled rule uses the constant.
2 participants
#️⃣연관된 이슈
📝작업 내용
전역 z-index 기준 정리 및 상수화
기존 페이지마다 제각각 사용하던 z-index 값을, 아래 기준에 맞춰 전역 상수로 통일했습니다.
문제 수정
(1) 상세페이지 이미지 모달이 푸터 · 스크롤 버튼 · 헤더에 가려지는 문제
=> 문제 해결 및 모달 오버레이 스타일에 잘못된 특수문자가 들어가 적용이 안 되고 있는 문제 발견 후 수정
(2) 지원하기 버튼 클릭 시 ‘지원서 선택 모달’이 헤더/스크롤 버튼 아래로 렌더되는 문제
=> 가
position: sticky로 인해 고유 stacking context를 생성하면서, 그 내부에 렌더되는 모달이 전역 레이어보다 아래로 깔리는 예상하지 못한 문제가 발생했습니다.이번 PR에서는 z-index 기준을 최대한 유지하기 위해 임시로 푸터의 z-index를 1050으로 올려 문제를 우선 해결했습니다.
후속 작업 예정 : Portal 기반 전역 모달로 구조 개선
현재 문제는 z-index 값을 임시로 수정하여 해결했지만, 근본적으로는 모달이
`는 전역 레이어로 'header'에 해당합니다. 이 상태에서 모달에 아무리 큰 z-index를 부여하더라도 sticky 컨텍스트를 넘을 수 없어 헤더 위로 올라갈 수 없는 것입니다.<ClubDetailFooter>내부에서 렌더되는 구조 때문에 문제가 발생합니다.<ClubDetailFooter>는sticky'로 인해 자체적으로 stacking context를 만들고 있고,임시로 의 z-index를 1050으로 높여 헤더보다 위에 오도록 처리했지만, 전역 레이어링 기준에서
sticky가header보다 높은 값이 되는 것은 자연스럽지 않은 것 같습니다.따라서 모달은 특정 컴포넌트 내부가 아닌, 항상 페이지 최상위 DOM에서 렌더되는 전역 레이어에 위치하는 것이 맞다고 판단했습니다.
이에 따라 ApplicationSelectModal을 Portal 기반 전역 모달로 분리하는 후속 작업을 진행할 예정이며, 이미지 모달도 동일한 패턴의 일관된 구조로개선하는 것이 더 적절하다고 판단했습니다.
중점적으로 리뷰받고 싶은 부분(선택)
논의하고 싶은 부분(선택)
(프론트 디자인 회의때 이야기해봐도 좋고 의견있으면 편하게 남겨주세요~)
🫡 참고사항
Summary by CodeRabbit
릴리스 노트
Style
Refactor
✏️ Tip: You can customize this high-level summary in your review settings.