Merged PR 143: 認証エラーや自動ログアウト時にスナックバーを表示する実装を行う

## 概要
[Task1917: 認証エラーや自動ログアウト時にスナックバーを表示する実装を行う](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/1917)

- 認証エラーなどでトップページに遷移する際にクエリパラメータを持たせて、トップページでスナックバーを出すようにしました。

## レビューポイント
- 認証エラーでの遷移かの判定をクエリパラメータで行っているが問題ないか
- 表示メッセージは適切か

## UIの変更
- [Task1917](https://ndstokyo.sharepoint.com/:f:/r/sites/Piranha/Shared%20Documents/General/OMDS/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88/Task1917?csf=1&web=1&e=q664WR)
## 動作確認状況
- ローカルで確認

dictation_client/src/App.tsx

@@ -26,7 +26,7 @@ const App = (): JSX.Element => {
         if (e?.response?.status === 401) {
           dispatch(clearToken());
           instance.logout({
-            postLogoutRedirectUri: "/",
+            postLogoutRedirectUri: "/?logout=true",
           });
         }
         return Promise.reject(e);

dictation_client/src/components/auth/routeAuthGuard.tsx

@@ -1,5 +1,4 @@
-import React, { useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import { useEffect } from "react";
 import {
   isAuthenticatedSelector,
   isTokenExpired,
@@ -17,25 +16,18 @@ export const RouteAuthGuard = (props: RouteAuthGuardProps) => {
   const isAuth = useSelector(isAuthenticatedSelector);
   const isExpired = useSelector(isTokenExpired);
   const dispatch: AppDispatch = useDispatch();
-  const navigate = useNavigate();
   const { instance } = useMsal();
   const { component } = props;
-  // トークンの有効期限が切れていたらTopへリダイレクト
+  // トークンがないor有効期限が切れていたらログアウトしてTopへリダイレクト
   useEffect(() => {
-    if (!isAuth) {
-      navigate("/");
-    } else if (isExpired) {
+    if (!isAuth || isExpired) {
       dispatch(clearToken());
       // B2Cからもログアウトする
       instance.logout({
-        postLogoutRedirectUri: "/",
+        postLogoutRedirectUri: "/?logout=true",
       });
     }
-  }, [isAuth, isExpired, dispatch, navigate, instance]);
-
-  if (!isAuth || isExpired) {
-    return <div />;
-  }
+  }, [isAuth, isExpired, dispatch, instance]);
 
   return component;
 };

dictation_client/src/pages/TopPage/index.tsx

@@ -1,10 +1,14 @@
 import { useMsal } from "@azure/msal-react";
 import { loginRequest } from "common/msalConfig";
-import React from "react";
+import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { getTranslationID } from "translation";
 import Header from "components/header";
 import Footer from "components/footer";
+import { AppDispatch } from "app/store";
+import { useDispatch } from "react-redux";
+import { closeSnackbar, openSnackbar } from "features/ui";
+import { useLocation, useNavigate } from "react-router-dom";
 import { LANGUAGE_LIST } from "../../features/top/constants";
 import arrow_forward from "../../assets/images/arrow_forward.svg";
 import arrow_forward_bule from "../../assets/images/arrow_forward_blue.svg";
@@ -14,6 +18,24 @@ const TopPage: React.FC = (): JSX.Element => {
   const { instance } = useMsal();
   // eslint-disable-next-line
   const [t, i18n] = useTranslation();
+  const dispatch: AppDispatch = useDispatch();
+  const { search } = useLocation();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const query = new URLSearchParams(search);
+    const logout = query.get("logout");
+    if (logout) {
+      dispatch(closeSnackbar());
+      dispatch(
+        openSnackbar({
+          level: "error",
+          message: getTranslationID("topPage.message.logout"),
+        })
+      );
+      navigate("/", { replace: true });
+    }
+  }, [dispatch, search, navigate]);
 
   return (
     <div className={`${styles.wrap} ${styles.home}`}>