등록 바로 적용되게

import { useState } from 'react';
import api from '@/util/api';
import { useRouter } from 'next/router';

export default function ArticleCreate() {
    const router = useRouter();
    const [article, setArticle] = useState({ subject: '', content: '' });

    const handleSubmit = async (e) => {
        e.preventDefault();

        try {
            // 글 등록 요청
            const response = await api.post('/articles', article);
            
            // 등록한 글의 ID를 가져옴
            const newArticleId = response.data.data.id;

            // 등록 성공 시, 새로 등록된 글을 바로 불러옴
            const { data: newArticle } = await api.get(`/articles/${newArticleId}`);

            // 등록된 글로 이동
            router.push(`/article/${newArticleId}`);
        } catch (error) {
            console.error('등록 중 에러:', error);
        }
    };

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

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