免責事項を記載する (#44)

* Change page layout with accesibility * Make menu inside a hanburger menu * Add Disclaimer component and the page * Remove unnecessary src files * Move Layout component from App.js to pages/index.js * Add content of Disclaimer page * Remove unnecessary GitHub Actions workflow file * Reallocate tests to appropriate directories * Fix a layout bug when render on smartphone
asaka2-alb · May 6, 2023 · df42d73 · df42d73
1 parent fb98316
commit df42d73
Show file tree

Hide file tree

Showing 13 changed files with 203 additions and 109 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
diff --git a/src/components/App/App.js b/src/components/App/App.js
@@ -2,16 +2,13 @@
 /* eslint-disable import/no-unresolved */
 
 import React, { useState } from 'react';
-import { ThemeProvider, CssBaseline, Stack } from '@mui/material';
+import { Stack } from '@mui/material';
 import ErrorAlert from '@/components/Alerts/Alerts';
 
-import theme from '@/theme/theme';
 import backendUrls from './backend_urls.json';
 
 import Maps from '@/components/Map/Map';
 import QueryForm from '@/components/QueryForm/QueryForm';
-import Logo from '@/components/Logo/Logo';
-import CopyRight from '@/components/CopyRight/CopyRight';
 import LoadingScreen from './LoadingScreen/LoadingScreen';
 
 function App() {
@@ -68,33 +65,19 @@ function App() {
 
   return (
     <>
-      <ThemeProvider theme={theme}>
-        <CssBaseline />
-        <div className="App">
-          <Stack
-            direction={{ xs: 'column', sm: 'row', md: 'row' }}
-            spacing={1}
-          >
-            <Logo />
-            <QueryForm
-              query={query}
-              onInput={handleFormInput}
-              onSubmit={handleFormSubmit}
-            />
-            <ErrorAlert
-              open={openAlert}
-              onClose={handleAlertClose}
-              message={alertMessage}
-            />
-          </Stack>
-          <Stack div sx={{ height: 'calc(80vh - 30px)' }}>
-            <Maps center={center} saunas={saunas} />
-          </Stack>
-          <Stack>
-            <CopyRight />
-          </Stack>
-        </div>
-      </ThemeProvider>
+      <QueryForm
+        query={query}
+        onInput={handleFormInput}
+        onSubmit={handleFormSubmit}
+      />
+      <ErrorAlert
+        open={openAlert}
+        onClose={handleAlertClose}
+        message={alertMessage}
+      />
+      <Stack div sx={{ height: 'calc(80vh - 30px)' }}>
+        <Maps center={center} saunas={saunas} />
+      </Stack>
       <LoadingScreen isSearching={isSearching} />
     </>
   );

diff --git a/src/components/App/App.spec.js b/src/components/App/App.spec.js
@@ -73,11 +73,3 @@ describe('App render an alert when backend geocoding returns not found', () => {
     cy.contains('ERROR').should('be.visible');
   });
 });
-
-describe('Copyright', () => {
-  it('should display the correct copyright', () => {
-    mount(<App />);
-
-    cy.contains(/2022-20[0-9]{2}.*All\sRights\sReserved\./).should('be.visible');
-  });
-});
diff --git a/src/components/Disclaimer/Disclaimer.js b/src/components/Disclaimer/Disclaimer.js
@@ -0,0 +1,28 @@
+/* eslint-disable max-len */
+/* eslint-disable import/extensions */
+/* eslint-disable import/no-unresolved */
+
+import React from 'react';
+
+function Disclaimer() {
+  return (
+    <>
+      <h1>免責事項</h1>
+
+      <h2>サービス・アプリについて</h2>
+      <p>当サイトのサービス・アプリは十分に検証した上でご提供させていただいておりますが、その動作において信頼性、正確性、完全性について保証するものではありません。当サイト・サービス・アプリによって生じた直接的、また間接的トラブル、損失、損害については、当サイトは一切の責任を負いません。当サイトのサービス・アプリを利用する場合は、自己責任で行う必要があります。</p>
+
+      <h2>当サイトの情報の正確性について</h2>
+      <p>当サイトのコンテンツや情報において、可能な限り正確な情報を掲載するよう努めていますおりますが、その情報に関する信頼性、正確性、完全性について保証するものではありません。また、誤情報が入り込んだり、情報が古くなったりすることもあります。必ずしも正確性を保証するものではありません。また合法性や安全性なども保証しません。</p>
+      <p>掲載された内容の誤り、および掲載された情報に基づいて行われたことによって生じた直接的、また間接的トラブル、損失、損害については、当サイトは一切の責任を負いません。</p>
+
+      <h2>損害等の責任について</h2>
+      <p>当サイトに掲載された内容・サービス・アプリ・その他全てのコンテンツによって生じた損害等の一切の責任を負いかねますので、ご了承ください。また当サイトからリンクやバナーなどによって他のサイトに移動された場合、移動先サイトで提供される情報、サービス等について一切の責任も負いません。当サイトの保守、火災、停電、その他の自然災害、ウィルスや第三者の妨害等行為による不可抗力によって、当サイトによるサービスが停止したことに起因して利用者に生じた損害についても、何ら責任を負うものではありません。当サイトを利用する場合は、自己責任で行う必要があります。</p>
+
+      <h2>当サイトで掲載している画像の著作権や肖像権等について</h2>
+      <p>当サイトで掲載している画像の著作権や肖像権等は、各権利所有者に帰属します。万が一問題がある場合は、お問い合わせよりご連絡いただけますよう宜しくお願い致します。</p>
+    </>
+  );
+}
+
+export default Disclaimer;
diff --git a/src/components/Layouts/Layout.js b/src/components/Layouts/Layout.js
@@ -0,0 +1,39 @@
+/* eslint-disable import/extensions */
+/* eslint-disable import/no-unresolved */
+
+import React from 'react';
+import { ThemeProvider, CssBaseline, Stack } from '@mui/material';
+
+import theme from '@/theme/theme';
+
+import Logo from '@/components/Logo/Logo';
+import Navbar from '@/components/Navbars/Navbar';
+import CopyRight from '@/components/CopyRight/CopyRight';
+
+export default function Layout({ children }) {
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <div className="App">
+        <Stack
+          direction="row"
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          <header>
+            <Logo />
+          </header>
+          <nav>
+            <Navbar />
+          </nav>
+        </Stack>
+        <main>
+          {children}
+        </main>
+        <footer>
+          <CopyRight />
+        </footer>
+      </div>
+    </ThemeProvider>
+  );
+}
diff --git a/src/components/Layouts/Layout.spec.js b/src/components/Layouts/Layout.spec.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import { mount } from '@cypress/react18';
+import Layout from './Layout';
+
+describe('Copyright', () => {
+  it('should display the correct copyright', () => {
+    mount(<Layout />);
+
+    cy.contains(/2022-20[0-9]{2}.*All\sRights\sReserved\./).should('be.visible');
+  });
+});
diff --git a/src/components/Logo/Logo.js b/src/components/Logo/Logo.js
@@ -2,5 +2,14 @@ import React from 'react';
 import Image from 'next/image';
 
 export default function Logo() {
-  return <Image width={400} height={80} src="/data/img/logo.png" alt="logo.png" />;
+  return (
+    <Image
+      src="/data/img/logo.png"
+      alt="logo"
+      width={500}
+      height={100}
+      layout="responsive"
+      objectFit="contain"
+    />
+  );
 }
diff --git a/src/components/Navbars/Navbar.js b/src/components/Navbars/Navbar.js
@@ -0,0 +1,87 @@
+/* eslint-disable import/extensions */
+/* eslint-disable import/no-unresolved */
+
+import React, { useState } from 'react';
+import Link from 'next/link';
+
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import MenuIcon from '@mui/icons-material/Menu';
+import HomeIcon from '@mui/icons-material/Home';
+import WarningAmberIcon from '@mui/icons-material/WarningAmber';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import Drawer from '@mui/material/Drawer';
+import Button from '@mui/material/Button';
+
+export default function Navbar() {
+  const [drawerOpened, setDrawerOpened] = useState(false);
+  return (
+    <div id="navbar">
+      <Button
+        onClick={() => setDrawerOpened(true)}
+        startIcon={<MenuIcon />}
+        size="large"
+      />
+      <Drawer
+        anchor="right"
+        open={drawerOpened}
+        onClose={() => setDrawerOpened(false)}
+      >
+        <DrawerMenu />
+      </Drawer>
+    </div>
+  );
+}
+
+function DrawerMenu() {
+  return (
+    <Box sx={{ flexGrow: 1 }}>
+      <List>
+        <Grid container spacing={2}>
+          <Grid item xs={12} md={12}>
+            <Link href="/">
+              <ListItem disablePadding>
+                <ListItemButton>
+                  <ListItemIcon>
+                    <HomeIcon />
+                  </ListItemIcon>
+                  <ListItemText
+                    primary="Home"
+                    primaryTypographyProps={{
+                      color: 'primary',
+                      fontWeight: 'medium',
+                      variant: 'body1',
+                    }}
+                  />
+                </ListItemButton>
+              </ListItem>
+            </Link>
+          </Grid>
+          <Grid item xs={12} md={12}>
+            <Link href="/disclaimer">
+              <ListItem disablePadding>
+                <ListItemButton>
+                  <ListItemIcon>
+                    <WarningAmberIcon />
+                  </ListItemIcon>
+                  <ListItemText
+                    primary="Disclaimer"
+                    primaryTypographyProps={{
+                      color: 'primary',
+                      fontWeight: 'medium',
+                      variant: 'body1',
+                    }}
+                  />
+                </ListItemButton>
+              </ListItem>
+            </Link>
+          </Grid>
+        </Grid>
+      </List>
+    </Box>
+  );
+}
diff --git a/src/index.js b/src/index.js
diff --git a/src/pages/disclaimer/index.js b/src/pages/disclaimer/index.js
@@ -1,13 +1,16 @@
+/* eslint-disable import/extensions */
+/* eslint-disable import/no-unresolved */
+
 import React from 'react';
+import Disclaimer from '@/components/Disclaimer/Disclaimer';
+import Layout from '@/components/Layouts/Layout';
 
-function Disclaimer() {
+function DisclaimerPage() {
   return (
-    <>
-      <h1>Disclaimer on NEXTJS</h1>
-      <h2>H2: hogehoge</h2>
-      <p>This is hell.</p>
-    </>
+    <Layout>
+      <Disclaimer />
+    </Layout>
   );
 }
 
-export default Disclaimer;
+export default DisclaimerPage;
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -3,10 +3,13 @@
 /* eslint-disable import/no-unresolved */
 
 import App from '@/components/App/App';
+import Layout from '@/components/Layouts/Layout';
 
 function Home() {
   return (
-    <App />
+    <Layout>
+      <App />
+    </Layout>
   );
 }
 

diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js
diff --git a/src/setupTests.js b/src/setupTests.js