답변 임시 저장

'use client'

import { useState } from 'react';
import api from '@/util/api';
import { useRouter } from 'next/navigation'; // 수정
import { useQueryClient } from '@tanstack/react-query';

export default function AnswerCreate() {
    const router = useRouter();
    const [answer, setAnswer] = useState({content: '' });

    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            await api.post('/answers', answer);
            // 등록 성공 시, 이전 페이지로 이동하거나 사용자에게 알림을 제공할 수 있습니다.
            router.push('/answer');
        } catch (error) {
            console.error('등록 중 에러:', error);
        }
    };

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

    return (
        <>
            <h3>글 등록</h3>
            <form onSubmit={handleSubmit}>
                
                <div>
                    <label>내용:</label>
                    <textarea name="content" value={answer.content} onChange={handleChange} />
                </div>
                <button type="submit">등록</button>
            </form>
        </>
    );
}

'use client'

import Link from 'next/link'
import { useEffect, useState } from 'react'
import api from "@/util/api"
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'

export default function Answer() {

    const getAnswers = async () => {
        return await api.get('/answers')
            .then((response) => response.data.data.answers)
    }

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


    const deleteAnswer = async (id) => {
        await api.delete(`/answers/${id}`)
    }

    const queryClient = useQueryClient()
    const mutation = useMutation({
        mutationFn: deleteAnswer,
        onSuccess: () => {
            queryClient.invalidateQueries({queryKey: ['answers']})
        }
    })

    if (error) {
        console.log(error)
    }

    if (isLoading) <>Loading...</>

    if (data) {
        return (
            <>
              
                <ul>
                    
                    {data.map((row) => (
                        <li key={row.id}>
                            {row.id} /{' '}
                            <Link href={`/answer/${row.id}`}>{row.content}</Link> /{' '}
                            {row.author} / {row.createdDate}
                            <button onClick={() => mutation.mutate(row.id)}>
                                삭제
                            </button>
                        </li>
                    ))}
                </ul>
                <Link href="/answerCreate">
                Answer Create 페이지로 이동
                </Link>
            </>
        )
    }
}

'use client'

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

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

    const getAnswer = async () => {
        return await api.get(`/answers/${params.id}`)
            .then((response) => response.data.data.answer);
    }

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

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

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

    if (answerData) {
        return (
            <>
                <h1>댓글 상세 {params.id}번</h1>
               
                <div>{answerData.content}</div>
                <Link href={`/answer/${params.id}/edit`}>수정하기</Link>
                
            </>
        );
    }
}

'use client'

import api from "@/util/api"
import { useParams } from 'next/navigation'
import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation';

export default function AnswerEdit() {
    const params = useParams()
    const router = useRouter();

    const [isLoading, setIsLoading] = useState(false)
    const [answer, setAnswer] = useState({ content: '' })

    useEffect(() => {
        fetchAnswer()
    }, [])

    const fetchAnswer = async () => {
        try {
            const response = await api.get(`/answers/${params.id}`)
            setAnswer(response.data.data.answer)
            setIsLoading(true)
        } catch (error) {
            console.log(error)
        }
    }

    const handleSubmit = async (e) => {
        e.preventDefault()
        try {
            await api.patch(`/answers/${params.id}`, answer)
            router.push(`/article/${params.id}`);
        } catch (error) {
            console.log(error)
        }
    }

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

    return (
        <>
            {isLoading ? (
                <>
                    <h1>수정페이지</h1>
                    <form onSubmit={handleSubmit}>
                        
                        <input
                            type="text"
                            name="content"
                            value={answer.content}
                            onChange={handleChange}
                        />
                        <button type="submit">수정</button>
                    </form>
                </>
            ) : (
                <></>
            )}
        </>
    )
}