[feature] 메인페이지 새로운 카드 디자인을 적용한다#773
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning
|
| Cohort / File(s) | Summary of Changes |
|---|---|
카드 레이아웃 구조 변경frontend/src/pages/MainPage/components/ClubCard/ClubCard.tsx, frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts |
ClubCard가 이름·소개를 ClubInfo로 묶고 상태·태그를 StateBoxTagContainer로 분리하여 헤더 하단에 배치. ClubInfo, StateBoxTagContainer 신규 export 추가. CardContainer 스타일(경계반경/패딩/간격) 및 간격값 조정. ClubCard를 default export로 변경. |
상태/태그 컴포넌트 스타일 조정frontend/src/components/ClubStateBox/ClubStateBox.tsx, frontend/src/components/ClubTag/ClubTag.tsx |
ClubStateBox: STATE_COLORS 도입으로 OPEN/CLOSED/ALWAYS 색상 참조, UPCOMING 제거, BOX_DIMENSIONS로 데스크톱·모바일 치수 관리 및 미디어쿼리 기준을 max-width: 500px로 변경. ClubTag: TAG_STYLES 도입, 데스크톱·모바일 패딩·border-radius 토큰화, 모바일에서 높이 25px 적용. |
로고 컴포넌트 반응형/사이즈 조정frontend/src/components/ClubLogo/ClubLogo.tsx |
메인 프리셋 크기 변경(데스크톱 45×45→66×66, 모바일 36×35→50×50), radius 유지(6px). 미디어쿼리 기준 max-width 변경 480px→500px. 레이아웃 로직 불변. |
메인 페이지/배너 스타일 조정frontend/src/pages/MainPage/MainPage.styles.ts, frontend/src/pages/MainPage/components/Banner/Banner.styles.ts |
PageContainer/BannerContainer의 기본 가로 패딩(0 40px) 제거 및 <=1280px 에서 padding:0 20px 추가. CardList gap 축소(35→20), 그리드 컬럼을 minmax(0, 1fr)로 변경 및 <=500px breakpoint에서 gap·margin 재조정. |
Sequence Diagram(s)
sequenceDiagram
participant MainPage
participant ClubCard
participant ClubLogo
participant ClubInfo
participant StateBoxTagContainer
participant ClubStateBox
participant ClubTag
MainPage->>ClubCard: render(club)
activate ClubCard
ClubCard->>ClubLogo: render(logo)
ClubCard->>ClubInfo: render(name, introduction)
Note right of ClubInfo #EFEFEF: 이름과 소개를 하나의 블록으로 묶음
ClubCard->>StateBoxTagContainer: render(state, tags)
activate StateBoxTagContainer
StateBoxTagContainer->>ClubStateBox: render(state)
StateBoxTagContainer->>ClubTag: render(category, tags...)
deactivate StateBoxTagContainer
deactivate ClubCard
Estimated code review effort
🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related issues
- [feature] MOA-258 메인페이지 새로운 카드 디자인을 적용한다 #755 — 메인페이지 카드 디자인 변경 이슈로, ClubCard 및 관련 스타일·반응형 규칙 수정과 직접적으로 연관됨.
Possibly related PRs
- [feature] 비참여 동아리 카드 색상을 회색으로 변경한다 #553 — ClubCard 및 관련 스타일을 변경한 PR로 레이아웃·스타일 충돌 가능성 있음.
- [feature] 모집 상태 보기 기능을 제거하고 중앙동아리 태그를 이동한다 #759 — MainPage 스타일(패딩, CardList gap, 미디어쿼리)과 중복·충돌 소지 있음.
- [refactor] 모바일 활동사진 UI 그리드 형태로 수정 및 반응형 개선 작업 #554 — 전반적인 미디어쿼리/브레이크포인트 표준화 변경과 코드 레벨 연관 있음.
Suggested reviewers
- lepitaaar
- seongje973
- oesnuj
Pre-merge checks and finishing touches
❌ Failed checks (1 warning)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Out of Scope Changes Check | BannerContainer의 패딩 변경은 카드 디자인 적용 범위와 직접적인 연관이 없어 본 이슈의 목표를 벗어난 변경으로 보입니다. | Banner 관련 스타일 변경을 별도의 PR로 분리하거나 해당 변경이 카드 디자인과 어떻게 연관되는지 명확히 설명해 주시기 바랍니다. |
✅ Passed checks (4 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title Check | ✅ Passed | 제목이 메인페이지의 새로운 카드 디자인 적용이라는 주요 변경사항을 명시적으로 요약하고 있어 PR의 핵심 의도를 명확히 전달합니다. |
| Linked Issues Check | ✅ Passed | PR에서 카드 컴포넌트의 스타일, 레이아웃, 반응형 동작이 일관되게 업데이트되어 연결된 이슈 MOA-258의 “메인페이지 새로운 카드 디자인 적용” 목표를 충실히 이행하고 있습니다. |
| Docstring Coverage | ✅ Passed | No functions found in the changes. Docstring coverage check skipped. |
✨ 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
feature/#755-main-page-card-design-v2-MOA-258
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.
- 카드 구조를 2단계에서 3단계로 재구성 (Header, StateBox+Tags) - Introduction을 ClubInfo 내부로 이동하여 정보 그룹핑 개선 - border-radius 14px → 20px로 변경하여 더 부드러운 디자인 - 고정 높이 제거하고 gap 기반 레이아웃으로 변경 - Introduction margin 최적화 (22px → 10px) - 반응형 태그 간격 조정 (8px → 5px, 모바일 6px) - division 태그 제거하고 category 태그만 유지
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (1)
frontend/src/components/ClubLogo/ClubLogo.tsx (1)
35-35: 반응형 브레이크포인트를 명명된 상수로 추출하세요.
500px브레이크포인트가 여러 파일(ClubTag, ClubStateBox, ClubCard.styles)에서 반복 사용되고 있습니다. 일관성을 위해 공통 상수로 추출하는 것을 권장합니다.공통 테마 파일 또는 상수 파일에 다음과 같이 추출할 수 있습니다:
// constants/breakpoints.ts 또는 theme.ts export const BREAKPOINTS = { MOBILE: '500px', } as const;그런 다음 각 컴포넌트에서:
+import { BREAKPOINTS } from '@/constants/breakpoints'; + - @media (max-width: 500px) { + @media (max-width: ${BREAKPOINTS.MOBILE}) { ${({ $variant }) => css` width: ${presets[$variant].mobile.width}; height: ${presets[$variant].mobile.height}; border-radius: ${presets[$variant].mobile.radius}; `} }As per 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 (5)
frontend/src/components/ClubLogo/ClubLogo.tsx(2 hunks)frontend/src/components/ClubStateBox/ClubStateBox.tsx(1 hunks)frontend/src/components/ClubTag/ClubTag.tsx(1 hunks)frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts(2 hunks)frontend/src/pages/MainPage/components/ClubCard/ClubCard.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/pages/MainPage/components/ClubCard/ClubCard.styles.tsfrontend/src/components/ClubStateBox/ClubStateBox.tsxfrontend/src/pages/MainPage/components/ClubCard/ClubCard.tsxfrontend/src/components/ClubLogo/ClubLogo.tsxfrontend/src/components/ClubTag/ClubTag.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/ClubStateBox/ClubStateBox.tsxfrontend/src/pages/MainPage/components/ClubCard/ClubCard.tsxfrontend/src/components/ClubLogo/ClubLogo.tsxfrontend/src/components/ClubTag/ClubTag.tsx
🔇 Additional comments (6)
frontend/src/components/ClubLogo/ClubLogo.tsx (1)
10-19: LGTM!preset 패턴을 사용하여 데스크톱/모바일 크기를 관리하는 방식이 깔끔하고 확장 가능합니다. 크기 증가(66x66, 50x50)가 디자인 요구사항과 일치하는지 확인하세요.
frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts (1)
45-67: LGTM!새로운
ClubInfo와StateBoxTagContainer컨테이너가 헤더와 상태/태그 영역을 명확하게 분리하여 컴포넌트 구조를 개선했습니다. 컴포넌트 composition 패턴을 잘 따르고 있습니다.frontend/src/pages/MainPage/components/ClubCard/ClubCard.tsx (3)
35-43: LGTM!헤더 구조 개선으로 클럽 이름과 소개가 논리적으로 그룹화되었습니다.
ClubInfo컨테이너를 사용한 컴포넌트 composition이 코딩 가이드라인을 잘 따르고 있습니다.As per coding guidelines
45-57: LGTM!상태와 태그를
StateBoxTagContainer로 그룹화하여 시각적 레이아웃이 명확해졌습니다. 태그 필터링 로직(filter((tag) => tag.trim()))도 적절합니다.
62-62: LGTM!default export 추가로 모듈 인터페이스가 개선되었습니다.
frontend/src/components/ClubStateBox/ClubStateBox.tsx (1)
7-21: UPCOMING 상태 참조가 코드베이스에서 모두 제거된 것을 확인했습니다.
frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (2)
frontend/src/components/ClubStateBox/ClubStateBox.tsx (2)
7-21: 매직 넘버를 명명된 상수로 교체하세요.색상 값들(
'#3DBBFF','#FFFFFF','#C5C5C5','#49D5AD')이 여전히 하드코딩되어 있습니다. 이전 리뷰에서도 지적된 사항으로, 코딩 가이드라인에 따라 이러한 색상을 테마 또는 명명된 상수로 추출하여 일관성과 유지보수성을 높여야 합니다.다음과 같이 리팩토링하세요:
+const STATE_COLORS = { + OPEN: { + background: '#3DBBFF', + text: '#FFFFFF', + }, + CLOSED: { + background: '#C5C5C5', + text: '#FFFFFF', + }, + ALWAYS: { + background: '#49D5AD', + text: '#FFFFFF', + }, +} as const; + const stateStyles: Record< string, { backgroundColor: string; color: string; text: string } > = { OPEN: { - backgroundColor: '#3DBBFF', - color: '#FFFFFF', + backgroundColor: STATE_COLORS.OPEN.background, + color: STATE_COLORS.OPEN.text, text: '모집중', }, CLOSED: { - backgroundColor: '#C5C5C5', - color: '#FFFFFF', + backgroundColor: STATE_COLORS.CLOSED.background, + color: STATE_COLORS.CLOSED.text, text: '모집마감', }, ALWAYS: { - backgroundColor: '#49D5AD', - color: '#FFFFFF', + backgroundColor: STATE_COLORS.ALWAYS.background, + color: STATE_COLORS.ALWAYS.text, text: '상시모집', }, };As per coding guidelines
29-40: 매직 넘버를 명명된 상수로 교체하세요.
width,height,border-radius,font-size값들이 하드코딩되어 있습니다. 이전 리뷰에서도 지적된 사항으로, 코딩 가이드라인에 따라 이러한 매직 넘버를 명명된 상수로 추출해야 합니다.다음과 같이 리팩토링하세요:
+const BOX_DIMENSIONS = { + desktop: { + width: '55px', + height: '28px', + }, + mobile: { + width: '50px', + height: '25px', + }, +} as const; + +const BOX_STYLES = { + borderRadius: '8px', + fontSize: '0.75rem', + fontWeight: 500, +} as const; + const StyledBox = styled.div<{ $bgColor: string; $textColor: string }>` display: flex; justify-content: center; align-items: center; white-space: nowrap; - width: 55px; - height: 28px; - border-radius: 8px; + width: ${BOX_DIMENSIONS.desktop.width}; + height: ${BOX_DIMENSIONS.desktop.height}; + border-radius: ${BOX_STYLES.borderRadius}; background-color: ${({ $bgColor }) => $bgColor}; color: ${({ $textColor }) => $textColor}; - font-size: 0.75rem; - font-weight: 500; + font-size: ${BOX_STYLES.fontSize}; + font-weight: ${BOX_STYLES.fontWeight}; @media (max-width: 500px) { - width: 50px; - height: 25px; + width: ${BOX_DIMENSIONS.mobile.width}; + height: ${BOX_DIMENSIONS.mobile.height}; } `;As per coding guidelines
🧹 Nitpick comments (3)
frontend/src/pages/MainPage/MainPage.styles.ts (1)
25-25: 간격 값을 명명된 상수로 추출하는 것을 고려하세요.
gap값(20px,6px)과grid-template-columns의minmax(0, 1fr)패턴이 사용되고 있습니다. 현재 값들은 의도가 명확하지만, 프로젝트 전반에서 일관된 간격 체계를 유지하려면 이러한 간격 값을 명명된 상수로 추출하는 것이 좋습니다.예시:
+const CARD_LIST_SPACING = { + desktop: '20px', + mobile: '6px', +} as const; + export const CardList = styled.div` display: grid; width: 100%; max-width: 100%; - gap: 20px; + gap: ${CARD_LIST_SPACING.desktop}; margin-top: 50px; ... @media (max-width: 500px) { - gap: 6px; + gap: ${CARD_LIST_SPACING.mobile}; margin-top: 16px; } `;As per coding guidelines
Also applies to: 31-31, 41-41
frontend/src/components/ClubLogo/ClubLogo.tsx (2)
10-19: 매직 넘버를 명명된 상수로 교체하세요.
presets객체 내의width,height,radius값들이 하드코딩되어 있습니다. 코딩 가이드라인에 따라 이러한 값들을 명명된 상수로 추출하여 일관성과 유지보수성을 높이세요.다음과 같이 리팩토링하세요:
+const LOGO_DIMENSIONS = { + main: { + desktop: { width: '55px', height: '55px' }, + mobile: { width: '50px', height: '50px' }, + }, + detail: { + desktop: { width: '80px', height: '80px' }, + mobile: { width: '50px', height: '50px' }, + }, +} as const; + +const LOGO_RADIUS = { + small: '6px', + large: '10px', +} as const; + const presets = { main: { - desktop: { width: '55px', height: '55px', radius: '6px' }, - mobile: { width: '50px', height: '50px', radius: '6px' }, + desktop: { ...LOGO_DIMENSIONS.main.desktop, radius: LOGO_RADIUS.small }, + mobile: { ...LOGO_DIMENSIONS.main.mobile, radius: LOGO_RADIUS.small }, }, detail: { - desktop: { width: '80px', height: '80px', radius: '10px' }, - mobile: { width: '50px', height: '50px', radius: '6px' }, + desktop: { ...LOGO_DIMENSIONS.detail.desktop, radius: LOGO_RADIUS.large }, + mobile: { ...LOGO_DIMENSIONS.detail.mobile, radius: LOGO_RADIUS.small }, }, };As per coding guidelines
29-29: 매직 넘버를 명명된 상수로 교체하세요.배경색(
'#efefef')과 반응형 브레이크포인트(500px)가 하드코딩되어 있습니다. 프로젝트 전반에서 일관성을 유지하려면 이러한 값들을 명명된 상수로 추출하세요.다음과 같이 리팩토링하세요:
+const LOGO_STYLES = { + backgroundColor: '#efefef', + mobileBreakpoint: '500px', +} as const; + const StyledClubLogo = styled.div<{ $variant: LogoVariant; $imageSrc?: string; }>` ${({ $variant, $imageSrc }) => css` width: ${presets[$variant].desktop.width}; height: ${presets[$variant].desktop.height}; border-radius: ${presets[$variant].desktop.radius}; - background-color: #efefef; + background-color: ${LOGO_STYLES.backgroundColor}; background-size: cover; background-position: center; background-image: ${$imageSrc ? `url(${$imageSrc})` : 'none'}; `} - @media (max-width: 500px) { + @media (max-width: ${LOGO_STYLES.mobileBreakpoint}) { ${({ $variant }) => css` width: ${presets[$variant].mobile.width}; height: ${presets[$variant].mobile.height}; border-radius: ${presets[$variant].mobile.radius}; `} } `;As per coding guidelines
Also applies to: 35-35
📜 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(2 hunks)frontend/src/components/ClubStateBox/ClubStateBox.tsx(1 hunks)frontend/src/pages/MainPage/MainPage.styles.ts(2 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/ClubStateBox/ClubStateBox.tsxfrontend/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/ClubStateBox/ClubStateBox.tsxfrontend/src/components/ClubLogo/ClubLogo.tsx
🧠 Learnings (1)
📚 Learning: 2025-07-19T05:09:10.702Z
Learnt from: CR
PR: Moadong/moadong#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
suhyun113
left a comment
suhyun113
left a comment
There was a problem hiding this comment.
바뀐 디자인 아주 이쁘네여ㅕ
디자인 수정 수고하셨습니다~👍
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (2)
frontend/src/components/ClubStateBox/ClubStateBox.tsx (2)
7-21: 색상 값들을 명명된 상수로 교체하세요.색상 값들이 여전히 하드코딩되어 있습니다. 이전 리뷰에서 지적된 사항이 아직 해결되지 않았습니다. 코딩 가이드라인에 따라 이러한 색상 값을 테마 또는 명명된 상수로 추출하여 일관성과 유지보수성을 높이세요.
As per coding guidelines
29-40: 크기 및 브레이크포인트 값을 명명된 상수로 교체하세요.width, height, 브레이크포인트 값들이 여전히 하드코딩되어 있습니다. 이전 리뷰에서 지적된 사항이 아직 해결되지 않았습니다. 코딩 가이드라인에 따라 이러한 매직 넘버를 명명된 상수로 추출하세요.
As per coding guidelines
🧹 Nitpick comments (4)
frontend/src/pages/MainPage/components/Banner/Banner.styles.ts (1)
15-17: 브레이크포인트와 패딩 값을 명명된 상수로 교체하세요.하드코딩된 브레이크포인트(
1280px)와 패딩 값(20px)이 프로젝트 전반에 걸쳐 반복적으로 사용되고 있습니다. 코딩 가이드라인에 따라 이러한 값들을 중앙 집중화된 상수로 추출하여 일관성과 유지보수성을 높이세요.다음과 같이 리팩토링할 수 있습니다:
+// 프로젝트 공통 상수 파일에 정의 (예: src/styles/breakpoints.ts) +export const BREAKPOINTS = { + TABLET: 1280, + MOBILE: 500, +} as const; + +export const SPACING = { + PADDING_HORIZONTAL: '20px', + PADDING_HORIZONTAL_SMALL: '10px', +} as const; // Banner.styles.ts +import { BREAKPOINTS, SPACING } from '@/styles/constants'; + @media (max-width: ${BREAKPOINTS.TABLET}px) { - padding: 0 20px; + padding: 0 ${SPACING.PADDING_HORIZONTAL}; }As per coding guidelines
frontend/src/pages/MainPage/MainPage.styles.ts (3)
7-9: 브레이크포인트와 패딩 값을 명명된 상수로 교체하세요.하드코딩된 브레이크포인트(
1280px)와 패딩 값(20px)이 Banner.styles.ts와 동일하게 반복 사용되고 있습니다. 코딩 가이드라인에 따라 프로젝트 전체에서 공유할 수 있는 중앙 집중화된 상수로 추출하세요.As per coding guidelines
28-28: 간격 값을 명명된 상수로 교체하세요.CardList의
gap값(20px)이 하드코딩되어 있습니다. 코딩 가이드라인에 따라 디자인 시스템의 일부로 명명된 상수로 추출하세요.다음과 같이 리팩토링할 수 있습니다:
+// 프로젝트 공통 상수 파일에 정의 +export const SPACING = { + CARD_GAP_DESKTOP: '20px', + CARD_GAP_MOBILE: '6px', +} as const; +import { SPACING } from '@/styles/constants'; + - gap: 20px; + gap: ${SPACING.CARD_GAP_DESKTOP};As per coding guidelines
44-44: 모바일 간격 값을 명명된 상수로 교체하세요.모바일 환경에서의
gap값(6px)도 하드코딩되어 있습니다. Line 28의 데스크탑 gap과 함께 명명된 상수로 추출하세요.As per 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 (4)
frontend/src/components/ClubLogo/ClubLogo.tsx(2 hunks)frontend/src/components/ClubStateBox/ClubStateBox.tsx(1 hunks)frontend/src/pages/MainPage/MainPage.styles.ts(3 hunks)frontend/src/pages/MainPage/components/Banner/Banner.styles.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- frontend/src/components/ClubLogo/ClubLogo.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/ClubStateBox/ClubStateBox.tsxfrontend/src/pages/MainPage/components/Banner/Banner.styles.tsfrontend/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/ClubStateBox/ClubStateBox.tsx
🧠 Learnings (1)
📚 Learning: 2025-07-19T05:09:10.702Z
Learnt from: CR
PR: Moadong/moadong#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
🔇 Additional comments (1)
frontend/src/pages/MainPage/MainPage.styles.ts (1)
34-34: LGTM! 그리드 오버플로우 방지를 위한 좋은 개선입니다.
minmax(0, 1fr)로 변경하여 그리드 아이템이 컨테이너를 넘치는 것을 방지하는 모범 사례를 적용했습니다. 이는 긴 텍스트나 큰 컨텐츠가 레이아웃을 깨뜨리는 것을 방지합니다.
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (5)
frontend/src/components/ClubStateBox/ClubStateBox.tsx (1)
50-67: 남은 매직 넘버를 상수로 추출하세요.
border-radius: 8px(Line 57)와font-size: 0.75rem(Line 60)가 여전히 하드코딩되어 있습니다. 코딩 가이드라인에 따라 이러한 값들도 명명된 상수로 추출하세요.다음과 같이 리팩토링할 수 있습니다:
const BOX_DIMENSIONS = { desktop: { width: '66px', height: '28px', }, mobile: { width: '50px', height: '25px', }, } as const; +const BOX_STYLES = { + borderRadius: '8px', + fontSize: '0.75rem', +} as const; + const StyledBox = styled.div<{ $bgColor: string; $textColor: string }>` display: flex; justify-content: center; align-items: center; white-space: nowrap; width: ${BOX_DIMENSIONS.desktop.width}; height: ${BOX_DIMENSIONS.desktop.height}; - border-radius: 8px; + border-radius: ${BOX_STYLES.borderRadius}; background-color: ${({ $bgColor }) => $bgColor}; color: ${({ $textColor }) => $textColor}; - font-size: 0.75rem; + font-size: ${BOX_STYLES.fontSize}; font-weight: 500; @media (max-width: 500px) { width: ${BOX_DIMENSIONS.mobile.width}; height: ${BOX_DIMENSIONS.mobile.height}; } `;As per coding guidelines
frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts (4)
3-38: CardContainer의 매직 넘버를 상수로 추출하세요.
border-radius: 20px(Line 9),padding: 20px(Line 10),gap: 16px(Line 13) 값이 하드코딩되어 있습니다. 코딩 가이드라인에 따라 이러한 값들을 명명된 상수로 추출하세요.다음과 같이 리팩토링할 수 있습니다:
+const CARD_STYLES = { + borderRadius: '20px', + padding: '20px', + gap: '16px', +} as const; + const CardContainer = styled.div<{ $state: string; $isClicked: boolean; }>` display: flex; flex-direction: column; - border-radius: 20px; - padding: 20px; + border-radius: ${CARD_STYLES.borderRadius}; + padding: ${CARD_STYLES.padding}; background-color: #fff; width: 100%; - gap: 16px; + gap: ${CARD_STYLES.gap};As per coding guidelines
45-49: ClubProfile의 gap을 상수로 추출하세요.
gap: 20px(Line 48)가 하드코딩되어 있습니다. 명명된 상수로 추출하세요.+const PROFILE_GAP = '20px'; + const ClubProfile = styled.div` display: flex; align-items: center; - gap: 20px; + gap: ${PROFILE_GAP}; `;As per coding guidelines
62-67: StateBoxTagContainer의 gap을 상수로 추출하세요.
gap: 20px(Line 66)가 하드코딩되어 있습니다. 명명된 상수로 추출하세요.+const STATE_TAG_GAP = '20px'; + export const StateBoxTagContainer = styled.div` display: flex; flex-direction: row; align-items: center; - gap: 20px; + gap: ${STATE_TAG_GAP}; `;As per coding guidelines
69-77: TagsContainer의 gap을 상수로 추출하세요.데스크톱/모바일 gap 값(Line 71, 75)이 하드코딩되어 있습니다. 명명된 상수로 추출하세요.
+const TAGS_GAP = { + desktop: '5px', + mobile: '6px', +} as const; + const TagsContainer = styled.div` display: flex; - gap: 5px; + gap: ${TAGS_GAP.desktop}; flex-wrap: wrap; @media (max-width: 500px) { - gap: 6px; + gap: ${TAGS_GAP.mobile}; } `;As per 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 (4)
frontend/src/components/ClubStateBox/ClubStateBox.tsx(1 hunks)frontend/src/components/ClubTag/ClubTag.tsx(1 hunks)frontend/src/pages/MainPage/MainPage.styles.ts(3 hunks)frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- frontend/src/pages/MainPage/MainPage.styles.ts
🧰 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/pages/MainPage/components/ClubCard/ClubCard.styles.tsfrontend/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
PR: Moadong/moadong#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/pages/MainPage/components/ClubCard/ClubCard.styles.tsfrontend/src/components/ClubStateBox/ClubStateBox.tsx
🔇 Additional comments (2)
frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts (2)
51-55: LGTM!새로운 ClubInfo 컨테이너가 적절하게 추가되어 클럽 정보를 그룹화합니다.
79-98: LGTM!INTRODUCTION_MARGIN 상수가 적절하게 추가되어 반응형 여백을 관리합니다. 구조가 명확하고 다른 상수들과 일관성을 유지합니다.
- borderRadius, padding, gap 상수화
…://github.com/Moadong/moadong into feature/#755-main-page-card-design-v2-MOA-258
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts (1)
75-83: 매직 넘버를 명명된 상수로 교체하세요.gap 값들이 하드코딩되어 있습니다. 데스크톱/모바일 간격을 명명된 상수로 추출하세요.
+const TAGS_GAP = { + desktop: '5px', + mobile: '6px', +} as const; + const TagsContainer = styled.div` display: flex; - gap: 5px; + gap: ${TAGS_GAP.desktop}; flex-wrap: wrap; @media (max-width: 500px) { - gap: 6px; + gap: ${TAGS_GAP.mobile}; } `;As per coding guidelines
🧹 Nitpick comments (1)
frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts (1)
85-92: 구조 단순화를 고려하세요.INTRODUCTION_MARGIN이 제대로 구현되었지만, 중첩 구조를 단순화할 수 있습니다.
다음과 같이 단순화할 수 있습니다:
const INTRODUCTION_MARGIN = { - desktop: { - margin: '10px 0px 0px 0px', - }, - mobile: { - margin: '6px 0px 0px 0px', - }, + desktop: '10px 0px 0px 0px', + mobile: '6px 0px 0px 0px', } as const;그리고 사용처도 업데이트:
const Introduction = styled.p` font-size: 0.875rem; - margin: ${INTRODUCTION_MARGIN.desktop.margin}; + margin: ${INTRODUCTION_MARGIN.desktop}; color: rgba(129, 129, 129, 1); line-height: 16px; white-space: nowrap; @media (max-width: 500px) { - margin: ${INTRODUCTION_MARGIN.mobile.margin}; + margin: ${INTRODUCTION_MARGIN.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 (1)
frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts(2 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)
📚 Learning: 2025-07-19T05:09:10.702Z
Learnt from: CR
PR: Moadong/moadong#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
🔇 Additional comments (4)
frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts (4)
3-7: 잘 구현되었습니다!매직 넘버를 명명된 상수로 추출한 것은 코딩 가이드라인을 잘 따른 좋은 개선입니다.
13-20: LGTM!추출된 상수를 올바르게 적용했으며, 불필요한 height 제거와 width: 100% 추가로 레이아웃이 개선되었습니다.
57-61: LGTM!새로운 ClubInfo 컴포넌트가 깔끔하게 구현되었습니다.
94-104: LGTM!Introduction 컴포넌트가 추출된 상수를 올바르게 사용하고 있으며, 반응형 마진이 적절하게 적용되었습니다.
lepitaaar
left a comment
lepitaaar
left a comment
There was a problem hiding this comment.
새로운 페이지 디자인 좋네요~!! 수고하셨습니다
css 값들 상수화 시키니 가독성이 증가되는거 같네요
66px일때 자유태그가 내려가는 사진 첨부해주시면 이해하는데 더욱 도움될꺼같아요!
| `} | ||
|
|
||
| @media (max-width: 480px) { | ||
| @media (max-width: 500px) { |
There was a problem hiding this comment.
자주쓰는 미디어쿼리기준 상수화시키는게 필요해보이네요
There was a problem hiding this comment.
이거 반응형 처리 styles/mediaQuery.ts가 준비되어있습니당
${media.mobile} {
// 500px 이하 로직
}
| @@ -1,44 +1,69 @@ | |||
| import styled from 'styled-components'; | |||
|
|
|||
| const STATE_COLORS = { | |||
There was a problem hiding this comment.
아래 stateStyles와 합쳐도될꺼같은데 분리했을때의 이점이 있을까요?
| <Styled.StateBoxTagContainer> | ||
| <ClubStateBox state={club.recruitmentStatus} /> | ||
| <Styled.TagsContainer> | ||
| <ClubTag key={`category-${club.id}`} type={club.category} /> |
seongwon030
deleted the
feature/#755-main-page-card-design-v2-MOA-258
branch
4 participants
#️⃣연관된 이슈
📝작업 내용
배포주소
모바일
모바일 화면 기준 카드가 3개에서 5개로 늘어남을 확인했습니다.
중점적으로 리뷰받고 싶은 부분(선택)
논의하고 싶은 부분(선택)
피그마에서 클럽로고가 66px인데 이러면 자유태그가 아래로 내려갑니다. 그래서 기존 크기인 55px로 유지했습니다.
🫡 참고사항
Summary by CodeRabbit
스타일
리팩터