global Modal

모달창이 굉장히 많이 써야할때 Slice로 사용

모든 Modal창을 여기에 모아놓을 수 있음.

globalModal.js

global Modal.js

import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { closeModal, selectModal } from '../redux/Slice/modalSlice'
import LoginPage from '../pages/LoginPage'
import styled from 'styled-components'
import "./GlobalModal.css"
import SignUpPage from '../pages/SignUpPage'

const MODAL_COMPONENTS = [
  // type 설정 후 실제 보여지는 component를 작성
    {
        type: "LoginModal",
        component: <LoginPage />
    },
    {
        type: "SignUpModal",
        component: <SignUpPage />
    }
]


function GlobalModal() {
  // Modal창의 CSS설정, 더불어 여닫는 기능을 여기에 작성 (실질적으로 UI되는 로직)
    const { modalType, isOpen } = useSelector(selectModal);
    const dispatch = useDispatch();
    if (!isOpen) return;

    const findModal = MODAL_COMPONENTS.find((modal) => {
        return modal.type === modalType;
    })

    const renderModal = () => {
        return findModal.component;
    }

    return (
        <Container>
            <Overlay onClick={() => dispatch(closeModal())} />
            {renderModal()}
        </Container>
    )
}

const Container = styled.div`
position: fixed;
width: 500px;
height: 500px;
background-color: skyblue;
left: 200px;
right: 200px;
z-index: 1;`

const Overlay = styled.div`
position: relative;
left: 150px;
top: 250px;
width: 50px;
height: 50px;
background-color: black;
z-index: 1;`

export default GlobalModal;

ModalSlice.js

modal창을 열고 닫는 Slice작성

ModalSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
    modalType: "",
    isOpen: false,
}


const modalSlice = createSlice({
    name: "modal",
    initialState,
    reducers: {
        openModal: (state, actions) => {
            const { modalType } = actions.payload;
            state.modalType = modalType;
            state.isOpen = true

        },
        closeModal: (state) => {
            state.isOpen = false
        }
    }
})


export default modalSlice.reducer;
export const selectModal = ((state) => state.persistedReducer.modal);
export const { openModal, closeModal } = modalSlice.actions;

index.js

최상위 파일에 붙힘

index.js

import React from "react";
import App from "./App";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import store from "./redux/Store/store"
import { PersistGate } from "redux-persist/integration/react";
import { persistStore } from "redux-persist";
import GlobalModal from "./GlobalModal/GlobalModal"

const root = ReactDOM.createRoot(document.getElementById("root"));
const persistor = persistStore(store)
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <GlobalModal />
          <App />
        </PersistGate>
      </Provider>
    </BrowserRouter>
  </React.StrictMode>
);

(사용 예)

  const handleOpenSignUpModal = () => {
    dispatch(
      openModal({
        modalType: "SignUpModal",
        isOpen: true,
      })
    )
  }

  return (
   <button onClick={handleOpenSignUpModal} id="signUp">
   	회원가입
   </button>
)

Reference

https://cntechsystems.tistory.com/155#2.%20Redux%EB%A5%BC%20%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC%20global%20component%20list%20%EB%A7%8C%EB%93%A4%EA%B8%B0