[fix] 데스크탑, 모바일 카드 디자인을 피그마와 통일한다#830
Conversation
- 모바일 패딩 20 -> 16px로 변경 - box-shadow 모바일 추가
seongwon030
added
🎨 Design
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning
|
| Cohort / File(s) | Summary |
|---|---|
ClubCard 반응형 스타일 frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts |
카드 스타일을 CARD_STYLES.desktop / CARD_STYLES.mobile로 분리. border-radius, padding, gap, box-shadow 등 모바일 오버라이드 추가(@media (max-width:500px)). touch-action: manipulation 추가. 호버 스타일을 @media (hover: hover)로 제한. ClubName을 styled.h2 → styled.p로 변경. |
ClubStateBox 폰트 토큰화 frontend/src/components/ClubStateBox/ClubStateBox.tsx |
BOX_FONT_SIZE 상수(데스크톱/모바일) 추가 및 데스크톱 기본 폰트 적용. 모바일 미디어쿼리에서 모바일 폰트 크기 적용. |
ClubTag 폰트·레이아웃 조정 frontend/src/components/ClubTag/ClubTag.tsx |
TAG_FONT_SIZE 상수(데스크톱/모바일) 추가. StyledTag를 flex로 변경해 중앙 정렬, 높이 조정(데스크톱 28px, 모바일 25px), 데스크톱·모바일 폰트 크기 적용 및 모바일 패딩 조정(4px 8px). |
ClubLogo border-radius 변경 frontend/src/components/ClubLogo/ClubLogo.tsx |
main variant의 border-radius 증가(데스크톱 6px → 14px, 모바일 6px → 10px). detail variant는 변경 없음. |
MainPage 레이아웃 마진·패딩 조정 frontend/src/pages/MainPage/MainPage.styles.ts |
SectionBar 마진 조정(우측 마진 0으로 변경), TotalCountResult의 padding-top 제거, CardList의 margin-top 제거. |
Estimated code review effort
🎯 2 (Simple) | ⏱️ ~10 minutes
- 주의 포인트:
ClubCard.styles.ts에서 데스크톱 값이 기본으로 올바르게 적용되는지(우선순위/미디어쿼리 충돌).ClubName의 요소 타입 변경(h2 → p)이 접근성/시맨틱에 미치는 영향 및 다른 코드의 선택자 의존성 여부.@media (max-width:500px)브레이크포인트가 전체 프로젝트의 반응형 규칙과 일관한지.ClubLogo의 border-radius 변경이 레이아웃(특히 이미지 크롭/비율)에 미치는 영향.
Possibly related PRs
- [feature] 메인페이지 새로운 카드 디자인을 적용한다 #773 — 동일 컴포넌트(
ClubCard,ClubStateBox,ClubTag,ClubLogo)에 대한 스타일/미디어쿼리 변경을 다루어 코드 수준 연관성이 높음.
Suggested reviewers
- lepitaaar
- seongje973
- oesnuj
Pre-merge checks and finishing touches
✅ Passed checks (5 passed)
| Check name | Status | Explanation |
|---|---|---|
| Title check | ✅ Passed | The pull request title clearly describes the main objective: unifying desktop and mobile card design with Figma specifications. |
| Linked Issues check | ✅ Passed | The code changes implement the specified objectives: mobile padding adjusted (20px→16px), gap adjusted (15px→8px), tag font sizes unified (desktop 14px, mobile 12px), and hover effect fix for touch devices. |
| Out of Scope Changes check | ✅ Passed | All changes are focused on card design alignment with Figma specifications; minor layout adjustments in MainPage.styles.ts (SectionBar margin, TotalCountResult padding, CardList margin) appear to support the overall design unification. |
| Docstring Coverage | ✅ Passed | No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. |
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
✨ 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
fix/#829-card-design-fix-MOA-313
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: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts (1)
55-57: 브레이크포인트를 상수로 추출하세요.
300px브레이크포인트도 매직 넘버입니다. 라인 39-44의 개선안에서 제안한BREAKPOINTS상수에 포함시켜 일관성을 유지하세요.- @media (max-width: 300px) { + @media (max-width: ${BREAKPOINTS.small}) { height: auto; }코딩 가이드라인 기준
♻️ Duplicate comments (2)
frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts (2)
94-96: 중복: 브레이크포인트 상수 사용 필요이 미디어 쿼리도
500px매직 넘버를 사용하고 있으며, 라인 39-44에서 제안한BREAKPOINTS.mobile상수를 사용해야 합니다.- @media (max-width: 500px) { + @media (max-width: ${BREAKPOINTS.mobile}) { gap: 6px; }코딩 가이드라인 기준
115-117: 중복: 브레이크포인트 상수 사용 필요이 미디어 쿼리도
500px매직 넘버를 사용하고 있습니다. 라인 39-44에서 제안한BREAKPOINTS.mobile상수를 사용해야 합니다.- @media (max-width: 500px) { + @media (max-width: ${BREAKPOINTS.mobile}) { margin: ${INTRODUCTION_MARGIN.mobile.margin}; }코딩 가이드라인 기준
🧹 Nitpick comments (1)
frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts (1)
99-106: 선택적 개선: 스타일 상수를 통합하는 것을 고려하세요.
INTRODUCTION_MARGIN이 별도의 상수로 정의되어 있는데, 관련 스타일 상수들을 하나의 구조로 통합하면 더 나은 구성이 될 수 있습니다. 하지만 현재 구조도 충분히 명확하므로 선택적입니다.선택적으로 다음과 같이 통합할 수 있습니다:
const STYLES = { card: { desktop: { borderRadius: '20px', padding: '20px', gap: '16px', }, mobile: { borderRadius: '16px', padding: '16px', gap: '8px', }, }, introduction: { desktop: { margin: '10px 0px 0px 0px', }, mobile: { margin: '6px 0px 0px 0px', }, }, } as const;
📜 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/pages/MainPage/components/ClubCard/ClubCard.styles.ts(3 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
frontend/**/*.{ts,tsx}: Replace magic numbers with named constants for clarity.
Replace complex or nested ternary operators with if/else statements or IIFEs for readability.
Assign complex boolean conditions to named variables.
Use consistent return types for similar functions and hooks.
Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle).
Use unique, descriptive names for custom wrappers and functions to avoid ambiguity.
Define constants near related logic or ensure names link them clearly.
Files:
frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts
🔇 Additional comments (3)
frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts (3)
3-14: LGTM! 잘 구조화된 상수 정의입니다.데스크톱과 모바일 스타일을 명확하게 분리하여 상수로 정의한 것은 유지보수성과 가독성 측면에서 좋은 접근입니다.
as const를 사용한 타입 안정성도 적절합니다.
23-25: LGTM! 상수를 올바르게 활용하고 있습니다.정의한
CARD_STYLES.desktop상수를 적절하게 사용하여 데스크톱 기본 스타일을 적용하고 있습니다.
39-44: 리뷰 코멘트는 잘못된 파일을 참조하고 있습니다.실제 파일 분석 결과:
- 파일 경로 오류: 리뷰 코멘트가
MainPage경로를 언급하지만, 실제 파일은ClubDetailPage경로에 있습니다.- 라인 번호 불일치: 리뷰 코멘트가 지적한 라인 39-44에는 존재하지 않는 코드가 있습니다.
- 브레이크포인트 오류: 리뷰 코멘트가
500px브레이크포인트를 언급하지만, 실제 파일의 유일한 미디어 쿼리는 라인 23의@media (max-width: 300px)입니다.- box-shadow 없음: 리뷰 코멘트가 지적한 하드코딩된 box-shadow나 상태 기반 shadow 속성이 파일에 존재하지 않습니다.
- 반복 없음: 라인 94에
500px브레이크포인트 반복이 없습니다.이 리뷰 코멘트는 무시해도 됩니다.
Likely an incorrect or invalid review comment.
- 데탑 14px, 모바일 12px
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
frontend/src/components/ClubTag/ClubTag.tsx (2)
36-45: 폰트 크기를 TAG_STYLES 상수에 추가하세요.데스크톱(0.875rem)과 모바일(0.75rem) 폰트 크기가 매직 넘버로 하드코딩되어 있습니다. 기존
TAG_STYLES상수에 폰트 크기를 추가하여 일관성을 유지하세요.다음과 같이 수정하세요:
const TAG_STYLES = { desktop: { padding: '4px 8px', borderRadius: '8px', + fontSize: '0.875rem', }, mobile: { padding: '4px 6px', borderRadius: '6px', + fontSize: '0.75rem', }, } as const; const StyledTag = styled.span<{ color: string }>` display: inline-block; padding: ${TAG_STYLES.desktop.padding}; border-radius: ${TAG_STYLES.desktop.borderRadius}; background-color: ${({ color }) => color}; - font-size: 0.875rem; + font-size: ${TAG_STYLES.desktop.fontSize}; font-weight: 600; color: #3a3a3a; @media (max-width: 500px) { - font-size: 0.75rem; + font-size: ${TAG_STYLES.mobile.fontSize}; height: 25px; padding: ${TAG_STYLES.mobile.padding}; border-radius: ${TAG_STYLES.mobile.borderRadius}; } `;Based on coding guidelines.
47-47: 불필요한 백틱을 제거하세요.Line 47에 불필요한 백틱(``)이 있습니다. 이는 구문 오류를 유발할 수 있으므로 제거해야 합니다.
다음과 같이 수정하세요:
-``;
📜 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/components/ClubStateBox/ClubStateBox.tsx(1 hunks)frontend/src/components/ClubTag/ClubTag.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
frontend/**/*.{ts,tsx}: Replace magic numbers with named constants for clarity.
Replace complex or nested ternary operators with if/else statements or IIFEs for readability.
Assign complex boolean conditions to named variables.
Use consistent return types for similar functions and hooks.
Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle).
Use unique, descriptive names for custom wrappers and functions to avoid ambiguity.
Define constants near related logic or ensure names link them clearly.
Files:
frontend/src/components/ClubTag/ClubTag.tsxfrontend/src/components/ClubStateBox/ClubStateBox.tsx
frontend/**/*.tsx
📄 CodeRabbit inference engine (frontend/.cursorrules)
frontend/**/*.tsx: Abstract complex logic/interactions into dedicated components or higher-order components (HOCs).
Separate significantly different conditional UI/logic into distinct components.
Colocate simple, localized logic or use inline definitions to reduce context switching.
Choose field-level or form-level cohesion based on form requirements.
Break down broad state management into smaller, focused hooks or contexts.
Use component composition instead of props drilling.
Files:
frontend/src/components/ClubTag/ClubTag.tsxfrontend/src/components/ClubStateBox/ClubStateBox.tsx
🧠 Learnings (1)
📚 Learning: 2025-07-19T05:09:10.702Z
Learnt from: CR
Repo: Moadong/moadong PR: 0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Replace magic numbers with named constants for clarity.
Applied to files:
frontend/src/components/ClubStateBox/ClubStateBox.tsx
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
frontend/src/components/ClubTag/ClubTag.tsx (1)
56-56: 불필요한 코드를 제거하세요.Line 56의 빈 템플릿 리터럴은 불필요합니다.
`; -``;
🧹 Nitpick comments (3)
frontend/src/components/ClubStateBox/ClubStateBox.tsx (2)
50-57: 불필요한 중첩 구조를 제거하세요.
BOX_FONT_SIZE는 각 레벨(desktop,mobile)에fontSize속성 하나만 포함하고 있어 중첩이 불필요합니다.BOX_DIMENSIONS는width와height두 속성을 가지므로 중첩 구조가 합리적이지만, 단일 값에는 불필요한 복잡성을 추가합니다.다음과 같이 구조를 단순화하세요:
-const BOX_FONT_SIZE = { - desktop: { - fontSize: '0.875rem', - }, - mobile: { - fontSize: '0.75rem', - }, -} as const; +const BOX_FONT_SIZE = { + desktop: '0.875rem', + mobile: '0.75rem', +} as const;사용 부분도 함께 업데이트:
- font-size: ${BOX_FONT_SIZE.desktop.fontSize}; + font-size: ${BOX_FONT_SIZE.desktop}; @media (max-width: 500px) { width: ${BOX_DIMENSIONS.mobile.width}; height: ${BOX_DIMENSIONS.mobile.height}; - font-size: ${BOX_FONT_SIZE.mobile.fontSize}; + font-size: ${BOX_FONT_SIZE.mobile}; }Based on coding guidelines.
72-76: 미디어 쿼리 브레이크포인트를 공유 상수로 추출하는 것을 고려하세요.
500px브레이크포인트가 여러 컴포넌트에서 반복적으로 사용되고 있습니다(ClubCard, ClubTag, ClubStateBox). 일관성과 유지보수성을 위해 공유 상수 파일로 추출하는 것을 권장합니다.예시:
// constants/breakpoints.ts export const BREAKPOINTS = { mobile: '500px', } as const;- @media (max-width: 500px) { + @media (max-width: ${BREAKPOINTS.mobile}) {Based on coding guidelines.
frontend/src/components/ClubTag/ClubTag.tsx (1)
31-38: 불필요한 중첩 구조를 제거하세요.
TAG_FONT_SIZE도BOX_FONT_SIZE와 동일한 문제가 있습니다. 각 레벨에fontSize속성 하나만 포함하고 있어 중첩이 불필요하며, 접근 패턴이 장황합니다.다음과 같이 단순화하세요:
-const TAG_FONT_SIZE = { - desktop: { - fontSize: '0.875rem', - }, - mobile: { - fontSize: '0.75rem', - }, -} as const; +const TAG_FONT_SIZE = { + desktop: '0.875rem', + mobile: '0.75rem', +} as const;사용 부분도 함께 업데이트:
- font-size: ${TAG_FONT_SIZE.desktop.fontSize}; + font-size: ${TAG_FONT_SIZE.desktop}; @media (max-width: 500px) { height: 25px; - font-size: ${TAG_FONT_SIZE.mobile.fontSize}; + font-size: ${TAG_FONT_SIZE.mobile};Based on coding guidelines.
📜 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/components/ClubStateBox/ClubStateBox.tsx(2 hunks)frontend/src/components/ClubTag/ClubTag.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
frontend/**/*.{ts,tsx}: Replace magic numbers with named constants for clarity.
Replace complex or nested ternary operators with if/else statements or IIFEs for readability.
Assign complex boolean conditions to named variables.
Use consistent return types for similar functions and hooks.
Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle).
Use unique, descriptive names for custom wrappers and functions to avoid ambiguity.
Define constants near related logic or ensure names link them clearly.
Files:
frontend/src/components/ClubTag/ClubTag.tsxfrontend/src/components/ClubStateBox/ClubStateBox.tsx
frontend/**/*.tsx
📄 CodeRabbit inference engine (frontend/.cursorrules)
frontend/**/*.tsx: Abstract complex logic/interactions into dedicated components or higher-order components (HOCs).
Separate significantly different conditional UI/logic into distinct components.
Colocate simple, localized logic or use inline definitions to reduce context switching.
Choose field-level or form-level cohesion based on form requirements.
Break down broad state management into smaller, focused hooks or contexts.
Use component composition instead of props drilling.
Files:
frontend/src/components/ClubTag/ClubTag.tsxfrontend/src/components/ClubStateBox/ClubStateBox.tsx
🧠 Learnings (4)
📚 Learning: 2025-07-19T05:09:10.702Z
Learnt from: CR
Repo: Moadong/moadong PR: 0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Replace magic numbers with named constants for clarity.
Applied to files:
frontend/src/components/ClubTag/ClubTag.tsxfrontend/src/components/ClubStateBox/ClubStateBox.tsx
📚 Learning: 2025-07-19T05:09:10.702Z
Learnt from: CR
Repo: Moadong/moadong PR: 0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Define constants near related logic or ensure names link them clearly.
Applied to files:
frontend/src/components/ClubTag/ClubTag.tsxfrontend/src/components/ClubStateBox/ClubStateBox.tsx
📚 Learning: 2025-07-19T05:09:10.702Z
Learnt from: CR
Repo: Moadong/moadong PR: 0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Separate significantly different conditional UI/logic into distinct components.
Applied to files:
frontend/src/components/ClubStateBox/ClubStateBox.tsx
📚 Learning: 2025-07-19T05:09:10.702Z
Learnt from: CR
Repo: Moadong/moadong PR: 0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.tsx : Colocate simple, localized logic or use inline definitions to reduce context switching.
Applied to files:
frontend/src/components/ClubStateBox/ClubStateBox.tsx
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts (4)
39-44: box-shadow 값도 상수로 추출하는 것을 권장합니다.현재 모바일 box-shadow 값(
0 0 8px 0 rgba(0, 0, 0, 0.10))이 하드코딩되어 있습니다. 데스크탑 box-shadow(lines 28-31)와 함께CARD_STYLES에 추가하면 일관성이 향상됩니다.다음과 같이 수정할 수 있습니다:
const CARD_STYLES = { desktop: { borderRadius: '20px', padding: '20px', gap: '16px', + boxShadow: { + open: '0 0 14px rgba(0, 166, 255, 0.15)', + default: '0 0 14px rgba(0, 0, 0, 0.08)', + }, }, mobile: { borderRadius: '16px', padding: '16px', gap: '8px', + boxShadow: '0 0 8px 0 rgba(0, 0, 0, 0.10)', }, } as const;그리고 사용 시:
box-shadow: ${({ $state }) => $state === 'open' - ? '0 0 14px rgba(0, 166, 255, 0.15)' - : '0 0 14px rgba(0, 0, 0, 0.08)'}; + ? CARD_STYLES.desktop.boxShadow.open + : CARD_STYLES.desktop.boxShadow.default}; @media (max-width: 500px) { border-radius: ${CARD_STYLES.mobile.borderRadius}; padding: ${CARD_STYLES.mobile.padding}; gap: ${CARD_STYLES.mobile.gap}; - box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.10); + box-shadow: ${CARD_STYLES.mobile.boxShadow}; }
77-84: 폰트 크기도 상수로 추출하는 것을 권장합니다.ClubName의 폰트 크기(
1.375rem,1rem)가 하드코딩되어 있습니다. 다른 스타일 값처럼 상수로 추출하면 일관성과 유지보수성이 향상됩니다.다음과 같이 수정할 수 있습니다:
+const CLUB_NAME_FONT_SIZE = { + desktop: '1.375rem', + mobile: '1rem', +} as const; + const ClubName = styled.p` - font-size: 1.375rem; + font-size: ${CLUB_NAME_FONT_SIZE.desktop}; font-weight: bold; @media (max-width: 500px) { - font-size: 1rem; + font-size: ${CLUB_NAME_FONT_SIZE.mobile}; } `;
112-123: Introduction 폰트 크기도 상수로 추출하는 것을 권장합니다.Introduction의 폰트 크기(
0.875rem,0.75rem)가 하드코딩되어 있습니다. 마진 값처럼 폰트 크기도 상수로 추출하면 더 일관된 코드가 됩니다.다음과 같이 수정할 수 있습니다:
+const INTRODUCTION_FONT_SIZE = { + desktop: '0.875rem', + mobile: '0.75rem', +} as const; + const INTRODUCTION_MARGIN = { desktop: { margin: '10px 0px 0px 0px', }, mobile: { margin: '6px 0px 0px 0px', }, } as const; const Introduction = styled.p` - font-size: 0.875rem; + font-size: ${INTRODUCTION_FONT_SIZE.desktop}; margin: ${INTRODUCTION_MARGIN.desktop.margin}; color: rgba(129, 129, 129, 1); line-height: 16px; white-space: nowrap; @media (max-width: 500px) { margin: ${INTRODUCTION_MARGIN.mobile.margin}; - font-size: 0.75rem; + font-size: ${INTRODUCTION_FONT_SIZE.mobile}; } `;
39-39: 미디어 쿼리 브레이크포인트를 상수로 추출하는 것을 권장합니다.모바일 브레이크포인트
500px가 여러 곳(lines 39, 55, 81, 98, 119)에서 반복됩니다. 이 값을 상수로 추출하면 향후 브레이크포인트 변경 시 한 곳에서만 수정하면 됩니다.다음과 같이 수정할 수 있습니다:
+const BREAKPOINTS = { + mobile: '500px', + small: '300px', +} as const; + const CARD_STYLES = { // ... } as const; // 사용 예시: - @media (max-width: 500px) { + @media (max-width: ${BREAKPOINTS.mobile}) { border-radius: ${CARD_STYLES.mobile.borderRadius}; // ... }Also applies to: 81-81, 119-119
📜 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/pages/MainPage/components/ClubCard/ClubCard.styles.ts(5 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
frontend/**/*.{ts,tsx}: Replace magic numbers with named constants for clarity.
Replace complex or nested ternary operators with if/else statements or IIFEs for readability.
Assign complex boolean conditions to named variables.
Use consistent return types for similar functions and hooks.
Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle).
Use unique, descriptive names for custom wrappers and functions to avoid ambiguity.
Define constants near related logic or ensure names link them clearly.
Files:
frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts
🧠 Learnings (1)
📓 Common learnings
Learnt from: seongwon030
Repo: Moadong/moadong PR: 195
File: frontend/src/pages/AdminPage/AdminPage.tsx:7-7
Timestamp: 2025-03-19T05:18:07.818Z
Learning: AdminPage.tsx에서 현재 하드코딩된 클럽 ID('67d2e3b9b15c136c6acbf20b')는 로그인 기능 구현 후 동적으로 가져오는 방식으로 수정될 예정입니다.
Learnt from: seongwon030
Repo: Moadong/moadong PR: 548
File: frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx:17-57
Timestamp: 2025-07-19T05:05:10.196Z
Learning: ClubDetailPage.tsx에서 notJoinedClubNames 배열의 하드코딩은 의도적인 설계 결정입니다. 개발자가 명시적으로 하드코딩을 선택했으므로 이에 대한 리팩토링 제안을 하지 않아야 합니다.
🔇 Additional comments (2)
frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts (2)
3-14: 데스크탑/모바일 스타일을 상수로 잘 분리했습니다.매직 넘버를 명명된 상수로 추출하여 가독성과 유지보수성이 향상되었습니다.
103-110: 마진 값을 상수로 잘 분리했습니다.CARD_STYLES와 동일한 패턴으로 마진 값을 추출하여 일관성이 유지되었습니다.
- hover 효과를 @media (hover: hover)로 감싸 실제 호버 가능한 디바이스에서만 적용되도록 변경 - touch-action: manipulation 추가하여 터치 동작 최적화 - 스크롤 시 카드에 hover 효과가 자동으로 적용되는 현상 해결
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts (1)
115-127: Introduction 폰트 크기도 상수로 추출하는 것을 권장합니다.
INTRODUCTION_MARGIN처럼 일관성을 위해 폰트 크기도 상수로 추출하는 것이 좋습니다. PR 내 다른 컴포넌트들(ClubStateBox,ClubTag)도BOX_FONT_SIZE,TAG_FONT_SIZE상수를 사용하는 패턴을 따르고 있습니다.다음과 같이 리팩토링할 수 있습니다:
+const INTRODUCTION_FONT_SIZE = { + desktop: { fontSize: '0.875rem' }, + mobile: { fontSize: '0.75rem' }, +} as const; + const Introduction = styled.p` - font-size: 0.875rem; + font-size: ${INTRODUCTION_FONT_SIZE.desktop.fontSize}; font-weight: normal; margin: ${INTRODUCTION_MARGIN.desktop.margin}; color: rgba(129, 129, 129, 1); line-height: 16px; white-space: nowrap; @media (max-width: 500px) { margin: ${INTRODUCTION_MARGIN.mobile.margin}; - font-size: 0.75rem; + font-size: ${INTRODUCTION_FONT_SIZE.mobile.fontSize}; } `;
📜 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/pages/MainPage/components/ClubCard/ClubCard.styles.ts(5 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
frontend/**/*.{ts,tsx}: Replace magic numbers with named constants for clarity.
Replace complex or nested ternary operators with if/else statements or IIFEs for readability.
Assign complex boolean conditions to named variables.
Use consistent return types for similar functions and hooks.
Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle).
Use unique, descriptive names for custom wrappers and functions to avoid ambiguity.
Define constants near related logic or ensure names link them clearly.
Files:
frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts
🧠 Learnings (5)
📓 Common learnings
Learnt from: seongwon030
Repo: Moadong/moadong PR: 195
File: frontend/src/pages/AdminPage/AdminPage.tsx:7-7
Timestamp: 2025-03-19T05:18:07.818Z
Learning: AdminPage.tsx에서 현재 하드코딩된 클럽 ID('67d2e3b9b15c136c6acbf20b')는 로그인 기능 구현 후 동적으로 가져오는 방식으로 수정될 예정입니다.
📚 Learning: 2025-07-19T05:09:10.702Z
Learnt from: CR
Repo: Moadong/moadong PR: 0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Replace magic numbers with named constants for clarity.
Applied to files:
frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts
📚 Learning: 2025-07-19T05:05:10.196Z
Learnt from: seongwon030
Repo: Moadong/moadong PR: 548
File: frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx:17-57
Timestamp: 2025-07-19T05:05:10.196Z
Learning: ClubDetailPage.tsx에서 notJoinedClubNames 배열의 하드코딩은 의도적인 설계 결정입니다. 개발자가 명시적으로 하드코딩을 선택했으므로 이에 대한 리팩토링 제안을 하지 않아야 합니다.
Applied to files:
frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts
📚 Learning: 2025-07-19T05:09:10.702Z
Learnt from: CR
Repo: Moadong/moadong PR: 0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Define constants near related logic or ensure names link them clearly.
Applied to files:
frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts
📚 Learning: 2025-03-19T05:18:07.818Z
Learnt from: seongwon030
Repo: Moadong/moadong PR: 195
File: frontend/src/pages/AdminPage/AdminPage.tsx:7-7
Timestamp: 2025-03-19T05:18:07.818Z
Learning: AdminPage.tsx에서 현재 하드코딩된 클럽 ID('67d2e3b9b15c136c6acbf20b')는 로그인 기능 구현 후 동적으로 가져오는 방식으로 수정될 예정입니다.
Applied to files:
frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts
🔇 Additional comments (2)
frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts (2)
3-14: 데스크톱/모바일 스타일 상수 분리가 잘 적용되었습니다.
CARD_STYLES를 desktop/mobile 객체로 구조화한 것은 코딩 가이드라인에 부합하며, PR 목표인 반응형 디자인 통일을 명확하게 구현했습니다. 상수 이름도 직관적이고 유지보수가 용이합니다.
16-61: 반응형 CardContainer 구현이 우수합니다.모바일 스타일 적용이 적절하며 다음과 같은 모범 사례를 따릅니다:
touch-action: manipulation으로 모바일 UX 개선 (더블탭 줌 방지)@media (hover: hover)로 터치 기기의 sticky hover 문제 방지- 모바일 환경에 맞는 box-shadow 조정
seongwon030
changed the title
- 데스크탑 6px -> 14px - 모바일 6px -> 10px
- 모바일 패딩을 데스크톱과 동일하게 통일 (4px 8px) - display를 flex로 변경하여 정렬 개선 - 고정 높이(28px) 추가로 일관성 향상
- SectionBar margin 값 명시적으로 지정 (좌측 8px) - TotalCountResult의 불필요한 padding-top 제거 - CardList의 불필요한 margin-top 제거
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
frontend/src/components/ClubLogo/ClubLogo.tsx (1)
12-13: 디자인 토큰으로 border-radius 값 추출을 고려하세요.border-radius 값(
14px,10px)이 하드코딩되어 있습니다. 디자인 시스템의 일관성을 위해 이러한 값들을 중앙화된 디자인 토큰이나 테마 상수로 추출하는 것을 고려해보세요.예시:
// styles/designTokens.ts 또는 유사한 파일에서 export const BORDER_RADIUS = { clubLogo: { main: { desktop: '14px', mobile: '10px' }, detail: { desktop: '10px', mobile: '6px' }, }, } as const;그런 다음 해당 토큰을 import하여 사용:
+import { BORDER_RADIUS } from '@/styles/designTokens'; + const presets = { main: { - desktop: { width: '66px', height: '66px', radius: '14px' }, - mobile: { width: '50px', height: '50px', radius: '10px' }, + desktop: { width: '66px', height: '66px', radius: BORDER_RADIUS.clubLogo.main.desktop }, + mobile: { width: '50px', height: '50px', radius: BORDER_RADIUS.clubLogo.main.mobile }, }, // ... };
📜 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 (3)
frontend/src/components/ClubLogo/ClubLogo.tsx(1 hunks)frontend/src/components/ClubTag/ClubTag.tsx(1 hunks)frontend/src/pages/MainPage/MainPage.styles.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- frontend/src/components/ClubTag/ClubTag.tsx
🧰 Additional context used
📓 Path-based instructions (2)
frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (frontend/.cursorrules)
frontend/**/*.{ts,tsx}: Replace magic numbers with named constants for clarity.
Replace complex or nested ternary operators with if/else statements or IIFEs for readability.
Assign complex boolean conditions to named variables.
Use consistent return types for similar functions and hooks.
Avoid hidden side effects; functions should only perform actions implied by their signature (Single Responsibility Principle).
Use unique, descriptive names for custom wrappers and functions to avoid ambiguity.
Define constants near related logic or ensure names link them clearly.
Files:
frontend/src/components/ClubLogo/ClubLogo.tsxfrontend/src/pages/MainPage/MainPage.styles.ts
frontend/**/*.tsx
📄 CodeRabbit inference engine (frontend/.cursorrules)
frontend/**/*.tsx: Abstract complex logic/interactions into dedicated components or higher-order components (HOCs).
Separate significantly different conditional UI/logic into distinct components.
Colocate simple, localized logic or use inline definitions to reduce context switching.
Choose field-level or form-level cohesion based on form requirements.
Break down broad state management into smaller, focused hooks or contexts.
Use component composition instead of props drilling.
Files:
frontend/src/components/ClubLogo/ClubLogo.tsx
🧠 Learnings (2)
📓 Common learnings
Learnt from: seongwon030
Repo: Moadong/moadong PR: 195
File: frontend/src/pages/AdminPage/AdminPage.tsx:7-7
Timestamp: 2025-03-19T05:18:07.818Z
Learning: AdminPage.tsx에서 현재 하드코딩된 클럽 ID('67d2e3b9b15c136c6acbf20b')는 로그인 기능 구현 후 동적으로 가져오는 방식으로 수정될 예정입니다.
Learnt from: seongwon030
Repo: Moadong/moadong PR: 548
File: frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx:17-57
Timestamp: 2025-07-19T05:05:10.196Z
Learning: ClubDetailPage.tsx에서 notJoinedClubNames 배열의 하드코딩은 의도적인 설계 결정입니다. 개발자가 명시적으로 하드코딩을 선택했으므로 이에 대한 리팩토링 제안을 하지 않아야 합니다.
📚 Learning: 2025-07-19T05:09:10.702Z
Learnt from: CR
Repo: Moadong/moadong PR: 0
File: frontend/.cursorrules:0-0
Timestamp: 2025-07-19T05:09:10.702Z
Learning: Applies to frontend/**/*.{ts,tsx} : Replace magic numbers with named constants for clarity.
Applied to files:
frontend/src/pages/MainPage/MainPage.styles.ts
🔇 Additional comments (1)
frontend/src/pages/MainPage/MainPage.styles.ts (1)
30-30: 비대칭 마진 변경을 검증해주세요.마진 값이
60px 8px 24px에서60px 0px 24px 8px로 변경되어 우측 마진이 8px에서 0px로 감소했습니다. 이 비대칭 레이아웃 조정이 의도된 것인지 확인해주세요.
2 participants
#️⃣연관된 이슈
📝작업 내용
변경전
디자인 통일 버전
중점적으로 리뷰받고 싶은 부분(선택)
논의하고 싶은 부분(선택)
🫡 참고사항
Summary by CodeRabbit