오류노트

stt의 결과를 받아와서 대화 형태로 나열하였다.

이 과정에서 대화 마다 modal을 달았는데 

 

modal의 배경이 검은색이 되버렸다.

대화 하나의 모달을 실행해도 

나머지 모달도 같이 실행되서 나타나기 때문이다.

<ul>
    <li className="dropdown-item" onClick={() => setShowBm(true)}>북마크</li>
    <NewBm showBm={showBm} setShowBm={setShowBm} mn_id={mnId} start={start} end={end} />
    <li className="dropdown-item" onClick={() => setDialModal(true)}>대화 수정</li>
    <Modal show={dialModal} onHide={() => setDialModal(false)}>
        <Modal.Header closeButton>
            <Modal.Title>대화 수정</Modal.Title>
        </Modal.Header>
        <Modal.Body>
            <h6>변경할 내용을 입력해주세요</h6>
            <textarea className="chat-txtarea" placeholder="" cols="60" rows="10" value={dial ? dial : ""} onChange={(e) => setDial(e.target.value)}></textarea>
        </Modal.Body>
        <Modal.Footer>
            <button type="button" id="btn-color" className="btn-override modal-btn" onClick={(e) => changeDial(e, vrSeq)} >
                저장
            </button>
        </Modal.Footer>
    </Modal>
</ul>

---

대화별로 모달을 조작하는 변수를 두려고 하였다.

하지만 그렇게되면 setDialModal1, setDialModal2, setDialModal3 처럼 많은 변수를 만들어야되고 

대화의 개수만큼 만들어야 하기 때문에 복잡하고 지저분해진다고 생각되었다.

 

고민한 끝에 show에 true가 들어가야 모달이 보여진다는 원리를 생각해서

setDialModal에 true 대신 현재 dialogue의 id를 넣고

현재 dialogue의 id와 일치한다면 모달을 보여주는 방식을 생각했다.

그렇게 하면 모달들이 동시에 뜨지 않고 원하는 대화의 모달만 띄울 수 있을 것이라 생각했다.

 

 

변경 후

<ul>
    <li className="dropdown-item" onClick={() => setShowBm(dialogue.vr_id)}>북마크</li>
    <NewBm showBm={showBm === dialogue.vr_id} setShowBm={setShowBm} mn_id={mnId} start={start} end={end} />
    <li className="dropdown-item" onClick={() => setDialModal(dialogue.vr_id)}>대화 수정</li>
    <Modal show={dialModal === dialogue.vr_id} onHide={() => setDialModal()}>
        <Modal.Header closeButton>
            <Modal.Title>대화 수정</Modal.Title>
        </Modal.Header>
        <Modal.Body>
            <h6>변경할 내용을 입력해주세요</h6>
            <textarea className="chat-txtarea" placeholder="" cols="60" rows="10" value={dial ? dial : ""} onChange={(e) => setDial(e.target.value)}></textarea>
        </Modal.Body>
        <Modal.Footer>
            <button type="button" id="btn-color" className="btn-override modal-btn" onClick={(e) => changeDial(e, vrSeq)} >
                저장
            </button>
        </Modal.Footer>
    </Modal>
</ul>

show={dialModal === dialogue.vr_id}를 통해서 원하는 dialogue의 모달을 띄울 수 있게 되었다

 

한 개의 모달만 잘 나오는 것을 볼 수 있다.

 

어렵게 생각해서 하루종일 생각하다가... 직접 코드를 변경해가면서 동작 원리를 생각하니 바로 해결되었다.

역시 기본 원리를 이해하는 것이 가장 우선이 아닌가 싶다!