Refactor: replace all next/image components with Cloudinary wrapper

src/components/Account/UserAvatar.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import Image from 'next/image';
+import { CldImage } from 'next-cloudinary';
 import { z } from 'zod';
 import GetUserSchema from '@/services/User/schema/GetUserSchema';
 import { FaUser } from 'react-icons/fa';
@@ -25,11 +25,12 @@ const UserAvatar: FC<UserAvatarProps> = ({ user }) => {
       </span>
     </div>
   ) : (
-    <Image
+    <CldImage
       src={userAvatar.path}
       alt="user avatar"
       width={1000}
       height={1000}
+      crop="fill"
       className="h-full w-full object-cover mask mask-circle"
     />
   );

src/components/BeerIndex/BeerCard.tsx

@@ -1,10 +1,11 @@
 import Link from 'next/link';
 import { FC, useContext } from 'react';
-import Image from 'next/image';
+
 import BeerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
 import { z } from 'zod';
 import UserContext from '@/contexts/UserContext';
 import useGetBeerPostLikeCount from '@/hooks/data-fetching/beer-likes/useBeerPostLikeCount';
+import { CldImage } from 'next-cloudinary';
 import BeerPostLikeButton from '../BeerById/BeerPostLikeButton';
 
 const BeerCard: FC<{ post: z.infer<typeof BeerPostQueryResult> }> = ({ post }) => {
@@ -16,9 +17,10 @@ const BeerCard: FC<{ post: z.infer<typeof BeerPostQueryResult> }> = ({ post }) =
       <figure className="h-96">
         <Link href={`/beers/${post.id}`} className="h-full object-cover">
           {post.beerImages.length > 0 && (
-            <Image
+            <CldImage
               src={post.beerImages[0].path}
               alt={post.name}
+              crop="fill"
               width="3000"
               height="3000"
               className="h-full object-cover"

src/components/BreweryIndex/BreweryCard.tsx

@@ -4,7 +4,8 @@ import BreweryPostQueryResult from '@/services/BreweryPost/schema/BreweryPostQue
 import { FC, useContext } from 'react';
 import Link from 'next/link';
 import { z } from 'zod';
-import Image from 'next/image';
+
+import { CldImage } from 'next-cloudinary';
 import BreweryPostLikeButton from './BreweryPostLikeButton';
 
 const BreweryCard: FC<{ brewery: z.infer<typeof BreweryPostQueryResult> }> = ({
@@ -17,11 +18,12 @@ const BreweryCard: FC<{ brewery: z.infer<typeof BreweryPostQueryResult> }> = ({
       <figure className="card-image h-96">
         <Link href={`/breweries/${brewery.id}`} className="h-full object-cover">
           {brewery.breweryImages.length > 0 && (
-            <Image
+            <CldImage
               src={brewery.breweryImages[0].path}
               alt={brewery.name}
               width="1029"
               height="110"
+              crop="fill"
               className="h-full object-cover"
             />
           )}