feat: 첫 글자 보여주도록 수정

[ff1451]

Summary by CodeRabbit

릴리스 노트

• 스타일
  • 멤버 목록 및 사용자 정보 페이지의 아바타 이미지를 사용자 이름의 첫 글자를 표시하는 원형 플레이스홀더로 변경했습니다.
  • 새로운 아바타 디자인은 모든 관련 페이지에 일관되게 적용됩니다.
  • 기존의 모든 상호작용과 기능은 변경되지 않습니다.

[coderabbitai]

📝 Walkthrough

둘러보기

두 컴포넌트 파일에서 아바타 이미지 요소를 이름의 첫 글자로 표시하는 원형 div 플레이스홀더로 교체했습니다. ManagedMemberList에서 3개, UserInfoCard에서 1개의 img 태그를 주석 처리하고 스타일이 적용된 초기 문자 렌더링으로 변경했습니다. 데이터 흐름, 이벤트 핸들링, 레이아웃 구조는 변경 없이 순수한 UI 표현만 수정되었습니다.

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목이 변경사항의 핵심을 명확하게 반영하고 있습니다. 이미지 대신 첫 글자를 표시하는 변경이 정확히 제목에 나타났습니다.

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

✨ 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 123-feat-기본-이미지-대신-첫-글자-보여주도록-추가

---

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

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

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

30-30: ⚠️ Potential issue | 🟡 Minor

ManagerDetailInfoCard의 클럽 아바타도 첫 글자로 변경 필요

PR에서 사용자 아바타는 첫 글자로 변경했으나, ManagerDetailInfoCard의 클럽 이미지(30줄)는 여전히 <img> 태그를 사용 중입니다. ManagedMemberList에서는 이미 멤버 아바타를 첫 글자로 변경했으므로, 클럽 아바타도 같은 패턴으로 통일하면 좋겠습니다.

🤖 Prompt for AI Agents

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

In `@src/pages/User/MyPage/components/UserInfoCard.tsx` at line 30, In
ManagerDetailInfoCard replace the <img> usage that reads managedClub?.imageUrl
with the same initial-based avatar pattern used in ManagedMemberList: render a
rounded div (matching classes h-12 w-12 rounded-full etc.) that shows the first
character of managedClub?.name (or title) centered, with a fallback background
when imageUrl is missing; ensure you reference managedClub when computing the
initial and remove reliance on src/imageUrl for display so behavior is
consistent with ManagedMemberList.

🧹 Nitpick comments (4)

src/pages/Manager/ManagedMemberList/index.tsx (3)

358-361: 중복 패턴 - 위에서 제안한 컴포넌트 활용

Change Vice President Modal의 아바타도 동일한 패턴입니다. 주석 코드 제거 후 공통 컴포넌트 사용을 권장합니다.

🤖 Prompt for AI Agents

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

In `@src/pages/Manager/ManagedMemberList/index.tsx` around lines 358 - 361, Remove
the commented-out <img> and replace the duplicated inline avatar markup in
ManagedMemberList (the div rendering member.name.charAt(0)) with a shared Avatar
component (e.g., Avatar(props) that accepts name, src, size/className); also
update the Change Vice President Modal to use the same Avatar component so both
places reuse the logic/display (handle fallback to initials when src is missing,
accept className like "h-8 w-8 rounded-full object-cover" and preserve
background/text color behavior).

---

211-214: 주석 처리된 코드 제거 및 Avatar 컴포넌트 추출 권장

주석 처리된 이전 코드를 제거해주세요. 또한, 동일한 아바타 패턴이 파일 내에서 3번 반복되므로 재사용 가능한 컴포넌트로 추출하는 것을 권장합니다.

♻️ Avatar 컴포넌트 추출 제안

// 별도 파일 또는 파일 상단에 추가
interface InitialAvatarProps {
  name: string;
  size?: 'sm' | 'md';
}

function InitialAvatar({ name, size = 'md' }: InitialAvatarProps) {
  const sizeClass = size === 'sm' ? 'h-8 w-8' : 'h-10 w-10';
  return (
    <div className={`flex ${sizeClass} items-center justify-center rounded-full bg-indigo-100 text-indigo-400`}>
      {name.charAt(0) || '?'}
    </div>
  );
}

사용 예시:

-{/* <img className="h-10 w-10 rounded-full object-cover" src={member.imageUrl} alt={member.name} /> */}
-<div className="flex h-10 w-10 items-center justify-center rounded-full bg-indigo-100 text-indigo-400">
-  {member.name.charAt(0)}
-</div>
+<InitialAvatar name={member.name} />

🤖 Prompt for AI Agents

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

In `@src/pages/Manager/ManagedMemberList/index.tsx` around lines 211 - 214, Remove
the commented-out img element in ManagedMemberList and extract the repeated
avatar markup into a reusable component named InitialAvatar (with
InitialAvatarProps and a size prop defaulting to 'md'); replace the three inline
instances that render member.name.charAt(0) with <InitialAvatar
name={member.name} size="..."/> (use 'sm' or 'md' as appropriate) so the avatar
logic is centralized and the old commented code is deleted.

