Merge pull request #521 from solid-connection/fix/mentor-chat-image-placeholder

fix(web): 멘토 채팅 이미지 로딩 재시도

Author: manNomi

apps/web/src/apis/chat/normalize.ts

@@ -74,7 +74,7 @@ const normalizeAttachment = (attachment: RawChatAttachment): ChatAttachment => (
   id: toNumber(attachment.id),
   isImage: attachment.isImage,
   url: attachment.url,
-  thumbnailUrl: attachment.thumbnailUrl ?? "",
+  thumbnailUrl: attachment.thumbnailUrl ?? null,
   createdAt: attachment.createdAt,
 });
 

apps/web/src/app/mentor/chat/[chatId]/_ui/ChatContent/_ui/ChatMessageBox/index.tsx

@@ -5,6 +5,9 @@ import { formatTime } from "@/utils/datetimeUtils";
 import { downloadFile, getFileExtension, getFileNamePrefix } from "@/utils/fileUtils";
 import { getMessageType, shouldShowContent } from "./_utils/messageUtils";
 
+const CHAT_IMAGE_RETRY_LIMIT = 5;
+const CHAT_IMAGE_RETRY_DELAY_MS = 1000;
+
 interface ChatMessageBoxProps {
   message: ChatMessage;
   currentUserId?: number; // 현재 사용자 ID
@@ -34,13 +37,16 @@ const ChatMessageBox = ({
               // 이미지 렌더링
               <div className="relative overflow-hidden rounded-lg">
                 <Image
-                  src={attachment.url}
+                  src={attachment.thumbnailUrl || attachment.url}
                   cdnHostType="upload"
                   alt="첨부 이미지"
                   width={200}
                   height={150}
                   className="max-w-[200px] rounded-lg object-cover"
                   unoptimized
+                  retryOnError
+                  retryLimit={CHAT_IMAGE_RETRY_LIMIT}
+                  retryDelayMs={CHAT_IMAGE_RETRY_DELAY_MS}
                 />
               </div>
             ) : (

apps/web/src/components/ui/FallbackImage.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import NextImage from "next/image";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { getUploadCdnOrigin, normalizeImageUrlToUploadCdn } from "@/utils/cdnUrl";
 
 const DEFAULT_FALLBACK_SRC = "/svgs/placeholders/image-placeholder.svg";
@@ -34,29 +34,79 @@ const resolveCdnUrl = (src: string, cdnHostType?: CdnHostType) => {
 type FallbackImageProps = React.ComponentProps<typeof NextImage> & {
   fallbackSrc?: string;
   cdnHostType?: CdnHostType;
+  retryOnError?: boolean;
+  retryLimit?: number;
+  retryDelayMs?: number;
 };
 
 const FallbackImage = ({
   src,
   fallbackSrc = DEFAULT_FALLBACK_SRC,
   cdnHostType,
+  retryOnError = false,
+  retryLimit = 0,
+  retryDelayMs = 1000,
   onError,
   ...props
 }: FallbackImageProps) => {
   const [failedSource, setFailedSource] = useState<string | null>(null);
+  const [retryAttempt, setRetryAttempt] = useState(0);
+  const retryTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const sourceKeyRef = useRef<string | null>(null);
 
   const normalizedSrc = typeof src === "string" ? resolveCdnUrl(src, cdnHostType) || fallbackSrc : src;
   const sourceKey = typeof normalizedSrc === "string" ? normalizedSrc : JSON.stringify(normalizedSrc);
   const hasError = failedSource === sourceKey;
   const resolvedSrc = hasError ? fallbackSrc : normalizedSrc;
+  const normalizedRetryLimit = Math.max(0, retryLimit);
+  const normalizedRetryDelayMs = Math.max(0, retryDelayMs);
+  const canRetry =
+    retryOnError &&
+    retryAttempt < normalizedRetryLimit &&
+    typeof normalizedSrc === "string" &&
+    normalizedSrc !== fallbackSrc;
+
+  useEffect(() => {
+    if (sourceKeyRef.current === sourceKey) return;
+
+    sourceKeyRef.current = sourceKey;
+    setFailedSource(null);
+    setRetryAttempt(0);
+
+    if (retryTimeoutRef.current) {
+      clearTimeout(retryTimeoutRef.current);
+      retryTimeoutRef.current = null;
+    }
+  }, [sourceKey]);
+
+  useEffect(() => {
+    return () => {
+      if (retryTimeoutRef.current) {
+        clearTimeout(retryTimeoutRef.current);
+      }
+    };
+  }, []);
 
   return (
     <NextImage
       {...props}
+      key={`${sourceKey}:${hasError ? "fallback" : "source"}:${retryAttempt}`}
       src={resolvedSrc}
       onError={(event) => {
         if (!hasError && resolvedSrc !== fallbackSrc) {
           setFailedSource(sourceKey);
+
+          if (canRetry) {
+            if (retryTimeoutRef.current) {
+              clearTimeout(retryTimeoutRef.current);
+            }
+
+            retryTimeoutRef.current = setTimeout(() => {
+              setRetryAttempt((prev) => prev + 1);
+              setFailedSource((current) => (current === sourceKey ? null : current));
+              retryTimeoutRef.current = null;
+            }, normalizedRetryDelayMs);
+          }
         }
         onError?.(event);
       }}

apps/web/src/types/chat.ts

@@ -17,7 +17,7 @@ export interface ChatAttachment {
   id: number;
   isImage: boolean;
   url: string;
-  thumbnailUrl: string;
+  thumbnailUrl: string | null;
   createdAt: string;
 }