🌟 모달: 프로필 수정 모달 창

summereuna🐥·2022년 7월 13일

🌟 Twinkle (React, Firebase)

목록 보기

30/42

프로필 수정을 위해 모달을 만들어 보고 싶어서 구글링 하던 중 아주 상세하게 모달 만드는 방법을 알려주는 블로그를 발견했다!

압도적 감사 :)💜

How to create a Modal Component in React from basic to advanced? | Thi Tran > Go To Read 📚

위 사이트에서는 모달을 사용하는 기초적이고 다양한 방법을 설명해 주고 있는데, 나는 내 프로젝트에 필요한 아래 기능을 구현하는데 있어서 도움을 받았다.

모달 레이아웃 잡기
스타일 추가하기
모달 open/close 핸들링
onClose 이벤트
모달 창 외부 클릭 시 모달 닫기
esc 키다운 이벤트 사용하여 모달 닫기
모달에 애니메이션 추가하기

1. 모달 레이아웃 잡기

레이아웃 잡기

Overlay: 모달 컨테이너
Header: 모달 창 닫기 버튼, 모달 제목, 변경 내용 저장 버튼
Body: 헤더 이미지 변경, 프로필 이미지 변경, 유저 이름 및 자기소개 변경

모달 컴포넌트 만들기

Modal 폴더를 생성하여 EditProfileModal.js 파일을 만든다.

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCamera, faTimes } from "@fortawesome/free-solid-svg-icons";

const EditProfileModal = () => {
  return (
    <div className="modal">
      <div className="modal-content">
        <div className="modal-header">
          <div className="modal-header__box">
            <div className="modal-x-btn">
              <button className="btn--min btn--circle">
                <FontAwesomeIcon icon={faTimes} />
              </button>
            </div>
            <h4 className="modal-title">프로필 수정</h4>
            <button className="btn btn--blue btn--border-zero">저장</button>
          </div>
        </div>
        <div className="modal-body">
          <div className="profile__user__header">
            헤더 이미지 598*200
            <div className="btn--edit--container">
              <div
                aria-label="헤더 사진 추가하기"
                className="btn--edit--container--btn"
              >
                <button className="btn--change">
                  <FontAwesomeIcon icon={faCamera} />
                </button>
              </div>
              <div
                aria-label="헤더 사진 삭제하기"
                className="btn--edit--container--btn"
              >
                <button className="btn--delete">
                  <FontAwesomeIcon icon={faTimes} />
                </button>
              </div>
            </div>
          </div>
          <div className="profile__user__info">
            <div className="profile__user__userImg">
              <div className="profile__user__userImg__file userImg--sm img--edit--container">
                <div
                  aria-label="프로필 사진 추가하기"
                  className="img--edit--container--btn"
                >
                  <button className="btn--change">
                    <FontAwesomeIcon icon={faCamera} />
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div className="modal-edit">
            <form className="edit-form">
              <label htmlFor="user-name"> 이름 </label>
              <input
                id="user-name"
                aria-describedby="user-name"
                name="user-name"
                type="text"
                placeholder="이름"
                className="btn btn--skyblue"
              />
              <label htmlFor="self-introduction"> 자기 소개 </label>
              <input
                id="self-introduction"
                aria-describedby="self-introduction"
                name="self-introduction"
                type="text"
                placeholder="자기 소개"
                className="btn btn--skyblue"
              />
            </form>
          </div>
        </div>
      </div>
    </div>
  );
};

export default EditProfileModal;

2. 스타일 추가하기

반복되는 스타일인 경우 기존에 작성했던 클래스명을 추가해 줬다.
일단 styles.scss 시트에 모두 적고 있기 때문에 프로젝트 다 작성하고 나서 클리닝 코드하자 ^3^~

