bitforum-frontend/app/(forum)/comment/_component/List.tsx

'use client';

import '../style.scss';
import React from 'react';
import BoardResponse from '@/dtos/response/forum/board/boardResponse';
import PostResponse from '@/dtos/response/forum/post/postResponse';
import CommentListResponse from '@/dtos/response/forum/comment/commentListResponse';
import WriteForm from './WriteForm';
import Item from './Item';
import Loading from '@/app/component/Loading';

type Props = {
    board: BoardResponse,
    post: PostResponse,
    data: CommentListResponse;
    loading: boolean;
    replyTargetID: number|null;
    onReply: (commentID: number) => void;
    onDelete: () => void;
    onSuccess: () => void;
}

export default function List({ board, post, data, loading, replyTargetID, onReply, onSuccess, onDelete } : Props)
{
    return (
        <>
            {loading && <Loading type={2} />}

            {data && data.total > 0 && (
                <article className="comment-list">
                    <ol>
                        {data.list.map((row, i) => {
                            return (
                                <React.Fragment key={i}>
                                    <Item key={i}
                                        board={board}
                                        post={post}
                                        comment={row}
                                        isReplying={replyTargetID == row.id}
                                        onReply={() => onReply(row.id)}
                                        onDelete={onDelete}
                                        onSuccess={onSuccess}
                                    />

                                    {/* row에 대한 답글 폼(토글) */}
                                    {replyTargetID === row.id && (
                                        <div className="pl-[81px] mb-2">
                                            <WriteForm
                                                board={board}
                                                post={post}
                                                comment={row}
                                                onSuccess={onSuccess}
                                                onCancel={() => onReply(row.id)}
                                            />
                                        </div>
                                    )}

                                    {Array.isArray(row.children) && row.children.length > 0 && (
                                        <ol className="pl-[81px]">
                                            {row.children.map((ch, j) => (
                                                <React.Fragment key={j}>
                                                    <Item
                                                        board={board}
                                                        post={post}
                                                        comment={ch}
                                                        onReply={() => onReply(row.id)}
                                                        onDelete={onDelete}
                                                        onSuccess={onSuccess}
                                                    />

                                                    {replyTargetID != null && replyTargetID === ch.id && (
                                                        <div className="pl-[81px] mb-2">
                                                            <WriteForm
                                                                board={board}
                                                                post={post}
                                                                comment={ch}
                                                                onSuccess={onSuccess}
                                                                onCancel={() => onReply(ch.id)}
                                                            />
                                                        </div>
                                                    )}
                                                </React.Fragment>
                                            ))}
                                        </ol>
                                    )}
                                </React.Fragment>
                            )
                        })}
                    </ol>
                </article>
            )}
        </>
    );
}