모든 것을 재귀적으로 구현한 댓글 기능

model Comment {
  id        String    @id @default(uuid())
  comment   String
  
  createdAt DateTime  @default(now())
  updatedAt DateTime  @updatedAt
  
  userId    String
  user      User      @relation(fields: [userId], references: [id])
  
  reportId  String?
  report    Report?   @relation(fields: [reportId], references: [id])
  
  parentId  String?
  parent    Comment?  @relation("CommentToComment", fields: [parentId], references: [id])
  replies   Comment[] @relation("CommentToComment")
}

// Controller
@Controller('comment')
export class CommentController {
  constructor(private commentService: CommentService) {}
 
  @Get(':ReportId')
  async getComments(@Param('ReportId') reportId: string) {
    const comments = await this.commentService.getComments(reportId);
    return { comments };
  }
}

// Service
@Injectable()
export class CommentService {
  constructor(private commentRepository: CommentRepository) {}
 
  async getComments(id: string) {
    const comments = await this.commentRepository.getComments(id);
 
    const replies = await Promise.all(
      comments.map(async (comment) => {
        if (comment.replies.length === 0) return comment;
 
        const replies = await this.getComments(comment.id);
        return { ...comment, replies };
      }),
    );
 
    return replies;
  }
}

// Repository
@Injectable()
export class CommentRepository {
  constructor(private prisma: PrismaService) {}
 
  getComments(id: string) {
    return this.prisma.comment.findMany({
      where: { OR: [{ parentId: id }, { reportId: id }] },
      include: {
        replies: true,
        user: {
          select: {
            id: true,
            nickname: true,
          },
        },
      },
    });
  }
}

{ comments: TComments }

type TComments = Array<{
  id: string;
  comment: string;
  user: {
    id: string;
    nickname: string;
  };
  createdAt: string;
  updatedAt: string;
  replies: TComments;
}>;

const CommentBox = ({
  comments,
  depth = 0,
}: {
  comments: TComments;
  depth?: number;
}) => {
  const isDepthZero = depth === 0;

  return (
    <>
      {comments.map(({ user, id, comment, replies }) => (
        <div style={{ marginLeft: `${isDepthZero ? 0 : 1}rem` }} key={id}>
          <div>
            {isDepthZero ? '' : '↪'} {user.nickname}: {comment}
          </div>

          <CommentBox comments={replies} depth={depth + 1} />
        </div>
      ))}
    </>
  );
};