[feature] 동아리 분과별 테마 색상을 커버 이미지 폴백으로 적용한다#1547
Open
suhyun113 wants to merge 4 commits into
Open
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
Warning
|
| Layer / File(s) | Summary |
|---|---|
커버 영역 스타일 업데이트 frontend/src/pages/ClubDetailPage/components/ClubProfileCard/ClubProfileCard.styles.ts |
CoverImage 높이를 220px로 조정하고, 카테고리 색상 $color를 받는 CoverFallback styled component를 추가했습니다. LogoWrapper의 기본 배경색을 colors.gray[100]으로 변경하고 패딩을 3.5px로 증가시켰습니다. |
카테고리 기반 커버 폴백 로직 frontend/src/pages/ClubDetailPage/components/ClubProfileCard/ClubProfileCard.tsx |
ClubProfileCardProps에 선택적 category?: string을 추가하고, TAG_COLORS를 임포트하여 cover가 없을 때 category 기반 색상으로 Styled.CoverFallback을 렌더링하도록 커버 렌더링 분기를 3단계로 변경했습니다(cover 우선 → category 기반 폴백 → 기본 커버). |
카테고리 데이터 전파 frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx |
ClubProfileCard에 clubDetail.category를 category prop으로 전달하도록 호출부를 업데이트했습니다. |
예상 코드 리뷰 노력
🎯 3 (Moderate) | ⏱️ ~20 minutes
관련 이슈
- [feature] MOA-849 동아리 분과별 테마 색상을 커버 이미지 폴백으로 적용한다 #1544: 카테고리별 태그 색상을 커버 이미지 폴백으로 사용하는 로직 구현과 관련 있음 — 동일한 목적의 변경과 연관됩니다.
제안 라벨
🎨 Design
제안 리뷰어
- oesnuj
- seongwon030
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | PR 제목은 변경 사항의 핵심을 명확하게 요약하고 있습니다. 커버 이미지가 없을 때 동아리 분과별 테마 색상을 폴백으로 적용하는 기능을 정확히 설명합니다. |
| Docstring Coverage | ✅ Passed | No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. |
| Linked Issues check | ✅ Passed | Check skipped because no linked issues were found for this pull request. |
| Out of Scope Changes check | ✅ Passed | Check skipped because no linked issues were found for this pull request. |
✏️ Tip: You can configure your own custom pre-merge checks in the settings.
✨ Finishing Touches
📝 Generate docstrings
- Create stacked PR
- Commit on current branch
🧪 Generate unit tests (beta)
- Create PR with unit tests
- Commit unit tests in branch
feature/#1544-club-cover-fallback-color-MOA-849
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.
✅ UI 변경사항 없음
전체 57개 스토리 · 22개 컴포넌트 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@frontend/src/pages/ClubDetailPage/components/ClubProfileCard/ClubProfileCard.styles.ts`:
- Around line 32-38: CoverFallback의 폴백 배경색 기본값이 요구사항과 달라서 colors.gray[400]을 사용하고
있는데, CoverFallback styled component의 $color 기본값을 colors.gray[300]으로 변경해 주세요 (찾을
식별자: CoverFallback in ClubProfileCard.styles.ts); 즉 styled.div<{ $color?: string
}>`... background-color: ${({ $color }) => $color || colors.gray[300]};`로 수정하면
됩니다.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 2702156b-c5c1-41f5-b846-49a2f70d6b18
📒 Files selected for processing (3)
frontend/src/pages/ClubDetailPage/ClubDetailPage.tsxfrontend/src/pages/ClubDetailPage/components/ClubProfileCard/ClubProfileCard.styles.tsfrontend/src/pages/ClubDetailPage/components/ClubProfileCard/ClubProfileCard.tsx
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@frontend/src/pages/ClubDetailPage/components/ClubProfileCard/ClubProfileCard.tsx`:
- Around line 67-73: The JSX uses TAG_COLORS[category] directly which is unsafe
because category is a plain string and may not exist in TAG_COLORS, causing
undefined styling; update the ClubProfileCard render to resolve a safe fallback
color for Styled.CoverFallback by first checking that category is a valid key of
TAG_COLORS (e.g., via typeof TAG_COLORS[category] !== 'undefined' or using
(category as keyof typeof TAG_COLORS)) and use a default color when missing
(e.g., TAG_COLORS.default or a hardcoded fallback), ensuring the conditional
that renders Styled.CoverFallback uses that resolvedColor instead of
TAG_COLORS[category]; keep references to cover, category, TAG_COLORS,
Styled.CoverFallback and defaultCover while making this change.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: add56364-92d0-4d11-9dfc-a65409388f06
📒 Files selected for processing (1)
frontend/src/pages/ClubDetailPage/components/ClubProfileCard/ClubProfileCard.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
#️⃣연관된 이슈
📝작업 내용
1. 커버 이미지 없을 때 분과별 태그 색상 폴백 적용
CoverImage에display: block추가하여 img 하단 여백 제거2. 동아리 프로필 로고 테두리 데스크탑/모바일 분리 적용
모바일~태블릿: 0.5px gray400 테두리 + 4px 흰색 외곽
노트북~데스크탑: 0.5px gray400 테두리 + 4px gray100 외곽 (소개
배경과 통일)
중점적으로 리뷰받고 싶은 부분(선택)
논의하고 싶은 부분(선택)
🫡 참고사항
Summary by CodeRabbit
Summary by CodeRabbit
새로운 기능
개선 사항