From bf533ccb2c8a04d5f438d66632c192f0ddc540d6 Mon Sep 17 00:00:00 2001
From: Ubinquitous <ubinquitous1@gmail.com>
Date: Tue, 5 Mar 2024 09:35:17 +0900
Subject: [PATCH] fix : post iamge

---
 src/components/atoms/FallbackImgImage.tsx     | 60 +++++++++++++++++++
 .../post/layouts/list/PostListItem.tsx        |  3 +-
 2 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 src/components/atoms/FallbackImgImage.tsx

diff --git a/src/components/atoms/FallbackImgImage.tsx b/src/components/atoms/FallbackImgImage.tsx
new file mode 100644
index 00000000..a51b8e8b
--- /dev/null
+++ b/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;
diff --git a/src/templates/post/layouts/list/PostListItem.tsx b/src/templates/post/layouts/list/PostListItem.tsx
index 74ae2c4f..594f99c8 100644
--- a/src/templates/post/layouts/list/PostListItem.tsx
+++ b/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}