path 변경시 history 저장 기능 구현

hooks/store/componentHistory/useComponentHistory.ts

@@ -0,0 +1,51 @@
+import { useState } from "react";
+import { useDispatch } from "react-redux";
+import {
+  get,
+  set
+} from "@store/modules/componentHistory/componentHistory.slice";
+import { useRouter } from "next/router";
+import { TComponentHistory } from "@store/modules/componentHistory/componentHistory.types";
+
+// TODO: shallow route 옵션 구현(Component 직접 받도록)
+/**
+ * @description
+ *  현재 dynamic route를 위한 기능만 지원.
+ */
+const useComponentHistory = () => {
+  const dispatch = useDispatch();
+  const router = useRouter();
+  const [isInit, setIsInit] = useState<boolean>(false);
+
+  const initFailMsg = `component history state is not initiated. 
+  please call initCpHistory function first in your root app component.`;
+  /**
+   * @description
+   * 예상치 못한 컴포넌트에서 history가 초기화되는 것을 방지하기 위해 앱 전체에서 한번만 호출될 수 있음.
+   * 일반적으로 root component 가 mount 되었을 때 호출함.
+   */
+  const initCpHistory = () => {
+    if (isInit) {
+      return console.error("component history state is already initiated.");
+    }
+    const newHistory: TComponentHistory = {
+      path: router.asPath,
+      prev: undefined
+    };
+    console.log("----INIT----");
+    dispatch(set(newHistory));
+    setIsInit(true);
+  };
+  const setCpHistory = (payload: TComponentHistory) => {
+    if (!isInit) return console.error(initFailMsg);
+    dispatch(set(payload));
+  };
+  const getCpHistory = () => {
+    if (!isInit) return console.error(initFailMsg);
+    const history = dispatch(get());
+    return history;
+  };
+  return { initCpHistory, setCpHistory, getCpHistory, isInit };
+};
+
+export default useComponentHistory;

pages/_app.tsx

@@ -4,28 +4,36 @@ import GlobalStyle, { PAGE_TRANSITION_TIMEOUT } from "@styles/GlobalStyle";
 import { wrapper } from "@store/store";
 import { Provider } from "react-redux";
 import ModalManager from "@components/ui/modal/Modal";
-import { PageTransition } from "next-page-transitions";
 import LoadingIndicator from "@components/ui/LoadingIndicator";
+import { useEffect } from "react";
+import useComponentHistory from "@hooks/store/componentHistory/useComponentHistory";
+import PageTransition from "@components/ui/PageTransition";
+import { useRouter } from "next/router";
+import { TComponentHistory } from "@store/modules/componentHistory/componentHistory.types";
 
 function MyApp({ Component, ...pageProps }: AppProps) {
   const { store, props } = wrapper.useWrappedStore(pageProps);
+  const router = useRouter();
+  const { initCpHistory, setCpHistory, getCpHistory, isInit } =
+    useComponentHistory();
+  useEffect(() => {
+    initCpHistory();
+    // eslint-disable-next-line
+  }, []);
+  useEffect(() => {
+    if (!isInit) return;
+    const current: TComponentHistory = {
+      path: router.asPath
+    };
+    setCpHistory(current);
+  }, [router.asPath, isInit, setCpHistory]);
   return (
     <Provider store={store}>
       <GlobalStyle />
-      <PageTransition
-        timeout={PAGE_TRANSITION_TIMEOUT}
-        classNames="page-transition"
-        loadingComponent={<LoadingIndicator />}
-        loadingDelay={500}
-        loadingTimeout={{
-          enter: PAGE_TRANSITION_TIMEOUT,
-          exit: 0
-        }}
-        loadingClassNames="loading-indicator"
-      >
+      {/* <PageTransition PageComponent={{}} LastPageComponent={{}}>
         <Component {...props.pageProps} />
-      </PageTransition>
-
+      </PageTransition> */}
+      <Component {...props.pageProps} />
       <ModalManager />
     </Provider>
   );

store/modules/componentHistory/componentHistory.slice.ts

@@ -16,6 +16,9 @@ const cpHistorySlice = createSlice({
   reducers: {
     set(state, action: PayloadAction<TComponentHistory>) {
       const current = action.payload;
+      if (current.path === state.prev?.path) {
+        return state;
+      }
       const newHistory = {
         current,
         prev: state.current

store/modules/componentHistory/componentHistory.types.ts

@@ -1,6 +1,6 @@
 export type TComponentHistory = {
   path: string;
-  prev: string;
+  prev?: string;
   options?: {
     useShallowRoute?: boolean;
     Component?: React.ReactNode;