import React, { useEffect, useState, useRef, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { Text, Flex, Box, Portal ,Button} from '@yamada-ui/react';
import ResearchHeader from '../components/ResearchHeader';
import { useWindowSize } from "@uidotdev/usehooks";


const Research = () => {
  const navigate = useNavigate(); // useNavigateフックを使ってナビゲーション機能を取得
  const size = useWindowSize();
  const [posts, setPosts] = useState<Post[]>([]); // APIのデータを格納するステート
  const [loading, setLoading] = useState(true);   // ローディング状態を管理
  const [error, setError] = useState<null | string>(null); // エラーメッセージを管理

  useEffect(() => {
    fetch('http://localhost:3101/api/v1/posts')
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => {
        // 取得したデータの構造が想定通りか確認
        const formattedData: Post[] = data.map((post: any) => ({
          id: post.id,
          cstname: post.cstname,
          kind: post.kind,
          custom1: post.custom1,
          custom2: post.custom2,
          custom3: post.custom3,
          custom4: post.custom4,
          created_at: post.created_at,
          updated_at: post.updated_at,
          image: post.image,
        }));
        
        setPosts(formattedData);  // データを状態に保存
        console.log(formattedData);  // データをログに表示
      })
      .catch(error => {
        setError(error.message);
        console.error('ユーザーの取得エラー:', error);
      })
      .finally(() => {
        setLoading(false); // ローディング終了
      });
  }, []);

  if (loading) return <p>Loading...</p>;  // ローディング中の表示
  if (error) return <p>Error: {error}</p>; // エラー時の表示

  // ボタンがクリックされたときに実行される関数
  const handlehomeClick = () => {
    navigate('/'); // "/search" に遷移
  };

  const handleAddClick = () => {
    navigate('/Addtion'); // "/add" に遷移
  };

  const handleCustom1Click = () => {
    navigate('/Custom1'); // "/add" に遷移
  };

  return (
    <div>
      <ResearchHeader />
      <h2>Posts:</h2>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h3>{post.cstname}</h3>
            <p>種類: {post.kind}</p>
            <p>カスタム1: {post.custom1}</p>
            <p>カスタム2: {post.custom2}</p>
            <p>カスタム3: {post.custom3}</p>
            <p>カスタム4: {post.custom4}</p>
            <p>作成日: {post.created_at}</p>
            <p>更新日: {post.updated_at}</p>
            <img src={post.image} alt={post.cstname} />
          </li>
        ))}
      </ul>
      <Box
        position="fixed"
        top={size.height * 0.3}
        left="50%"
        transform="translate(-50%, -50%)"
        zIndex="2000">
        <Button onClick={handleCustom1Click}><Text>カスタム名1</Text></Button>
      </Box>
      <Box
        position="fixed"
        top={size.height * 0.4}
        left="50%"
        transform="translate(-50%, -50%)"
        zIndex="2000">
        <Button><Text>カスタム名2</Text></Button>
      </Box>
        <Box
          position="fixed"
          top={size.height * 0.7}
          left="50%"
          transform="translate(-50%, -50%)"
          zIndex="2000"
        >
          <Text>東京電機大学 Research</Text>
          <Button onClick={handlehomeClick}>ホーム</Button>
          <Button onClick={handleAddClick}>追加</Button>
        </Box>
    </div>
  );
};

export default Research;
このコードを
    id: string;
    cstname: String;
    kind: String;
    custom1: String;
    custom2: String;
    custom3: String;
    custom4: String;
    created_at: String;
    updated_at:String;
    image:String;
このデータを取得できるAPIwo