feat: profile picture fetching through guard service

web/src/feature/Avatar/index.tsx

@@ -1,22 +1,28 @@
 import { useAuth } from "@/store/auth";
 import { User } from "lucide-react";
-import type { FC } from "react";
+import { useMemo, type FC } from "react";
 
 export interface AvatarProps {
   iconSize?: number;
   className?: string;
+  avatarId?: string;
 }
 
-const Avatar: FC<AvatarProps> = ({ iconSize = 32, className }) => {
+const Avatar: FC<AvatarProps> = ({ iconSize = 32, className, avatarId }) => {
   const profile = useAuth((state) => state.profile);
 
+  const avatar = useMemo(
+    () => (avatarId !== undefined ? avatarId : profile?.profile_picture),
+    [avatarId, profile?.profile_picture],
+  );
+
   return (
     <div
       className={`overflow-hidden bg-gray-100 rounded-full ring ring-gray-400 dark:ring dark:ring-gray-500 flex items-center justify-center ${className}`}
     >
-      {profile?.profile_picture ? (
+      {avatar ? (
         <img
-          src={profile?.profile_picture?.toString()}
+          src={`/api/v1/avatar/${avatar?.toString()}`}
           className="w-full h-full flex-1 object-cover"
           alt="profile"
         />