Merge pull request #975 from peer-42seoul/964-c-mypage-h-hitch-change…

…-to-nextImage

[C-MYPAGE, H-HITCH] 마이페이지, 히치하이킹 next/image 사용하도록 변경

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 = {

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'}

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 = {

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',

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>
     )
   },