feat: notion-api scrap컴포넌트 와이어프레임제작

src/app/home/apis/scrap-apis.ts

@@ -0,0 +1,28 @@
+export async function getAllScrapList() {
+  const response = await fetch(
+    `https://api.notion.com/v1/databases/${process.env.NOTION_DATABASE_ID}/query`,
+    {
+      method: "POST",
+      headers: {
+        Accept: "application/json",
+        "Notion-Version": "2022-06-28",
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${process.env.NOTION_TOKEN}`,
+      },
+      body: JSON.stringify({ page_size: 100 }),
+    },
+  );
+  const responseData = await response.json();
+
+  const targetData = responseData.results
+    .map((item: any) => item.properties)
+    .map((item: any) => {
+      return {
+        name: item.이름.title[0]?.plain_text || "",
+        tags: item["다중 선택"].multi_select.map((tag: any) => tag.name),
+        link: item.link.rich_text[0]?.plain_text || "",
+      };
+    });
+
+  return targetData;
+}

src/app/home/components/scrap/scrap-item/scrap-item.stories.tsx

@@ -0,0 +1,15 @@
+import ScrapItem from "./scrap-item";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof ScrapItem> = {
+  title: "Home/ScrapItem",
+  component: ScrapItem,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ScrapItem>;
+
+export const Default: Story = {
+  args: {},
+};

src/app/home/components/scrap/scrap-item/scrap-item.tsx

@@ -0,0 +1,33 @@
+/**
+ * 작성자: KYD
+ * 기능: 홈페이지에 쓰일 스크랩 목록 (서버 컴포넌트)
+ * 프로세스 설명: 프로세스 복잡시 노션링크 첨부권장
+ * 아이디어: 테이블 형태, 소팅, 노션으로 링크이동?
+ */
+import { getAllScrapList } from "@/app/home/apis/scrap-apis";
+
+interface IScrapItem {}
+
+const ScrapItem: React.FC<IScrapItem> = async () => {
+  //SECTION HOOK호출 영역
+  const scrapList = await getAllScrapList();
+  //!SECTION HOOK호출 영역
+
+  //SECTION 상태값 영역
+
+  //!SECTION 상태값 영역
+
+  //SECTION 메서드 영역
+
+  //!SECTION 메서드 영역
+
+  return (
+    <div>
+      {scrapList.map((item: any) => (
+        <div key={item.name}>{item.name}</div>
+      ))}
+    </div>
+  );
+};
+
+export default ScrapItem;

src/app/page.tsx

@@ -1,8 +1,8 @@
-import { getAllPosts } from "@/lib/api";
 import GridBoxWrapper from "@layout/grid-box-wrapper/grid-box-wrapper";
-
-export default function Home() {
-  const posts = getAllPosts();
+import { getAllScrapList } from "./home/apis/scrap-apis";
+import ScrapItem from "./home/components/scrap/scrap-item/scrap-item";
+export default async function Home() {
+  const scrapList = await getAllScrapList();
 
   return (
     <main className="mx-auto h-auto w-full lg:w-[1200px]">
@@ -29,8 +29,11 @@ export default function Home() {
         <GridBoxWrapper className="border-2 lg:col-start-2 lg:col-end-3 lg:row-start-2 lg:row-end-3">
           2-2
         </GridBoxWrapper>
-        <GridBoxWrapper className="h-[500px] border-2 lg:col-start-3 lg:col-end-4 lg:row-start-2 lg:row-end-3 lg:h-auto">
-          3-1?
+        <GridBoxWrapper
+          title="최근 스크랩한 게시글"
+          className="h-[500px] border-2 lg:col-start-3 lg:col-end-4 lg:row-start-2 lg:row-end-3 lg:h-auto"
+        >
+          <ScrapItem />
         </GridBoxWrapper>
       </div>
     </main>