전역에서 모달 상태관리하기 (redux-toolkit)

당시 폼의 UI 디자인이 다 같은 작은 모달이었고, 전역에서 상태를 관리할 수 있는 플로우여서 redux-toolkit을 경험해보고자 도입하려고 했었다. 아래까지 작성 후에 UI 디자인이 전면적으로 바뀌어서 페이지 관리하는 방향으로 변경하게 되었는데 당시 작성한 내용을 기록하고 이후 써먹기 위해 저장한다~

사용하고 있던 Next.js 스펙은 v14 app router, 루트 디렉토리는 src이다.

src 내에 다음과 같은 폴더, 파일을 만들고 그 안에 필요한 slice를 조각조각 작성했다.

// src/lib/slices/modalSlice.js

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

const initialState = {
  isOpen: false,
  modalType: null,
  modalProps: {},
};

const modalSlice = createSlice({
  name: "modal",
  initialState,
  reducers: {
    openModal: (state, action) => {
      state.isOpen = true;
      state.modalType = action.payload.modalType;
      state.modalProps = action.payload.modalProps || {};
    },
    closeModal: (state) => {
      state.isOpen = false;
      state.modalType = null;
      state.modalProps = {};
    },
  },
});

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

lib 폴더에 store.js를 만들고 그 안에 만들어둔 슬라이스를 넣어준다.

// src/lib/store.js

import { configureStore } from "@reduxjs/toolkit";
import modalSlice from "./slices/modalSlice";

export const store = configureStore({
  reducer: {
   modal:modalSlice
  },
});

다른 컴포넌트에 Provider로 감싸고 export 해준 다음, 이걸로 root의 layout를 감싸줘야한다.

Provider를 바로 root layout에 적용시키려고하면 client 어쩌고.. 렌더링 에러가 난다.

그리고 아래 코드에서 ModalManager라고 컴포넌트를 import 해왔는데, 이건 모달 타입을 정의해서 모아둘 컴포넌트이다.

자세한건 제끼고 일단 써준다

// src/lib/Provider.js

"use client";
import { Provider } from "react-redux";
import { store } from "./store";
import ModalManager from "@/components/common/Modal";

export default function ReduxProvider({ children }) {
  return (
    <Provider store={store}>
      {children}
      <ModalManager />
    </Provider>
  );
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
      /* <배경 컴포넌트 /> */
        <ReduxProvider>
          {children}
          <ModalManager />       
        </ReduxProvider>
        
      </body>
    </html>
  );
}

당시 생각한 모달은 2가지였다

- 웰컴 모달 : 최초 로그인 시에만 보일 것, 슬라이드 예정

- 이벤트 등록 모달

1) 사건 등록 폼

2) 영화 등록

2-1) 검색창

2-2) 검색창에서 영화 선택시 영화 데이터 form에 자동 세팅

// src/components/common/Modal.js
"use client";
import { useSelector, useDispatch } from "react-redux";
import { closeModal, openModal, selectModalState } from "@/lib/slices/modalSlice";
import { useState } from "react";

import welcomeStep1 from "....";
import welcomeStep2 from "....";
import welcomeStep3 from "....";
import welcomeStep4 from "....";

const WelcomeModal = ({ onClose }) => {
  const image = [welcomeStep1, welcomeStep2, welcomeStep3, welcomeStep4];
  const content = ["A", "B", "C", "D"];

  const [slidepage, setSlidePage] = useState(0);

  const prevSlide = () => {
    if (slidepage > 0) {
      setSlidePage(slidepage - 1);
    }
  };

  const nextSlide = () => {
    if (slidepage < content.length - 1) {
      setSlidePage(slidepage + 1);
    }
  };
  return (
    <div>
      <div>
        <div>
          {slidepage > 0 && <button onClick={prevSlide}>이전 슬라이드</button>}
          {slidepage < content.length - 1 ? (
            <button onClick={nextSlide}>다음 슬라이드</button>
          ) : (
            <button onClick={onClose}>X</button>
          )}
        </div>
        <h2>{`Step ${slidepage + 1}`}</h2>
        <img src={image[slidepage].src} alt={`welcome modal image ${slidepage}`} />
        <p>{content[slidepage]}</p>
      </div>
    </div>
  );
};

여기서는 원하는 모달의 모양을 만들었다.

난 이런 식으로 만들었는데 페이지 넘기는 방식은 이전에 캘린더 만들었던 거랑 비슷하게 했다.

나중에 슬라이드처럼 넘어가게 하고 싶은데 이 부분은 퍼블리싱하면서 수정할 예정이고 일단 기능만 돌아가게 해뒀다.

위 코드처럼 모달들의 세부 내용을 작성하고, 이제 밑에 ModalManager라는 함수를 작성한다.

const ModalManager = () => {
  const dispatch = useDispatch();
  const { isOpen, modalType, modalProps } = useSelector(selectModalState);

  if (!isOpen) return null;

  const renderModalContent = () => {
    switch (modalType) {
      case "WELCOME_MODAL":
        return <WelcomeModal {...modalProps} onClose={() => dispatch(closeModal())} />;
      {/* 이외의 case들을 추가하면 된다 */}
      default:
        return null;
    }
  };
  return (
    <div>
      <div>{renderModalContent()}</div>
    </div>
  );
};

export default ModalManager;

renderModalContent 함수를 보면, 앞에서 modalSlice에서 작성했던 openModal로 열 때 모달을 구분해줄 네임택(modalType)을 달아준 다음, 이 모달을 사용할 페이지에 가서 modalType을 키로, 요 네임택을 값으로 dispatch에 호출해주면 됐다.

export default function Page() {
  const dispatch = useDispatch();
  const welcomeModalTester = () => {
   dispatch(openModal({ modalType: "WELCOME_MODAL" }));
};
 return (
   <div>
	<button onClick={welcomeModalTester}>이건 웰컴 모달</button>
  </div>
  )
 };

저렇게 전달하면 modalType에 해당하는 모달을 띄워주게 된다

여기서는 modalProps에 값을 주지 않았지만 이벤트 모달을 다루는 부분에서 사용할 예정이다.

아직 로그인 관련해서 필요한 부분이 나오지 않아서 이후에 로그인 로직 추가할 때 처음에 로그인을 성공하면 localStorage에 최초 로그인 기록을 확인해서

1) 없으면 웰컴 모달을 보여주면서 최초 로그인 기록을 남긴다 (테이블에 true/false로 컬럼을 만들어야 할듯)

2) 있으면 1을 제끼고 페이지의 내용만 보여준다.

(+ 그리고 링크 복사해서 유저가 아닌 타인에게 페이지를 보여줄 때는 view만 허용해야한다는 설정)

'What I Learn' 카테고리의 다른 글

OSSCA: customize prompt & set a completionOptions in Continue (2)	2024.10.02
OSSCA : setting the Continue at vscode & Overview (0)	2024.09.23
사용자 정의 애니메이션으로 별이 반짝✨배경 만들기 (tailwindCSS) (1)	2024.09.14
Make Calendar without Calendar library (@date-fns) (0)	2024.09.13
Separate Next.js Root Layout from 404 Page Layout (0)	2024.09.01

'What I Learn' 카테고리의 다른 글

티스토리툴바