---

306-309: 중복 패턴 - 위에서 제안한 컴포넌트 활용

Transfer President Modal의 아바타도 동일한 패턴입니다. 주석 코드 제거 후 공통 컴포넌트 사용을 권장합니다.

🤖 Prompt for AI Agents

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

In `@src/pages/Manager/ManagedMemberList/index.tsx` around lines 306 - 309, 관리자
목록에서 주석 처리된 img와 현재 직접 만든 초기 문자 블록을 제거하고, 공통 아바타 컴포넌트(예: Avatar)를 사용하도록 교체하세요;
구체적으로 ManagedMemberList 컴포넌트의 member.imageUrl / member.name.charAt(0) 로직을
Avatar에 위임하고, TransferPresidentModal에서도 동일한 Avatar 컴포넌트를 사용하도록 통일하여 중복 패턴을
제거하세요.

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

102-105: 주석 처리된 코드 제거 권장

주석 처리된 이전 코드를 제거해주세요. ManagedMemberList에서 제안한 InitialAvatar 컴포넌트를 공유하면 일관성 있게 사용할 수 있습니다.

♻️ 제안

-{/* <img className="h-12 w-12 rounded-full" src={myInfo.imageUrl} alt="Member Avatar" /> */}
-<div className="flex h-12 w-12 items-center justify-center rounded-full bg-indigo-100 text-indigo-400">
-  {myInfo.name.charAt(0)}
-</div>
+<InitialAvatar name={myInfo.name} size="lg" />

🤖 Prompt for AI Agents

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

In `@src/pages/User/MyPage/components/UserInfoCard.tsx` around lines 102 - 105,
Remove the commented-out img element in UserInfoCard (the line referencing
myInfo.imageUrl) and replace its usage with the shared InitialAvatar component
used by ManagedMemberList to keep avatar rendering consistent; update
UserInfoCard to render <InitialAvatar ...> (passing the same props currently
used in ManagedMemberList, e.g., name or imageUrl) and remove the leftover
comment so all avatar logic is centralized in InitialAvatar.

🤖 Prompt for all review comments with AI agents

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

Outside diff comments:
In `@src/pages/User/MyPage/components/UserInfoCard.tsx`:
- Line 30: In ManagerDetailInfoCard replace the <img> usage that reads
managedClub?.imageUrl with the same initial-based avatar pattern used in
ManagedMemberList: render a rounded div (matching classes h-12 w-12 rounded-full
etc.) that shows the first character of managedClub?.name (or title) centered,
with a fallback background when imageUrl is missing; ensure you reference
managedClub when computing the initial and remove reliance on src/imageUrl for
display so behavior is consistent with ManagedMemberList.

---

Nitpick comments:
In `@src/pages/Manager/ManagedMemberList/index.tsx`:
- Around line 358-361: Remove the commented-out <img> and replace the duplicated
inline avatar markup in ManagedMemberList (the div rendering
member.name.charAt(0)) with a shared Avatar component (e.g., Avatar(props) that
accepts name, src, size/className); also update the Change Vice President Modal
to use the same Avatar component so both places reuse the logic/display (handle
fallback to initials when src is missing, accept className like "h-8 w-8
rounded-full object-cover" and preserve background/text color behavior).
- Around line 211-214: Remove the commented-out img element in ManagedMemberList
and extract the repeated avatar markup into a reusable component named
InitialAvatar (with InitialAvatarProps and a size prop defaulting to 'md');
replace the three inline instances that render member.name.charAt(0) with
<InitialAvatar name={member.name} size="..."/> (use 'sm' or 'md' as appropriate)
so the avatar logic is centralized and the old commented code is deleted.
- Around line 306-309: 관리자 목록에서 주석 처리된 img와 현재 직접 만든 초기 문자 블록을 제거하고, 공통 아바타
컴포넌트(예: Avatar)를 사용하도록 교체하세요; 구체적으로 ManagedMemberList 컴포넌트의 member.imageUrl /
member.name.charAt(0) 로직을 Avatar에 위임하고, TransferPresidentModal에서도 동일한 Avatar
컴포넌트를 사용하도록 통일하여 중복 패턴을 제거하세요.

In `@src/pages/User/MyPage/components/UserInfoCard.tsx`:
- Around line 102-105: Remove the commented-out img element in UserInfoCard (the
line referencing myInfo.imageUrl) and replace its usage with the shared
InitialAvatar component used by ManagedMemberList to keep avatar rendering
consistent; update UserInfoCard to render <InitialAvatar ...> (passing the same
props currently used in ManagedMemberList, e.g., name or imageUrl) and remove
the leftover comment so all avatar logic is centralized in InitialAvatar.