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>

                    <div className={createRecruitStyles.top}>
                        <div>채널 생성</div>
                    </div>

                    <form onSubmit={handleSubmit}>
                        <div className={createRecruitStyles.title}>
                            <label>제목*</label>
                            <input type="text" name="title" value={formData.data.title} onChange={handleInputChange} placeholder="제목을 입력하세요.(50자 이내)"/>
                        </div>

                        <div className={createRecruitStyles.content}>
                            <label>내용*</label>
                            <textarea name="content" value={formData.data.content} onChange={handleInputChange} placeholder="내용을 입력하세요."/>
                        </div>

                        <div className={createRecruitStyles.image}>
                            <label>이미지 첨부</label>
                            <input type="file" name="image" value={formData.data.image} onChange={handleImageChange} />
                        </div>

                        <div className={createRecruitStyles.button}>
                            <button type="submit" className={createRecruitStyles.save}>저장</button>
                            <button type="button" className={createRecruitStyles.cancel} onClick={onClose}>취소</button>
                        </div>
                    </form>
                </div>
            </div>
            )}
        </div>
    )
}

export default CreateSubscribe;