인프런 커뮤니티 질문&답변

모달이 작동하지않아서 혹시 몰라서 카페에 올라와있는 소스코드를 덮어씌어도 모달이 뜨질않습니다.. 분명 데이터는 등록되는데 result값도 제대로 들어오는데도 불구하고 뜨질않더라구요.. 아래코드는 카페에 올라와있는 코드를 제 프로젝트에 인식시켜본 코드입니다.

import React, {useState} from 'react';
import ResultModal from "../common/ResultModal";
import {postAdd} from "../../api/todoApi";
import userCustomMove from "../../hooks/userCustomMove";


const initState = {
    title:'',
    content: '',
    dueDate: ''
}

const AddComponent = () => {

    const [todo, setTodo] = useState({...initState})

    const [result, setResult] = useState(null) //결과 상태

    const {moveToList} = userCustomMove() //useCustomMove 활용

    const handleChangeTodo = (e) => {

        todo[e.target.name] = e.target.value

        setTodo({...todo})
    }




    const handleClickAdd = () => {

        //console.log(todo)
        postAdd(todo)
            .then(result => {
                console.log(result)

                setResult(result.TNO) //결과 데이터 변경
                setTodo({...initState})

            }).catch(e => {
            console.error(e)
        })
    }

    const closeModal = () => {

        setResult(null)
        moveToList()  //moveToList( )호출

    }
    return (
        <div className = "border-2 border-sky-200 mt-10 m-2 p-4">

            {/* 모달 처리 */}

            {result ? <ResultModal title={'Add Result'} content={`New ${result} Added`} callbackFn={closeModal}/>: <></>}


            <div className="flex justify-center">
                <div className="relative mb-4 flex w-full flex-wrap items-stretch">
                    <div className="w-1/5 p-6 text-right font-bold">TITLE</div>
                    <input className="w-4/5 p-6 rounded-r border border-solid border-neutral-500 shadow-md"
                           name="title"
                           type={'text'}
                           value={todo.title}
                           onChange={handleChangeTodo}
                    >
                    </input>

                </div>
            </div>
            <div className="flex justify-center">
                <div className="relative mb-4 flex w-full flex-wrap items-stretch">
                    <div className="w-1/5 p-6 text-right font-bold">CONTENT</div>
                    <input className="w-4/5 p-6 rounded-r border border-solid border-neutral-500 shadow-md"
                           name="content"
                           type={'text'}
                           value={todo.content}
                           onChange={handleChangeTodo}
                    >
                    </input>
                </div>
            </div>
            <div className="flex justify-center">
                <div className="relative mb-4 flex w-full flex-wrap items-stretch">
                    <div className="w-1/5 p-6 text-right font-bold">DUEDATE</div>
                    <input className="w-4/5 p-6 rounded-r border border-solid border-neutral-500 shadow-md"
                           name="dueDate"
                           type={'date'}
                           value={todo.dueDate}
                           onChange={handleChangeTodo}
                    >
                    </input>
                </div>
            </div>
            <div className="flex justify-end">
                <div className="relative mb-4 flex p-4 flex-wrap items-stretch">
                    <button type="button"
                            className="rounded p-4 w-36 bg-blue-500 text-xl  text-white "
                            onClick={handleClickAdd}
                    >
                        ADD
                    </button>
                </div>
            </div>
        </div>
    );
}

export default AddComponent;