[ react ] 게시글 유효성 검사

const ActivityCU = () => {
    const [formInfo, setFormInfo] = useState({
        values: { title: '', content: '' },
        errors: { title: '제목은 필수 입력 값입니다.', content: '내용은 필수 입력 값입니다. ' },
        touched: { title: false, content: false },
    });

    const handleBlur = (e) => {
        let cpy = JSON.parse(JSON.stringify(formInfo));
        cpy.touched[e.target.name] = true;
        setFormInfo(cpy);
    }

    //제목 혹은 입력시 실행되는 함수
    const handleChange = (e) => {
        console.log(e);
        //e.target.name 이 'title'이라면 formInfo.value.title 을 e.target.value로 바꿔준다.
        //e.target.name 이 'content'라면 formInfo.value.content 을 e.target.value로 바꿔준다.
        let cpy = JSON.parse(JSON.stringify(formInfo));
        let inputValue = e.target.value;
        if (e.target.name === 'title') { //사용자가 입력한 값이 title 이라면
            if (inputValue.length === 0) { // 사용자가 입력한 값이 없다면
                cpy.errors[e.target.name] = '제목은 필수 입력사항입니다.';
            } else if (inputValue.length > 30) { // 사용자가 입력한 값이 30글자 이상이라면
                cpy.errors[e.target.name] = '제목은 30글자 이하 입력해주세요.';
            } else {
                cpy.errors[e.target.name] = ''; //에러메세지를 없애준다.
            }
        } else if (e.target.name === 'content') { //사용자가 입력한 값이 content 라면
            if (inputValue.length === 0) { // 사용자가 입력한 값이 없다면
                cpy.errors[e.target.name] = '내용은 필수 입력사항입니다.';
            } else if (inputValue.length > 500) { // 사용자가 입력한 값이 1000글자 이상이라면
                cpy.errors[e.target.name] = '내용은 500글자 이하 입력해주세요.';
            } else {
                cpy.errors[e.target.name] = ''; //에러메세지를 없애준다.
            }
        }
        cpy.values[e.target.name] = inputValue;
        setFormInfo(cpy);
    }

    const handleSubmit = (e) => {
        e.preventDefault();
        let cpy = JSON.parse(JSON.stringify(formInfo));
        cpy.touched.title = true;
        cpy.touched.content = true;
        setFormInfo(cpy);

        //모든 제목하고, 내용이 정상적으로 입력되었다면?
        //제목 에러메세지가 '' 이고, 내용 에러메세지가 '' 이라면? 정상적으로 모든 값이 입력됨.
        if (formInfo.errors.title === '' && formInfo.errors.content === '') {
            alert('정상적으로 입력되었습니다. 서버로 전송합니다.');
        }
    }


    return (
        <section>
            <h1>새 게시글 작성하기</h1>
            <ActivityForm
                onSubmit={handleSubmit}
            >
                <ActivityInputWrap>
                    <label htmlFor="title">게시글 제목</label>
                    <input
                        onBlur={handleBlur}
                        onChange={handleChange}
                        value={formInfo.values.title}
                        name='title'
                        id="title" />
                    {formInfo.touched.title && <p>{formInfo.errors.title}</p>}
                </ActivityInputWrap>
                <ActivityInputWrap>
                    <label htmlFor="writerEmail">작성자</label>
                    <input disabled value={'로그인한 사람 아이디'} id="writerEmail" />
                </ActivityInputWrap>
                <ActivityInputWrap>
                    <label htmlFor="content">게시글 내용</label>
                    <textarea
                        onBlur={handleBlur}
                        onChange={handleChange}
                        value={formInfo.values.content}
                        name='content'
                        id="content">
                    </textarea>
                    {formInfo.touched.content && <p>{formInfo.errors.content}</p>}
                </ActivityInputWrap>
                <button
                    onClick={handleSubmit}
                    type='button'

                >글 등록하기</button>
            </ActivityInputWrap>
        </ActivityForm>
        </section >
    );
}

export default ActivityCU;