createSubscribe.js

import React, { useState } from "react";
//import createSubscribeStyles from './createSubscribe.module.css';

function CreateSubscribe({ isOpen, onClose }){
    const [formData, setFormData] = useState({
        data: {
        },
        image: null
    });

    const handleInputChange = (e) => {
        const { name, value } = e.target;
        setFormData((prevData) => ({
            ...prevData,
            data: {
                ...prevData.data,
                [name]: value,
            },
        }));
    };

    const handleImageChange = (e) => {
        const imageFile = e.target.files[0];
        setFormData((prevDate) => ({
            ...prevDate,
            image: imageFile 
        }));
    };

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

        if(formData.data.title === ''){
            alert('제목을 입력해주세요.');
            return;
        } else if(formData.data.content === ''){
            alert('내용을 입력해주세요.');
            return;
        }

        const jsonDataString = JSON.stringify(formData.data);
        try {
            const formDataToSend = new FormData();
            formDataToSend.append('data', jsonDataString);
            formDataToSend.append('image', formData.image);

            const response = await fetch('/api/subscribes', {
                method: 'POST',
                body: formDataToSend,
            });

            if (response.ok) {
                alert('채널이 성공적으로 생성되었습니다.');
                window.location.reload();
            } else {
                alert('채널 생성에 실패하였습니다.');
            }

        } catch (error) {
            console.error('Error:', error);
        }
    };

    return(
        <div>
            {isOpen && (
            <div className={createRecruitStyles.overlay}>
                <div className={createRecruitStyles.modal}>
                    <button type="button" className={createRecruitStyles.x} onClick={onClose}>X</button>