개발일지 12일차

issue: 드롭다운과 쪽지 모달창의 충돌

1. 드롭다운 버튼 클릭 시, 쪽지 모달창이 열리는 문제 발생

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import MsgModal from "./MsgModal";

const BoardDropDown = ({ id, onSelect }) => {
    const navigate = useNavigate();

    const [openMsgModal, setOpenMsgModal] = useState(false);

    const handleModifyButtonClick = () => {
        navigate(`/board/modify/${id}`);
    };

    const openMsg = () => {
        setOpenMsgModal(true);
    };

    return (
        <>
            <div className="board-dropdown-wrapper">
                <div className="board-dropdown-list">
                    <div className='board-dropdown'>
                        <div className='board-report-icon'></div>
                        <div className='board-report-text'>신고하기</div>
                    </div>
                    <div className='board-dropdown'>
                        <div className='board-msg-icon'></div>
                        <div className='board-msg-text' onClick={openMsg}>쪽지 전송</div>
                    </div>
                    <div className='board-dropdown'>
                        <div className='board-modify-icon'></div>
                        <div className='board-modify-text' onClick={handleModifyButtonClick}>수정하기</div>
                    </div>
                </div>
            </div>
            {openMsg && <MsgModal/>}
        </>
    );
}

export default BoardDropDown;

 
함수 호출이 잘못된 것을 발견해서 openMsg에서 OpenMsgModal으로 변경

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import MsgModal from "./MsgModal";

const BoardDropDown = ({ id, onSelect }) => {
    const navigate = useNavigate();

    const [openMsgModal, setOpenMsgModal] = useState(false);

    const handleModifyButtonClick = () => {
        navigate(`/board/modify/${id}`);
    };

    const openMsg = () => {
        setOpenMsgModal(true);
    };

    return (
        <>
            <div className="board-dropdown-wrapper">
                <div className="board-dropdown-list">
                    <div className='board-dropdown'>
                        <div className='board-report-icon'></div>
                        <div className='board-report-text'>신고하기</div>
                    </div>
                    <div className='board-dropdown'>
                        <div className='board-msg-icon'></div>
                        <div className='board-msg-text' onClick={openMsg}>쪽지 전송</div>
                    </div>
                    <div className='board-dropdown'>
                        <div className='board-modify-icon'></div>
                        <div className='board-modify-text' onClick={handleModifyButtonClick}>수정하기</div>
                    </div>
                </div>
            </div>
            {OpenMsgModal && <MsgModal/>}
        </>
    );
}

export default BoardDropDown;

이제 드롭다운과 쪽지 모달창 분리 완료

2. 드롭다운에서 쪽지 전송 클릭 시, 드롭다운과 함께 쪽지 모달창이 닫히는 문제 발생
부모 컴포넌트인 ReadComponent에서 드롭다운과 쪽지 모달창의 상태를 useState를 사용해서 true 또는 false로 처리

  const [openMsgModal, setOpenMsgModal] = useState(false);

const openMsg = () => {
    console.log("Openig MsgModal~");
    setOpenMsgModal(true);
    setShowBoardMenu(false);
  };

드롭다운은 다음과 같이 변경

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
// import MsgModal from "./MsgModal";

const BoardDropDown = ({ id, onSelect, openMsg }) => {
    const navigate = useNavigate();

    // const [openMsgModal, setOpenMsgModal] = useState(false);

    const handleModifyButtonClick = () => {
        navigate(`/board/modify/${id}`);
    };

    const handleOpenMsg = () => {
        openMsg();
    };

    return (
        <>
            <div className="board-dropdown-wrapper">
                <div className="board-dropdown-list">
                    <div className='board-dropdown'>
                        <div className='board-report-icon'></div>
                        <div className='board-report-text'>신고하기</div>
                    </div>
                    <div className='board-dropdown'>
                        <div className='board-msg-icon'></div>
                        <div className='board-msg-text' onClick={handleOpenMsg}>쪽지 전송</div>
                    </div>
                    <div className='board-dropdown'>
                        <div className='board-modify-icon'></div>
                        <div className='board-modify-text' onClick={handleModifyButtonClick}>수정하기</div>
                    </div>
                </div>
            </div>
            {/* {openMsgModal && <MsgModal/>} */}
        </>
    );
}

export default BoardDropDown;

 
3. 쪽지 모달창의 위치가 정중앙에 위치하지 않는 문제 발생

.msg-modal{
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}