From ae4a84be9f4219d9036dc7ac83745024106279f4 Mon Sep 17 00:00:00 2001
From: Jio <giomong2346@naver.com>
Date: Mon, 27 Jul 2026 10:34:18 +0900
Subject: [PATCH] =?UTF-8?q?feat=20:=20=EA=B8=B0=EB=B3=B8=20=ED=94=84?=
 =?UTF-8?q?=EB=A1=9C=ED=95=84=20=EC=95=84=EB=B0=94=ED=83=80=20=EC=95=84?=
 =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20ProfileAv?=
 =?UTF-8?q?atar=EC=97=90=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

온보딩에서 프로필 미설정(건너뛰기) 시 마이페이지 기본 프로필 사진으로
표시되도록 AvatarIcon 컴포넌트 추가. ProfileAvatar의 중복 인라인 SVG를
새 컴포넌트로 교체.
---
 components/icons/avatar-icon.tsx              | 32 +++++++++++++++++++
 features/mypage/components/profile-avatar.tsx | 23 +++----------
 2 files changed, 37 insertions(+), 18 deletions(-)
 create mode 100644 components/icons/avatar-icon.tsx

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 (
+    <Svg width={size} height={size} viewBox="0 0 60 60" fill="none">
+      <Circle
+        cx={30}
+        cy={30}
+        r={29.625}
+        fill={backgroundColor}
+        stroke={backgroundColor}
+        strokeWidth={0.75}
+      />
+      <Path
+        d="M46.8837 43.7818C44.385 39.462 40.5345 36.3645 36.0408 34.8962C38.2636 33.573 39.9905 31.5567 40.9565 29.1569C41.9224 26.7572 42.0739 24.1068 41.3877 21.6126C40.7015 19.1185 39.2156 16.9185 37.158 15.3506C35.1005 13.7827 32.5852 12.9336 29.9984 12.9336C27.4116 12.9336 24.8963 13.7827 22.8388 15.3506C20.7812 16.9185 19.2953 19.1185 18.6091 21.6126C17.9229 24.1068 18.0744 26.7572 19.0403 29.1569C20.0062 31.5567 21.7332 33.573 23.956 34.8962C19.4623 36.3629 15.6118 39.4604 13.1131 43.7818C13.0215 43.9312 12.9607 44.0975 12.9343 44.2707C12.908 44.444 12.9166 44.6208 12.9597 44.7907C13.0028 44.9606 13.0795 45.1201 13.1853 45.2599C13.291 45.3997 13.4237 45.5168 13.5755 45.6045C13.7272 45.6922 13.895 45.7486 14.0689 45.7703C14.2428 45.7921 14.4193 45.7788 14.588 45.7313C14.7567 45.6837 14.9142 45.6028 15.0511 45.4934C15.1881 45.384 15.3017 45.2483 15.3854 45.0943C18.4763 39.7524 23.9396 36.5631 29.9984 36.5631C36.0572 36.5631 41.5205 39.7524 44.6114 45.0943C44.6951 45.2483 44.8087 45.384 44.9457 45.4934C45.0826 45.6028 45.2401 45.6837 45.4088 45.7313C45.5774 45.7788 45.754 45.7921 45.9279 45.7703C46.1018 45.7486 46.2696 45.6922 46.4213 45.6045C46.5731 45.5168 46.7058 45.3997 46.8115 45.2599C46.9173 45.1201 46.994 44.9606 47.0371 44.7907C47.0802 44.6208 47.0888 44.444 47.0625 44.2707C47.0361 44.0975 46.9753 43.9312 46.8837 43.7818ZM20.8109 24.7506C20.8109 22.9334 21.3497 21.1571 22.3593 19.6463C23.3688 18.1354 24.8037 16.9578 26.4825 16.2624C28.1613 15.567 30.0086 15.3851 31.7908 15.7396C33.573 16.0941 35.21 16.9691 36.4949 18.254C37.7798 19.5389 38.6549 21.176 39.0094 22.9582C39.3639 24.7404 39.1819 26.5877 38.4865 28.2665C37.7912 29.9453 36.6136 31.3802 35.1027 32.3897C33.5918 33.3992 31.8155 33.9381 29.9984 33.9381C27.5625 33.9355 25.2272 32.9667 23.5047 31.2442C21.7823 29.5218 20.8135 27.1864 20.8109 24.7506Z"
+        fill={color}
+      />
+    </Svg>
+  );
+}
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 (
       <Image
         source={{ uri: url }}
@@ -16,19 +16,6 @@ export function ProfileAvatar({ url, size = 100 }: Props) {
     );
   }
 
