61 lines
2.8 KiB
TypeScript
61 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import DisabledNotice from "@/components/disabled-notice";
|
|
import { FEATURES } from "@/lib/features";
|
|
import { useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
import { apiFetch, archiveKind, type ArchiveEntry } from "@/lib/api";
|
|
|
|
function ArchivePageInner() {
|
|
const [entries, setEntries] = useState<ArchiveEntry[] | null>(null);
|
|
|
|
useEffect(() => {
|
|
apiFetch<ArchiveEntry[]>("/api/archive").then(setEntries).catch(() => setEntries([]));
|
|
}, []);
|
|
|
|
return (
|
|
<div>
|
|
<h1 className="page-title">포스터 숏폼 아카이브</h1>
|
|
<p className="page-subtitle" style={{ marginBottom: "2rem" }}>
|
|
만들어진 모든 포스터 숏폼이 메타태그와 함께 쌓입니다. 행사·지역·키워드로 축적되는 온라인 숏폼 광고판입니다.
|
|
</p>
|
|
|
|
{entries === null && <p style={{ color: "var(--text-teal-1)" }}>불러오는 중…</p>}
|
|
{entries?.length === 0 && <p style={{ color: "var(--text-teal-3)" }}>아직 아카이브된 영상이 없습니다.</p>}
|
|
|
|
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: "var(--s-5)" }}>
|
|
{entries?.map((e) => (
|
|
<Link key={e.slug} href={`/archive/${e.slug}`} style={{ textDecoration: "none", color: "inherit" }}>
|
|
<div className="card" style={{ overflow: "hidden" }}>
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img src={e.poster_url} alt={e.name}
|
|
style={{ width: "100%", aspectRatio: "3/4", objectFit: "cover", display: "block" }} />
|
|
<div style={{ padding: "var(--s-4)" }}>
|
|
<span className="tag" style={{ height: 20, padding: "0 8px", fontSize: "var(--text-xs)", marginBottom: "var(--s-2)" }}>{archiveKind(e)}</span>
|
|
<p style={{ margin: 0, fontSize: 15, fontWeight: 800 }}>{e.metadata?.event_name ?? e.name}</p>
|
|
<p style={{ margin: "var(--s-1) 0 0", fontSize: 13, color: "var(--text-teal-1)" }}>
|
|
{e.metadata?.place}{e.metadata?.category ? ` · ${e.metadata.category}` : ""}
|
|
</p>
|
|
<div style={{ marginTop: "var(--s-3)", display: "flex", flexWrap: "wrap", gap: "var(--s-1)" }}>
|
|
{(e.metadata?.keywords ?? []).slice(0, 3).map((k) => (
|
|
<span key={k} className="tag" style={{ fontSize: 12 }}>{k}</span>
|
|
))}
|
|
{(e.metadata?.keywords?.length ?? 0) > 3 && (
|
|
<span className="tag" style={{ fontSize: 12 }}>+{(e.metadata!.keywords.length - 3)}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
|
|
export default function ArchivePage() {
|
|
if (!FEATURES.archive) return <DisabledNotice title="아카이브" backHref="/" />;
|
|
return <ArchivePageInner />;
|
|
}
|