모바일청첩장 직접 만들기 with 코딩 - 8. Modal 추가하기

 

안녕하세요. Teus입니다.

 

지난번 Gallery가 만들어 졌지만

 

작은 크기의 사진만 볼 수 있고, 이 사진을 크게 볼 방법이 없었죠?

 

이번에는 사진을 눌렀을 때 사진을 확대해서 보여줄 수 있는 Modal을 구현해 보겠습니다.

 

# 1. Modal

Modal을 들어본 적이 없더라도, 아래 이미지를 보면 뭔지 바로 알 수 있습니다.

Modal이 특별해 보이지만

 

그저 뒤에있는 화면을 overly라고 해서 음영처리를 하고

 

내부의 Contents를 보여주는것 뿐 입니다.

 

Modal을 modal-overlay와 modal-content로 나누면 이해가 편합니다.

 

# 2. Modal on Gallery

이제 Modal을 Gallery에 적용해 봅시다.

 

먼저 modal을 사용하기 위해서 modal.jsx를 통해서 modal을 구현해놓습니다.

 

modal.jsx

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

const Modal = ({ isOpen, onClose, children, mystyle}) => {
  if (!(isOpen.isopen)) return null;
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div style = {mystyle} className="modal-content" onClick={(e) => e.stopPropagation()}>
        {children}
      </div>
    </div>
  );
};

export default Modal;

 

modal.css

/* filepath: /c:/Users/xodn1/Desktop/my-app/src/Modal.css */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: white;
    width: 370px;
    padding: 20px;
    border-radius: 5px;
    position: relative;
}

/* 모달이 열릴 때 body의 스크롤을 방지 */
body.modal-open {
    overflow: hidden;
}

 

그리고 이 Modal을 Gallery.jsx에서 사용해 줍니다.

import { useEffect, useState } from "react";
import Modal from "./modal";
//src/assets/images에 있는 모든 이미지를 한번에 불러오기 위한 방법입니다.
const imagePaths = import.meta.glob('./assets/images/*.{png,jpg,jpeg,svg,webp}');

const Gallery  = ({title}) => {
    //image의 modal을 사용하기 위한 부분
    const [image_modal, set_image_modal] = useState({isopen:false, src:null});
    //modal이 open될 경우 받아진 src를 source로 바꿔줌
    const open_modal = (src) => {
        set_image_modal({isopen : true, src : src})
    }
    
    const [isflip, set_isfliep] = useState(true);
    const [images, set_images] = useState([]);
    const [all_images, set_all_images] = useState([]);
    useEffect(()=>{
      const loadImages = async () => {
        const imagePromises = Object.entries(imagePaths).map(([path, importImage]) =>
          importImage().then((module) => ({ path, src: module.default }))
        );
        const loadedImages = await Promise.all(imagePromises);
        loadedImages.sort((a, b)=>{
          let _a = a.path.split("/")
          let _b = b.path.split("/")
          _a = _a[_a.length-1].split(".")[0]
          _b = _b[_b.length-1].split(".")[0]
          return parseInt(_a) - parseInt(_b)
        })
        const temp = []
        for (let i = 0; i < 6; i++) {
          temp.push(loadedImages.slice(i*3, (i+1)*3))
        }
        set_images(temp.slice(0, 2));
        set_all_images(temp)
      }
      loadImages();
    } ,[])

    const flip_gallery = () => {
        const row_cnt = isflip ? 6 : 2;
        set_images([...all_images].slice(0, row_cnt))
        set_isfliep(!isflip)
      }
    return  (
    <>
      <h1>{title}</h1>
      {
      [images].map((v, i) => {
          return (
          v.map((v2, i2)=>{
          return (
              <div key = {i*100+i2*10} style = {{display:"flex"}}>
              {
                  [0, 1, 2].map((v3, i3) => {
                  return (
                    <div style = {{margin : "2%", border:"1px solid rgb(230, 224, 255)", borderRadius:"12px", width:"29%", height:"111.896px", overflow:"hidden"}}>
                        {/* onClick시 open_modal이 실행되어 화면에 modal창이 뜨게 만들어줌 */}
                        <img key = {v2[v3].path} src={v2[v3].src} onClick = {()=>{open_modal(v2[v3].src);document.body.classList.add('modal-open')}} height={"100%"} width={"100%"} alt="my image"/>
                    </div>
                  )
                  })
              }
              </div>
              )
          }) 
          )
      })
      }
      <div
        onClick={() => {flip_gallery()}}
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          marginTop : "5px",
          marginBottom : "20px",
        }}
      >
        {isflip?"더보기":"접기"}
      </div>
        {/*Modal component를 추가해줌*/}
        <Modal
          isOpen={image_modal}
          onClose={() => {set_image_modal({isopen:false, src:null});document.body.classList.remove('modal-open')}}
          mystyle = {{backgroundColor:"rgb(0, 0, 0)"}}
        >
          <div style = {{display:"flex", justifyContent:"center"}}>
            <img src={image_modal.src} width={"100%"}/>
          </div>  
        </Modal>
    </>
)}

export default Gallery 

 

코드가 좀 길어저서 혼란스럽니다.

 

결국 아래처럼 이미지를 클릭할 경우

 

뒷면에 음영이 생기고, 큰 사이즈의 이미지를 확인할 수 있습니다.