Merged PR 542: 画面修正（サインアウト本実装）

## 概要
[Task2963: 画面修正（サインアウト本実装）](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/2963)

- 元PBI or タスクへのリンク（内容・目的などはそちらにあるはず）
- 何をどう変更したか、追加したライブラリなど
**headerにサインアウトの実装を追加**
- このPull Requestでの対象/対象外
- 影響範囲（他の機能にも影響があるか）

## レビューポイント
- 特にレビューしてほしい箇所
- 軽微なものや自明なものは記載不要
- 修正範囲が大きい場合などに記載
- 全体的にや仕様を満たしているか等は本当に必要な時のみ記載

## UIの変更
- Before/Afterのスクショなど
- スクショ置き場
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/Task2963?csf=1&web=1&e=XbInfz

## 動作確認状況
- ローカルで確認
管理者ユーザーかつ第1～5階層、一般ユーザーでログインし、headerに表示されかつサインアウトできることを確認。

## 補足
- 相談、参考資料などがあれば

dictation_client/src/components/header/loginedHeader.tsx

@@ -1,17 +1,23 @@
-import React, { useEffect } from "react";
+import React, { useCallback, useEffect } from "react";
 import styles from "styles/app.module.scss";
 import { useDispatch, useSelector } from "react-redux";
+import { AppDispatch } from "app/store";
+import { useMsal } from "@azure/msal-react";
+import { clearToken } from "features/auth";
+import { useTranslation } from "react-i18next";
 import {
   getUserInfoAsync,
   selectUserName,
   selectIsUserNameEmpty,
+  clearUserInfo,
 } from "features/login";
-import { AppDispatch } from "app/store";
 import { getFilteredMenus } from "./utils";
 import logo from "../../assets/images/OMS_logo_black.svg";
 import ac from "../../assets/images/account_circle.svg";
 import { LoginedPaths } from "./types";
 import { HEADER_NAME } from "./constants";
+import logout from "../../assets/images/logout.svg";
+import { getTranslationID } from "../../translation";
 
 interface HeaderProps {
   activePath: LoginedPaths;
@@ -22,6 +28,8 @@ const LoginedHeader: React.FC<HeaderProps> = (props: HeaderProps) => {
   const { activePath } = props;
   const filterMenus = getFilteredMenus();
   const dispatch: AppDispatch = useDispatch();
+  const { instance } = useMsal();
+  const { t } = useTranslation();
 
   // Headerのユーザー情報を取得する
   const isUserNameEmpty = useSelector(selectIsUserNameEmpty);
@@ -32,6 +40,22 @@ const LoginedHeader: React.FC<HeaderProps> = (props: HeaderProps) => {
       dispatch(getUserInfoAsync());
     }
   }, [dispatch, isUserNameEmpty]);
+
+  // ログアウト
+  const onSignoutButton = useCallback(
+    async () => {
+      // ダイアログ確認
+      // eslint-disable-next-line no-alert
+      if (window.confirm(t(getTranslationID("common.message.displayDialog")))) {
+        instance.logoutRedirect({ postLogoutRedirectUri: "/" });
+        dispatch(clearToken());
+        dispatch(clearUserInfo());
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [dispatch]
+  );
+
   return (
     <header className={styles.header}>
       <div className={styles.headerLogo}>
@@ -55,10 +79,15 @@ const LoginedHeader: React.FC<HeaderProps> = (props: HeaderProps) => {
             </li>
           ))}
         </ul>
+
         <p className={styles.accountInfo}>
           <img src={ac} alt="" className={styles.accountIcon} />
-
           <span>{userName}</span>
+          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
+          <span className={styles.accountSignout} onClick={onSignoutButton}>
+            <img src={logout} alt="" className={styles.accountIcon} />
+            {t(getTranslationID("common.label.signOutButton"))}
+          </span>
         </p>
       </div>
     </header>

dictation_client/src/translation/de.json

@@ -7,7 +7,8 @@
       "internalServerError": "Verarbeitung fehlgeschlagen. Bitte versuchen Sie es später noch einmal.",
       "listEmpty": "Es gibt 0 Suchergebnisse.",
       "dialogConfirm": "Möchten Sie die Operation durchführen?",
-      "success": "Erfolgreich verarbeitet"
+      "success": "Erfolgreich verarbeitet",
+      "displayDialog": "(de)サインアウトしてもよろしいですか？"
     },
     "label": {
       "cancel": "Abbrechen",
@@ -22,7 +23,8 @@
       "tier3": "(de)Distributor",
       "tier4": "(de)Dealer",
       "tier5": "(de)Customer",
-      "notSelected": "(de)None"
+      "notSelected": "(de)None",
+      "signOutButton": "(de)Sign out"
     }
   },
   "topPage": {

dictation_client/src/translation/en.json

@@ -7,7 +7,8 @@
       "internalServerError": "Processing failed. Please try again later. ",
       "listEmpty": "There are 0 search results.",
       "dialogConfirm": "Do you want to perform the operation?",
-      "success": "Successfully Processed"
+      "success": "Successfully Processed",
+      "displayDialog": "サインアウトしてもよろしいですか？"
     },
     "label": {
       "cancel": "Cancel",
@@ -22,7 +23,8 @@
       "tier3": "Distributor",
       "tier4": "Dealer",
       "tier5": "Customer",
-      "notSelected": "None"
+      "notSelected": "None",
+      "signOutButton": "Sign out"
     }
   },
   "topPage": {

dictation_client/src/translation/es.json

@@ -7,7 +7,8 @@
       "internalServerError": "El procesamiento falló. Por favor, inténtelo de nuevo más tarde.",
       "listEmpty": "Hay 0 resultados de búsqueda.",
       "dialogConfirm": "¿Quieres realizar la operación?",
-      "success": "Procesado con éxito"
+      "success": "Procesado con éxito",
+      "displayDialog": "(es)サインアウトしてもよろしいですか？"
     },
     "label": {
       "cancel": "Cancelar",
@@ -22,7 +23,8 @@
       "tier3": "(es)Distributor",
       "tier4": "(es)Dealer",
       "tier5": "(es)Customer",
-      "notSelected": "(es)None"
+      "notSelected": "(es)None",
+      "signOutButton": "(es)Sign out"
     }
   },
   "topPage": {

dictation_client/src/translation/fr.json

@@ -7,7 +7,8 @@
       "internalServerError": "Le traitement a échoué. Veuillez réessayer plus tard.",
       "listEmpty": "Il y a 0 résultats de recherche.",
       "dialogConfirm": "Voulez-vous effectuer l'opération?",
-      "success": "Traité avec succès"
+      "success": "Traité avec succès",
+      "displayDialog": "(fr)サインアウトしてもよろしいですか？"
     },
     "label": {
       "cancel": "Annuler",
@@ -22,7 +23,8 @@
       "tier3": "(fr)Distributor",
       "tier4": "(fr)Dealer",
       "tier5": "(fr)Customer",
-      "notSelected": "(fr)None"
+      "notSelected": "(fr)None",
+      "signOutButton": "(fr)Sign out"
     }
   },
   "topPage": {