diff --git a/components/icons/avatar-icon.tsx b/components/icons/avatar-icon.tsx new file mode 100644 index 00000000..69e76e2a --- /dev/null +++ b/components/icons/avatar-icon.tsx @@ -0,0 +1,32 @@ +import { Circle, Path, Svg } from "react-native-svg"; + +type Props = { + size?: number; + /** 배경 원 색상 */ + backgroundColor?: string; + /** 사람 실루엣 색상 */ + color?: string; +}; + +export function AvatarIcon({ + size = 60, + backgroundColor = "#E5E7EB", + color = "#A4ABC0", +}: Props) { + return ( + + + + + ); +} diff --git a/features/mypage/components/profile-avatar.tsx b/features/mypage/components/profile-avatar.tsx index e643ba19..4c8734cb 100644 --- a/features/mypage/components/profile-avatar.tsx +++ b/features/mypage/components/profile-avatar.tsx @@ -1,5 +1,5 @@ -import { Image, View } from 'react-native'; -import { Circle, Path, Svg } from 'react-native-svg'; +import { AvatarIcon } from "@/components/icons/avatar-icon"; +import { Image } from "react-native"; type Props = { url?: string | null; @@ -7,7 +7,7 @@ type Props = { }; export function ProfileAvatar({ url, size = 100 }: Props) { - if (url?.startsWith('http')) { + if (url?.startsWith("http")) { return ( - {/* 원형 배경 */} - - - - {/* 사람 아이콘 */} - - - - - ); + // 프로필 이미지 미설정(온보딩 건너뛰기 포함) 시 기본 아바타 표시 + return ; }