/*💬  EditProfileModal*/
.modal {
  z-index: 99;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  
  .modal-content {
    width: 600px;
    height: 70%;
    background-color: white;
    border-radius: 20px;
    
    .modal-header {
      padding: 0 16px;
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 58px;
      width: 100%;
      
      .modal-header__box {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        
        .modal-x-btn {
          min-width: 56px;
          min-height: 32px;
          display: flex;
          flex-direction: column;
          flex-basis: auto;
          flex-shrink: 0;
          align-self: stretch;
          justify-content: center;
          align-items: flex-start;
          button {
            font-size: 20px;
          }
        }
        
        .modal-title {
          font-weight: 800;
          display: flex;
          flex-grow: 1;
          align-items: stretch;
        }
        
        button {
          font-size: 15px;
        }
      }
    }
    
    
    .modal-body {
    
      .profile__user__header {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        
        .btn--edit--container {
          position: absolute;
          display: flex;
          flex-direction: row;
          
          .btn--edit--container--btn {
            border-radius: 50px;
            width: 45px;
            height: 45px;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-content: center;
            box-sizing: border-box;
            font-size: 20px;
            button {
              color: white;
            }
          }
          
          .btn--edit--container--btn:last-child {
            margin-left: 20px;
          }
        }
      }


      .profile__user__info {
        .userImg-sm {
          width: 200px;
          height: 200px;
          background-color: black;
        }
        
        .profile__user__userImg {
          position: relative;
          
          .img--edit--container {
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            
            .img--edit--container--btn {
              border-radius: 50px;
              width: 45px;
              height: 45px;
              background-color: rgba(0, 0, 0, 0.5);
              display: flex;
              justify-content: center;
              align-content: center;
              box-sizing: border-box;
              font-size: 20px;
             
              button {
                color: white;
              }
            }
          }
        }
      }
      
      
      .modal-edit {
        margin-top: 50px;
        
        .edit-form {
          display: flex;
          flex-direction: column;
          padding: 16px;
          
          label {
            padding-left: 15px;
          }
          
          input {
            font-size: 13px;
            font-weight: 500;
            width: 300px;
            margin-bottom: 15px;
            border-radius: 5px;
            cursor: auto;
          }
          
          input:focus {
            background-color: #ebf5fe;
            transition: 0.3s;
          }
        }
      }
    }
  }
}

3. 모달 open/close 핸들링

/Modal/EditProfileModal.js에 아래 코드를 추가하여 모달을 열고 닫을 수 있게 해주자.

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCamera, faTimes } from "@fortawesome/free-solid-svg-icons";

