fix : post iamge

src/components/atoms/FallbackImgImage.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import Image, { ImageProps, StaticImageData } from "next/image";
+import styled, { css } from "styled-components";
+import { StaticImport } from "next/dist/shared/lib/get-img-props";
+
+interface FallbackImgImageProps extends ImageProps {
+  fallbackSrc: StaticImageData | string;
+  alt: string;
+  sizes?: string;
+  rounded?: boolean;
+  isShouldHide?: boolean;
+}
+
+const FallbackImgImage = ({
+  src,
+  fallbackSrc,
+  alt,
+  sizes,
+  isShouldHide,
+  rounded,
+  ...props
+}: FallbackImgImageProps) => {
+  const [imgSrc, setImgSrc] = React.useState<
+    StaticImageData | StaticImport | string
+  >("");
+
+  React.useEffect(() => {
+    setImgSrc(src ?? "/");
+  }, [src]);
+
+  return (
+    <StyledImage
+      src={imgSrc}
+      {...props}
+      alt={alt}
+      isshouldhide={isShouldHide}
+      onError={() => setImgSrc(fallbackSrc)}
+      isrounded={rounded?.toString()}
+    />
+  );
+};
+
+const StyledImage = styled(Image)<{
+  isshouldhide?: boolean;
+  isrounded?: string;
+}>`
+  height: auto;
+  ${({ isshouldhide }) =>
+    isshouldhide &&
+    css`
+      display: none;
+    `}
+  ${({ isrounded }) =>
+    isrounded === "true" &&
+    css`
+      border-radius: 50%;
+    `}
+`;
+
+export default FallbackImgImage;

src/templates/post/layouts/list/PostListItem.tsx

@@ -9,6 +9,7 @@ import { PostListProperty } from "../../types";
 import PostListItemInformationBar from "./PostListItemInformationBar";
 import { EmptyImage } from "../../assets/images";
 import { CATEGORY } from "../../constants";
+import FallbackImgImage from "@/components/atoms/FallbackImgImage";
 
 const PostListItem = ({
   category,
@@ -26,7 +27,7 @@ const PostListItem = ({
   return (
     <Layout href={`${ROUTER.POST.LIST}/${id}`}>
       {is카테고리가분실물찾기라면 && (
-        <FallbackImage
+        <FallbackImgImage
           src={lostThingImage || "/"}
           alt="분실물 이미지"
           fallbackSrc={EmptyImage}