교재 리액트 맞게 바꾼거

'use client'

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

export default function Article() {

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

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


    const deleteArticle = async (id: number) => {
        await api.delete(`/articles/${id}`)
    }

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

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

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

    if (data) {
        return (
            <>
                <ArticleForm fetchArticles={getArticles} />
                <ul>
                    번호 / 제목 / 작성자 / 생성일 / 삭제
                    {data.map((row: any) => (
                        <li key={row.id}>
                            {row.id} /{' '}
                            <Link href={`/article/${row.id}`}>{row.subject}</Link> /{' '}
                            {row.author} / {row.createdDate}
                            <button onClick={() => mutation.mutate(row.id)}>
                                삭제
                            </button>
                        </li>
                    ))}
                </ul>
            </>
        )
    }


}

function ArticleForm({ fetchArticles }: { fetchArticles: () => void }) {
  const [article, setArticle] = useState({ subject: '', content: '' })

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
      e.preventDefault()

      await api
          .post('/articles', article)
          .then(function (response) {
              fetchArticles()
              console.log(response)
          })
          .catch(function (error) {
              console.log(error)
          })
  }

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      const { name, value } = e.target
      setArticle({ ...article, [name]: value })
  }

  return (
      <>
          <h3>등록폼</h3>
          <form onSubmit={handleSubmit}>
              <input type="text" name="subject" onChange={handleChange} />
              <input type="text" name="content" onChange={handleChange} />
              <button type="submit">등록</button>
          </form>
      </>
  )
}

'use client'

import api from '@/utils/api'
import { useQuery } from '@tanstack/react-query'
import Link from 'next/link'
import { useParams } from 'next/navigation'

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, error, data} = useQuery({
        queryKey: ['article'],
        queryFn: getArticle
    });

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

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

    if (data) {
        return (
            <>
                <h1>게시판 상세 {params.id}번</h1>
                <div>{data.subject}</div>
                <div>{data.content}</div>
                <div>{data.createdDate}</div>
                <div>{data.modifiedDate}</div>
                <Link href={`/article/${params.id}/edit`}>수정하기</Link>
            </>
        )
    }
}

'use client'

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

export default function ArticleEdit() {
    const params = useParams()

    const [isLoding, setIsLoding] = useState(false)
    const [article, setArticle] = useState({ subject: '', content: '' })

    const router = useRouter()

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

    const fetchArticle = async () => {
        await api
            .get('/members/me')
            .then((response) => {
                console.log(response)
            })
            .catch((err) => {
                console.log(err)
                router.push('/member/login')
            })

        await api
            .get(`/articles/${params.id}`)
            .then((response) => {
                setArticle(response.data.data.article)
                setIsLoding(true)
            })
            .catch((err) => {
                console.log(err)
            })
    }

    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault()
        await api
            .patch(`/articles/${params.id}`, article)
            .then(function (response) {
                console.log(response)
            })
            .catch(function (error) {
                console.log(error)
            })
    }

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const { name, value } = e.target
        setArticle({ ...article, [name]: value })
    }

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