Feat: user profile Avatar 공통 컴포넌트 구현

src/Menu/page.tsx

@@ -1,7 +1,16 @@
 import UserListItemCard from "@/common/components/UserListItemCard";
+import UserProfileAvatar from "@/common/components/UserProfileAvatar";
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { Blockquote, Card, Checkbox, Flex, Heading, Radio, Text } from "@radix-ui/themes";
+import {
+  Blockquote,
+  Card,
+  Checkbox,
+  Flex,
+  Heading,
+  Radio,
+  Text,
+} from "@radix-ui/themes";
 import { version } from "react";
 import { Link } from "react-router";
 
@@ -10,6 +19,7 @@ export default function MenuPage() {
     <>
       {version}
       <Card variant="surface">menu</Card>
+
       <Checkbox defaultChecked />
       <Heading size="6" css={css({ color: "red" })}>
         heading
@@ -50,6 +60,10 @@ export default function MenuPage() {
           <UserListItemCard>유저4</UserListItemCard>
         </Flex>
       </UserListContainer>
+
+      {/* fallback이 보여지는 케이스 -> 이미지 로딩 실패시 */}
+      <UserProfileAvatar size="9" />
+      <UserProfileAvatar src="https://picsum.photos/id/237/200/300" size="9" />
     </>
   );
 }

src/common/components/UserProfileAvatar.tsx

@@ -0,0 +1,20 @@
+import { Avatar, type AvatarProps } from "@radix-ui/themes";
+
+type UserProfileAvatarProps = Omit<
+  AvatarProps,
+  "radius" | "variant" | "color" | "fallback"
+>;
+
+const UserProfileAvatar = ({ ...props }: UserProfileAvatarProps) => {
+  return (
+    <Avatar
+      radius="full"
+      variant="soft"
+      color="gray"
+      fallback={<>fallback image</>}
+      {...props}
+    />
+  );
+};
+
+export default UserProfileAvatar;