feat: implement post existence check and detail page
This commit is contained in:
parent
55af0549e7
commit
b18cff8b1a
10 changed files with 646 additions and 43 deletions
225
apps/frontend/src/app/detail/[id]/page.tsx
Normal file
225
apps/frontend/src/app/detail/[id]/page.tsx
Normal file
|
|
@ -0,0 +1,225 @@
|
|||
import Link from "next/link";
|
||||
import { cookies, headers } from "next/headers";
|
||||
import { notFound } from "next/navigation";
|
||||
import Header from "@/components/header";
|
||||
import DetailRawPanel from "@/components/detail-raw-panel";
|
||||
|
||||
type SourceType = "twitter" | "pixiv";
|
||||
|
||||
type PostDetailResponse = {
|
||||
_id: string;
|
||||
type: SourceType;
|
||||
url?: string;
|
||||
author?: string;
|
||||
tags?: string[];
|
||||
mediaUrl?: string;
|
||||
mediaIndex?: number;
|
||||
};
|
||||
|
||||
type Me = {
|
||||
role: "admin" | "writer" | "reader";
|
||||
};
|
||||
|
||||
async function getApiBaseUrl() {
|
||||
const configuredBaseUrl = process.env.API_BASE_URL;
|
||||
if (configuredBaseUrl) {
|
||||
return configuredBaseUrl;
|
||||
}
|
||||
|
||||
const requestHeaders = await headers();
|
||||
const protocol = requestHeaders.get("x-forwarded-proto") ?? "http";
|
||||
const host = requestHeaders.get("x-forwarded-host") ?? requestHeaders.get("host");
|
||||
|
||||
if (!host) {
|
||||
throw new Error("Unable to determine request host for server-side fetches.");
|
||||
}
|
||||
|
||||
return `${protocol}://${host}`;
|
||||
}
|
||||
|
||||
async function fetchPostDetail(apiBaseUrl: string, id: string) {
|
||||
const response = await fetch(`${apiBaseUrl}/api/post/detail/${id}`, {
|
||||
cache: "no-store",
|
||||
});
|
||||
|
||||
if (response.status === 404) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`상세 정보를 불러오지 못했습니다: ${response.status}`);
|
||||
}
|
||||
|
||||
return response.json() as Promise<PostDetailResponse>;
|
||||
}
|
||||
|
||||
async function fetchViewerRole(apiBaseUrl: string) {
|
||||
const cookieHeader = (await cookies()).toString();
|
||||
if (!cookieHeader) {
|
||||
return "guest" as const;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`${apiBaseUrl}/api/auth/me`, {
|
||||
cache: "no-store",
|
||||
headers: {
|
||||
cookie: cookieHeader,
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
return "guest" as const;
|
||||
}
|
||||
|
||||
const me = (await response.json()) as Me;
|
||||
return me.role;
|
||||
} catch {
|
||||
return "guest" as const;
|
||||
}
|
||||
}
|
||||
|
||||
export default async function DetailPage({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params;
|
||||
const apiBaseUrl = await getApiBaseUrl();
|
||||
const postPromise = fetchPostDetail(apiBaseUrl, id);
|
||||
const viewerRolePromise = fetchViewerRole(apiBaseUrl);
|
||||
|
||||
let post: PostDetailResponse | null;
|
||||
try {
|
||||
post = await postPromise;
|
||||
} catch (loadError) {
|
||||
return (
|
||||
<div className="min-h-screen bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.9),rgba(247,229,236,0.85)_45%,rgba(244,240,243,1)_100%)] text-foreground">
|
||||
<Header />
|
||||
<main className="mx-auto w-full max-w-6xl px-4 py-8 sm:px-6 lg:px-8">
|
||||
<section className="border-b border-border/70 pb-6">
|
||||
<div className="flex flex-wrap items-start justify-between gap-3">
|
||||
<div>
|
||||
<h1 className="text-xl tracking-wide">Detail</h1>
|
||||
</div>
|
||||
<div className="border-l border-border/80 pl-3 text-xs text-foreground/70">
|
||||
<p>ID: <span className="font-medium text-foreground/90">{id}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-4 text-sm text-red-600">
|
||||
{loadError instanceof Error ? loadError.message : "상세 정보를 불러오지 못했습니다."}
|
||||
</p>
|
||||
<div className="mt-6">
|
||||
<Link href="/" className="border border-border px-4 py-2 text-sm text-foreground/70 transition hover:bg-black/5">
|
||||
돌아가기
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!post) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const viewerRole = await viewerRolePromise;
|
||||
const canManagePost = viewerRole === "admin" || viewerRole === "writer";
|
||||
const sourceLabel = post.type === "twitter" ? "𝕏" : post.type === "pixiv" ? "Pixiv" : "-";
|
||||
const tags = post.tags ?? [];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.9),rgba(247,229,236,0.85)_45%,rgba(244,240,243,1)_100%)] text-foreground">
|
||||
<Header />
|
||||
|
||||
<main className="mx-auto w-full max-w-6xl px-4 py-8 sm:px-6 lg:px-8">
|
||||
<section className="border-b border-border/70 pb-6">
|
||||
<div className="flex flex-wrap items-start justify-between gap-3">
|
||||
<div>
|
||||
<h1 className="text-xl tracking-wide">Detail</h1>
|
||||
</div>
|
||||
<div className="border-l border-border/80 pl-3 text-xs text-foreground/70">
|
||||
<p>Source: <span className="font-medium text-foreground/90">{sourceLabel}</span></p>
|
||||
<p className="mt-0.5">ID: <span className="font-medium text-foreground/90">{id}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 grid gap-6 lg:grid-cols-[minmax(0,1.15fr)_minmax(320px,0.85fr)]">
|
||||
<div className="space-y-3">
|
||||
{post.mediaUrl ? (
|
||||
<img
|
||||
src={post.mediaUrl}
|
||||
alt={post.author ?? post._id}
|
||||
loading="eager"
|
||||
decoding="async"
|
||||
className="w-full border border-border bg-white object-contain image-scale"
|
||||
/>
|
||||
) : (
|
||||
<div className="aspect-4/5 w-full border border-border bg-black/5" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<aside className="space-y-4">
|
||||
<div className="border border-border bg-background/80 p-4">
|
||||
<p className="text-xs uppercase tracking-[0.3em] text-foreground/40">Metadata</p>
|
||||
<dl className="mt-3 space-y-3 text-sm">
|
||||
<div>
|
||||
<dt className="text-foreground/45">Author</dt>
|
||||
<dd className="mt-0.5 text-foreground/90">{post.author?.trim() || "unknown"}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-foreground/45">Type</dt>
|
||||
<dd className="mt-0.5 text-foreground/90">{post.type}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="text-foreground/45">Media Index</dt>
|
||||
<dd className="mt-0.5 text-foreground/90">{typeof post.mediaIndex === "number" ? post.mediaIndex + 1 : "-"}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div className="border border-border bg-background/80 p-4">
|
||||
<p className="text-xs uppercase tracking-[0.3em] text-foreground/40">Tags</p>
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
{tags.length > 0 ? tags.map((tag) => (
|
||||
<span key={tag} className="border border-border/80 px-2 py-1 text-xs text-foreground/75">
|
||||
{tag}
|
||||
</span>
|
||||
)) : (
|
||||
<span className="text-sm text-foreground/55">태그 없음</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
{post.url ? (
|
||||
<a
|
||||
href={post.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="border border-border px-4 py-2 text-sm text-foreground/80 transition hover:bg-black/5"
|
||||
>
|
||||
원본 보기
|
||||
</a>
|
||||
) : null}
|
||||
<div className="flex flex-row gap-2">
|
||||
<Link
|
||||
href="/"
|
||||
className="border border-border px-4 py-2 text-sm text-foreground/70 transition hover:bg-black/5 w-full"
|
||||
>
|
||||
돌아가기
|
||||
</Link>
|
||||
{canManagePost ? (
|
||||
<Link
|
||||
href={`/edit/${post._id}`}
|
||||
className="border border-border bg-foreground px-4 py-2 text-sm text-background transition hover:opacity-90 w-full"
|
||||
>
|
||||
편집
|
||||
</Link>
|
||||
) : null}
|
||||
</div>
|
||||
<DetailRawPanel data={post} />
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue