header, main, footerのCSSがちゃんと分けられるようになった。 (#577)

# PRの概要

## 具体的な変更内容

## 影響範囲

## 動作要件

## 補足

## レビューリクエストを出す前にチェック！

- [ ] 改めてセルフレビューしたか
- [ ] 手動での動作検証を行ったか
- [ ] server の機能追加ならば、テストを書いたか
  - 理由: 書いた | server の機能追加ではない
- [ ] 間違った使い方が存在するならば、それのドキュメントをコメントで書いたか
  - 理由: 書いた | 間違った使い方は存在しない
- [ ] わかりやすいPRになっているか

<!-- レビューリクエスト後は、Slackでもメンションしてお願いすることを推奨します。 -->

Author: KaichiManabe

web/app/chat/layout.tsx

@@ -10,9 +10,7 @@ export default function ChatPageLayout({
   return (
     <NavigateByAuthState type="toLoginForUnauthenticated">
       <Header title="チャット/Chat" />
-      <div className="absolute top-14 right-0 bottom-14 left-0 overflow-y-auto sm:top-16">
-        {children}
-      </div>
+      <div className="grow overflow-y-auto">{children}</div>
       <BottomBar activeTab="3_chat" />
     </NavigateByAuthState>
   );

web/app/friends/layout.tsx

@@ -10,9 +10,7 @@ export default function FriendsPageLayout({
   return (
     <NavigateByAuthState type="toLoginForUnauthenticated">
       <Header title="フレンド/Friends" />
-      <div className="absolute top-14 right-0 bottom-14 left-0 overflow-y-auto sm:top-16">
-        {children}
-      </div>
+      <div className="grow overflow-y-auto">{children}</div>
       <BottomBar activeTab="1_friends" />
     </NavigateByAuthState>
   );

web/app/home/layout.tsx

@@ -10,9 +10,7 @@ export default function HomePageLayout({
   return (
     <NavigateByAuthState type="toLoginForUnauthenticated">
       <Header title="ホーム/Home" />
-      <div className="relative top-14 right-0 bottom-14 left-0 overflow-y-auto sm:top-16">
-        {children}
-      </div>
+      <div className="grow overflow-y-auto">{children}</div>
       <BottomBar activeTab="0_home" />
     </NavigateByAuthState>
   );

web/app/layout.tsx

@@ -50,7 +50,7 @@ export default function RootLayout({
                 <AlertProvider>
                   <ModalProvider>
                     <BanLandscape />
-                    {children}
+                    <div className="flex h-screen flex-col">{children}</div>
                   </ModalProvider>
                 </AlertProvider>
               </AuthProvider>

web/app/search/layout.tsx

@@ -9,9 +9,7 @@ export default function HomePageLayout({
   return (
     <>
       <Header title="検索/Search" />
-      <div className="absolute top-14 right-0 bottom-14 left-0 overflow-y-auto sm:top-16">
-        {children}
-      </div>
+      <div className="grow overflow-y-auto">{children}</div>
       <BottomBar activeTab="2_search" />
     </>
   );

web/app/settings/layout.tsx

@@ -9,9 +9,7 @@ export default function SettingsPageLayout({
   return (
     <>
       <Header title="設定/Settings" />
-      <div className="absolute top-14 right-0 bottom-14 left-0 overflow-y-auto sm:top-16">
-        {children}
-      </div>
+      <div className="grow overflow-y-auto">{children}</div>
       <BottomBar activeTab="4_settings" />
     </>
   );

web/components/BottomBar.tsx

@@ -10,63 +10,51 @@ type Props = {
 };
 
 function BottomBarCell({
-  label,
   href,
   iconComponent,
   isActive,
 }: {
-  label: string;
   href: string;
   iconComponent: React.ReactNode;
   isActive: boolean;
 }) {
   return (
     <Link
       href={href}
-      className={`focus:bg-gray-300 ${
+      className={`flex flex-1 justify-center py-3 focus:bg-gray-300 ${
         isActive ? "active text-primary" : "text-secondary"
       }`}
     >
       {iconComponent}
-      <span
-        className={`text-xs ${isActive ? "text-primary" : "text-gray-500"}`}
-      >
-        {label}
-      </span>
     </Link>
   );
 }
 
 export default function BottomBar(props: Props) {
   const { activeTab } = props;
   return (
-    <div className="btm-nav flex max-h-14 w-full flex-row">
+    <div className="flex w-full flex-row items-center justify-around ">
       <BottomBarCell
-        label="Home"
         href="/home"
         isActive={activeTab === "0_home"}
         iconComponent={<MdHome className="text-2xl" />}
       />
       <BottomBarCell
-        label="Friends"
         href="/friends"
         isActive={activeTab === "1_friends"}
         iconComponent={<MdPeople className="text-2xl" />}
       />
       <BottomBarCell
-        label="Search"
         href="/search"
         isActive={activeTab === "2_search"}
         iconComponent={<MdSearch className="text-2xl" />}
       />
       <BottomBarCell
-        label="Chat"
         href="/chat"
         isActive={activeTab === "3_chat"}
         iconComponent={<MdChat className="text-2xl" />}
       />
       <BottomBarCell
-        label="Settings"
         href="/settings"
         isActive={activeTab === "4_settings"}
         iconComponent={<MdSettings className="text-2xl" />}

web/components/Header.tsx

@@ -9,8 +9,8 @@ type Props = {
 export default function Header(props: Props) {
   const { title } = props;
   return (
-    <header className="fixed top-0 left-0 z-50 w-full bg-secondary shadow-md">
-      <div className="flex items-center justify-between px-4 py-2">
+    <header className="w-full bg-secondary shadow-md">
+      <div className="flex items-center justify-between px-4 py-3">
         <Link href="/home" passHref>
           <CourseMateIcon width="28px" height="28px" />
         </Link>