fix: 이미지 컴포넌트에서 잘못된 로드 시 오류 해결

Author: Woolegend

components/ImageSafe.tsx

@@ -0,0 +1,47 @@
+import getConfig from "next/config";
+import Image from "next/image";
+import { useState, useEffect } from "react";
+
+const IMAGE_PLACEHOLDER = "/images/landscape-placeholder.svg";
+
+export default function ImageSafe({ src, alt }: { src: string; alt: string }) {
+  const [imageSrc, setImageSrc] = useState<string | null>(null);
+
+  useEffect(() => {
+    const checkImageConfig = async () => {
+      try {
+        const res = await fetch(
+          "/api/check-image?url=" + encodeURIComponent(src)
+        );
+        console.log(res);
+        if (res.ok) {
+          setImageSrc(src);
+        } else {
+          console.error("Image source not configured in next.config.js");
+          console.log(res);
+          setImageSrc(IMAGE_PLACEHOLDER);
+        }
+      } catch (error) {
+        console.error("Error checking image configuration:", error);
+        setImageSrc(IMAGE_PLACEHOLDER);
+      }
+    };
+
+    checkImageConfig();
+  }, [src]);
+
+  if (!imageSrc) {
+    return null; // 또는 로딩 표시기
+  }
+
+  return (
+    <Image
+      fill
+      src={imageSrc}
+      alt={alt}
+      style={{
+        objectFit: "cover",
+      }}
+    />
+  );
+}

components/PostBoard.tsx

@@ -1,14 +1,15 @@
 import { Article, ArticleList } from "@/types/Article.type";
 import Image from "next/image";
 import styles from "./PostBoard.module.css";
-import { useEffect, useRef, useState } from "react";
+import { Suspense, useEffect, useRef, useState } from "react";
 import {
   getArticleList,
   GetArticleListParams,
   OrderBy,
 } from "@/api/article.api";
 import formatDate from "../lib/formatDate";
 import { useDeviceType } from "@/contexts/DeviceTypeContext";
+import ImageSafe from "./ImageSafe";
 
 const DEFAULT_PARAMS: GetArticleListParams = {
   page: 1,
@@ -143,22 +144,13 @@ export default function PostBoard({
 
 function PostItem({ article }: { article: Article }) {
   const createdAt = formatDate(article.createdAt);
-  const [imgSrc, setImgSrc] = useState(article.image || IMAGE_PLACEHOLDER);
 
   return (
     <div className={styles.Item}>
       <div className={styles.ItemContent}>
         <h3 className={styles.ItemTitle}> {article.title}</h3>
         <div className={styles.ItemPreview}>
-          <Image
-            fill
-            src={imgSrc}
-            alt={article.title}
-            style={{
-              objectFit: "cover",
-            }}
-            onError={() => setImgSrc(IMAGE_PLACEHOLDER)}
-          />
+          <ImageSafe src={article.image} alt={article.title} />
         </div>
       </div>
       <div className={styles.ItemInfo}>

next.config.js

@@ -11,6 +11,18 @@ const nextConfig = {
       },
     ],
   },
+  publicRuntimeConfig: {
+    images: {
+      remotePatterns: [
+        {
+          protocol: "https",
+          hostname: "sprint-fe-project.s3.ap-northeast-2.amazonaws.com",
+          port: "",
+          pathname: "/**",
+        },
+      ],
+    },
+  },
 };
 
 module.exports = nextConfig;

pages/api/check-image.js

@@ -0,0 +1,38 @@
+import getConfig from "next/config";
+
+export default async function handler(req, res) {
+  const { url } = req.query;
+  const {
+    publicRuntimeConfig: {
+      images: { remotePatterns },
+    },
+  } = getConfig();
+
+  try {
+    const imageRes = await fetch(url);
+
+    if (imageRes.status === 200) {
+      const isValid = remotePatterns.some((pattern) => {
+        const srcUrl = new URL(url);
+        const validProtocol = srcUrl.protocol.slice(0, -1) === pattern.protocol;
+        const validHost = srcUrl.hostname === pattern.hostname;
+        return validProtocol && validHost;
+      });
+
+      if (isValid) {
+        res.status(200).json({ imgSrc: url });
+      } else {
+        res.status(403).json({
+          message: "Image source not configured in next.config.js",
+        });
+      }
+    } else {
+      res.status(400).json({
+        message: "URL does not point to a valid image",
+      });
+    }
+  } catch (error) {
+    console.error("Error checking image:", error);
+    res.status(500).json({ imessage: "Error checking image" });
+  }
+}