b4cd0208e6
## 概要 [Task: 1468](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/OMDSDictation/_sprints/taskboard/OMDSDictation%20%E3%83%81%E3%83%BC%E3%83%A0/OMDSDictation/%E3%82%B9%E3%83%97%E3%83%AA%E3%83%B3%E3%83%88%204-2?workitem=1468) - ヘッダーcomponentを作成 - ログイン前とログイン後でヘッダーが異なるので各ページに配置するようにした - 呼び出すcomponentは一つとして作成し、内部でヘッダーを切り替えるようにした - フッターcomponentを作成 - ログイン前とログイン後でページのデザインが異なるのでヘッダー同様、各ページに配置することにした ## レビューポイント - ヘッダーの作成方法に問題はないか ## 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/Task1468?csf=1&web=1&e=K2tFjK ## 動作確認状況 - 型チェック - ローカルで動作確認 ## 補足
26 lines
830 B
TypeScript
26 lines
830 B
TypeScript
import React from "react";
|
|
import { useLocation } from "react-router-dom";
|
|
import LoginedHeader from "./loginedHeader";
|
|
import NotLoginHeader from "./notLoginHeader";
|
|
import { isLoginPaths } from "./utils";
|
|
|
|
interface HeaderProps {
|
|
userName?: string;
|
|
// userRole: string; ログインユーザーのロールに応じてタブの活性非活性に使用する想定
|
|
}
|
|
// ヘッダー切り替え用のcomponent
|
|
const Header: React.FC<HeaderProps> = (props) => {
|
|
const { userName } = props;
|
|
const location = useLocation();
|
|
return getHeader(location.pathname, userName);
|
|
};
|
|
|
|
export default Header;
|
|
|
|
const getHeader = (path: string, userName?: string) => {
|
|
if (isLoginPaths(path) && userName) {
|
|
return <LoginedHeader name={userName} activePath={path} />;
|
|
}
|
|
return <NotLoginHeader isMobile={path === "/"} />;
|
|
};
|