[feat] 마이페이지 관리자 카드 분리 및 채팅 미확인 배지 반영

[ff1451]

✨ 요약

- 하단 네비게이션 채팅 탭에 읽지 않은 메시지 개수 배지를 추가했습니다.
- 비로그인 상태에서는 읽지 않은 채팅 개수 조회가 동작하지 않도록 보완했습니다.
- 사용자 카드와 관리자 카드를 분리해 관리자 페이지에서 전용 `ManagerInfoCard`를 사용하도록 정리했습니다.

😎 해결한 이슈

• close [feat] 마이페이지 관리자 카드 분리 및 채팅 미확인 배지 반영 #250

✅ 검증

• pnpm lint

Summary by CodeRabbit

릴리스 노트

• 새로운 기능

  • 하단 네비게이션 채팅 탭에 읽지 않은 메시지 개수 배지 표시 (최대 '99+')
  • 관리자 페이지의 새로운 정보 카드 컴포넌트 추가

• 버그 수정

  • 읽지 않은 메시지 카운트 조회 시 인증 상태 확인 추가

• 개선사항

  • 프로필 페이지 사용자 정보 카드 UI 간소화

[coderabbitai]

Walkthrough

사용자 정보 카드와 관리자 카드를 역할별로 분리하고, 하단 네비게이션 채팅 탭에 미읽음 메시지 배지를 추가했습니다. UserInfoCard는 프로필 진입 기능만 수행하도록 단순화되었고, ManagerInfoCard는 관리자 모드('manager')와 상세 모드('detail')를 지원하는 새 컴포넌트로 생성되었습니다. Manager 페이지들에서 UserInfoCard → ManagerInfoCard 렌더링으로 변경되었고, useUnreadChatCount에 인증 상태 조건을 추가하여 비로그인 상태에서 불필요한 폴링을 방지했습니다.

Possibly related PRs

• [refactor] 관리자 페이지 리디자인 반영 #187: Manager 페이지들(ManagedApplicationList, ManagedClubDetail, ManagedMemberList, ManagedRecruitment)과 ManagerInfoCard 추가/수정 로직이 직접 중복됩니다.
• feat: 승인됨 탭 추가 #139: ManagedApplicationList, ManagedMemberList 등 Manager 영역 페이지 컴포넌트 변경이 겹칩니다.
• [feat] 메인화면 동아리 카드 디자인 수정 반영 #242: BottomNav/index.tsx 채팅 아이콘 자산 변경과 같은 파일 수정으로 직접 관련 있습니다.

🚥 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 제목이 변경 사항의 핵심(관리자 카드 분리 및 채팅 미확인 배지)을 명확하게 요약하고 있습니다.
Linked Issues check	✅ Passed	모든 링크된 이슈의 목표가 구현되었습니다: UserInfoCard 단순화, ManagerInfoCard 분리, 채팅 배지 추가, 비로그인 상태 처리.
Out of Scope Changes check	✅ Passed	모든 변경사항이 #250 이슈의 범위 내에 있으며 추가적인 범위 외 변경은 없습니다.
Description check	✅ Passed	PR 목표와 변경사항이 명확하게 문서화되어 있고, 이슈 #250과 일치합니다.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 250-feat-마이페이지-관리자-카드-분리-및-채팅-배지-반영

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (2)

src/components/layout/BottomNav/index.tsx (1)

71-71: Tailwind v4 drop-shadow 유틸리티 사용 고려.

filter-[drop-shadow(...)] 대신 Tailwind v4의 drop-shadow-* 유틸리티 클래스 사용을 권장합니다.

♻️ 제안