const EditProfileModal = (isModalOpen) => {
  if (!isModalOpen){
    return null
  }
  
  return (
    <div className="modal">
      //생략

모달 창이 열리지 않은 경우, 즉 isModalOpen의 값이 false인 경우 null을 리턴하여 모달 레이아웃이 뜨지 않게 한다.

Profile.js에서 isModalOpen의 value 관리하기

//모달 창 열기
<EditProfileModal isModalOpen={true} />

//모달 창 닫기
<EditProfileModal isModalOpen={false} />

const Profile = ({ refreshUser, userObj }) => {
//생략

  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleEditModalOpen = () => {
    setIsModalOpen((prev) => !prev);
  };


return(
  <button
    className="btn btn--grey"
    onClick={handleEditModalOpen}
    >
    프로필 수정
  </button>
  <EditProfileModal
    userObj={userObj}
    isModalOpen={isModalOpen}
    />
);

4. 모달 창 닫기 이벤트

/Modal/EditProfileModal.js에 onClick이벤트 추가하여 모달 닫기 버튼 이벤트 바인딩하기


const EditProfileModal = ({ isModalOpen, onClose }) => {
  return(
  //생략
  <div className="modal-x-btn">
    <button className="btn--min btn--circle" onClick={onClose}>
      <FontAwesomeIcon icon={faTimes} />
    </button>
  </div>
  //생략
  );
};

isModalOpen의 value 관리를 Profile.js에서 하기 때문에 onClose도 여기에서 관리해야 한다.

const Profile = ({ refreshUser, userObj }) => {
//생략
  
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleEditModalOpen = () => {
    setIsModalOpen((prev) => !prev);
  };

  const handleEditModalClose = () => {
    setIsModalOpen((prev) => !prev);
  };
  
  return(
  <button
    className="btn btn--grey"
    onClick={handleEditModalOpen}
    >
    프로필 수정
  </button>
  <EditProfileModal
    userObj={userObj}
    isModalOpen={isModalOpen}
    onClose={handleEditModalClose}
    />
  );
};

5. 모달 창 외부 클릭 시 모달 닫기

일반적으로 모달은 사용자가 외부 클릭(닫으려면 오버레이 클릭)을 통해 닫을 수 있다. 동작을 구현해 보자.
/Modal/EditProfileModal.js에서 다음과 같이 코드를 작성하면 된다.

const EditProfileModal = ({ userObj, isModalOpen, onClose }) => {
  //이벤트 전달 막기: modal 전체 화면 클리 시 onClose 이벤트 발생하나 modal-content 영역 클릭시 작동되지 않도록 이벤트 전달 막음
  const handleStopPropagation = (event) => {
    event.stopPropagation();
  };
  
  return (
    <div className="modal" onClick={onClose}>
      <div className="modal-content" onClick={handleStopPropagation}>
        <div className="modal-header">
  //생략
 );
};

오버레이된 부분을 클릭했을 때 onClick 이벤트를 바인딩하여 onClose가 실행된다.
외부 클릭 시에만 닫아야 하기 때문에 modal-content 내부 클릭 시에는 이 이벤트가 적용되지 않도록 이벤트 전달 중지 메서드 event.stopPropagation()를 사용하면 된다.

6. esc 키다운 이벤트 사용하여 모달 닫기

esc 키다운 이벤트를 사용하여 모달 창을 닫아보자.
/Modal/EditProfileModal.js에서 다음과 같이 코드를 작성하면 된다.

const EditProfileModal = ({ userObj, isModalOpen, onClose }) => {
  
  const handleStopPropagation = (event) => {
    event.stopPropagation();
  };

  const onEscapeKeyDown = (event) => {
    if ((event.charCode || event.keyCode) === 27) {
      onClose();
    }
  };

  useEffect(() => {
    document.body.addEventListener("keydown", onEscapeKeyDown);
    return function cleanup() {
      document.body.addEventListener("keydown", onEscapeKeyDown);
    };
  }, []);
  
  //생략

Escape 키(어떤 키 코드가 27인지)가 눌렸는지 확인하기 위해 키 다운 이벤트 핸들러를 정의한다.
useEffect를 사용하여 키다운 리스너를 추가한다.

7. 모달에 애니메이션 추가하기

CSS 전환을 사용하여 모달을 애니메이션화할 수 있다.
오버레이에 대해 페이드 인/페이드 아웃을 적용해 보자.

Fade in/out: opacity를 0 에서 1로 전환(transition)하기

기존에 /Modal/EditProfileModal.js에서 작성했던

if(!isOpenModal){
  return null
}

부분을 삭제하고 대신 className이 "modal"인 첫 첫 번째 div 요소에 삼항 연산자를 아래와 같이 추가해 준다.

  return (
    <div className={`modal ${isModalOpen ? "show" : ""}`} onClick={onClose}>

CSS에서 show/hide를 관리하기 위해 이렇게 변경해 주면 된다.
isModalOpen이 true인 경우 "show" 클래스를 추가해주는 식이다.

css 작업을 해주자.

.modal {
  //생략
  opacity: 0;
  transition: all 0.15s ease-in-out;
  pointer-events: none;
  
.modal.show {
  opacity: 1;
  pointer-events: visible;
}

opacity: 0;
기본적으로 모달을 페이드 아웃한다.
transition: all 0.15s ease-in-out;
불투명도에 대한 트랜지션 적용
pointer-events: none;
display: none;을 하면 요소는 반드시 숨겨진다.
display: none;처럼 요소를 100% 숨기면서 페이드 인/아웃을 애니메이션을 사용하기 위해 불투명도(opacity)를 사용하고 있다. 그런데 .modal이 모든 화면 보다 제일 위에 있기 때문에(z-index: 99;) 요소가 보이지 않는다고 할지라도 아래 화면에 있는 요소들을 클릭할 수 없게된다. 즉, 프로필 수정 버튼을 클릭할 수 없다.
pointer-events: none;는 .modal 아래에 있는 다른 요소를 클릭할 수 있도록 도와준다.
.modal.show
.show 클래스를 추가하여 opacity: 1로 변경하여 모달 창이 보이게 만들고, pointer-events: visible;로 변경하여 모달 내부를 클릭할 수 있게 하면 된다.

🥰🔥

summereuna🐥

Always have hope🍀 & constant passion🔥

다음 포스트