[TO DO LIST][DAY 05] 2025.05.28 - 노션 데이터베이스 연결

• 서버사이드 렌더링이라서 api 쏘는 주소조차도 노출이 안 될 수가 있구나!!! 대박이다!!!
• axios.post(”/api/notion”) 이 부분이 url을 넣는 게 아니고 저 api 폴더 밑의 notion 이라는 곳의 파일 안을 통째로 읽어오는 것 같다!

// api/notion/route.ts
import { NextResponse } from "next/server";

const headers = {
  Authorization: `Bearer ${process.env.NOTION_TO_DO_LIST_API_KEY}`,
  "Content-Type": "application/json",
  "Notion-Version": "2022-02-22",
};

const notionDatabaseUrl = `https://api.notion.com/v1/databases/${process.env.TO_DO_LIST_DATABASE_KEY}/query`;

export async function POST() {
  try {
    const response = await fetch(notionDatabaseUrl, {
      method: "POST",
      headers,
    });

    if (!response.ok) {
      throw new Error(`Notion API error: ${response.statusText}`);
    }

    const data = await response.json();
    return NextResponse.json(data);
  } catch (error) {
    console.error("Error fetching from Notion:", error);
    return NextResponse.json(
      { error: "Failed to fetch data from Notion" },
      { status: 500 }
    );
  }
}

이렇게 해서 home에서 axios로 불러오니까 데이터가 온다!

  const [data, setData] = useState<any>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.post("/api/notion");
        setData(response.data);
      } catch (err) {
        setError("Failed to fetch data");
        console.error("Error fetching data:", err);
      }
    };
    fetchData();
  }, []);

다음 시간에는 여기에 filter나 sort를 넣어서 보낼 수 있게 수정해봐야겠다.