게시글 관련 임시 저장

articleCreate

'use client'

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

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

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

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

    return (
        <DefaultLayout>
            <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>
        </DefaultLayout>
    );
}

club

'use client'

import Link from 'next/link';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import api from "@/util/api";
import DefaultLayout from "@/components/Layouts/DefaultLayout";

export default function Club() {
    const getClubs = async () => {
        try {
            const response = await api.get('/api/v1/clubs');
            return response.data.data.club; // 수정된 부분
        } catch (error) {
            throw new Error('Failed to fetch clubs');
        }
    };
    

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

    const deleteClub = async (id) => {
        await api.delete(`/api/v1/clubs/${id}`);
    };

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

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

    if (isLoading) {
        return <>Loading...</>;
    }
    
    if (error) {
        console.error(error);
        return <>Error occurred: {error.message}</>;
    }
    
    if (!data || data.length === 0) {
        return <>No data available</>;
    }
    
    return (
        <DefaultLayout>
            <ul>
                
                {data.map((row) => (
                    <li key={row.id}>
                        {row.id} /{' '}
                        <Link href={`/club/${row.id}`}>{row.clubName}</Link> /{' '}
                        {row.author} / {row.createdDate}
                        <button onClick={() => mutation.mutate(row.id)}>
                            삭제
                        </button>
                    </li>
                ))}
            </ul>
            <Link href="/clubCreate">
                Club Create 페이지로 이동
            </Link>
            </DefaultLayout>
    );
}

'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'
import DefaultLayout from "@/components/Layouts/DefaultLayout";
import { useRouter } from 'next/navigation';

export default function ClubCreate() {
    const router = useRouter();
    const [club, setClub] = useState({  clubName: '' });

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

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

    return (
        <DefaultLayout>
            <h3>동아리 등록</h3>
            <form onSubmit={handleSubmit}>
                
                <div>
                    <label>내용:</label>
                    <textarea name="clubName" value={club.clubName} onChange={handleChange} />
                </div>
                <button type="submit">등록</button>
            </form>
        </DefaultLayout>
    );

}