댓글 불러오기

'use client'

import { useState } from 'react';
import { useParams } from 'next/navigation';
import { useQuery } from '@tanstack/react-query';
import api from "@/util/api";

export default function ArticleDetail() {
    const params = useParams();

    const getArticle = async () => {
        return await api.get(`/articles/${params.id}`)
            .then((response) => response.data.data.article);
    }

    const { isLoading: articleLoading, error: articleError, data: articleData } = useQuery({
        queryKey: ['article'],
        queryFn: getArticle
    });

    if (articleError) {
        console.log(articleError);
    }

    if (articleLoading) {
        return <>Loading...</>;
    }

    if (articleData) {
        return (
            <>
                <h1>게시판 상세 {params.id}번</h1>
                <div>{articleData.subject}</div>
                <div>{articleData.content}</div>
                <div>{articleData.createdDate}</div>
                <div>{articleData.modifiedDate}</div>
                <AnswerCreate />
            </>
        );
    }
}

function AnswerCreate() {
    const params = useParams();
    const [answer, setAnswer] = useState({ content: '' });

    const getAnswers = async () => {
        // 댓글을 가져오는 비동기 함수 구현
    }

    const { isLoading: answerLoading, error: answerError, data: answerData } = useQuery({
        queryKey: ['answers'],
        queryFn: getAnswers
    });

    const handleSubmit = async (e) => {
        e.preventDefault();
        await api
            .post('/answers', answer)
            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            })
    };

    const handleChange = (e) => {
        const { name, value } = e.target;
        setAnswer({ ...answer, [name]: value });
    };

    if (answerError) {
        console.log(answerError);
    }

    return (
        <>
            <h3>글 등록</h3>
            <form onSubmit={handleSubmit}>
                <div>
                    <label>내용:</label>
                    <textarea name="content" value={answer.content} onChange={handleChange} />
                </div>
                <button type="submit">등록</button>
            </form>
            {/* 여기서 댓글을 표시하거나, 댓글을 표시할 컴포넌트를 추가하세요 */}
        </>
    );
}

여기까지가 댓글을 등록하면 데이터베이스에 들어간다.