-          className="pointer-events-none absolute top-[-26px] left-[-11px] z-10 h-[54px] w-[65px] max-w-none filter-[drop-shadow(0_3px_10px_rgba(0,0,0,0.10))]"
+          className="pointer-events-none absolute top-[-26px] left-[-11px] z-10 h-[54px] w-[65px] max-w-none drop-shadow-[0_3px_10px_rgba(0,0,0,0.10)]"

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/layout/BottomNav/index.tsx` at line 71, The JSX in the
BottomNav component uses an inline arbitrary filter class
filter-[drop-shadow(0_3px_10px_rgba(0,0,0,0.10))] which should be replaced with
Tailwind v4 drop-shadow utilities for consistency and better performance; update
the className on the element in the BottomNav component (the JSX that currently
contains filter-[drop-shadow(0_3px_10px_rgba(0,0,0,0.10))]) to use an
appropriate drop-shadow-* utility (or compose existing utilities) that matches
the same offset/blur/opacity, ensuring you remove the arbitrary filter class and
test visual parity.

src/pages/User/MyPage/components/ManagerInfoCard.tsx (1)

47-49: 타이포그래피는 토큰 유틸 클래스 기준으로 통일하는 것이 좋습니다.

현재 text-[16px], text-[11px], text-xs 같은 커스텀 크기가 섞여 있어요. 이 파일은 신규 추가라 지금 맞춰두면 이후 유지보수가 쉬워집니다.

예시 diff

- <div className="text-[16px] leading-[1.6] font-bold text-indigo-700">{currentClub?.name} 정보</div>
- <div className="text-[11px] leading-[15px] font-medium text-indigo-300">
+ <div className="text-h2 text-indigo-700">{currentClub?.name} 정보</div>
+ <div className="text-cap1 text-indigo-300">

- <div className="mt-1.5 text-xs leading-3.5 font-medium text-indigo-300">
+ <div className="text-sub3 mt-1.5 font-medium text-indigo-300">

As per coding guidelines, **/*.{ts,tsx}: Use typography tokens (text-h1 through text-h5, text-sub1 through text-sub4, text-body1 through text-body3, text-cap1 through text-cap2) from src/styles/theme.css.

Also applies to: 101-103

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/User/MyPage/components/ManagerInfoCard.tsx` around lines 47 - 49,
Replace ad-hoc typography sizes in ManagerInfoCard (the div rendering
{currentClub?.name} and the div rendering {myInfo.studentNumber} /
{myInfo.universityName} / {currentClub?.position}, plus any similar occurrences
around lines noted) with the project's typography token classes from
src/styles/theme.css (e.g., text-h1..text-h5, text-sub1..text-sub4,
text-body1..text-body3, text-cap1..text-cap2). Identify the JSX elements inside
the ManagerInfoCard component that use className="text-[16px]" or "text-[11px]"
(and any "text-xs") and swap those to the appropriate semantic token (choose the
closest matching token for heading vs. meta/body) so the component consistently
uses typography tokens rather than custom pixel classes.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/components/layout/BottomNav/index.tsx`:
- Line 71: The JSX in the BottomNav component uses an inline arbitrary filter
class filter-[drop-shadow(0_3px_10px_rgba(0,0,0,0.10))] which should be replaced
with Tailwind v4 drop-shadow utilities for consistency and better performance;
update the className on the element in the BottomNav component (the JSX that
currently contains filter-[drop-shadow(0_3px_10px_rgba(0,0,0,0.10))]) to use an
appropriate drop-shadow-* utility (or compose existing utilities) that matches
the same offset/blur/opacity, ensuring you remove the arbitrary filter class and
test visual parity.

In `@src/pages/User/MyPage/components/ManagerInfoCard.tsx`:
- Around line 47-49: Replace ad-hoc typography sizes in ManagerInfoCard (the div
rendering {currentClub?.name} and the div rendering {myInfo.studentNumber} /
{myInfo.universityName} / {currentClub?.position}, plus any similar occurrences
around lines noted) with the project's typography token classes from
src/styles/theme.css (e.g., text-h1..text-h5, text-sub1..text-sub4,
text-body1..text-body3, text-cap1..text-cap2). Identify the JSX elements inside
the ManagerInfoCard component that use className="text-[16px]" or "text-[11px]"
(and any "text-xs") and swap those to the appropriate semantic token (choose the
closest matching token for heading vs. meta/body) so the component consistently
uses typography tokens rather than custom pixel classes.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 9a0e7af4-05ef-44d3-987c-fd9fa1d891a3

📥 Commits

Reviewing files that changed from the base of the PR and between 027f479 and d96cbd8.

⛔ Files ignored due to path filters (2)

• src/assets/svg/notifications.svg is excluded by !**/*.svg, !src/assets/** and included by **
• src/assets/svg/unread-notification.svg is excluded by !**/*.svg, !src/assets/** and included by **

📒 Files selected for processing (9)

• src/components/layout/BottomNav/index.tsx
• src/pages/Chat/hooks/useUnreadChatCount.ts
• src/pages/Manager/ManagedApplicationList/index.tsx
• src/pages/Manager/ManagedClubDetail/index.tsx
• src/pages/Manager/ManagedClubList/index.tsx
• src/pages/Manager/ManagedMemberList/index.tsx
• src/pages/Manager/ManagedRecruitment/index.tsx
• src/pages/User/MyPage/components/ManagerInfoCard.tsx
• src/pages/User/MyPage/components/UserInfoCard.tsx

[Copilot]

Pull request overview

마이페이지의 사용자/관리자 카드 역할을 분리하고, 하단 네비게이션의 채팅 탭에 “읽지 않은 메시지 수” 배지를 노출하기 위한 변경입니다. 관리자 관련 화면에서는 전용 ManagerInfoCard를 사용하도록 정리되어, UI 책임이 더 명확해졌습니다.

Changes:

• UserInfoCard를 사용자 프로필 진입용으로 단순화하고, 관리자 전용 ManagerInfoCard를 신규 추가
• 관리자 페이지들에서 기존 UserInfoCard(type=...) 사용을 ManagerInfoCard로 교체
• BottomNav 채팅 탭에 미확인 메시지 배지 표시 + 비로그인 상태에서 unread 조회 비활성화

Reviewed changes

Copilot reviewed 9 out of 11 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/pages/User/MyPage/components/UserInfoCard.tsx	사용자 프로필 카드 UI를 단순화(프로필 이동 중심)
src/pages/User/MyPage/components/ManagerInfoCard.tsx	관리자용 카드/상세 카드 컴포넌트 분리 추가
src/pages/Manager/ManagedRecruitment/index.tsx	관리자 상세 화면에서 ManagerInfoCard(type="detail") 사용
src/pages/Manager/ManagedMemberList/index.tsx	관리자 상세 화면에서 ManagerInfoCard(type="detail") 사용
src/pages/Manager/ManagedClubList/index.tsx	관리자 카드 영역을 ManagerInfoCard로 대체
src/pages/Manager/ManagedClubDetail/index.tsx	관리자 상세 화면에서 ManagerInfoCard(type="detail") 사용
src/pages/Manager/ManagedApplicationList/index.tsx	관리자 상세 화면에서 ManagerInfoCard(type="detail") 사용
src/pages/Chat/hooks/useUnreadChatCount.ts	authStatus 기반으로 unread 조회 활성 조건 보완
src/components/layout/BottomNav/index.tsx	채팅 탭에 unread 배지 추가 및 접근성 라벨 반영
src/assets/svg/unread-notification.svg	알림 아이콘 그래디언트 스타일 반영
src/assets/svg/notifications.svg	알림 아이콘 그래디언트 스타일 반영

Comments suppressed due to low confidence (1)

src/pages/Chat/hooks/useUnreadChatCount.ts:46

• useQuery를 enabled: false로 두더라도 React Query는 기존 캐시된 data를 그대로 반환할 수 있습니다. 현재 구현은 authStatus !== 'authenticated'인 상태(로그아웃 직후/세션 전환/초기 unknown 등)에서도 캐시된 rooms를 기반으로 totalUnreadCount가 0이 아닌 값으로 계산될 수 있어, 비로그인 상태에서 배지가 노출되거나 이전 사용자 값이 잠깐 보이는 문제가 생길 수 있습니다. authStatus !== 'authenticated'일 때는 totalUnreadCount를 강제로 0으로 반환하거나(데이터 무시), 로그인/로그아웃에 따라 queryKey를 사용자 단위로 분리하거나 관련 쿼리를 reset/remove 하도록 보완해 주세요.

  const { data } = useQuery({
    ...chatQueries.rooms(),
    enabled: isEnabled && authStatus === 'authenticated',
    staleTime: UNREAD_CHAT_COUNT_REFETCH_INTERVAL,
    refetchInterval: isEnabled && authStatus === 'authenticated' ? UNREAD_CHAT_COUNT_REFETCH_INTERVAL : false,
  });

  const totalUnreadCount = data?.rooms.reduce((sum, room) => sum + room.unreadCount, 0) ?? 0;

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

ManagerDetailInfoCard에서 화면에 표시할 동아리 정보가 managedClubList.joinedClubs.find(...) 결과(currentClub)에 의존하고 있는데, currentClub가 없으면 텍스트가 비거나 alt가 "undefined 동아리 사진"처럼 렌더링될 수 있습니다(템플릿 리터럴에서 undefined가 문자열로 변환됨). 이미 managedClubQueries.club(clubId) 응답(ManagedClubResponse)에 clubName, position, imageUrl이 포함되어 있으니, 표시/alt에 managedClub.clubName 등을 사용하도록 통일하고 managedClubList 조회 및 currentClub 파생을 제거(또는 최소한 null-safe fallback 처리)해 주세요. 이렇게 하면 불필요한 요청도 줄고 데이터 불일치 가능성도 낮아집니다.