Add parent comment quote preview on all reply depths

- Show truncated parent comment body with author name above each reply
- Helps identify which comment a reply is responding to, especially
  at deeper nesting levels where indentation caps out

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

Author: Yushin-L

src/components/comments/CommentItem.tsx

@@ -10,6 +10,8 @@ interface CommentItemProps {
   currentUserId: string | null;
   isAdmin: boolean;
   depth: number;
+  parentAuthorName?: string | null;
+  parentBody?: string | null;
   onEdit: (commentId: string, body: string) => Promise<unknown>;
   onDelete: (commentId: string) => Promise<unknown>;
   onReply: (body: string, parentId: string) => Promise<unknown>;
@@ -23,6 +25,8 @@ export default function CommentItem({
   currentUserId,
   isAdmin,
   depth,
+  parentAuthorName,
+  parentBody,
   onEdit,
   onDelete,
   onReply,
@@ -52,6 +56,12 @@ export default function CommentItem({
 
   return (
     <div className={`py-4 ${depth > 0 ? "border-l-2 border-zinc-100 pl-4 dark:border-zinc-800" : ""}`} style={depth > 0 ? { marginLeft: `${Math.min(depth, MAX_INDENT) * 1.5}rem` } : undefined}>
+      {depth > 0 && parentAuthorName && parentBody && (
+        <div className="mb-2 flex items-start gap-1.5 rounded-md bg-stone-100/60 px-3 py-1.5 text-xs text-stone-500">
+          <span className="shrink-0 font-medium text-stone-600">{parentAuthorName}:</span>
+          <span className="line-clamp-1">{parentBody}</span>
+        </div>
+      )}
       <div className="flex items-center gap-2 text-sm">
         <span className="font-medium">
           {authorProfile?.display_name ?? "알 수 없음"}

src/components/comments/CommentSection.tsx

@@ -49,27 +49,39 @@ export default function CommentSection({ postSlug }: CommentSectionProps) {
     return comments.filter((c) => c.parent_id === parentId);
   }
 
+  function getCommentById(id: string) {
+    return comments.find((c) => c.id === id) ?? null;
+  }
+
   function renderThread(parentId: string, depth: number) {
     const children = getChildren(parentId);
     if (children.length === 0) return null;
-    return children.map((child) => (
-      <div key={child.id}>
-        <CommentItem
-          comment={child}
-          authorProfile={profiles[child.user_id] ?? null}
-          currentUserId={user?.id ?? null}
-          isAdmin={isAdmin}
-          depth={depth}
-          onEdit={edit}
-          onDelete={remove}
-          onReply={async (body, pid) => {
-            if (!user) return;
-            await add(user.id, body, pid);
-          }}
-        />
-        {renderThread(child.id, depth + 1)}
-      </div>
-    ));
+    return children.map((child) => {
+      const parent = child.parent_id ? getCommentById(child.parent_id) : null;
+      const parentAuthorName = parent
+        ? (profiles[parent.user_id]?.display_name ?? "알 수 없음")
+        : null;
+      return (
+        <div key={child.id}>
+          <CommentItem
+            comment={child}
+            authorProfile={profiles[child.user_id] ?? null}
+            currentUserId={user?.id ?? null}
+            isAdmin={isAdmin}
+            depth={depth}
+            parentAuthorName={parentAuthorName}
+            parentBody={parent?.body ?? null}
+            onEdit={edit}
+            onDelete={remove}
+            onReply={async (body, pid) => {
+              if (!user) return;
+              await add(user.id, body, pid);
+            }}
+          />
+          {renderThread(child.id, depth + 1)}
+        </div>
+      );
+    });
   }
 
   return (