1. 공통 커스텀훅 만들게 된 이유

• 마이크로 프론트엔드는 같은 디렉토리를 공유하는게 아니기 때문에 프로젝트마다 훅을 만들어서 중복되어 사용하는 문제가 있음
• 현재 서비스가 서울, 울주의 서비스가 배포가 되어있는 상황인데 일정부분의 프로젝트를 공유해서 사용할때 유저가 접속한 사이트가 서울 서비스인지 울주 서비스인지 구분지어서 보여줘야할때가 있었는데
• 이때 나온 방법이 아래와 같은데 ㄱ, ㄴ은 확장성과 유지보수성이 좋지않을꺼같아서 ㄷ로 하기로 함
  ㄱ. 유저가 로그인시 세션, 로컬 스토리지에 접속한 서비스명을 박는다.
  ㄴ. url에 ulju가 포함되어 있다면 각각 디렉토리에서 사용하는 nav의 path에 /ulju/를 추가해준다.
  ㄷ. 커스텀 훅을 만들어서 공통으로 사용하게 한다

2. 글로벌 네비게이트

• 아래 코드를 사용해서 평범한 네비게이트 훅을 만들어준다

import { useNavigate, useLocation } from "react-router-dom";
export default function useGlobalNavigate() {
  const navigate = useNavigate();
  const { pathname } = useLocation();
  const hubKeywords = ["ulju"];
  const isUlju = hubKeywords.some((keyword) => pathname.includes(keyword));
  const GlobalNavigate = (url) => {
    const basePath = isUlju ? `/ulju` : "";
    navigate(`${basePath}/${url}`);
  };
  return GlobalNavigate;
}

3. config 설정

• 아래와 같이 config를 설정해서 만들어낸 커스텀훅을 exposes 해둔다 이외에도 다른설정을 해야함

plugins :[
 new ModuleFederationPlugin({
 exposes: {
        "./GlobalNavigate": "./src/utils/useGlobalNavigate",
      },
})
]

4. import 하기

• 그다음 만들어둔 커스텀훅을 사용할 다른 프로젝트에서 import를 해준다.
• 이때도 config 설정을 해두어야함
• 아래와 같이 import를 해두고

import useGlobalNavigate from "app_shell/GlobalNavigate";

• 일반 useNavigate와 쓰는것과 동일하게 사용하면 됨~

  const globalNavigate = useGlobalNavigate();