ANTOOZA-FRONTEND/app/(main)/(forum)/comment/_component/List.tsx

'use client';

import '../style.scss';
import React, { useMemo } from 'react';
import Loading from '@/app/component/Loading';
import { BoardResponse } from '@/types/response/forum/board';
import { PostResponse } from '@/types/response/forum/post';
import { CommentListResponse } from '@/types/response/forum/comment';
import { type CommentItem } from '@/types/forum/comment';
import useEquippedItems from '@/hooks/useEquippedItems';
import WriteForm from './WriteForm';
import Item from './Item';

type Props = {
    _board: BoardResponse,
    _post: PostResponse,
    _data: CommentListResponse;
    loading: boolean;
    replyTargetID: number|null;
    onReply: (commentID: number) => void;
    onDelete: (commentID: number, parentID?: number) => void;
    onSuccess: (comment?: CommentItem) => void;
    canWriteReply?: boolean;
}

export default function List({ _board, _post, _data, loading, replyTargetID, onReply, onSuccess, onDelete, canWriteReply } : Props)
{
    // 댓글 작성자(대댓글 포함) ID 를 모아 장착 지위 아이템 배치 조회 (배지/닉네임 이펙트 렌더용)
    const authorIDs = useMemo(() => {
        const ids: number[] = [];
        for (const c of _data.list) {
            ids.push(c.memberID);
            for (const ch of c.children ?? []) {
                ids.push(ch.memberID);
            }
        }
        return ids;
    }, [_data.list]);

    const equippedMap = useEquippedItems(authorIDs);

    return (
        <>
            {loading ? (
                <Loading type={2} />
            ) : (
                <>
                    {_data.total > 0 && (
                    <article className="comment-list">
                        <ol>
                            {_data.list.map((row) => {
                                return (
                                    <React.Fragment key={row.id}>
                                        <Item
                                            _board={_board}
                                            _post={_post}
                                            _comment={row}
                                            equippedItems={equippedMap[row.memberID]}
                                            isReplying={replyTargetID === row.id}
                                            onReply={() => onReply(row.id)}
                                            onDelete={onDelete}
                                            onSuccess={onSuccess}
                                            canWriteReply={canWriteReply}
                                        >
                                            {/* row에 대한 답글 폼(토글) */}
                                            {canWriteReply !== false && replyTargetID === row.id && (
                                                <WriteForm
                                                    _board={_board}
                                                    _post={_post}
                                                    _comment={row}
                                                    onSuccess={onSuccess}
                                                    onCancel={() => onReply(row.id)}
                                                />
                                            )}
                                        </Item>

                                        {/* 대댓글 목록 */}
                                        {Array.isArray(row.children) && row.children.length > 0 && (
                                            <li>
                                                <ol className="pl-[72px]">
                                                    {row.children.map((ch) => (
                                                        <Item
                                                            key={ch.id}
                                                            _board={_board}
                                                            _post={_post}
                                                            _comment={ch}
                                                            equippedItems={equippedMap[ch.memberID]}
                                                            onReply={() => onReply(ch.id)}
                                                            onDelete={onDelete}
                                                            onSuccess={onSuccess}
                                                            canWriteReply={canWriteReply}
                                                        >
                                                            {canWriteReply !== false && replyTargetID != null && replyTargetID === ch.id && (
                                                                <WriteForm
                                                                    _board={_board}
                                                                    _post={_post}
                                                                    _comment={ch}
                                                                    onSuccess={onSuccess}
                                                                    onCancel={() => onReply(ch.id)}
                                                                />
                                                            )}
                                                        </Item>
                                                    ))}
                                                </ol>
                                            </li>
                                        )}
                                    </React.Fragment>
                                )
                            })}
                        </ol>
                    </article>
                    )}
                </>
            )}
        </>
    );
}