Skip to content

Commit 08adb92

Browse files
sageherbsageherb
committed
refactor(avatar): Avatar 컴포넌트로 아바타 렌더링 통합
- 친구 목록, 친구 요청, 사용자 검색, 갤러리 상세, 홈 화면, 댓글 아이템 등에서 사용하던 개별 <img> 및 폴백 처리 로직을 Avatar 컴포넌트로 일원화 - 중복된 아바타 렌더링 코드를 제거하여 유지보수성과 UI 일관성 개선 - 이미지 로딩 실패 시 Avatar 컴포넌트의 공통 폴백 아이콘이 자동 적용되도록 변경
1 parent f46d2b5 commit 08adb92

6 files changed

Lines changed: 19 additions & 51 deletions

File tree

‎src/features/friends/list/List.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Home, UserMinus2 } from "lucide-react";
22
import { useEffect, useState } from "react";
33

4+
import Avatar from "@/components/Avatar/Avatar";
45
import Button from "@/components/Button/Button";
56
import BevelScrollContainer from "@/components/Container/BevelScrollContainer";
67
import { useAuthStore } from "@/stores/useAuthStore";
@@ -62,12 +63,8 @@ export default function List() {
6263
return (
6364
<li key={friend.id}>
6465
<div className="flex items-center gap-3 p-2 pl-2 select-none">
65-
<div className="shrink-0">
66-
<img
67-
src={profile.avatar_url ?? ""}
68-
alt="프로필 아바타"
69-
className="h-8 w-8 rounded-full object-cover"
70-
/>
66+
<div className="h-8 w-8 shrink-0">
67+
<Avatar src={profile.avatar_url} />
7168
</div>
7269
<div className="flex min-w-0 flex-1 flex-col">
7370
<span className="truncate text-sm font-medium">{profile.nickname}</span>

‎src/features/friends/request/Request.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useEffect, useState } from "react";
22

3+
import Avatar from "@/components/Avatar/Avatar";
34
import Button from "@/components/Button/Button";
45
import BevelScrollContainer from "@/components/Container/BevelScrollContainer";
56
import { useAuthStore } from "@/stores/useAuthStore";
@@ -59,13 +60,8 @@ export default function Request() {
5960
{requests.map((request) => (
6061
<li key={request.id}>
6162
<div className="flex items-center gap-3 p-2 pl-2 select-none">
62-
<div className="shrink-0">
63-
<img
64-
// TODO: 디폴트 아바타 설정
65-
src={request.requester.avatar_url ?? ""}
66-
alt="프로필 아바타"
67-
className="h-8 w-8 rounded-full object-cover"
68-
/>
63+
<div className="h-8 w-8 shrink-0">
64+
<Avatar src={request.requester.avatar_url} />
6965
</div>
7066
<div className="flex min-w-0 flex-1 flex-col">
7167
<span className="truncate text-sm font-medium">

‎src/features/friends/search/Search.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useEffect, useState } from "react";
22

3+
import Avatar from "@/components/Avatar/Avatar";
34
import Button from "@/components/Button/Button";
45
import BevelScrollContainer from "@/components/Container/BevelScrollContainer";
56
import Input from "@/components/Input/Input";
@@ -75,13 +76,8 @@ export default function Search() {
7576
{results.map((Profile) => (
7677
<li key={Profile.auth_id}>
7778
<div className="flex items-center gap-3 p-2 pl-2 select-none">
78-
<div className="shrink-0">
79-
<img
80-
// TODO: 디폴트 아바타 설정
81-
src={Profile.avatar_url!}
82-
alt="프로필 아바타"
83-
className="h-8 w-8 rounded-full object-cover"
84-
/>
79+
<div className="h-8 w-8 shrink-0">
80+
<Avatar src={Profile.avatar_url} />
8581
</div>
8682
<div className="flex min-w-0 flex-1 flex-col">
8783
<span className="truncate text-sm font-medium">{Profile.nickname}</span>

‎src/features/minihome/gallery/GalleryDetailPanel.tsx‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { ChevronLeft, Heart, Send, X } from "lucide-react";
33
import { useEffect, useState } from "react";
44
import { twMerge } from "tailwind-merge";
55

6+
import Avatar from "@/components/Avatar/Avatar";
67
import Button from "@/components/Button/Button";
78
import Input from "@/components/Input/Input";
89
import { useAuthStore } from "@/stores/useAuthStore";
@@ -304,22 +305,13 @@ export default function GalleryDetailPanel({
304305
comments.map((comment) => {
305306
const nickname = comment.author?.nickname ?? "알 수 없음";
306307
const avatar = comment.author?.avatar_url;
307-
const fallbackInitial = nickname.charAt(0);
308308
const body = stringifyCommentContent(comment.content);
309309

310310
return (
311311
<div key={comment.id} className="bevel-default bg-text-invert p-3">
312312
<div className="flex items-start gap-3">
313313
<div className="bevel-default bg-surface text-primary flex h-10 w-10 items-center justify-center overflow-hidden">
314-
{avatar ? (
315-
<img
316-
src={avatar}
317-
alt={`${nickname} avatar`}
318-
className="h-full w-full object-cover"
319-
/>
320-
) : (
321-
fallbackInitial
322-
)}
314+
<Avatar src={avatar} />
323315
</div>
324316
<div className="flex-1">
325317
<div className="text-muted mb-1 flex items-center justify-between">

‎src/features/minihome/home/HomePage.tsx‎

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import dayjs from "dayjs";
2-
import { MessageCircle, UserRound, Star } from "lucide-react";
2+
import { MessageCircle, Star } from "lucide-react";
33
import { useEffect, useState, type Dispatch, type SetStateAction } from "react";
44
import { twMerge } from "tailwind-merge";
55

6+
import Avatar from "@/components/Avatar/Avatar";
67
import { useAuthStore } from "@/stores/useAuthStore";
78
import type { Database } from "@/types/database.types";
89
import type { MiniHomeTabs } from "@/types/minihome.types";
@@ -205,21 +206,12 @@ export default function HomePage({
205206
};
206207

207208
return (
208-
<div className="flex w-[592px] p-3">
209+
<div className="flex p-3">
209210
{/* 왼쪽 프로필 영역 */}
210211
<div className="mr-3 flex w-1/3 flex-col items-center">
211212
{/* 프로필 이미지 */}
212-
<div className="relative">
213-
{avatarUrl ? (
214-
<div className="h-32 w-32 overflow-hidden rounded-full border-4 border-[#B2AAEB]">
215-
<img className="h-full w-full object-cover" src={avatarUrl} alt="" />
216-
</div>
217-
) : (
218-
<div className="bevel-default flex h-32 w-32 items-center justify-center rounded-full">
219-
<UserRound size={48} color="#B2AAEB" />
220-
</div>
221-
)}
222-
</div>
213+
214+
<Avatar src={avatarUrl} />
223215

224216
{/* 이름 */}
225217
<p className="mt-4 text-lg text-[#342b4e]">{nickname}</p>

‎src/features/minihome/post/detail/CommentItem.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import dayjs from "dayjs";
22
import "dayjs/locale/ko";
33
import relativeTime from "dayjs/plugin/relativeTime";
4-
import { Trash, User } from "lucide-react";
4+
import { Trash } from "lucide-react";
55

6+
import Avatar from "@/components/Avatar/Avatar";
67
import { useAuthUser } from "@/hooks/useAuthUser";
78
import type { CommentWithProfile } from "@/types/post.types";
89

@@ -24,13 +25,7 @@ export default function CommentItem({ comment, onDelete, isMyHome }: CommentItem
2425
return (
2526
<div className="flex gap-2 border-b border-gray-100 p-2 last:border-none">
2627
<div className="h-7 w-7 shrink-0 overflow-hidden bg-gray-200">
27-
{avatarUrl ? (
28-
<img src={avatarUrl} alt={authorName} className="h-full w-full object-cover" />
29-
) : (
30-
<div className="flex h-full w-full items-center justify-center text-gray-500">
31-
<User size={16} />
32-
</div>
33-
)}
28+
<Avatar src={avatarUrl} />
3429
</div>
3530

3631
<div className="flex flex-1 flex-col gap-1">

0 commit comments

Comments
 (0)