import { filterByTitle } from "@/hooks/filtering";
import Image from "next/image";
import name from "@/public/images/profile.webp";
import useSWR from "swr";
import styles from "@/styles/layouts/intro.module.scss";
import common from "@/styles/common/common.module.scss";
import { getData } from "@/pages/api/notionApi";
import { SWRConfig } from "swr/_internal";
import { NotionDataRow } from "@/types/types";
import { Client } from "@notionhq/client";
export async function getStaticProps() {
const query = await getData();
// @ts-ignore
const rows = query.results.map((res) => res.properties) as NotionDataRow[];
const rowsStructured = rows.map((row) => ({
title: row.title.title[0].text.content,
content: row.content.rich_text[0]?.text?.content,
tags: row.tags.multi_select[0].name,
}));
return {
props: {
staticData: rowsStructured,
},
};
}
const Introduce = ({ staticData }: any) => {
const { data } = useSWR("/api/notion");
const { data, isLoading } = useSWR("/api/notion", {
initialData: staticData,
revalidateOnMount: true,
});
const title = "Introduce";
const intro = filterByTitle(data, title)?.[0];
return (
<figure className={styles.intro}>
<div className={styles.intro_img_wrap}>
<Image
src={name}
alt="name"
placeholder="blur"
fill
sizes="(min-width: 480px) 100vw, (min-width:600px) 500px, 500px"
/>
</div>
<figcaption className={styles.intro_contents}>
<h2 className={`${styles.intro_title} ${common.stroke_title}`}>
프론트엔드 개발자
</h2>
{intro ? <p>{intro.content}</p> : null}
</figcaption>
</figure>
);
};
export default Introduce;
무엇이 문제인가..... 작동하지 않는다.