Feature/change toppage layout

package.json

@@ -36,18 +36,11 @@
       "prettier/prettier": "error"
     }
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not op_mini all"
+  ],
   "devDependencies": {
     "@types/jest": "^27.0.2",
     "@types/leaflet": "^1.7.5",

src/App.scss

@@ -0,0 +1 @@
+@import "styles/reset.scss";

src/App.tsx

@@ -3,6 +3,8 @@ import { BrowserRouter as Router, Route } from "react-router-dom";
 
 import Index from "pages/Index/Index";
 
+import "./App.scss";
+
 const App: FC = () => {
   return (
     <>

src/data/points/points.json

@@ -0,0 +1,27 @@
+[
+  {
+    "url": "https://raw.githubusercontent.com/Code-for-Funabashi/open-data-parser/main/data/kosodate-map/syokibohoikuichiran.json",
+    "type": "小規模保育園",
+    "icon": "green"
+  },
+  {
+    "url": "https://raw.githubusercontent.com/Code-for-Funabashi/open-data-parser/main/data/kosodate-map/korituhoikusyoitiran.json",
+    "type": "公立保育園",
+    "icon": "green"
+  },
+  {
+    "url": "https://raw.githubusercontent.com/Code-for-Funabashi/open-data-parser/main/data/kosodate-map/sirituhoikusyoitiran.json",
+    "type": "私立保育園",
+    "icon": "green"
+  },
+  {
+    "url": "https://raw.githubusercontent.com/Code-for-Funabashi/open-data-parser/main/data/kosodate-map/ninteikodomoenitiran.json",
+    "type": "認定こども園",
+    "icon": "green"
+  },
+  {
+    "url": "https://raw.githubusercontent.com/Code-for-Funabashi/open-data-parser/main/data/kosodate-map/kouminkan.json",
+    "type": "公民館",
+    "icon": "blue"
+  }
+]

src/data/points/points.ts

@@ -0,0 +1,14 @@
+import { PointMeta } from "types/Point";
+
+import { blueIcon, greenIcon } from "pages/Index/components/Icons";
+
+import json from "./points.json";
+
+export const points = (): PointMeta[] => {
+  return json.map((datum) => {
+    return {
+      ...datum,
+      icon: datum.icon === "blue" ? blueIcon : greenIcon,
+    };
+  });
+};

src/index.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 

src/pages/Index/Index.tsx

@@ -1,41 +1,32 @@
 import React, { FC } from "react";
+import { MapContainer, TileLayer } from "react-leaflet";
 
-import { PointMeta } from "types/Point";
-
-import Map from "components/Map/Map";
-import { greenIcon, blueIcon } from "components/Map/Icons";
+import Navigation from "./components/Navigation/Navigation";
+import Attribution from "./components/Attribution";
 
+import "leaflet/dist/leaflet.css";
 import "styles/full-screen.scss";
 
-const pointCatalog: PointMeta[] = [
-  {
-    url: "https://raw.githubusercontent.com/Code-for-Funabashi/open-data-parser/main/data/kosodate-map/syokibohoikuichiran.json",
-    type: "小規模保育園",
-    icon: greenIcon,
-  },
-  {
-    url: "https://raw.githubusercontent.com/Code-for-Funabashi/open-data-parser/main/data/kosodate-map/korituhoikusyoitiran.json",
-    type: "公立保育園",
-    icon: greenIcon,
-  },
-  {
-    url: "https://raw.githubusercontent.com/Code-for-Funabashi/open-data-parser/main/data/kosodate-map/sirituhoikusyoitiran.json",
-    type: "私立保育園",
-    icon: greenIcon,
-  },
-  {
-    url: "https://raw.githubusercontent.com/Code-for-Funabashi/open-data-parser/main/data/kosodate-map/ninteikodomoenitiran.json",
-    type: "認定こども園",
-    icon: greenIcon,
-  },
-  {
-    url: "https://raw.githubusercontent.com/Code-for-Funabashi/open-data-parser/main/data/kosodate-map/kouminkan.json",
-    type: "公民館",
-    icon: blueIcon,
-  },
-];
+//船橋市役所のlat lon
+export const position: [number, number] = [35.694722, 139.9825];
 
 const Index: FC = () => {
-  return <Map pointCatalog={pointCatalog} />;
+  return (
+    <>
+      <MapContainer
+        center={position}
+        zoom={13}
+        tap={false} // to support safari https://github.com/Leaflet/Leaflet/issues/7266
+        scrollWheelZoom={true}
+        style={{ height: "100%" }}
+      >
+        <TileLayer
+          attribution={Attribution()}
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        />
+        <Navigation />
+      </MapContainer>
+    </>
+  );
 };
 export default Index;

src/pages/Index/components/A.tsx

@@ -0,0 +1,12 @@
+import React, { FC, DetailedHTMLProps, AnchorHTMLAttributes } from "react";
+
+const A: FC<
+  DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>
+> = (props) => {
+  return (
+    <a {...props} target="_blank" rel="noopener">
+      {props.children}
+    </a>
+  );
+};
+export default A;

src/pages/Index/components/About/About.module.scss

@@ -0,0 +1,43 @@
+.check {
+  display: none;
+}
+
+.button {
+  user-select: none;
+  font-size: .5rem;
+  color: #0078a8;
+  text-decoration: underline  ;
+}
+
+.about {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 2000;
+  display: none;
+  max-width: 90%;
+  max-height: 90%;
+  width: 20rem;
+  height: 30rem;
+  padding: 1rem;
+  font-size: .75rem;
+  overflow-y: scroll;
+  background: #FFF;
+  color: #000;
+  transform: translate(-50%, -50%);
+}
+
+.black {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1750;
+  display: none;
+  width: 100%;
+  height: 100%;
+  background: #0006;
+}
+
+.view {
+  display: block;
+}

src/pages/Index/components/About/About.tsx

@@ -0,0 +1,60 @@
+import React, { FC, useState } from "react";
+
+import scss from "./About.module.scss";
+
+const About: FC = () => {
+  const [check, setCheck] = useState<boolean>(false);
+
+  return (
+    <>
+      <input
+        type="checkbox"
+        id="about"
+        className={scss.check}
+        checked={check}
+        onChange={(e) => setCheck(e.target.checked)}
+      />
+      <label className={scss.button} htmlFor="about">
+        当サイトについて
+      </label>
+      <div className={scss.about + " " + (check ? scss.view : "")}>
+        <section>
+          <h3>Googleアナリティクスの利用について</h3>
+          <p>
+            当サイトでは、Googleによるアクセス解析ツール「Googleアナリティクス」を使用しています。
+            <br />
+            このGoogleアナリティクスはデータの収集のためにCookieを使用しています。
+            <br />
+            このデータは匿名で収集されており、個人を特定するものではありません。
+          </p>
+          <p>
+            この機能はCookieを無効にすることで収集を拒否することが出来ますので、お使いのブラウザの設定をご確認ください。
+            <br />
+            この規約に関しての詳細は
+            <a
+              href="https://marketingplatform.google.com/about/analytics/terms/jp/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Googleアナリティクスサービス利用規約
+            </a>
+            や
+            <a
+              href="https://policies.google.com/technologies/ads?hl=ja"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              ポリシーと規約ページ
+            </a>
+            をご覧ください。
+          </p>
+        </section>
+      </div>
+      <label
+        className={scss.black + " " + (check ? scss.view : "")}
+        htmlFor="about"
+      />
+    </>
+  );
+};
+export default About;