-  return (
-    <View style={{ width: size, height: size }} className="items-center justify-center">
-      {/* 원형 배경 */}
-      <Svg width={size} height={size} viewBox="0 0 100 100" fill="none" style={{ position: 'absolute' }}>
-        <Circle cx={50} cy={50} r={49.375} fill="#E5E7EB" stroke="#E5E7EB" strokeWidth={1.25} />
-      </Svg>
-      {/* 사람 아이콘 */}
-      <Svg width={size * 0.7} height={size * 0.7} viewBox="0 0 42 42" fill="none">
-        <Path
-          d="M37.8853 34.7818C35.3866 30.462 31.5361 27.3645 27.0424 25.8962C29.2652 24.573 30.9921 22.5567 31.9581 20.1569C32.924 17.7572 33.0755 15.1068 32.3893 12.6126C31.7031 10.1185 30.2171 7.91853 28.1596 6.35064C26.1021 4.78274 23.5868 3.93359 21 3.93359C18.4132 3.93359 15.8979 4.78274 13.8403 6.35064C11.7828 7.91853 10.2969 10.1185 9.61067 12.6126C8.92447 15.1068 9.07597 17.7572 10.0419 20.1569C11.0078 22.5567 12.7348 24.573 14.9576 25.8962C10.4639 27.3629 6.61335 30.4604 4.11467 34.7818C4.02304 34.9312 3.96227 35.0975 3.93593 35.2707C3.90959 35.444 3.91822 35.6208 3.96132 35.7907C4.00441 35.9606 4.0811 36.1201 4.18685 36.2599C4.2926 36.3997 4.42527 36.5168 4.57704 36.6045C4.72881 36.6922 4.8966 36.7486 5.07051 36.7703C5.24443 36.7921 5.42094 36.7788 5.58963 36.7313C5.75832 36.6837 5.91579 36.6028 6.05272 36.4934C6.18966 36.384 6.3033 36.2483 6.38694 36.0943C9.47788 30.7524 14.9412 27.5631 21 27.5631C27.0588 27.5631 32.5221 30.7524 35.613 36.0943C35.6967 36.2483 35.8103 36.384 35.9473 36.4934C36.0842 36.6028 36.2416 36.6837 36.4103 36.7313C36.579 36.7788 36.7555 36.7921 36.9295 36.7703C37.1034 36.7486 37.2712 36.6922 37.4229 36.6045C37.5747 36.5168 37.7074 36.3997 37.8131 36.2599C37.9189 36.1201 37.9956 35.9606 38.0387 35.7907C38.0818 35.6208 38.0904 35.444 38.064 35.2707C38.0377 35.0975 37.9769 34.9312 37.8853 34.7818ZM11.8125 15.7506C11.8125 13.9334 12.3513 12.1571 13.3609 10.6463C14.3704 9.13538 15.8053 7.95779 17.4841 7.26241C19.1629 6.56703 21.0102 6.38509 22.7924 6.73959C24.5746 7.09409 26.2116 7.96912 27.4965 9.25401C28.7814 10.5389 29.6564 12.176 30.011 13.9582C30.3655 15.7404 30.1835 17.5877 29.4881 19.2665C28.7927 20.9453 27.6152 22.3802 26.1043 23.3897C24.5934 24.3992 22.8171 24.9381 21 24.9381C18.5641 24.9355 16.2287 23.9667 14.5063 22.2442C12.7839 20.5218 11.8151 18.1864 11.8125 15.7506Z"
-          fill="#A4ABC0"
-        />
-      </Svg>
-    </View>
-  );
+  // 프로필 이미지 미설정(온보딩 건너뛰기 포함) 시 기본 아바타 표시
+  return <AvatarIcon size={size} />;
 }