6.5 개인화 위젯(최근 본 글/알림 요약)

src/app/components/PersonalWidgets.tsx

@@ -0,0 +1,38 @@
+"use client";
+import useSWR from "swr";
+
+type RecentItem = { id: string; title: string; viewedAt: string };
+type NotiItem = { id: string; type: string; message: string; createdAt: string };
+
+const fetcher = (url: string) => fetch(url).then((r) => r.json());
+
+export function PersonalWidgets() {
+  const { data: recent } = useSWR<{ items: RecentItem[] }>("/api/me/recent", fetcher);
+  const { data: notis } = useSWR<{ items: NotiItem[] }>("/api/me/notifications", fetcher);
+  return (
+    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginTop: 16 }}>
+      <section>
+        <h3 style={{ marginTop: 0 }}>최근 본 글</h3>
+        <ul style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+          {(recent?.items ?? []).map((i) => (
+            <li key={i.id}>
+              <a href={`/posts/${i.id}`}>{i.title}</a>
+            </li>
+          ))}
+          {(!recent || recent.items.length === 0) && <li>최근 본 글이 없습니다.</li>}
+        </ul>
+      </section>
+      <section>
+        <h3 style={{ marginTop: 0 }}>알림 요약</h3>
+        <ul style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+          {(notis?.items ?? []).map((n) => (
+            <li key={n.id}>{n.message}</li>
+          ))}
+          {(!notis || notis.items.length === 0) && <li>새 알림이 없습니다.</li>}
+        </ul>
+      </section>
+    </div>
+  );
+}
+
+