WIP Add Scrap page

src/app/scraps/[slug]/page.tsx

@@ -0,0 +1,36 @@
+import { metadataConfig } from "@/libs/meta";
+import { getScrapsDetail } from "@/libs/microcms";
+import type { Metadata } from "next";
+
+type Props = {
+	params: { slug: string };
+};
+
+export async function generateMetadata({
+	params: { slug },
+}: Props): Promise<Metadata> {
+	const scraps = await getScrapsDetail({ contentId: slug });
+
+	return metadataConfig({ title: scraps.title });
+}
+
+export default async function Page({
+	params: { slug },
+}: {
+	params: { slug: string };
+}) {
+	const scraps = await getScrapsDetail({
+		contentId: slug,
+	});
+
+	return (
+		<div className="mx-4 max-sm:py-4">
+			<h2>{scraps.title}</h2>
+			{scraps.comments.map((comment, i) => (
+				<div key={comment.fieldId}>
+					<div dangerouslySetInnerHTML={{ __html: comment.body }} />
+				</div>
+			))}
+		</div>
+	);
+}

src/app/scraps/page.tsx

@@ -0,0 +1,34 @@
+import { formatDate } from "@/libs/date";
+import { metadataConfig } from "@/libs/meta";
+import { getScraps } from "@/libs/microcms";
+import { FaceIcon, ImageIcon, SunIcon } from "@radix-ui/react-icons";
+import type { Metadata } from "next";
+import Link from "next/link";
+
+export const REVALIDATE_TIME = 0;
+
+export const metadata: Metadata = metadataConfig({ title: "Scraps" });
+
+export default async function Page() {
+	const scraps = await getScraps(100);
+	return (
+		<div className="mx-4 max-sm:py-4">
+			{scraps.contents.map((scraps) => (
+				<div
+					key={scraps.id}
+					className="border mb-4 p-4 flex justify-between items-center"
+				>
+					<div>
+						<Link href={`/scraps/${scraps.id}`} className="no-underline">
+							<h2 className="text-xl">{scraps.title}</h2>
+						</Link>
+						<div>{formatDate(scraps.createdAt)}</div>
+					</div>
+					<div>
+						<p>{scraps.comments.length}</p>
+					</div>
+				</div>
+			))}
+		</div>
+	);
+}

src/components/Header.tsx

@@ -17,12 +17,12 @@ export const Header: React.FC = () => {
 					<span className="visually-hidden outline-none">ホーム</span>
 				</Link>
 				<nav>
-					<Link href="/" className="text-gray-950 mr-4">
-						ホーム
-					</Link>
-					<Link href="/posts" className="text-gray-950">
+					<Link href="/posts" className="text-gray-950  mr-4">
 						記事リスト
 					</Link>
+					<Link href="/scraps" className="text-gray-950">
+						Scraps
+					</Link>
 				</nav>
 			</div>
 		</header>

src/libs/microcms.ts

@@ -20,6 +20,18 @@ export type PostType = {
 	image?: MicroCMSImage;
 };
 
+export type ScrapsType = {
+	title: string;
+	isOpen: boolean;
+	comments: CommentsType[];
+};
+
+export type CommentsType = {
+	fieldId: string;
+	body: string;
+	isOpen: boolean;
+};
+
 export type TagType = {
 	name: string;
 };
@@ -74,3 +86,19 @@ export const getTag = async (contentId: string) => {
 		contentId,
 	});
 };
+
+export const getScraps = async (limit: number) => {
+	return await client.getList<ScrapsType>({
+		endpoint: "scraps",
+		queries: {
+			limit,
+		},
+	});
+};
+
+export const getScrapsDetail = async ({ contentId }: { contentId: string }) => {
+	return await client.getListDetail<ScrapsType>({
+		endpoint: "scraps",
+		contentId,
+	});
+};