(TIL 28일차) 스타일쉐어 1차 프로젝트 OOTD (2)

Modal을 구현하는 방식

크게 3가지로 구분

1. react내에서 제공하는 Portal

2. Modal 라이브러리 사용

3. 직접 구현

결과

- 위의 1,2번째 방식을 사용하려 했으나 버거워서 직접 구현하는 방식을 선택했다.

---

Modal 직접 구현

1. 모달 컴포넌트 작성

src/components/Modal/index.js
export { default } from './Modal';


src/components/Modal/Modal.js
import React from 'react';
import './Modal.scss';

const Modal = () => {
  return (
    <React.Fragment>
   	  <div className="Modal-overlay" />
      <div className="Modal">
        <p className="title">Modal Title</p>
        <div className="content">
          <p>
    		Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel tempora nulla, non molestiae dicta ducimus. Et unde laborum eveniet ex quod doloribus quae, aliquam beatae atque, vero assumenda rem quo?
    	  </p>
        </div>
        <div className="button-wrap">
          <button> Confirm </button>
        </div>
      </div>
    </React.Fragment>
  )
}
export default Modal;

2.모달 Scss 작성

src/components/Modal/Modal.scss

.Modal-overlay{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0,0,0,0.16);
}
.Modal{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
    & > * {
      &:first-child{
        margin-top: 16px;
      }
      margin-left: 16px;
      margin-right: 16px;
    }
    p.title{
      font-size: 16pt;
      font-weight: bold;
      color: #333;
    }
    .content{
      border-top: 1px solid #bebebe;
      margin-top: 16px;
      p{
        padding: 8px;
        font-size: 12pt;
        color: #999;
      }
    }

    .button-wrap{
      margin: 0;
      margin-top: 8px;
      button{
        width: 100%;
        padding: 12px 0;
        border-radius: 0 0 10px 10px;
        background-color: #ad7cef;
        font-size: 13pt;
        color: white;
        border: 0;
        cursor: pointer;
        &:hover{
          background-color: #7f49c8;
        }
        &:active{
          background-color: #7e49c8;
        }
      }
    }
  }
src/App.js

import React from 'react';
import Modal from './components/Modal';

class App extends React.Component{
  render() {
    return (
      <main className="App">
        <Modal />
      </main>
    )

  }
}
export default App;

3.open, close 기능 구현

import React from 'react';
import Modal from './components/Modal';

class App extends React.Component{
  
  constructor(props){
    super(props);
    this.state = {
      isModalOpen: false, 
    }
  }
  
  openModal = () => {
    this.setState({ isModalOpen: true });
  }
  
  closeModal = () => {
    this.setState({ isModalOpen: false }); 
  }
  
  render() {
    return(
      <main className="App">
        <button onClick={this.openModal}>Modal Open</button>
        <Modal isOpen={this.state.isModalOpen} close={this.closeModal} />
      </main>
    )

  }
}
export default App;
src/components/Modal/Modal.js

import React from 'react';
import './Modal.scss';

const Modal = ({ isOpen, close }) => {
  return (
    <React.Fragment>
    {
      isOpen ?
      <React.Fragment>
        <div className="Modal-overlay" onClick={close} />
        <div className="Modal">
          <p className="title">Modal Title</p>
          <div className="content">
            <p>
    		  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel tempora nulla, non molestiae dicta ducimus. Et unde laborum eveniet ex quod doloribus quae, aliquam beatae atque, vero assumenda rem quo?
    	    </p>
          </div>
          <div className="button-wrap">
            <button onClick={close}>Confirm</button>
          </div>
        </div>
      </React.Fragment>
      :
      null
    </React.Fragment>
  )
}
export default Modal;

---

• https://velog.io/@zynkn/React-Modal-Component-%EB%A7%8C%EB%93%A4%EA%B8%B0
  모달 직접 구현 참고 사이트