fix/#91 各NotionBlockへの細かい対応 #53 つづき imageリロード機能実装 fix.

PostGridItemとPostListItemコンポーネントで画像取得失敗時に一度だけリダイレクトを行う処理を追加

- handleImageError関数を定義し、画像取得失敗時にtrigger-reloadイベントを発火
- sessionStorageを使用して、リダイレクトが一度だけ行われるように制御
- ImageコンポーネントのonErrorプロパティにhandleImageError関数を渡す
- Appコンポーネントでtrigger-reloadイベントをキャッチしてリダイレクトを制御

src/components/features/notionBlog/PostGridItem/PostGridItem.tsx

@@ -16,6 +16,13 @@ export const PostGridItem: FC<Props> = ({ post }) => {
   const meta = useMemo(() => toPostMeta(post), [post]);
   const expandPost = {...toPostMeta(post)};
 
+  const handleImageError = () => {
+    if (!sessionStorage.getItem('reloaded')) {
+      const event = new Event('trigger-reload');
+      window.dispatchEvent(event);
+    }
+  };
+
   return (
     <div
     className="flex flex-col h-auto w-64 cursor-pointer rounded bg-gray-50 px-5 py-3 shadow transition-transform hover:scale-105 sp:w-80 justify-between"
@@ -54,7 +61,8 @@ export const PostGridItem: FC<Props> = ({ post }) => {
         width={256}
         height={192}
         priority
-        className="h-hull w-full rounded-l-md object-cover"
+        className="h-full w-full rounded-l-md object-cover"
+        onError={handleImageError}
       />
     </div>
   );

src/components/features/notionBlog/PostListItem/PostListItem.tsx

@@ -16,6 +16,13 @@ export const PostListItem: FC<Props> = ({ post }) => {
   const meta = useMemo(() => toPostMeta(post), [post]);
   const expandPost = { ...toPostMeta(post) };
 
+  const handleImageError = () => {
+    if (!sessionStorage.getItem('reloaded')) {
+      const event = new Event('trigger-reload');
+      window.dispatchEvent(event);
+    }
+  };
+
   return (
     <div
       className="flex h-24 cursor-pointer items-start gap-5 rounded bg-gray-50 px-5 py-3 shadow transition-transform hover:scale-105 sm:relative md:h-48"
@@ -28,6 +35,7 @@ export const PostListItem: FC<Props> = ({ post }) => {
         height={192}
         priority
         className="h-full w-20 rounded-l-md object-cover md:w-64"
+        onError={handleImageError}
       />
       <div
         /*icon+tag+Updated,Categoy+Title*/ className="flex-col justify-between w-full"

src/components/notion/blocks/Image/Image.tsx

@@ -5,7 +5,7 @@ import type { BlockWithChildren } from '~/types/notion';
 
 import { Button } from '@mantine/core';
 import NextImage from 'next/image';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import MediumZoom from 'react-medium-image-zoom'; // Import react-medium-image-zoom
 
 import { DangerIcon, UpdateIcon } from '~/commons/icons';
@@ -29,6 +29,14 @@ export const Image: FC<Props> = ({ block }: Props) => {
   const [aspectRatio, setAspectRatio] = useState<number | null>(null);     
   const imageClassName = aspectRatio && aspectRatio > 1 ? "object-contain h-auto w-full" : "object-contain h-auto w-auto";
 
+  useEffect(() => {
+    if (isError && !sessionStorage.getItem('reloaded')) {
+      const event = new Event('trigger-reload');
+      console.log("!U event", event); // ログを出力
+      window.dispatchEvent(event);
+    }
+  }, [isError]);
+
   return (
     <div className="relative mx-auto mt-4 mb-4 flex flex-col items-center">
       <MediumZoom zoomMargin={40}>