diff --git a/package-lock.json b/package-lock.json
index 961a1ece2..b2a035be1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4266,6 +4266,126 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.5.6.tgz",
+      "integrity": "sha512-6cgBfxg98oOCSr4BckWjLLgiVwlL3vlLj8hXg2b+nDgm4bC/qVXXLfpLB9FHdoDu4057hzywbxKvmYGmi7yUzA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.5.6.tgz",
+      "integrity": "sha512-txagBbj1e1w47YQjcKgSU4rRVQ7uF29YpnlHV5xuVUsgCUf2FmyfJ3CPjZUvpIeXCJAoMCFAoGnbtX86BK7+sg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.5.6.tgz",
+      "integrity": "sha512-cGd+H8amifT86ZldVJtAKDxUqeFyLWW+v2NlBULnLAdWsiuuN8TuhVBt8ZNpCqcAuoruoSWynvMWixTFcroq+Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.5.6.tgz",
+      "integrity": "sha512-Mc2b4xiIWKXIhBy2NBTwOxGD3nHLmq4keFk+d4/WL5fMsB8XdJRdtUlL87SqVCTSaf1BRuQQf1HvXZcy+rq3Nw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.5.6.tgz",
+      "integrity": "sha512-CFHvP9Qz98NruJiUnCe61O6GveKKHpJLloXbDSWRhqhkJdZD2zU5hG+gtVJR//tyW897izuHpM6Gtf6+sNgJPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.5.6.tgz",
+      "integrity": "sha512-aFv1ejfkbS7PUa1qVPwzDHjQWQtknzAZWGTKYIAaS4NMtBlk3VyA6AYn593pqNanlicewqyl2jUhQAaFV/qXsg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.5.6.tgz",
+      "integrity": "sha512-XqqpHgEIlBHvzwG8sp/JXMFkLAfGLqkbVsyN+/Ih1mR8INb6YCc2x/Mbwi6hsAgUnqQztz8cvEbHJUbSl7RHDg==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "13.5.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.6.tgz",
+      "integrity": "sha512-Cqfe1YmOS7k+5mGu92nl5ULkzpKuxJrP3+4AEuPmrpFZ3BHxTY3TnHmU1On3bFmFFs6FbTcdF58CCUProGpIGQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "license": "MIT",
diff --git a/src/app/hitchhiking/panel/PostCard.style.ts b/src/app/hitchhiking/panel/PostCard.style.ts
index 53f7c8491..2ef129758 100644
--- a/src/app/hitchhiking/panel/PostCard.style.ts
+++ b/src/app/hitchhiking/panel/PostCard.style.ts
@@ -25,6 +25,8 @@ export const cardMediaStyleBase: SxProps = {
   maxHeight: '15.6875rem',
   width: ['calc(90svh * 328 / 800)', 'calc(80svh * 328 /800)'],
   height: ['calc(90svh * 251 / 800)', 'calc(80svh * 251 /800)'],
+  p: 0,
+  boxSizing: 'border-box',
 }
 
 export const cardAuthorAvatarStyleBase: SxProps = {
diff --git a/src/app/hitchhiking/panel/PostCard.tsx b/src/app/hitchhiking/panel/PostCard.tsx
index 06936242e..9dfa1ac1c 100644
--- a/src/app/hitchhiking/panel/PostCard.tsx
+++ b/src/app/hitchhiking/panel/PostCard.tsx
@@ -2,7 +2,6 @@ import {
   Card,
   CardContent,
   CardHeader,
-  CardMedia,
   Stack,
   Typography,
   alpha,
@@ -13,6 +12,7 @@ import { ITag } from '@/types/IPostDetail'
 import { Chip } from '@mui/material'
 import CuAvatar from '@/components/CuAvatar'
 import * as style from './PostCard.style'
+import CuPhotoBox from '@/components/CuPhotoBox'
 
 function PostCard({
   authorImage,
@@ -50,12 +50,13 @@ function PostCard({
       ref={ref}
       onClick={onClick}
     >
-      <CardMedia
-        component="img"
-        image={image}
-        alt="post thumbnail"
-        sx={style.cardMediaStyleBase}
-      />
+      <CardContent sx={style.cardMediaStyleBase}>
+        <CuPhotoBox
+          src={image}
+          alt="post thumbnail"
+          style={{ width: '100%', height: '100%', boxSizing: 'border-box' }}
+        />
+      </CardContent>
       <Stack
         sx={{ p: '1rem', pt: '0.75rem' }}
         spacing={'15px'}
diff --git a/src/app/my-page/profile/panel/PostCard.style.ts b/src/app/my-page/profile/panel/PostCard.style.ts
index 0278a92b1..b0678162d 100644
--- a/src/app/my-page/profile/panel/PostCard.style.ts
+++ b/src/app/my-page/profile/panel/PostCard.style.ts
@@ -5,6 +5,7 @@ export const cardMediaStyleBase: SxProps = {
   objectFit: 'cover',
   maxHeight: '15.6875rem',
   borderRadius: '0.75rem',
+  p: 0,
 }
 
 export const cardAuthorAvatarStyleBase: SxProps = {
diff --git a/src/app/my-page/profile/panel/PostCard.tsx b/src/app/my-page/profile/panel/PostCard.tsx
index 453b2a725..7fc93c450 100644
--- a/src/app/my-page/profile/panel/PostCard.tsx
+++ b/src/app/my-page/profile/panel/PostCard.tsx
@@ -3,7 +3,6 @@ import {
   Card,
   CardContent,
   CardHeader,
-  CardMedia,
   Stack,
   SxProps,
   Typography,
@@ -16,6 +15,7 @@ import CuAvatar from '@/components/CuAvatar'
 import * as style from './PostCard.style'
 import { useRouter } from 'next/navigation'
 import SplitButton from '@/components/SplitButton'
+import CuPhotoBox from '@/components/CuPhotoBox'
 
 interface IPostCard {
   teamLogo: string // 팀 로고
@@ -76,15 +76,18 @@ function PostCard({
       }}
       onClick={gotoTeamPage}
     >
-      <CardMedia
-        component="img"
-        image={image}
-        alt="post thumbnail"
+      <CardContent
         sx={{
           ...style.cardMediaStyleBase,
           height: '10rem',
         }}
-      />
+      >
+        <CuPhotoBox
+          src={image}
+          alt="post thumbnail"
+          style={{ width: '100%', height: '100%' }}
+        />
+      </CardContent>
       <Stack
         sx={{
           p: '1rem',
diff --git a/src/components/CuAvatar.tsx b/src/components/CuAvatar.tsx
index 4e8c76a61..7bfa7ca48 100644
--- a/src/components/CuAvatar.tsx
+++ b/src/components/CuAvatar.tsx
@@ -1,12 +1,26 @@
 import { Avatar, AvatarProps } from '@mui/material'
 import * as style from './CuAvatar.style'
 import React from 'react'
+import Image from 'next/image'
+
+// https://stackoverflow.com/questions/65001113/using-the-new-next-js-image-component-with-material-ui 참고하여 처리하였습니다.
 
 const CuAvatar = React.forwardRef<HTMLDivElement, AvatarProps>(
   function CuAvatar(props: AvatarProps, ref) {
     return (
-      <Avatar {...props} sx={{ ...style.CuAvatar, ...props.sx }} ref={ref}>
-        {props.children ? props.children : <></>}
+      <Avatar
+        {...props}
+        sx={{ ...style.CuAvatar, ...props.sx }}
+        ref={ref}
+        src=""
+      >
+        {props.children ? (
+          props.children
+        ) : props.src ? (
+          <Image src={props.src} alt={props?.alt || ''} layout="fill" />
+        ) : (
+          <></>
+        )}
       </Avatar>
     )
   },