Fix : UserProfileAvatar 스펙 수정 (fallback 이미지 추가 및 gray color 변경) (#21)

* fix : add gray and accent color token in theme * feat : add fallback user profile image
Mo-yoy · Feb 6, 2025 · 0c37f4e · 0c37f4e
1 parent 8f605fa
commit 0c37f4e
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 4 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,9 +1,9 @@
-import "@radix-ui/themes/styles.css";
 import Router from "@/Router";
 import { GlobalStyles } from "@/common/styles/GlobalStyles";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { Theme } from "@radix-ui/themes";
+import "@radix-ui/themes/styles.css";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 const queryClient = new QueryClient();
 
@@ -12,7 +12,7 @@ function App() {
     <QueryClientProvider client={queryClient}>
       <ReactQueryDevtools initialIsOpen={false} />
       <GlobalStyles />
-      <Theme>
+      <Theme accentColor="indigo" grayColor="slate">
         <Router />
       </Theme>
     </QueryClientProvider>

diff --git a/src/assets/images/img_default_user_profile.png b/src/assets/images/img_default_user_profile.png
diff --git a/src/assets/images/index.ts b/src/assets/images/index.ts
@@ -0,0 +1,3 @@
+import ImgUserProfile from "./img_default_user_profile.png";
+
+export { ImgUserProfile };
diff --git a/src/common/components/UserProfileAvatar.tsx b/src/common/components/UserProfileAvatar.tsx
@@ -1,3 +1,4 @@
+import { ImgUserProfile } from "@/assets/images";
 import { Avatar, type AvatarProps } from "@radix-ui/themes";
 
 type UserProfileAvatarProps = Omit<
@@ -11,7 +12,7 @@ const UserProfileAvatar = (props: UserProfileAvatarProps) => {
       radius="full"
       variant="soft"
       color="gray"
-      fallback={<>fallback image</>}
+      fallback={<img src={ImgUserProfile} alt="유저 프로필 이미지" />}
       {...props}
     />
   );
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import ImgUserProfile from "./img_default_user_profile.png";

		export { ImgUserProfile };