타입 스크립트는 적응이 안되네

//////////////////////////////////////////////////////////////////////////////////
// store.ts
//////////////////////////////////////////////////////////////////////////////////
import { create } from 'zustand';
export interface Post {
  id: number;
  title: string;
  body: string;
}
interface PostStore {
  searchQuery: string;
  setSearchQuery: (query: string) => void;
}
export const usePostStore = create<PostStore>((set) => ({
  searchQuery: '',
  setSearchQuery: (query) => set({ searchQuery: query }),
}));
//////////////////////////////////////////////////////////////////////////////////
// api.ts
//////////////////////////////////////////////////////////////////////////////////
import axios from 'axios';
import { useQuery } from '@tanstack/react-query';
import { Post } from './store';
const fetchPosts = async (): Promise<Post[]> => {
  const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts');
  return data;
};
export const usePosts = () => {
  return useQuery<Post[], Error>({
    queryKey: ['posts'],
    queryFn: fetchPosts,
  });
};
//////////////////////////////////////////////////////////////////////////////////
// PostList.tsx
//////////////////////////////////////////////////////////////////////////////////
import { useState, useEffect } from 'react';
import { usePosts } from './api';
import { usePostStore } from './store';
const PostList: React.FC = () => {
  // A. useState: 로컬 UI 상태 (입력값 등)
  const [localTitle, setLocalTitle] = useState<string>("");

  // B. Zustand: 전역 상태 가져오기
  const { searchQuery, setSearchQuery } = usePostStore();

  // C. React Query: 서버 데이터 가져오기
  const { data: posts, isLoading, isError, error } = usePosts();

  // D. useEffect: 검색어가 바뀔 때마다 로그 출력 (예시)
  useEffect(() => {
    if (searchQuery) {
      console.log(`검색어 변경됨: ${searchQuery}`);
    }
  }, [searchQuery]);

  if (isLoading) return <div>로딩 중...</div>;

  if (isError) return <div>에러 발생: {error.message}</div>;

  return (
    <div style={{ padding: '20px' }}>
      <h1>포스트 목록</h1>
      {/* 로컬 상태 조작 */}
      <input 
        type="text" 
        value={localTitle} 
        onChange={(e) => setLocalTitle(e.target.value)} 
        placeholder="로컬 타이틀 입력"
      />
      
      {/* 전역 상태 조작 (Zustand) */}
      <button onClick={() => setSearchQuery(localTitle)}>
        전역 검색어 설정
      </button>
      <p>현재 검색어: {searchQuery}</p>
      <ul>
        {posts?.filter(p => p.title.includes(searchQuery)).map((post) => (
          <li key={post.id}>
            <strong>{post.title}</strong>
          </li>
        ))}
      </ul>
    </div>
  );
};
export default PostList;