Add edit button on post detail page for post author

- Show "수정" button in DynamicPostView when logged-in user is the author
- Link to /write?edit=<id> to auto-select the draft in the editor
- WritePage reads ?edit query param and auto-loads the matching draft

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: Yushin-L

src/app/write/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { Suspense, useEffect, useRef, useState } from "react";
+import { useSearchParams } from "next/navigation";
 import { useAuth } from "@/hooks/useAuth";
 import ProtectedRoute from "@/components/auth/ProtectedRoute";
 import NovelEditor from "@/components/editor/NovelEditor";
@@ -17,6 +18,8 @@ import type { PostDraft } from "@/lib/supabase/types";
 
 function WritePage() {
   const { user } = useAuth();
+  const searchParams = useSearchParams();
+  const editId = searchParams.get("edit");
 
   const [drafts, setDrafts] = useState<PostDraft[]>([]);
   const [currentDraft, setCurrentDraft] = useState<PostDraft | null>(null);
@@ -28,11 +31,23 @@ function WritePage() {
   const [message, setMessage] = useState("");
   const [mdMode, setMdMode] = useState(false);
   const editorRef = useRef<any>(null);
+  const [editApplied, setEditApplied] = useState(false);
 
   useEffect(() => {
     if (user) loadDrafts();
   }, [user]);
 
+  // ?edit=<id> 쿼리파라미터로 진입 시 해당 draft 자동 선택
+  useEffect(() => {
+    if (editId && drafts.length > 0 && !editApplied) {
+      const target = drafts.find((d) => d.id === editId);
+      if (target) {
+        selectDraft(target);
+        setEditApplied(true);
+      }
+    }
+  }, [editId, drafts, editApplied]);
+
   async function loadDrafts() {
     if (!user) return;
     try {
@@ -285,7 +300,9 @@ function WritePage() {
 export default function WritePageWrapper() {
   return (
     <ProtectedRoute requireApproved>
-      <WritePage />
+      <Suspense>
+        <WritePage />
+      </Suspense>
     </ProtectedRoute>
   );
 }

src/components/posts/DynamicPostView.tsx

@@ -1,7 +1,9 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import Link from "next/link";
 import { getPublishedPostBySlug } from "@/lib/drafts/published";
+import { useAuth } from "@/hooks/useAuth";
 import MarkdownContent from "./MarkdownContent";
 import TagBadge from "./TagBadge";
 import LikeButton from "./LikeButton";
@@ -13,6 +15,7 @@ interface DynamicPostViewProps {
 }
 
 export default function DynamicPostView({ slug }: DynamicPostViewProps) {
+  const { user } = useAuth();
   const [post, setPost] = useState<PostDraft | null>(null);
   const [loading, setLoading] = useState(true);
   const [notFound, setNotFound] = useState(false);
@@ -49,9 +52,19 @@ export default function DynamicPostView({ slug }: DynamicPostViewProps) {
   return (
     <article className="mx-auto max-w-3xl">
       <header className="mb-8">
-        <h1 className="text-3xl font-bold tracking-tight text-stone-900">
-          {post.title}
-        </h1>
+        <div className="flex items-start justify-between gap-4">
+          <h1 className="text-3xl font-bold tracking-tight text-stone-900">
+            {post.title}
+          </h1>
+          {user && user.id === post.author_id && (
+            <Link
+              href={`/write?edit=${post.id}`}
+              className="shrink-0 rounded-lg border border-stone-300 px-4 py-2 text-sm font-medium text-stone-600 transition-colors hover:bg-stone-50"
+            >
+              수정
+            </Link>
+          )}
+        </div>
         <div className="mt-4 flex flex-wrap items-center gap-3">
           <span className="text-sm text-stone-500">
             {post.author_name ? `${post.author_name} · ` : ""}