4f69a57b84
## 概要 [Task1895: cssについて「app.module.scss」と「GlobalStyle.css」をマージして、個別の参照をなくす](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/1895) - GlobalStyle.cssをなくしてデザイナさんのCSSをapp.module.scssにまとめるとともに、個別でcssを作成していた画面についてapp.module.scssを参照するように修正しました。 - 修正の過程で、最新のcss及び画像の取り込みを行いました。 - トップページのレイアウトについて最新化を行いました。 （適用前後でレイアウトにずれが発生したため、調査の過程で最新化を実施） - 影響範囲は全画面レイアウトになります。適用前後の画面イメージを比較して確認しております。 ## レビューポイント - 各画面の変更前後のイメージについてスクリーンショットを格納しています。前後比較いただき問題ないか確認いただきたいです。 ※変更後についてヘッダとシステム名の文字サイズが大きくなっていますが、最新の画面デザイン上そうなっています。 ※トップページについては最新化を行ったため、デザイナさんの画面と比較いただければと思います。 ## UIの変更 - 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/Task1895?csf=1&web=1&e=heIWaD ## 動作確認状況 - ローカルで確認 ## 補足 - 相談、参考資料などがあれば
76 lines
2.2 KiB
TypeScript
76 lines
2.2 KiB
TypeScript
import AppRouter from "AppRouter";
|
|
import { BrowserRouter } from "react-router-dom";
|
|
import { PublicClientApplication } from "@azure/msal-browser";
|
|
import { MsalProvider, useMsal } from "@azure/msal-react";
|
|
import { msalConfig } from "common/msalConfig";
|
|
import { useEffect, useLayoutEffect } from "react";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import globalAxios, { AxiosError, AxiosResponse } from "axios";
|
|
import { clearToken } from "features/auth";
|
|
import { useTranslation } from "react-i18next";
|
|
import Snackbar from "components/snackbar";
|
|
import { selectSnackber } from "features/ui/selectors";
|
|
import { closeSnackbar } from "features/ui/uiSlice";
|
|
|
|
const App = (): JSX.Element => {
|
|
const dispatch = useDispatch();
|
|
const { instance } = useMsal();
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
const [t, i18n] = useTranslation();
|
|
const pca = new PublicClientApplication(msalConfig);
|
|
useEffect(() => {
|
|
const id = globalAxios.interceptors.response.use(
|
|
(response: AxiosResponse) => response,
|
|
(e: AxiosError) => {
|
|
if (e?.response?.status === 401) {
|
|
dispatch(clearToken());
|
|
instance.logout({
|
|
postLogoutRedirectUri: "/?logout=true",
|
|
});
|
|
}
|
|
return Promise.reject(e);
|
|
}
|
|
);
|
|
const cleanup = () => {
|
|
globalAxios.interceptors.response.eject(id);
|
|
};
|
|
return cleanup;
|
|
}, [dispatch, instance]);
|
|
|
|
// Language読み取り
|
|
useLayoutEffect(() => {
|
|
const language = document.cookie
|
|
.trim()
|
|
.split(";")
|
|
.map((x) => x.split("="))
|
|
.find((x) => x.length === 2 && x[0] === "language");
|
|
|
|
if (language) {
|
|
i18n.changeLanguage(language[1]);
|
|
}
|
|
}, [i18n]);
|
|
|
|
const snackbarInfo = useSelector(selectSnackber);
|
|
|
|
return (
|
|
<>
|
|
<Snackbar
|
|
isOpen={snackbarInfo.isOpen}
|
|
level={snackbarInfo.level}
|
|
message={t(snackbarInfo.message)}
|
|
duration={snackbarInfo.duration}
|
|
onClose={() => {
|
|
dispatch(closeSnackbar());
|
|
}}
|
|
/>
|
|
<MsalProvider instance={pca}>
|
|
<BrowserRouter>
|
|
<AppRouter />
|
|
</BrowserRouter>
|
|
</MsalProvider>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default App;
|