Fix nested replies beyond 2nd depth not rendering

- Refactor comment rendering to recursive renderThread() function
- All depth levels now render correctly (indent caps at 3 levels)
- Add depth prop to CommentItem for proper indentation

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

Author: Yushin-L

src/components/comments/CommentItem.tsx

@@ -9,16 +9,20 @@ interface CommentItemProps {
   authorProfile: Profile | null;
   currentUserId: string | null;
   isAdmin: boolean;
+  depth: number;
   onEdit: (commentId: string, body: string) => Promise<unknown>;
   onDelete: (commentId: string) => Promise<unknown>;
   onReply: (body: string, parentId: string) => Promise<unknown>;
 }
 
+const MAX_INDENT = 3;
+
 export default function CommentItem({
   comment,
   authorProfile,
   currentUserId,
   isAdmin,
+  depth,
   onEdit,
   onDelete,
   onReply,
@@ -47,7 +51,7 @@ export default function CommentItem({
   const canDelete = isOwner || isAdmin;
 
   return (
-    <div className={`py-4 ${comment.parent_id ? "ml-8 border-l-2 border-zinc-100 pl-4 dark:border-zinc-800" : ""}`}>
+    <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}>
       <div className="flex items-center gap-2 text-sm">
         <span className="font-medium">
           {authorProfile?.display_name ?? "알 수 없음"}

src/components/comments/CommentSection.tsx

@@ -42,12 +42,34 @@ export default function CommentSection({ postSlug }: CommentSectionProps) {
       });
   }, [comments, profiles]);
 
-  // Organize into threads: top-level + replies
+  // Organize into threads
   const topLevel = comments.filter((c) => !c.parent_id);
-  const replies = comments.filter((c) => c.parent_id);
 
-  function getReplies(parentId: string) {
-    return replies.filter((r) => r.parent_id === parentId);
+  function getChildren(parentId: string) {
+    return comments.filter((c) => c.parent_id === parentId);
+  }
+
+  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 (
@@ -74,28 +96,15 @@ export default function CommentSection({ postSlug }: CommentSectionProps) {
                 authorProfile={profiles[comment.user_id] ?? null}
                 currentUserId={user?.id ?? null}
                 isAdmin={isAdmin}
+                depth={0}
                 onEdit={edit}
                 onDelete={remove}
                 onReply={async (body, parentId) => {
                   if (!user) return;
                   await add(user.id, body, parentId);
                 }}
               />
-              {getReplies(comment.id).map((reply) => (
-                <CommentItem
-                  key={reply.id}
-                  comment={reply}
-                  authorProfile={profiles[reply.user_id] ?? null}
-                  currentUserId={user?.id ?? null}
-                  isAdmin={isAdmin}
-                  onEdit={edit}
-                  onDelete={remove}
-                  onReply={async (body, parentId) => {
-                    if (!user) return;
-                    await add(user.id, body, parentId);
-                  }}
-                />
-              ))}
+              {renderThread(comment.id, 1)}
             </div>
           ))}
         </div>