[refactor] 모바일 활동사진 UI 그리드 형태로 수정 및 반응형 개선 작업#554
Conversation
oesnuj
added
🎨 Design
|
Warning
|
| 파일/경로 그룹 | 변경 요약 |
|---|---|
| frontend/src/styles/mediaQuery.ts | BREAKPOINT와 media 상수 도입: 모바일(500px), 태블릿(900px) 미디어 쿼리 중앙화, export 처리 |
| frontend/src/components/common/Footer/Footer.styles.ts | 하드코딩된 500px 미디어 쿼리를 media.mobile로 교체 |
| frontend/src/pages/ClubDetailPage/components/InfoBox/InfoBox.styles.ts | 500px→800px 브레이크포인트 조정, media.mobile로 미디어 쿼리 통일, 여러 스타일 속성 모바일 대응 추가 |
| frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.styles.ts | 500px 미디어 쿼리 → media.mobile로 대체, 모바일 레이아웃 및 크기 조정 |
| frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.tsx | 모바일 환경에서 포토리스트 네비게이션 버튼이 렌더링되지 않도록 조건 추가 |
| frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoModal/PhotoModal.styles.ts | 600px 미디어 쿼리 → media.mobile로 교체, 모든 관련 스타일 컴포넌트에 적용 |
Sequence Diagram(s)
sequenceDiagram
participant User
participant PhotoList
participant DeviceDetector
User->>PhotoList: 페이지 접근
PhotoList->>DeviceDetector: isMobile 확인
alt 모바일이 아님
PhotoList->>User: 네비게이션 버튼 렌더링 (좌/우)
else 모바일
PhotoList-->>User: 네비게이션 버튼 미노출
end
Possibly related PRs
- [feature] 상세페이지 데스크탑, 모바일 fontSize 추가 #439: InfoBox 컴포넌트의 스타일링에서 반응형 폰트 사이즈 조정을 위해 직접 500px 미디어 쿼리를 추가한 PR로, 본 PR과 동일 컴포넌트의 반응형 스타일링 관련 작업이지만 접근 방식이 다름.
✨ Finishing Touches
- 📝 Generate Docstrings
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.
🪧 Tips
Chat
There are 3 ways to chat with CodeRabbit:
- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
I pushed a fix in commit <commit_id>, please review it.Explain this complex logic.Open a follow-up GitHub issue for this discussion.
- Files and specific lines of code (under the "Files changed" tab): Tag
@coderabbitaiin a new review comment at the desired location with your query. Examples:@coderabbitai explain this code block.@coderabbitai modularize this function.
- PR comments: Tag
@coderabbitaiin a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.@coderabbitai read src/utils.ts and explain its main purpose.@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.@coderabbitai help me debug CodeRabbit configuration file.
Support
Need help? Create a ticket on our support page for assistance with any issues or questions.
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.
CodeRabbit Commands (Invoked using PR comments)
@coderabbitai pauseto pause the reviews on a PR.@coderabbitai resumeto resume the paused reviews.@coderabbitai reviewto trigger an incremental review. This is useful when automatic reviews are disabled for the repository.@coderabbitai full reviewto do a full review from scratch and review all the files again.@coderabbitai summaryto regenerate the summary of the PR.@coderabbitai generate docstringsto generate docstrings for this PR.@coderabbitai generate sequence diagramto generate a sequence diagram of the changes in this PR.@coderabbitai resolveresolve all the CodeRabbit review comments.@coderabbitai configurationto show the current CodeRabbit configuration for the repository.@coderabbitai helpto get help.
Other keywords and placeholders
- Add
@coderabbitai ignoreanywhere in the PR description to prevent this PR from being reviewed. - Add
@coderabbitai summaryto generate the high-level summary at a specific location in the PR description. - Add
@coderabbitaianywhere in the PR title to generate the title automatically.
Documentation and Community
- Visit our Documentation for detailed information on how to use CodeRabbit.
- Join our Discord Community to get help, request features, and share feedback.
- Follow us on X/Twitter for updates and announcements.
✅ Deploy Preview for moadong ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull Request Overview
This PR refactors the mobile UI for activity photos by converting from a slide-based layout to a grid layout and improves responsive design. The key focus is enhancing mobile usability and establishing consistent breakpoints across the application.
- Introduces centralized media query breakpoints to replace inconsistent values throughout the codebase
- Converts mobile activity photos from horizontal scroll to a 2-column grid layout for better usability
- Fixes responsive UI issues in the 500-900px width range by adjusting button positioning
Reviewed Changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/styles/mediaQuery.ts | Creates centralized breakpoint constants and media query utilities |
| frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoModal/PhotoModal.styles.ts | Updates media queries to use centralized constants |
| frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.tsx | Conditionally hides navigation buttons on mobile |
| frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.styles.ts | Implements grid layout for mobile and updates media queries |
| frontend/src/pages/ClubDetailPage/components/InfoBox/InfoBox.styles.ts | Adds intermediate breakpoint and updates media queries |
| frontend/src/components/common/Footer/Footer.styles.ts | Updates to use centralized media query constants |
| margin-top: 100px; | ||
|
|
||
| @media (max-width: 500px) { | ||
| @media (max-width: 800px) { |
There was a problem hiding this comment.
The hardcoded 800px breakpoint is inconsistent with the centralized media query approach. Consider adding this breakpoint to the BREAKPOINT constants in mediaQuery.ts or use the existing tablet breakpoint (900px).
| @media (max-width: 800px) { | |
| ${media.tablet} { |
| padding: 30px; | ||
|
|
||
| @media (max-width: 500px) { | ||
| @media (max-width: 800px) { |
There was a problem hiding this comment.
Duplicate hardcoded 800px breakpoint. This should use the centralized media query constants for consistency and maintainability.
| @media (max-width: 800px) { | |
| ${media.tablet} { |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (6)
frontend/src/pages/ClubDetailPage/components/InfoBox/InfoBox.styles.ts (2)
11-19: 미디어 쿼리 접근 방식의 일관성을 개선하는 것을 고려해보세요.
InfoBoxWrapper에서 800px와 500px(mobile) 두 개의 브레이크포인트가 모두flex-direction: column을 설정하고 있습니다. 800px 브레이크포인트도 중앙화된 상수를 사용하거나, 브레이크포인트 전략을 통합하는 것을 고려해보세요.+ // mediaQuery.ts에 tablet 브레이크포인트 활용 고려 - @media (max-width: 800px) { + ${media.tablet} { flex-direction: column; }
29-39: 동일한 미디어 쿼리 일관성 이슈가InfoBox에도 적용됩니다.800px와 mobile 브레이크포인트 모두에서
width: 100%를 설정하고 있어 중복됩니다. 중앙화된media.tablet을 활용하는 것을 고려해보세요.frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.styles.ts (4)
19-25: 매직 넘버를 명명된 상수로 대체하는 것을 고려해주세요.미디어 쿼리 중앙화는 잘 적용되었지만,
20px,30px,34px등의 매직 넘버들이 여전히 존재합니다. 일관성을 위해 이러한 값들도 상수로 분리하는 것을 권장합니다.예시:
+const SPACING = { + MOBILE_PADDING: '20px', + DESKTOP_PADDING: '30px', + MARGIN_TOP: '34px', +} as const; export const PhotoListContainer = styled.div` - margin-top: 34px; + margin-top: ${SPACING.MARGIN_TOP}; - padding: 30px; + padding: ${SPACING.DESKTOP_PADDING}; ${media.mobile} { - padding: 20px; + padding: ${SPACING.MOBILE_PADDING}; }
49-54: 모바일 그리드 레이아웃 전환이 훌륭합니다.슬라이드 방식에서 그리드 방식으로의 전환이 PR 목표와 완벽히 일치하며, 모바일 사용성이 크게 개선될 것으로 예상됩니다.
다만
gap: 12px와gap: 20px같은 매직 넘버들을 상수로 분리하면 더 좋을 것 같습니다.
76-83: 반응형 카드 구현이 현대적이고 우수합니다.
aspect-ratio속성을 사용한 반응형 카드 구현이 매우 좋습니다. 고정 크기에서 유연한 크기로의 전환이 올바르게 이루어졌습니다.
border-radius값들(18px,8px)도 디자인 토큰으로 관리하면 더 일관성 있는 코드가 될 것입니다.
111-116: 모바일 버튼 크기 조정이 적절합니다.모바일에서 버튼 크기를 줄이는 것은 좋은 UX 개선입니다.
다만 위치 설정 로직이 중복되고 있습니다. 다음과 같이 개선할 수 있습니다:
+const getButtonPosition = (direction: 'left' | 'right', isMobile = false) => { + const offset = isMobile ? '5px' : '10px'; + return direction === 'left' ? `left: ${offset};` : `right: ${offset};`; +}; export const NavigationButton = styled.button<{ direction: 'left' | 'right' }>` - ${({ direction }) => (direction === 'left' ? 'left: 10px;' : 'right: 10px;')} + ${({ direction }) => getButtonPosition(direction)} ${media.mobile} { - ${({ direction }) => (direction === 'left' ? 'left: 5px;' : 'right: 5px;')} + ${({ direction }) => getButtonPosition(direction, true)} }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
frontend/src/components/common/Footer/Footer.styles.ts(2 hunks)frontend/src/pages/ClubDetailPage/components/InfoBox/InfoBox.styles.ts(5 hunks)frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.styles.ts(5 hunks)frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.tsx(1 hunks)frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoModal/PhotoModal.styles.ts(8 hunks)frontend/src/styles/mediaQuery.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
frontend/**/*.{ts,tsx}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- frontend/.cursorrules
frontend/**/*.tsx
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- frontend/.cursorrules
🧠 Learnings (7)
📓 Common learnings
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.682Z
Learning: Applies to frontend/**/*.tsx : Separate significantly different conditional UI/logic into distinct components.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.682Z
Learning: Applies to frontend/**/*.{ts,tsx} : Replace magic numbers with named constants for clarity.
Learnt from: oesnuj
PR: Moadong/moadong#388
File: frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoModal/PhotoModal.styles.ts:3-25
Timestamp: 2025-05-09T08:16:46.587Z
Learning: CSS에서 `@supports` 기능 쿼리는 특정 CSS 속성을 브라우저가 지원하는지 확인하여 선택적으로 스타일을 적용할 수 있게 해준다. 이를 통해 점진적 향상, 성능 최적화, 브라우저 호환성 개선이 가능하다.
frontend/src/components/common/Footer/Footer.styles.ts (2)
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.682Z
Learning: Applies to frontend/**/*.{ts,tsx} : Replace magic numbers with named constants for clarity.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.682Z
Learning: Applies to frontend/**/*.tsx : Separate significantly different conditional UI/logic into distinct components.
frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.tsx (1)
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.682Z
Learning: Applies to frontend/**/*.tsx : Separate significantly different conditional UI/logic into distinct components.
frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoModal/PhotoModal.styles.ts (2)
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.682Z
Learning: Applies to frontend/**/*.{ts,tsx} : Replace magic numbers with named constants for clarity.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.682Z
Learning: Applies to frontend/**/*.tsx : Separate significantly different conditional UI/logic into distinct components.
frontend/src/styles/mediaQuery.ts (3)
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.682Z
Learning: Applies to frontend/**/*.{ts,tsx} : Replace magic numbers with named constants for clarity.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.682Z
Learning: Applies to frontend/**/*.{ts,tsx} : Define constants near related logic or ensure names link them clearly.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.682Z
Learning: Applies to frontend/**/*.tsx : Separate significantly different conditional UI/logic into distinct components.
frontend/src/pages/ClubDetailPage/components/InfoBox/InfoBox.styles.ts (5)
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.682Z
Learning: Applies to frontend/**/*.{ts,tsx} : Replace magic numbers with named constants for clarity.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.682Z
Learning: Applies to frontend/**/*.tsx : Separate significantly different conditional UI/logic into distinct components.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.682Z
Learning: Applies to frontend/**/*.tsx : Break down broad state management into smaller, focused hooks or contexts.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.682Z
Learning: Applies to frontend/**/*.tsx : Colocate simple, localized logic or use inline definitions to reduce context switching.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.682Z
Learning: Applies to frontend/**/*.{ts,tsx} : Replace complex or nested ternary operators with if/else statements or IIFEs for readability.
frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.styles.ts (2)
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.682Z
Learning: Applies to frontend/**/*.{ts,tsx} : Replace magic numbers with named constants for clarity.
Learnt from: CR
PR: Moadong/moadong#0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.682Z
Learning: Applies to frontend/**/*.tsx : Separate significantly different conditional UI/logic into distinct components.
🧬 Code Graph Analysis (4)
frontend/src/components/common/Footer/Footer.styles.ts (1)
frontend/src/styles/mediaQuery.ts (1)
media(6-9)
frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoModal/PhotoModal.styles.ts (1)
frontend/src/styles/mediaQuery.ts (1)
media(6-9)
frontend/src/pages/ClubDetailPage/components/InfoBox/InfoBox.styles.ts (1)
frontend/src/styles/mediaQuery.ts (1)
media(6-9)
frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.styles.ts (1)
frontend/src/styles/mediaQuery.ts (1)
media(6-9)
🔇 Additional comments (12)
frontend/src/styles/mediaQuery.ts (1)
1-9: 미디어 쿼리 중앙화 접근 방식이 우수합니다.브레이크포인트 값과 미디어 쿼리 문자열을 분리하여 유지보수성을 높였고, 매직 넘버를 명명된 상수로 대체하여 코딩 가이드라인을 잘 따르고 있습니다. 이 구조는 향후 반응형 디자인의 일관성을 보장할 것입니다.
frontend/src/components/common/Footer/Footer.styles.ts (2)
2-2: 중앙화된 미디어 쿼리 모듈을 올바르게 임포트했습니다.
22-22: 하드코딩된 미디어 쿼리를 중앙화된 헬퍼로 성공적으로 교체했습니다.기존의
@media (max-width: 500px)를${media.mobile}로 교체하여 일관성과 유지보수성을 향상시켰습니다.frontend/src/pages/ClubDetailPage/components/InfoBox/InfoBox.styles.ts (3)
2-2: 중앙화된 미디어 쿼리 모듈을 올바르게 임포트했습니다.
64-67: 모바일 미디어 쿼리 중앙화가 올바르게 적용되었습니다.
84-86: 모바일 미디어 쿼리 중앙화가 올바르게 적용되었습니다.frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.tsx (2)
68-72: 모바일에서 네비게이션 버튼을 숨기는 로직이 우수합니다.모바일 환경에서 좌우 스크롤 버튼을 제거하여 더 깔끔한 UX를 제공합니다. 사용자가 터치 스크롤을 사용할 수 있는 모바일 환경에 적합한 개선사항입니다.
73-77: 일관된 모바일 네비게이션 로직 적용이 잘 되었습니다.오른쪽 버튼에도 동일한
!isMobile조건을 적용하여 일관성을 유지했습니다.frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoModal/PhotoModal.styles.ts (3)
2-2: 중앙화된 미디어 쿼리 모듈을 올바르게 임포트했습니다.
16-19: 백드롭 필터 지원을 위한 점진적 향상이 잘 구현되었습니다.
@supports쿼리를 사용하여 브라우저가backdrop-filter를 지원하는 경우에만 블러 효과를 적용하는 것은 좋은 접근 방식입니다. 이전 학습에서 확인한 대로 점진적 향상과 브라우저 호환성 개선에 도움이 됩니다.
43-47: 미디어 쿼리 중앙화 시 브레이크포인트 변경을 확인하세요.기존
@media (max-width: 600px)에서${media.mobile}(500px)로 변경되어 모바일 스타일이 100px 더 일찍 적용됩니다. 이것이 의도된 변경인지 확인하고, 모바일 UX에 미치는 영향을 테스트해보시기 바랍니다.Also applies to: 104-106, 120-122, 159-168, 180-183, 208-211, 239-242
frontend/src/pages/ClubDetailPage/components/PhotoList/PhotoList.styles.ts (1)
2-2: 중앙화된 미디어 쿼리 도입이 잘 이루어졌습니다.미디어 쿼리 헬퍼를 중앙에서 관리하는 방식으로 변경하여 일관성과 유지보수성이 개선되었습니다.
seongwon030
left a comment
seongwon030
left a comment
There was a problem hiding this comment.
미디어쿼리 공통 컴포넌트 추가 좋네요~ 주기적으로 리팩토링 가봅시다
2 participants
#️⃣연관된 이슈
📝작업 내용
default.mp4
1. 상세 페이지 반응형 UI 오류 수정
화면 너비가 900px에서 500px 사이로 변경될 때 발생하던 UI 깨짐 현상을 해결했습니다.
수정: 버튼을 아래로 자연스럽게 내려 배치했습니다
2. 미디어 쿼리 분기점 상수화
중복되고 일관성 없는 분기점(490px, 500px, 550px 등)을 styles/mediaQuery에 전역 상수로 통합해두었습니다.
전 파일에 일괄 적용하고 싶었지만, 파일 수가 많고 충돌 가능성이 있어 눈에 보이는 일부 파일에만 우선 적용했습니다.
이후 작업 시 여유 있을 때 함께 적용 부탁드립니다.
사용법
3. '활동 사진' 모바일 UI 개선
-> 이에 따라 여러 이미지를 동시에 보여주는 그리드 UI를 적용하고, 모바일 화면에서는 좌우 탐색 버튼을 제거
중점적으로 리뷰받고 싶은 부분(선택)
논의하고 싶은 부분(선택)
🫡 참고사항
Summary by CodeRabbit