feat(frontend): show post title and handle expired/missing state before unlock

unlock 페이지 진입 시 비밀번호 입력 전에 게시글 제목을 표시하고,
존재하지 않는 문서와 만료된 문서를 각각 별도 UI로 안내.

- api.ts: getPostMetadata 함수 추가
- page.tsx: 서버에서 메타데이터 fetch → generateMetadata에 실제 제목 반영
- post-unlock.tsx: meta prop 수신, 제목 표시 / null → 404 UI / isExpired → 만료 UI

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: junzero741

apps/frontend/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/frontend/src/app/[slug]/page.tsx

@@ -1,9 +1,18 @@
 import type { Metadata } from 'next';
+import { getPostMetadata } from '@/lib/api';
 import PostUnlock from './post-unlock';
 
-export function generateMetadata(): Metadata {
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}): Promise<Metadata> {
+  const { slug } = await params;
+  const meta = await getPostMetadata(slug);
+  const title = meta ? `${meta.title} - 님보` : '비밀 문서 - 님보';
+
   return {
-    title: '비밀 문서 - 님보',
+    title,
     description: '비밀번호로 보호된 문서입니다.',
     robots: {
       index: false,
@@ -29,5 +38,6 @@ export default async function PostPage({
   params: Promise<{ slug: string }>;
 }) {
   const { slug } = await params;
-  return <PostUnlock slug={slug} />;
+  const meta = await getPostMetadata(slug);
+  return <PostUnlock slug={slug} meta={meta} />;
 }

apps/frontend/src/app/[slug]/post-unlock.tsx

@@ -2,12 +2,18 @@
 
 import { useState } from 'react';
 import { viewPost } from '@/lib/api';
+import type { GetPostMetadataResponse } from '@/lib/api';
 import { sanitizeHtml } from '@/lib/sanitize';
 import ReportModal from '@/components/ReportModal';
 
 type Step = 'auth' | 'view';
 
-export default function PostUnlock({ slug }: { slug: string }) {
+interface Props {
+  slug: string;
+  meta: GetPostMetadataResponse | null;
+}
+
+export default function PostUnlock({ slug, meta }: Props) {
   const [step, setStep] = useState<Step>('auth');
   const [password, setPassword] = useState('');
   const [post, setPost] = useState<{ title: string; content: string } | null>(null);
@@ -57,6 +63,45 @@ export default function PostUnlock({ slug }: { slug: string }) {
     );
   }
 
+  // 존재하지 않는 게시글
+  if (meta === null) {
+    return (
+      <section className="mx-auto max-w-md px-4 py-16">
+        <div className="rounded-xl border border-border bg-surface-card p-8 shadow-md text-center">
+          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-error-bg">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-6 w-6 text-error">
+              <circle cx="12" cy="12" r="10" />
+              <line x1="12" x2="12" y1="8" y2="12" />
+              <line x1="12" x2="12.01" y1="16" y2="16" />
+            </svg>
+          </div>
+          <h1 className="text-lg font-semibold text-text-primary">존재하지 않는 문서</h1>
+          <p className="mt-1 text-sm text-text-secondary">링크가 잘못되었거나 삭제된 문서입니다.</p>
+        </div>
+      </section>
+    );
+  }
+
+  // 만료된 게시글
+  if (meta.isExpired) {
+    return (
+      <section className="mx-auto max-w-md px-4 py-16">
+        <div className="rounded-xl border border-border bg-surface-card p-8 shadow-md text-center">
+          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-error-bg">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-6 w-6 text-error">
+              <circle cx="12" cy="12" r="10" />
+              <polyline points="12 6 12 12 16 14" />
+            </svg>
+          </div>
+          <h1 className="text-lg font-semibold text-text-primary">만료된 문서</h1>
+          <p className="mt-1 text-sm text-text-secondary">
+            열람 기간이 지나 더 이상 접근할 수 없습니다.
+          </p>
+        </div>
+      </section>
+    );
+  }
+
   return (
     <section className="mx-auto max-w-md px-4 py-16">
       <div className="rounded-xl border border-border bg-surface-card p-8 shadow-md text-center">
@@ -68,7 +113,7 @@ export default function PostUnlock({ slug }: { slug: string }) {
           </svg>
         </div>
 
-        <h1 className="text-lg font-semibold text-text-primary">보호된 문서</h1>
+        <h1 className="text-lg font-semibold text-text-primary">{meta.title}</h1>
         <p className="mt-1 text-sm text-text-secondary">
           이 문서는 비밀번호로 보호되어 있습니다.
         </p>

apps/frontend/src/lib/api.ts

@@ -2,12 +2,13 @@ import {
   API_ROUTES,
   CreatePostRequest,
   CreatePostResponse,
+  GetPostMetadataResponse,
   UnlockPostRequest,
   UnlockPostResponse,
   ReportReason,
 } from '@private-board/shared';
 
-export type { CreatePostRequest, CreatePostResponse, UnlockPostRequest, UnlockPostResponse, ReportReason };
+export type { CreatePostRequest, CreatePostResponse, GetPostMetadataResponse, UnlockPostRequest, UnlockPostResponse, ReportReason };
 
 const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:4000';
 
@@ -22,6 +23,15 @@ export async function createPost(data: CreatePostRequest): Promise<CreatePostRes
   return res.json();
 }
 
+export async function getPostMetadata(slug: string): Promise<GetPostMetadataResponse | null> {
+  const res = await fetch(`${API_BASE}${API_ROUTES.posts.metadata(slug)}`, {
+    cache: 'no-store',
+  });
+  if (res.status === 404) return null;
+  if (!res.ok) return null;
+  return res.json();
+}
+
 export async function viewPost(slug: string, data: UnlockPostRequest): Promise<UnlockPostResponse> {
   const res = await fetch(`${API_BASE}${API_ROUTES.posts.unlock(slug)}`, {
     method: 'POST',