[feature] 관리자가 관리 중인 동아리 정보를 헤더에 표시하기 위한 AdminProfile 컴포넌트 추가 #845
Conversation
oesnuj
requested review from
lepitaaar,
seongje973,
seongwon030 and
suhyun113
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning
|
| 계층 / 파일 | 변경 요약 |
|---|---|
스타일 컴포넌트 추가 frontend/src/components/common/Header/Header.styles.ts |
AdminProfileContainer, AdminProfileText, AdminProfileImage 3개의 스타일 컴포넌트 신규 추출 및 내보내기 |
헤더 구조 리팩토링 frontend/src/components/common/Header/Header.tsx |
AdminProfile 컴포넌트 import 추가 및 통합; isAdminPage 조건에 따라 AdminProfile 또는 SearchBox 렌더링; MenuButton을 관리자 페이지에서만 숨김 |
관리자 프로필 컴포넌트 frontend/src/components/common/Header/admin/AdminProfile.tsx |
신규 파일: useAdminClubContext와 useGetClubDetail를 활용하여 동아리명 및 로고를 표시하는 AdminProfile 컴포넌트 |
코드 리뷰 난이도 평가
🎯 2 (단순) | ⏱️ ~12분
- 검토 포인트:
AdminProfile.tsx에서 useAdminClubContext 및 useGetClubDetail 훅의 올바른 사용 확인- Header.tsx 조건부 렌더링 로직의 정확성 검증 (isAdminPage 플래그 처리)
- 스타일 컴포넌트의 반응형 디자인 및 기존 미디어 쿼리 호환성 확인
연관 이슈
- MOA-325: 본 PR이 "관리자 헤더에 동아리명 및 프로필 섹션 추가" 목표를 직접 구현합니다.
제안 라벨
✨ Feature
제안 리뷰어
- seongwon030
- lepitaaar
- seongje973
Pre-merge checks and finishing touches
✅ Passed checks (5 passed)
| Check name | Status | Explanation |
|---|---|---|
| Title check | ✅ Passed | 제목은 AdminProfile 컴포넌트 추가를 통해 관리자가 관리 중인 동아리 정보를 헤더에 표시하는 주요 변경사항을 명확하고 구체적으로 설명하고 있습니다. |
| Linked Issues check | ✅ Passed | 풀 리퀘스트의 변경사항들이 MOA-325의 목표(관리자 헤더에 동아리명 및 프로필 섹션 추가)를 충족합니다. AdminProfile 컴포넌트가 추가되었고, Header 컴포넌트가 수정되어 관리자 페이지에서 동아리 정보가 표시됩니다. |
| Out of Scope Changes check | ✅ Passed | 모든 변경사항이 관리자 헤더에 동아리 정보를 표시하는 범위 내에 있으며, 스타일 컴포넌트, AdminProfile 컴포넌트 추가, Header 구조 리팩토링 등이 모두 해당 목표를 지원합니다. |
| 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
feature/#843-admin-header-profile-MOA-325
Tip
📝 Customizable high-level summaries are now available!
You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.
- Provide custom instructions to shape the summary (bullet lists, tables, contributor stats, etc.).
- Use
high_level_summary_in_walkthroughto move the summary from the description to the walkthrough section.
Example:
"Create a concise high-level summary as a bullet-point list. Then include a Markdown table showing lines added and removed by each contributing author."
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.
lepitaaar
left a comment
lepitaaar
left a comment
There was a problem hiding this comment.
수고하셨습니다!~ 작업잘해주신것 같습니다
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
frontend/src/components/common/Header/admin/AdminProfile.tsx (2)
6-9: 로딩 및 에러 상태 처리 고려현재
useGetClubDetail훅에서data만 구조 분해하고 있어, 데이터 로딩 중이거나 에러 발생 시 사용자에게 동일한 폴백("관리자님 환영합니다!")이 표시됩니다. 더 나은 사용자 경험을 위해 로딩 상태나 에러 상태를 표시하는 것을 고려해보세요.예시:
- const { data: clubDetail } = useGetClubDetail(clubId || ''); + const { data: clubDetail, isLoading, isError } = useGetClubDetail(clubId || ''); const { name, logo } = clubDetail || {}; + if (isLoading) { + return <Styled.AdminProfileContainer>로딩 중...</Styled.AdminProfileContainer>; + } + + if (isError) { + return <Styled.AdminProfileContainer>동아리 정보를 불러올 수 없습니다.</Styled.AdminProfileContainer>; + }
16-19: 접근성 개선: 동적 alt 텍스트 사용이미지의
alt속성이 정적인 "관리자 프로필 이미지"로 고정되어 있습니다. 동아리 이름을 포함한 동적인 설명을 제공하면 스크린 리더 사용자에게 더 유용한 정보를 제공할 수 있습니다.<Styled.AdminProfileImage src={logo || DefaultMoadongLogo} - alt='관리자 프로필 이미지' + alt={`${name || '관리자'} 동아리 로고`} />
📜 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/common/Header/Header.styles.ts(1 hunks)frontend/src/components/common/Header/Header.tsx(3 hunks)frontend/src/components/common/Header/admin/AdminProfile.tsx(1 hunks)
🧰 Additional context used
🧠 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')는 로그인 기능 구현 후 동적으로 가져오는 방식으로 수정될 예정입니다.
📚 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/components/common/Header/admin/AdminProfile.tsx
🧬 Code graph analysis (2)
frontend/src/components/common/Header/Header.styles.ts (1)
frontend/src/styles/mediaQuery.ts (1)
media(8-14)
frontend/src/components/common/Header/admin/AdminProfile.tsx (2)
frontend/src/context/AdminClubContext.tsx (1)
useAdminClubContext(39-46)frontend/src/hooks/queries/club/useGetClubDetail.ts (1)
useGetClubDetail(6-20)
🔇 Additional comments (4)
frontend/src/components/common/Header/Header.styles.ts (2)
174-178: LGTM!AdminProfile 컨테이너의 레이아웃 구성이 적절합니다.
180-187: LGTM!모바일에서 텍스트를 숨겨 공간을 절약하는 반응형 디자인이 잘 구현되었습니다.
frontend/src/components/common/Header/Header.tsx (2)
9-9: LGTM!AdminProfile 컴포넌트 import와 관리자 페이지 판별 로직이 적절합니다.
Also applies to: 18-18
78-90: LGTM!관리자 페이지와 일반 페이지 간의 조건부 렌더링 로직이 명확하고 올바르게 구현되었습니다. MenuButton을 관리자 페이지에서 제외하고, AdminProfile과 SearchBox를 적절히 전환하는 구조가 잘 설계되었습니다.
| export const AdminProfileImage = styled.img` | ||
| width: 40px; | ||
| height: auto; | ||
| border-radius: 50%; | ||
| `; |
There was a problem hiding this comment.
원형 이미지 비율 깨짐 방지 필요
height: auto를 사용하면 정사각형이 아닌 이미지의 경우 원형이 아닌 타원형으로 표시됩니다. 완벽한 원형을 유지하려면 height를 명시적으로 지정하고 object-fit: cover를 추가해야 합니다.
export const AdminProfileImage = styled.img`
width: 40px;
- height: auto;
+ height: 40px;
border-radius: 50%;
+ object-fit: cover;
`;📝 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.
| export const AdminProfileImage = styled.img` | |
| width: 40px; | |
| height: auto; | |
| border-radius: 50%; | |
| `; | |
| export const AdminProfileImage = styled.img` | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| object-fit: cover; | |
| `; |
🤖 Prompt for AI Agents
In frontend/src/components/common/Header/Header.styles.ts around lines 189 to
193, the AdminProfileImage uses height: auto which causes non-square images to
render as ovals; change the styles to set an explicit square height equal to
width (e.g., height: 40px) and add object-fit: cover so images are cropped to
fill the circle while preserving aspect ratio and keep border-radius: 50% to
maintain the circular shape.
seongwon030
left a comment
seongwon030
left a comment
There was a problem hiding this comment.
사용자와 관리자 헤더 통일 좋아요~ 문구 추가한 것도 더 친근감 있네요
#️⃣연관된 이슈
#843
📝작업 내용
관리자 페이지 헤더에 현재 관리 중인 동아리 정보(이름, 로고)를 표시하도록 개선했습니다.
변경 사항
1. AdminProfile 컴포넌트 추가
2. Header 컴포넌트 수정
주요 기능
중점적으로 리뷰받고 싶은 부분
Header/admin/폴더에 분리한 구조가 적절한지🫡 참고사항
Summary by CodeRabbit
릴리스 노트