From 68ceddfcb5c901aff22f1402cb6da32fa97632ca Mon Sep 17 00:00:00 2001
From: u-sho <26079835+u-sho@users.noreply.github.com>
Date: Wed, 15 May 2024 17:16:29 +0900
Subject: [PATCH 01/15] =?UTF-8?q?=E3=82=A2=E3=83=97=E3=83=AA=E3=81=AE?=
 =?UTF-8?q?=E7=B0=A1=E5=8D=98=E3=81=AA=E8=AA=AC=E6=98=8E=E3=82=92README?=
 =?UTF-8?q?=E3=81=AB=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 31 ++++++++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index c403366..e3a4ab8 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,31 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
+# firebase-book-manage-app
+
+firebase-book-manage-appは
+自宅やサークルの部室、研究室などの蔵書が管理できるWebアプリです！
+Next.jsとfirebaseで作成しています。
+
+## 機能一覧
+
+- 蔵書一覧
+- 蔵書詳細
+- ログイン・ログアウト
+- 会員登録
+- 蔵書追加
+- 蔵書編集
+- 蔵書削除
+
+## 仕様技術
+
+- TypeScript
+- React / Next.js
+- Firebase
+    - Cloud Firestore
+    - Authentication
+    - Cloud Storage for Firebase
+- Tailwind CSS
+- Vercel
+
+## 開発のススメ
 
 First, run the development server:
 

From c9983a95e105dc6bfccbd94e6f8d02255153137b Mon Sep 17 00:00:00 2001
From: u-sho <26079835+u-sho@users.noreply.github.com>
Date: Wed, 15 May 2024 17:42:02 +0900
Subject: [PATCH 02/15] =?UTF-8?q?VSCode=E3=81=AE=E8=A8=AD=E5=AE=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/extensions.json | 6 ++++++
 .vscode/settings.json   | 8 ++++++++
 2 files changed, 14 insertions(+)
 create mode 100644 .vscode/extensions.json
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 0000000..cc65909
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "bradlc.vscode-tailwindcss"
+  ]
+}
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..5e43f74
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,8 @@
+{
+  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit"
+  },
+  "typescript.tsdk": "node_modules/typescript/lib"
+}
\ No newline at end of file

From 106f1cb8b2344b73002a06a9def89c25ac6307f5 Mon Sep 17 00:00:00 2001
From: u-sho <26079835+u-sho@users.noreply.github.com>
Date: Fri, 17 May 2024 16:34:39 +0900
Subject: [PATCH 03/15] =?UTF-8?q?firebase=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                    |   5 +
 .firebaserc             |   5 +
 .gitignore              |   5 +
 .vscode/extensions.json |   4 +-
 README.md               |  28 +-
 app/firebase.ts         |  15 +
 firebase.json           |  25 ++
 firestore.indexes.json  |   4 +
 firestore.rules         |  19 +
 package-lock.json       | 890 +++++++++++++++++++++++++++++++++++++++-
 package.json            |  12 +-
 storage.rules           |  12 +
 12 files changed, 1007 insertions(+), 17 deletions(-)
 create mode 100644 .env
 create mode 100644 .firebaserc
 create mode 100644 app/firebase.ts
 create mode 100644 firebase.json
 create mode 100644 firestore.indexes.json
 create mode 100644 firestore.rules
 create mode 100644 storage.rules

diff --git a/.env b/.env
new file mode 100644
index 0000000..7367d54
--- /dev/null
+++ b/.env
@@ -0,0 +1,5 @@
+FIREBASE_API_KEY=
+FIREBASE_PROJECT_ID=
+FIREBASE_AUTH_DOMAIN=
+FIREBASE_STORAGE_BUCKET=
+FIREBASE_APP_ID=
\ No newline at end of file
diff --git a/.firebaserc b/.firebaserc
new file mode 100644
index 0000000..a209486
--- /dev/null
+++ b/.firebaserc
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "red-firebase-book-manage-app"
+  }
+}
diff --git a/.gitignore b/.gitignore
index fd3dbb5..c39a806 100644
--- a/.gitignore
+++ b/.gitignore
@@ -34,3 +34,8 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# firebase
+firebase-debug.log
+firestore-debug.log
+ui-debug.log
\ No newline at end of file
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index cc65909..7e88035 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,6 +1,8 @@
 {
   "recommendations": [
     "dbaeumer.vscode-eslint",
-    "bradlc.vscode-tailwindcss"
+    "bradlc.vscode-tailwindcss",
+    "dotenv.dotenv-vscode",
+    "chflick.firecode"
   ]
 }
\ No newline at end of file
diff --git a/README.md b/README.md
index e3a4ab8..5476e62 100644
--- a/README.md
+++ b/README.md
@@ -27,7 +27,33 @@ Next.jsとfirebaseで作成しています。
 
 ## 開発のススメ
 
-First, run the development server:
+はじめに、`.env`ファイルを`.env.local`ファイルとしてコピーし、`.env.local`にfirebase configを設定します．
+
+```sh
+cp .env .env.local
+```
+
+```dotenv:.env.local
+FIREBASE_API_KEY=YourFirebaseAPIkey
+FIREBASE_PROJECT_ID=your-firebase-project-id
+FIREBASE_AUTH_DOMAIN=your-firebase-project-id.firebaseapp.com
+FIREBASE_STORAGE_BUCKET=your-firebase-project-id.appspot.com
+FIREBASE_APP_ID=your:firebase:app:id
+```
+
+次に、firebaseのエミュレータを起動します．
+
+```bash
+npm run dev:firebase
+# or
+yarn dev:firebase
+# or
+pnpm dev:firebase
+# or
+bun dev:firebase
+```
+
+Third, run the development server:
 
 ```bash
 npm run dev
diff --git a/app/firebase.ts b/app/firebase.ts
new file mode 100644
index 0000000..bcbceeb
--- /dev/null
+++ b/app/firebase.ts
@@ -0,0 +1,15 @@
+// Import the functions you need from the SDKs you need
+import { initializeApp } from "firebase/app";
+
+const firebaseConfig = {
+  apiKey: process.env.FIREBASE_API_KEY,
+  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
+  projectId: process.env.FIREBASE_PROJECT_ID,
+  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
+  appId: process.env.FIREBASE_APP_ID
+};
+
+// Initialize Firebase
+const firebaseApp = initializeApp(firebaseConfig);
+
+export { firebaseApp };
\ No newline at end of file
diff --git a/firebase.json b/firebase.json
new file mode 100644
index 0000000..1fefdfe
--- /dev/null
+++ b/firebase.json
@@ -0,0 +1,25 @@
+{
+  "firestore": {
+    "rules": "firestore.rules",
+    "indexes": "firestore.indexes.json"
+  },
+  "storage": {
+    "rules": "storage.rules"
+  },
+  "emulators": {
+    "auth": {
+      "port": 9099
+    },
+    "firestore": {
+      "port": 8080
+    },
+    "storage": {
+      "port": 9199
+    },
+    "ui": {
+      "enabled": true,
+      "port": 3001
+    },
+    "singleProjectMode": true
+  }
+}
diff --git a/firestore.indexes.json b/firestore.indexes.json
new file mode 100644
index 0000000..415027e
--- /dev/null
+++ b/firestore.indexes.json
@@ -0,0 +1,4 @@
+{
+  "indexes": [],
+  "fieldOverrides": []
+}
diff --git a/firestore.rules b/firestore.rules
new file mode 100644
index 0000000..72af018
--- /dev/null
+++ b/firestore.rules
@@ -0,0 +1,19 @@
+rules_version = '2';
+
+service cloud.firestore {
+  match /databases/{database}/documents {
+
+    // This rule allows anyone with your Firestore database reference to view, edit,
+    // and delete all data in your Firestore database. It is useful for getting
+    // started, but it is configured to expire after 30 days because it
+    // leaves your app open to attackers. At that time, all client
+    // requests to your Firestore database will be denied.
+    //
+    // Make sure to write security rules for your app before that time, or else
+    // all client requests to your Firestore database will be denied until you Update
+    // your rules
+    match /{document=**} {
+      allow read, write: if request.time < timestamp.date(2024, 6, 16);
+    }
+  }
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index a8d3016..3ddb747 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "firebase-book-manage-app",
       "version": "0.1.0",
       "dependencies": {
+        "firebase": "^10.12.0",
         "next": "14.2.3",
         "react": "^18",
         "react-dom": "^18"
@@ -103,6 +104,547 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fastify/busboy": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-2.1.1.tgz",
+      "integrity": "sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@firebase/analytics": {
+      "version": "0.10.3",
+      "resolved": "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.10.3.tgz",
+      "integrity": "sha512-pMADbAgmfM3vDSeINCw0qSTBA9nn6so8min2KaBfu5eda5kfemb/DeawNUKOIxrP3yV4teJgCKA3JFomfnozEg==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/installations": "0.6.7",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/analytics-compat": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/@firebase/analytics-compat/-/analytics-compat-0.2.9.tgz",
+      "integrity": "sha512-ZKXaUixA+drbf3meX1bhPCG90UWrpw1KDrCydhe2Uf0VFZmZyVVr0bAcVpqLm29W4td7qp2RpFjVwercZ5mxTg==",
+      "dependencies": {
+        "@firebase/analytics": "0.10.3",
+        "@firebase/analytics-types": "0.8.2",
+        "@firebase/component": "0.6.7",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/analytics-types": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/@firebase/analytics-types/-/analytics-types-0.8.2.tgz",
+      "integrity": "sha512-EnzNNLh+9/sJsimsA/FGqzakmrAUKLeJvjRHlg8df1f97NLUlFidk9600y0ZgWOp3CAxn6Hjtk+08tixlUOWyw=="
+    },
+    "node_modules/@firebase/app": {
+      "version": "0.10.3",
+      "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.10.3.tgz",
+      "integrity": "sha512-+pW2wNjijh88aFRjNWhDNlVJI5vB7q1IKYEE79a7ErxwNS/Bo+oh16aAAPvunhT06EF5I8y9gAlNuHNN8u4z8g==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.6",
+        "idb": "7.1.1",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@firebase/app-check": {
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check/-/app-check-0.8.4.tgz",
+      "integrity": "sha512-2tjRDaxcM5G7BEpytiDcIl+NovV99q8yEqRMKDbn4J4i/XjjuThuB4S+4PkmTnZiCbdLXQiBhkVxNlUDcfog5Q==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/app-check-compat": {
+      "version": "0.3.11",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check-compat/-/app-check-compat-0.3.11.tgz",
+      "integrity": "sha512-t01zaH3RJpKEey0nGduz3Is+uSz7Sj4U5nwOV6lWb+86s5xtxpIvBJzu/lKxJfYyfZ29eJwpdjEgT1/lm4iQyA==",
+      "dependencies": {
+        "@firebase/app-check": "0.8.4",
+        "@firebase/app-check-types": "0.5.2",
+        "@firebase/component": "0.6.7",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/app-check-interop-types": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check-interop-types/-/app-check-interop-types-0.3.2.tgz",
+      "integrity": "sha512-LMs47Vinv2HBMZi49C09dJxp0QT5LwDzFaVGf/+ITHe3BlIhUiLNttkATSXplc89A2lAaeTqjgqVkiRfUGyQiQ=="
+    },
+    "node_modules/@firebase/app-check-types": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check-types/-/app-check-types-0.5.2.tgz",
+      "integrity": "sha512-FSOEzTzL5bLUbD2co3Zut46iyPWML6xc4x+78TeaXMSuJap5QObfb+rVvZJtla3asN4RwU7elaQaduP+HFizDA=="
+    },
+    "node_modules/@firebase/app-compat": {
+      "version": "0.2.33",
+      "resolved": "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.2.33.tgz",
+      "integrity": "sha512-CLXhYJBtLuHXCUvs894gpXEXhZ7Nhytn2icLLIesH+hPLnyBeBf2CSve6Wjig+TOxTdwOQUzdtYpdjmeeYDfpw==",
+      "dependencies": {
+        "@firebase/app": "0.10.3",
+        "@firebase/component": "0.6.7",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@firebase/app-types": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@firebase/app-types/-/app-types-0.9.2.tgz",
+      "integrity": "sha512-oMEZ1TDlBz479lmABwWsWjzHwheQKiAgnuKxE0pz0IXCVx7/rtlkx1fQ6GfgK24WCrxDKMplZrT50Kh04iMbXQ=="
+    },
+    "node_modules/@firebase/auth-compat": {
+      "version": "0.5.8",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-compat/-/auth-compat-0.5.8.tgz",
+      "integrity": "sha512-qUgmv/mcth9wHPTOCKgAOeHe5c+BIOJVcbX2RfcjlXO3xnd8nRafwEkZKBNJUjy4oihYhqFMEMnTHLhwLJwLig==",
+      "dependencies": {
+        "@firebase/auth": "1.7.3",
+        "@firebase/auth-types": "0.12.2",
+        "@firebase/component": "0.6.7",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0",
+        "undici": "5.28.4"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/auth-compat/node_modules/@firebase/auth": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-1.7.3.tgz",
+      "integrity": "sha512-RiU1PjziOxLuyswtYtLK2qSjHIQJQGCk1h986SUFRbMQfzLXbQg8ZgXwxac1UAfDOzgzqPNCXhBuIlSK2UomoQ==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0",
+        "undici": "5.28.4"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x",
+        "@react-native-async-storage/async-storage": "^1.18.1"
+      },
+      "peerDependenciesMeta": {
+        "@react-native-async-storage/async-storage": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@firebase/auth-interop-types": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-interop-types/-/auth-interop-types-0.2.3.tgz",
+      "integrity": "sha512-Fc9wuJGgxoxQeavybiuwgyi+0rssr76b+nHpj+eGhXFYAdudMWyfBHvFL/I5fEHniUM/UQdFzi9VXJK2iZF7FQ=="
+    },
+    "node_modules/@firebase/auth-types": {
+      "version": "0.12.2",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-types/-/auth-types-0.12.2.tgz",
+      "integrity": "sha512-qsEBaRMoGvHO10unlDJhaKSuPn4pyoTtlQuP1ghZfzB6rNQPuhp/N/DcFZxm9i4v0SogjCbf9reWupwIvfmH6w==",
+      "peerDependencies": {
+        "@firebase/app-types": "0.x",
+        "@firebase/util": "1.x"
+      }
+    },
+    "node_modules/@firebase/component": {
+      "version": "0.6.7",
+      "resolved": "https://registry.npmjs.org/@firebase/component/-/component-0.6.7.tgz",
+      "integrity": "sha512-baH1AA5zxfaz4O8w0vDwETByrKTQqB5CDjRls79Sa4eAGAoERw4Tnung7XbMl3jbJ4B/dmmtsMrdki0KikwDYA==",
+      "dependencies": {
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@firebase/database": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@firebase/database/-/database-1.0.5.tgz",
+      "integrity": "sha512-cAfwBqMQuW6HbhwI3Cb/gDqZg7aR0OmaJ85WUxlnoYW2Tm4eR0hFl5FEijI3/gYPUiUcUPQvTkGV222VkT7KPw==",
+      "dependencies": {
+        "@firebase/app-check-interop-types": "0.3.2",
+        "@firebase/auth-interop-types": "0.2.3",
+        "@firebase/component": "0.6.7",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.6",
+        "faye-websocket": "0.11.4",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@firebase/database-compat": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@firebase/database-compat/-/database-compat-1.0.5.tgz",
+      "integrity": "sha512-NDSMaDjQ+TZEMDMmzJwlTL05kh1+0Y84C+kVMaOmNOzRGRM7VHi29I6YUhCetXH+/b1Wh4ZZRyp1CuWkd8s6hg==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/database": "1.0.5",
+        "@firebase/database-types": "1.0.3",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@firebase/database-types": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@firebase/database-types/-/database-types-1.0.3.tgz",
+      "integrity": "sha512-39V/Riv2R3O/aUjYKh0xypj7NTNXNAK1bcgY5Kx+hdQPRS/aPTS8/5c0CGFYKgVuFbYlnlnhrCTYsh2uNhGwzA==",
+      "dependencies": {
+        "@firebase/app-types": "0.9.2",
+        "@firebase/util": "1.9.6"
+      }
+    },
+    "node_modules/@firebase/firestore": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-4.6.2.tgz",
+      "integrity": "sha512-sxHtvmfH/1689aPQRxOXBWDumaPqg5AjQVkfwpt+Z3rnaa0aLJlrt2PZs9Xh04qbmWiwtkDgztFmoR/aQdMQJQ==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.6",
+        "@firebase/webchannel-wrapper": "1.0.0",
+        "@grpc/grpc-js": "~1.9.0",
+        "@grpc/proto-loader": "^0.7.8",
+        "tslib": "^2.1.0",
+        "undici": "5.28.4"
+      },
+      "engines": {
+        "node": ">=10.10.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/firestore-compat": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore-compat/-/firestore-compat-0.3.31.tgz",
+      "integrity": "sha512-YbR9GGLfYY9A5Qh2SyyNz7EsNeC5SRjzgRxtMtqz2s2es+p+5sDfFUUNKqpgVaIcnoPGOtvCLhNNWG/TBmlQjw==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/firestore": "4.6.2",
+        "@firebase/firestore-types": "3.0.2",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/firestore-types": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore-types/-/firestore-types-3.0.2.tgz",
+      "integrity": "sha512-wp1A+t5rI2Qc/2q7r2ZpjUXkRVPtGMd6zCLsiWurjsQpqPgFin3AhNibKcIzoF2rnToNa/XYtyWXuifjOOwDgg==",
+      "peerDependencies": {
+        "@firebase/app-types": "0.x",
+        "@firebase/util": "1.x"
+      }
+    },
+    "node_modules/@firebase/functions": {
+      "version": "0.11.5",
+      "resolved": "https://registry.npmjs.org/@firebase/functions/-/functions-0.11.5.tgz",
+      "integrity": "sha512-qrHJ+l62mZiU5UZiVi84t/iLXZlhRuSvBQsa2qvNLgPsEWR7wdpWhRmVdB7AU8ndkSHJjGlMICqrVnz47sgU7Q==",
+      "dependencies": {
+        "@firebase/app-check-interop-types": "0.3.2",
+        "@firebase/auth-interop-types": "0.2.3",
+        "@firebase/component": "0.6.7",
+        "@firebase/messaging-interop-types": "0.2.2",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0",
+        "undici": "5.28.4"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/functions-compat": {
+      "version": "0.3.11",
+      "resolved": "https://registry.npmjs.org/@firebase/functions-compat/-/functions-compat-0.3.11.tgz",
+      "integrity": "sha512-Qn+ts/M6Lj2/6i1cp5V5TRR+Hi9kyXyHbo+w9GguINJ87zxrCe6ulx3TI5AGQkoQa8YFHUhT3DMGmLFiJjWTSQ==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/functions": "0.11.5",
+        "@firebase/functions-types": "0.6.2",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/functions-types": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/@firebase/functions-types/-/functions-types-0.6.2.tgz",
+      "integrity": "sha512-0KiJ9lZ28nS2iJJvimpY4nNccV21rkQyor5Iheu/nq8aKXJqtJdeSlZDspjPSBBiHRzo7/GMUttegnsEITqR+w=="
+    },
+    "node_modules/@firebase/installations": {
+      "version": "0.6.7",
+      "resolved": "https://registry.npmjs.org/@firebase/installations/-/installations-0.6.7.tgz",
+      "integrity": "sha512-i6iGoXRu5mX4rTsiMSSKrgh9pSEzD4hwBEzRh5kEhOTr8xN/wvQcCPZDSMVYKwM2XyCPBLVq0JzjyerwL0Rihg==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/util": "1.9.6",
+        "idb": "7.1.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/installations-compat": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/@firebase/installations-compat/-/installations-compat-0.2.7.tgz",
+      "integrity": "sha512-RPcbD+3nqHbnhVjIOpWK2H5qzZ8pAAAScceiWph0VNTqpKyPQ5tDcp4V5fS0ELpfgsHYvroMLDKfeHxpfvm8cw==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/installations": "0.6.7",
+        "@firebase/installations-types": "0.5.2",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/installations-types": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@firebase/installations-types/-/installations-types-0.5.2.tgz",
+      "integrity": "sha512-que84TqGRZJpJKHBlF2pkvc1YcXrtEDOVGiDjovP/a3s6W4nlbohGXEsBJo0JCeeg/UG9A+DEZVDUV9GpklUzA==",
+      "peerDependencies": {
+        "@firebase/app-types": "0.x"
+      }
+    },
+    "node_modules/@firebase/logger": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@firebase/logger/-/logger-0.4.2.tgz",
+      "integrity": "sha512-Q1VuA5M1Gjqrwom6I6NUU4lQXdo9IAQieXlujeHZWvRt1b7qQ0KwBaNAjgxG27jgF9/mUwsNmO8ptBCGVYhB0A==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@firebase/messaging": {
+      "version": "0.12.9",
+      "resolved": "https://registry.npmjs.org/@firebase/messaging/-/messaging-0.12.9.tgz",
+      "integrity": "sha512-IH+JJmzbFGZXV3+TDyKdqqKPVfKRqBBg2BfYYOy7cm7J+SwV+uJMe8EnDKYeQLEQhtpwciPfJ3qQXJs2lbxDTw==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/installations": "0.6.7",
+        "@firebase/messaging-interop-types": "0.2.2",
+        "@firebase/util": "1.9.6",
+        "idb": "7.1.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/messaging-compat": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/@firebase/messaging-compat/-/messaging-compat-0.2.9.tgz",
+      "integrity": "sha512-5jN6wyhwPgBH02zOtmmoOeyfsmoD7ty48D1m0vVPsFg55RqN2Z3Q9gkZ5GmPklFPjTPLcxB1ObcHOZvThTkm7g==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/messaging": "0.12.9",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/messaging-interop-types": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@firebase/messaging-interop-types/-/messaging-interop-types-0.2.2.tgz",
+      "integrity": "sha512-l68HXbuD2PPzDUOFb3aG+nZj5KA3INcPwlocwLZOzPp9rFM9yeuI9YLl6DQfguTX5eAGxO0doTR+rDLDvQb5tA=="
+    },
+    "node_modules/@firebase/performance": {
+      "version": "0.6.7",
+      "resolved": "https://registry.npmjs.org/@firebase/performance/-/performance-0.6.7.tgz",
+      "integrity": "sha512-d+Q4ltjdJZqjzcdms5i0UC9KLYX7vKGcygZ+7zHA/Xk+bAbMD2CPU0nWTnlNFWifZWIcXZ/2mAMvaGMW3lypUA==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/installations": "0.6.7",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/performance-compat": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/@firebase/performance-compat/-/performance-compat-0.2.7.tgz",
+      "integrity": "sha512-cb8ge/5iTstxfIGW+iiY+7l3FtN8gobNh9JSQNZgLC9xmcfBYWEs8IeEWMI6S8T+At0oHc3lv+b2kpRMUWr8zQ==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/logger": "0.4.2",
+        "@firebase/performance": "0.6.7",
+        "@firebase/performance-types": "0.2.2",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/performance-types": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@firebase/performance-types/-/performance-types-0.2.2.tgz",
+      "integrity": "sha512-gVq0/lAClVH5STrIdKnHnCo2UcPLjJlDUoEB/tB4KM+hAeHUxWKnpT0nemUPvxZ5nbdY/pybeyMe8Cs29gEcHA=="
+    },
+    "node_modules/@firebase/remote-config": {
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/@firebase/remote-config/-/remote-config-0.4.7.tgz",
+      "integrity": "sha512-5oPNrPFLsbsjpq0lUEIXoDF2eJK7vAbyXe/DEuZQxnwJlfR7aQbtUlEkRgQWcicXpyDmAmDLo7q7lDbCYa6CpA==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/installations": "0.6.7",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/remote-config-compat": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/@firebase/remote-config-compat/-/remote-config-compat-0.2.7.tgz",
+      "integrity": "sha512-Fq0oneQ4SluLnfr5/HfzRS1TZf1ANj1rWbCCW3+oC98An3nE+sCdp+FSuHsEVNwgMg4Tkwx9Oom2lkKeU+Vn+w==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/logger": "0.4.2",
+        "@firebase/remote-config": "0.4.7",
+        "@firebase/remote-config-types": "0.3.2",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/remote-config-types": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@firebase/remote-config-types/-/remote-config-types-0.3.2.tgz",
+      "integrity": "sha512-0BC4+Ud7y2aPTyhXJTMTFfrGGLqdYXrUB9sJVAB8NiqJswDTc4/2qrE/yfUbnQJhbSi6ZaTTBKyG3n1nplssaA=="
+    },
+    "node_modules/@firebase/storage": {
+      "version": "0.12.5",
+      "resolved": "https://registry.npmjs.org/@firebase/storage/-/storage-0.12.5.tgz",
+      "integrity": "sha512-nGWBOGFNr10j0LA4NJ3/Yh3us/lb0Q1xSIKZ38N6FcS+vY54nqJ7k3zE3PENregHC8+8txRow++A568G3v8hOA==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0",
+        "undici": "5.28.4"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/storage-compat": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/@firebase/storage-compat/-/storage-compat-0.3.8.tgz",
+      "integrity": "sha512-qDfY9kMb6Ch2hZb40sBjDQ8YPxbjGOxuT+gU1Z0iIVSSpSX0f4YpGJCypUXiA0T11n6InCXB+T/Dknh2yxVTkg==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/storage": "0.12.5",
+        "@firebase/storage-types": "0.8.2",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/storage-types": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/@firebase/storage-types/-/storage-types-0.8.2.tgz",
+      "integrity": "sha512-0vWu99rdey0g53lA7IShoA2Lol1jfnPovzLDUBuon65K7uKG9G+L5uO05brD9pMw+l4HRFw23ah3GwTGpEav6g==",
+      "peerDependencies": {
+        "@firebase/app-types": "0.x",
+        "@firebase/util": "1.x"
+      }
+    },
+    "node_modules/@firebase/util": {
+      "version": "1.9.6",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.6.tgz",
+      "integrity": "sha512-IBr1MZbp4d5MjBCXL3TW1dK/PDXX4yOGbiwRNh1oAbE/+ci5Uuvy9KIrsFYY80as1I0iOaD5oOMA9Q8j4TJWcw==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@firebase/vertexai-preview": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/@firebase/vertexai-preview/-/vertexai-preview-0.0.1.tgz",
+      "integrity": "sha512-N8m9Xr0YZKy0t9SpQDuHrL2ppEAT/iqf88Y/O00QNA/Td/BMCL8sJ0c+Savh1TVrqh0rNp9n6HkZ39e/O5mwhA==",
+      "dependencies": {
+        "@firebase/app-check-interop-types": "0.3.2",
+        "@firebase/component": "0.6.7",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x",
+        "@firebase/app-types": "0.x"
+      }
+    },
+    "node_modules/@firebase/webchannel-wrapper": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-1.0.0.tgz",
+      "integrity": "sha512-zuWxyfXNbsKbm96HhXzainONPFqRcoZblQ++e9cAIGUuHfl2cFSBzW01jtesqWG/lqaUyX3H8O1y9oWboGNQBA=="
+    },
+    "node_modules/@grpc/grpc-js": {
+      "version": "1.9.14",
+      "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.9.14.tgz",
+      "integrity": "sha512-nOpuzZ2G3IuMFN+UPPpKrC6NsLmWsTqSsm66IRfnBt1D4pwTqE27lmbpcPM+l2Ua4gE7PfjRHI6uedAy7hoXUw==",
+      "dependencies": {
+        "@grpc/proto-loader": "^0.7.8",
+        "@types/node": ">=12.12.47"
+      },
+      "engines": {
+        "node": "^8.13.0 || >=10.10.0"
+      }
+    },
+    "node_modules/@grpc/proto-loader": {
+      "version": "0.7.13",
+      "resolved": "https://registry.npmjs.org/@grpc/proto-loader/-/proto-loader-0.7.13.tgz",
+      "integrity": "sha512-AiXO/bfe9bmxBjxxtYxFAXGZvMaN5s8kO+jBHAJCON8rJoB5YS/D6X7ZNc6XQkuHNmyl4CYaMI1fJ/Gn27RGGw==",
+      "dependencies": {
+        "lodash.camelcase": "^4.3.0",
+        "long": "^5.0.0",
+        "protobufjs": "^7.2.5",
+        "yargs": "^17.7.2"
+      },
+      "bin": {
+        "proto-loader-gen-types": "build/bin/proto-loader-gen-types.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -422,6 +964,60 @@
         "node": ">=14"
       }
     },
+    "node_modules/@protobufjs/aspromise": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
+      "integrity": "sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ=="
+    },
+    "node_modules/@protobufjs/base64": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz",
+      "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg=="
+    },
+    "node_modules/@protobufjs/codegen": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.4.tgz",
+      "integrity": "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg=="
+    },
+    "node_modules/@protobufjs/eventemitter": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz",
+      "integrity": "sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q=="
+    },
+    "node_modules/@protobufjs/fetch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.0.tgz",
+      "integrity": "sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==",
+      "dependencies": {
+        "@protobufjs/aspromise": "^1.1.1",
+        "@protobufjs/inquire": "^1.1.0"
+      }
+    },
+    "node_modules/@protobufjs/float": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz",
+      "integrity": "sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ=="
+    },
+    "node_modules/@protobufjs/inquire": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.0.tgz",
+      "integrity": "sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q=="
+    },
+    "node_modules/@protobufjs/path": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz",
+      "integrity": "sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA=="
+    },
+    "node_modules/@protobufjs/pool": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz",
+      "integrity": "sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw=="
+    },
+    "node_modules/@protobufjs/utf8": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
+      "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.10.2.tgz",
@@ -452,7 +1048,6 @@
       "version": "20.12.12",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.12.tgz",
       "integrity": "sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==",
-      "dev": true,
       "dependencies": {
         "undici-types": "~5.26.4"
       }
@@ -656,7 +1251,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -665,7 +1259,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -1087,11 +1680,57 @@
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/cliui/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/cliui/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui/node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -1102,8 +1741,7 @@
     "node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
     "node_modules/commander": {
       "version": "4.1.1",
@@ -1494,6 +2132,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/escalade": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
+      "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -1973,6 +2619,17 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/faye-websocket": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
+      "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
+      "dependencies": {
+        "websocket-driver": ">=0.5.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -2013,6 +2670,61 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/firebase": {
+      "version": "10.12.0",
+      "resolved": "https://registry.npmjs.org/firebase/-/firebase-10.12.0.tgz",
+      "integrity": "sha512-31UZyAK0+VZmF9jR/+6g31uyqWjBKsG+TV3ndRJEkw6+Skctb5ZX0+Ezq/pbC68iIRJ5TujOjyl632vTOqyS1w==",
+      "dependencies": {
+        "@firebase/analytics": "0.10.3",
+        "@firebase/analytics-compat": "0.2.9",
+        "@firebase/app": "0.10.3",
+        "@firebase/app-check": "0.8.4",
+        "@firebase/app-check-compat": "0.3.11",
+        "@firebase/app-compat": "0.2.33",
+        "@firebase/app-types": "0.9.2",
+        "@firebase/auth": "1.7.3",
+        "@firebase/auth-compat": "0.5.8",
+        "@firebase/database": "1.0.5",
+        "@firebase/database-compat": "1.0.5",
+        "@firebase/firestore": "4.6.2",
+        "@firebase/firestore-compat": "0.3.31",
+        "@firebase/functions": "0.11.5",
+        "@firebase/functions-compat": "0.3.11",
+        "@firebase/installations": "0.6.7",
+        "@firebase/installations-compat": "0.2.7",
+        "@firebase/messaging": "0.12.9",
+        "@firebase/messaging-compat": "0.2.9",
+        "@firebase/performance": "0.6.7",
+        "@firebase/performance-compat": "0.2.7",
+        "@firebase/remote-config": "0.4.7",
+        "@firebase/remote-config-compat": "0.2.7",
+        "@firebase/storage": "0.12.5",
+        "@firebase/storage-compat": "0.3.8",
+        "@firebase/util": "1.9.6",
+        "@firebase/vertexai-preview": "0.0.1"
+      }
+    },
+    "node_modules/firebase/node_modules/@firebase/auth": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-1.7.3.tgz",
+      "integrity": "sha512-RiU1PjziOxLuyswtYtLK2qSjHIQJQGCk1h986SUFRbMQfzLXbQg8ZgXwxac1UAfDOzgzqPNCXhBuIlSK2UomoQ==",
+      "dependencies": {
+        "@firebase/component": "0.6.7",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.6",
+        "tslib": "^2.1.0",
+        "undici": "5.28.4"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x",
+        "@react-native-async-storage/async-storage": "^1.18.1"
+      },
+      "peerDependenciesMeta": {
+        "@react-native-async-storage/async-storage": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/flat-cache": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
@@ -2114,6 +2826,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
@@ -2375,6 +3095,16 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/http-parser-js": {
+      "version": "0.5.8",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.8.tgz",
+      "integrity": "sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q=="
+    },
+    "node_modules/idb": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
+      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ=="
+    },
     "node_modules/ignore": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
@@ -2589,7 +3319,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -2990,12 +3719,22 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "node_modules/long": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/long/-/long-5.2.3.tgz",
+      "integrity": "sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q=="
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -3666,6 +4405,29 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/protobufjs": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.3.0.tgz",
+      "integrity": "sha512-YWD03n3shzV9ImZRX3ccbjqLxj7NokGN0V/ESiBV5xWqrommYHYiihuIyavq03pWSGqlyvYUFmfoMKd+1rPA/g==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@protobufjs/aspromise": "^1.1.2",
+        "@protobufjs/base64": "^1.1.2",
+        "@protobufjs/codegen": "^2.0.4",
+        "@protobufjs/eventemitter": "^1.1.0",
+        "@protobufjs/fetch": "^1.1.0",
+        "@protobufjs/float": "^1.0.2",
+        "@protobufjs/inquire": "^1.1.0",
+        "@protobufjs/path": "^1.1.2",
+        "@protobufjs/pool": "^1.1.0",
+        "@protobufjs/utf8": "^1.1.0",
+        "@types/node": ">=13.7.0",
+        "long": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -3790,6 +4552,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -3911,6 +4681,25 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/safe-regex-test": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.3.tgz",
@@ -4200,7 +4989,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -4555,11 +5343,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/undici": {
+      "version": "5.28.4",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-5.28.4.tgz",
+      "integrity": "sha512-72RFADWFqKmUb2hmmvNODKL3p9hcB6Gt2DOQMis1SEBaV6a4MH8soBvzg+95CYhCKPFedut2JY9bMfrDl9D23g==",
+      "dependencies": {
+        "@fastify/busboy": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.0"
+      }
+    },
     "node_modules/undici-types": {
       "version": "5.26.5",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
-      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "dev": true
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
     },
     "node_modules/uri-js": {
       "version": "4.4.1",
@@ -4576,6 +5374,27 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "node_modules/websocket-driver": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
+      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
+      "dependencies": {
+        "http-parser-js": ">=0.5.1",
+        "safe-buffer": ">=5.1.0",
+        "websocket-extensions": ">=0.1.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/websocket-extensions": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -4779,6 +5598,14 @@
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "dev": true
     },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/yaml": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.2.tgz",
@@ -4791,6 +5618,49 @@
         "node": ">= 14"
       }
     },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/yargs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/package.json b/package.json
index 222dfa7..65a8b3a 100644
--- a/package.json
+++ b/package.json
@@ -3,24 +3,26 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
+    "dev:firebase": "firebase emulators:start",
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
+    "firebase": "^10.12.0",
+    "next": "14.2.3",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.2.3"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.3",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.3"
+    "typescript": "^5"
   }
 }
diff --git a/storage.rules b/storage.rules
new file mode 100644
index 0000000..f08744f
--- /dev/null
+++ b/storage.rules
@@ -0,0 +1,12 @@
+rules_version = '2';
+
+// Craft rules based on data in your Firestore database
+// allow write: if firestore.get(
+//    /databases/(default)/documents/users/$(request.auth.uid)).data.isAdmin;
+service firebase.storage {
+  match /b/{bucket}/o {
+    match /{allPaths=**} {
+      allow read, write: if false;
+    }
+  }
+}

From 020232f042c1846d8239fede43a9cfd86707f6bb Mon Sep 17 00:00:00 2001
From: u-sho <26079835+u-sho@users.noreply.github.com>
Date: Fri, 17 May 2024 21:57:26 +0900
Subject: [PATCH 04/15] =?UTF-8?q?=E8=94=B5=E6=9B=B8CRUD=E3=81=AE=E5=AE=9F?=
 =?UTF-8?q?=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                            |  10 +--
 README.md                       |  24 ++----
 app/book/[bookId]/edit/page.tsx |  58 +++++++++++++
 app/book/[bookId]/page.tsx      |  30 +++++++
 app/book/new/page.tsx           |  45 ++++++++++
 app/firebase.ts                 |  74 ++++++++++++++--
 app/globals.css                 |  47 ++++++++---
 app/layout.tsx                  |   6 +-
 app/page.tsx                    | 144 +++++++++-----------------------
 package.json                    |   1 -
 tailwind.config.ts              |  10 ---
 11 files changed, 290 insertions(+), 159 deletions(-)
 create mode 100644 app/book/[bookId]/edit/page.tsx
 create mode 100644 app/book/[bookId]/page.tsx
 create mode 100644 app/book/new/page.tsx

diff --git a/.env b/.env
index 7367d54..8e6fca5 100644
--- a/.env
+++ b/.env
@@ -1,5 +1,5 @@
-FIREBASE_API_KEY=
-FIREBASE_PROJECT_ID=
-FIREBASE_AUTH_DOMAIN=
-FIREBASE_STORAGE_BUCKET=
-FIREBASE_APP_ID=
\ No newline at end of file
+NEXT_PUBLIC_FIREBASE_API_KEY=
+NEXT_PUBLIC_FIREBASE_PROJECT_ID=
+NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
+NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
+NEXT_PUBLIC_FIREBASE_APP_ID=
\ No newline at end of file
diff --git a/README.md b/README.md
index 5476e62..eaaf2fe 100644
--- a/README.md
+++ b/README.md
@@ -34,26 +34,14 @@ cp .env .env.local
 ```
 
 ```dotenv:.env.local
-FIREBASE_API_KEY=YourFirebaseAPIkey
-FIREBASE_PROJECT_ID=your-firebase-project-id
-FIREBASE_AUTH_DOMAIN=your-firebase-project-id.firebaseapp.com
-FIREBASE_STORAGE_BUCKET=your-firebase-project-id.appspot.com
-FIREBASE_APP_ID=your:firebase:app:id
+NEXT_PUBLIC_FIREBASE_API_KEY=YourFirebaseAPIkey
+NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-firebase-project-id
+NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-firebase-project-id.firebaseapp.com
+NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-firebase-project-id.appspot.com
+NEXT_PUBLIC_FIREBASE_APP_ID=your:firebase:app:id
 ```
 
-次に、firebaseのエミュレータを起動します．
-
-```bash
-npm run dev:firebase
-# or
-yarn dev:firebase
-# or
-pnpm dev:firebase
-# or
-bun dev:firebase
-```
-
-Third, run the development server:
+Second, run the development server:
 
 ```bash
 npm run dev
diff --git a/app/book/[bookId]/edit/page.tsx b/app/book/[bookId]/edit/page.tsx
new file mode 100644
index 0000000..56aa74a
--- /dev/null
+++ b/app/book/[bookId]/edit/page.tsx
@@ -0,0 +1,58 @@
+'use client';
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState, useEffect, type FormEvent } from "react";
+import { getBook, updateBook, type Book } from "../../../firebase";
+import { Router } from "next/router";
+
+export default function BookEdit({params}: {params: {bookId: string}}) {
+  const router = useRouter();
+  const bookId = params.bookId;
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+  const [book, setBook] = useState<Book>();
+
+  useEffect(()=> {
+    getBook(bookId).then(book => {
+      if (book) setBook(book as Book);
+    });
+  }, [bookId]);
+  
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setIsLoading(true);
+    setError(null);
+  
+    const formData = new FormData(event.currentTarget);
+    const isbn = formData.get('isbn') || book?.isbn;
+    const title = formData.get('title') || book?.title;
+    const memo = formData.get('memo') || book?.memo;
+    if (!title) {
+        setError('タイトルは必須です');
+        console.error(title);
+        return;
+    }
+    if (typeof title !== 'string' || typeof isbn !== 'string' || typeof memo !== 'string') {
+        setError('invalid form');
+        console.error(title,isbn,memo);
+        return;
+    }
+    await updateBook({bookId, isbn, title, memo});
+    setIsLoading(false);
+    router.push(`/book/${bookId}`);
+  }
+
+  return (
+    <main>
+      <h1>本の編集</h1>
+      {error && <div>{error}</div>}
+      <form onSubmit={handleSubmit}>
+        <label>ISBN: <input type="text" name="isbn" placeholder={book?.isbn} /></label>
+        <label>タイトル：<input type="text" name="title" placeholder={book?.title} /></label>
+        <label>メモ：<textarea name="memo" placeholder={book?.memo} /></label>
+        <button type="submit" disabled={isLoading}>{isLoading ? '保存中...' : '変更を保存'}</button>
+      </form>
+      <p><Link href="/">一覧に戻る</Link></p>
+    </main>
+  );
+}
diff --git a/app/book/[bookId]/page.tsx b/app/book/[bookId]/page.tsx
new file mode 100644
index 0000000..bffa6e3
--- /dev/null
+++ b/app/book/[bookId]/page.tsx
@@ -0,0 +1,30 @@
+'use client';
+import Link from "next/link";
+import { useState, useEffect } from "react";
+import { getBook, type Book } from "../../firebase";
+
+export default function BookDetail({params}: {params: {bookId: string}}) {
+  const bookId = params.bookId;
+  const [book, setBook] = useState<Book>();
+
+  useEffect(()=> {
+    getBook(bookId).then(book => {
+      if (book) setBook(book as Book);
+    });
+  }, [bookId]);
+
+  return (
+    <main>
+      <h1>{book?.title ?? ''}</h1>
+      <p>
+        {book?.isbn ? `ISBN: ${book.isbn}` : ''}
+        <br />
+        {book?.memo ? `メモ: ${book.memo}` : ''}
+      </p>
+      <p>
+        <Link href={`/book/${bookId}/edit`}>編集する</Link>
+      </p>
+      <p><Link href="/">一覧に戻る</Link></p>
+    </main>
+  );
+}
diff --git a/app/book/new/page.tsx b/app/book/new/page.tsx
new file mode 100644
index 0000000..84d89ae
--- /dev/null
+++ b/app/book/new/page.tsx
@@ -0,0 +1,45 @@
+'use client';
+import Link from "next/link";
+import { useState, type FormEvent } from "react";
+import { addBook, type Book } from "../../firebase";
+
+export default function Home() {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+  
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setIsLoading(true);
+    setError(null);
+  
+    const formData = new FormData(event.currentTarget);
+    const isbn = formData.get('isbn');
+    const title = formData.get('title');
+    const memo = formData.get('memo');
+    if (!title) {
+        setError('タイトルは必須です');
+        return;
+    }
+    if (typeof title !== 'string' || typeof isbn !== 'string' || typeof memo !== 'string') {
+        setError('invalid form');
+        console.error(title,isbn,memo);
+        return;
+    }
+    const bookId = await addBook({isbn, title, memo});
+    setIsLoading(false);
+  }
+
+  return (
+    <main>
+      <h1>本の登録</h1>
+      {error && <div>{error}</div>}
+      <form onSubmit={handleSubmit}>
+        <label>ISBN<input type="text" name="isbn" placeholder="ISBN978-4-488-74701-5" /></label>
+        <label>タイトル<input type="text" name="title" /></label>
+        <label>メモ<textarea name="memo" /></label>
+        <button type="submit" disabled={isLoading}>{isLoading ? '登録中...' : '登録'}</button>
+      </form>
+      <p><Link href="/">一覧に戻る</Link></p>
+    </main>
+  );
+}
diff --git a/app/firebase.ts b/app/firebase.ts
index bcbceeb..38dd181 100644
--- a/app/firebase.ts
+++ b/app/firebase.ts
@@ -1,15 +1,77 @@
 // Import the functions you need from the SDKs you need
 import { initializeApp } from "firebase/app";
+import { getFirestore, collection, doc, addDoc, getDoc, getDocs, updateDoc, deleteDoc } from "firebase/firestore";
 
 const firebaseConfig = {
-  apiKey: process.env.FIREBASE_API_KEY,
-  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
-  projectId: process.env.FIREBASE_PROJECT_ID,
-  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
-  appId: process.env.FIREBASE_APP_ID
+  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
+  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
+  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
+  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID
 };
 
 // Initialize Firebase
 const firebaseApp = initializeApp(firebaseConfig);
 
-export { firebaseApp };
\ No newline at end of file
+// Initialize Cloud Firestore and get a reference to the service
+const firestore = getFirestore(firebaseApp);
+const booksCollection = collection(firestore, '/books');
+
+export type Book = {
+  isbn?: string;
+  title: string;
+  memo?: string;
+}
+
+export type BookWithID = Book & {
+  bookId: string;
+}
+
+const addBook = async (book: Book) => {
+  try {
+    const docRef = await addDoc(booksCollection, book);
+    return docRef.id;
+  } catch (e) {
+    console.error('! Error adding document: ', e);
+  }
+}
+
+const getBook = async (bookId: string) => {
+  try {
+    const querySnapshot = await getDoc(doc(firestore, 'books', bookId));
+    if (querySnapshot.exists()){
+      return querySnapshot.data();
+    } else {
+      console.error('! Error no such document!');
+    }
+  } catch (e) {
+    console.error('! Error getting document: ', e);
+  }
+}
+
+const getAllBooks = async () => {
+  try {
+    const querySnapshot = await getDocs(booksCollection);
+    return querySnapshot;
+  } catch (e) {
+    console.error('! Error getting documents: ', e);
+  }
+}
+
+const updateBook = async ({bookId, ...book}: BookWithID) => {
+  try {
+    await updateDoc(doc(firestore, 'books', bookId), book);
+  } catch (e) {
+    console.error('! Error updating document: ', e);
+  }
+}
+
+const removeBook = async (bookId: string) => {
+  try {
+    await deleteDoc(doc(firestore, 'books', bookId));
+  } catch (e) {
+    console.error('! Error deleting document: ', e);
+  }
+}
+
+export { firebaseApp, firestore, addBook, getBook, getAllBooks, updateBook, removeBook };
\ No newline at end of file
diff --git a/app/globals.css b/app/globals.css
index 875c01e..96b4710 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -6,28 +6,51 @@
   --foreground-rgb: 0, 0, 0;
   --background-start-rgb: 214, 219, 220;
   --background-end-rgb: 255, 255, 255;
+  --accent-rgb: 214, 141, 152;
+  --button-image: linear-gradient(135deg, #fecfef 80%, #ff9ac1 100%);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
+    --background-rgb: 0, 0, 0;
+    --button-image: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
   }
 }
 
 body {
   color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
+  background: rgb(var(--background-rgb));
+
+  h1 {
+    font-size: 2rem;
+    font-weight: bold;
+  }
+
+  a {
+    display: inline-block;
+    padding: 4px;
+    margin: 4px;
+    background-image: var(--button-image);
+    &::after {
+      content: '🔗';
+    }
+  }
+
+  button:not([disabled]) {
+    cursor: pointer;
+  }
 
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
+  form {
+    display: grid;
+    grid-row: 1;
+    label, button {
+      margin: 0.5rem 0;
+    }
+    button {
+      background-image: var(--button-image);
+      width: fit-content;
+      padding: 4px;
+    }
   }
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index 3314e47..c5e7f45 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -5,8 +5,8 @@ import "./globals.css";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Firebase Manage Book App",
+  description: "FirebaseとNext.jsで作られた蔵書管理アプリ",
 };
 
 export default function RootLayout({
@@ -15,7 +15,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="ja">
       <body className={inter.className}>{children}</body>
     </html>
   );
diff --git a/app/page.tsx b/app/page.tsx
index 5705d4e..76f5537 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,113 +1,49 @@
-import Image from "next/image";
+'use client';
+import Link from "next/link";
 
-export default function Home() {
-  return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          Get started by editing&nbsp;
-          <code className="font-mono font-bold">app/page.tsx</code>
-        </p>
-        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:size-auto lg:bg-none">
-          <a
-            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{" "}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className="dark:invert"
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
+import { Book, BookWithID, getAllBooks, removeBook } from "./firebase";
+import { useEffect, useState } from "react";
 
-      <div className="relative z-[-1] flex place-items-center before:absolute before:h-[300px] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 sm:before:w-[480px] sm:after:w-[240px] before:lg:h-[360px]">
-        <Image
-          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
+export default function Home() {
+  const [bookList, setBookList] = useState<BookWithID[]>([]);
 
-      <div className="mb-32 grid text-center lg:mb-0 lg:w-full lg:max-w-5xl lg:grid-cols-4 lg:text-left">
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className="mb-3 text-2xl font-semibold">
-            Docs{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className="m-0 max-w-[30ch] text-sm opacity-50">
-            Find in-depth information about Next.js features and API.
-          </p>
-        </a>
+  const getBooks = async ()=> {
+    const booksSnapshot = await getAllBooks();
+    const bookList: BookWithID[] = [];
+    booksSnapshot?.forEach(bookDocument => {
+      const book = bookDocument.data() as Book;
+      const bookWithID: BookWithID = {
+        bookId: bookDocument.id,
+        ...book,
+      };
+      bookList.push(bookWithID);
+    });
+    setBookList(bookList);
+  };
 
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className="mb-3 text-2xl font-semibold">
-            Learn{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className="m-0 max-w-[30ch] text-sm opacity-50">
-            Learn about Next.js in an interactive course with&nbsp;quizzes!
-          </p>
-        </a>
+  useEffect(() => {getBooks()}, []);
 
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className="mb-3 text-2xl font-semibold">
-            Templates{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className="m-0 max-w-[30ch] text-sm opacity-50">
-            Explore starter templates for Next.js.
-          </p>
-        </a>
+  const handleDelete = async (book: BookWithID) => {
+    if (window.confirm(`『${book.title}』を本当に削除しますか？`)) {
+      await removeBook(book.bookId);
+      await getBooks();
+    }
+    return;
+  }
 
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className="mb-3 text-2xl font-semibold">
-            Deploy{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className="m-0 max-w-[30ch] text-balance text-sm opacity-50">
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
+  return (
+    <main>
+      <h1>蔵書一覧</h1>
+      <ul>
+        {bookList.map(book => (
+          <li key={book.bookId}>
+            <span>{book.title ? book.title : book.isbn}</span>
+            <Link href={`/book/${book.bookId}`}>詳しくみる</Link>
+            <button type="button" onClick={() => handleDelete(book)}>🗑️</button>
+          </li>
+        ))}
+      </ul>
+      <p><Link href="/book/new">登録する</Link></p>
     </main>
   );
 }
diff --git a/package.json b/package.json
index 65a8b3a..5f9c7db 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev:firebase": "firebase emulators:start",
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 7e4bd91..5f28497 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -6,15 +6,5 @@ const config: Config = {
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [],
 };
 export default config;

From ba768583406236049a4ef19a654f666527eeb306 Mon Sep 17 00:00:00 2001
From: u-sho <26079835+u-sho@users.noreply.github.com>
Date: Mon, 20 May 2024 18:45:52 +0900
Subject: [PATCH 05/15] =?UTF-8?q?=E3=82=B9=E3=82=BF=E3=82=A4=E3=83=AA?=
 =?UTF-8?q?=E3=83=B3=E3=82=B0=EF=BC=86=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC?=
 =?UTF-8?q?=E3=83=8D=E3=83=B3=E3=83=88=E3=81=AB=E5=88=86=E3=81=91=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/settings.json           |  11 ++++
 app/book/[bookId]/edit/page.tsx |  62 +++-----------------
 app/book/[bookId]/page.tsx      |  31 ++++++----
 app/book/com/page.tsx           |   6 ++
 app/book/new/page.tsx           |  51 ++++------------
 app/firebase.ts                 |  14 ++---
 app/globals.css                 |  87 ++++++++++++++++++---------
 app/layout.tsx                  |  18 ++++--
 app/page.tsx                    |  31 +++++-----
 components/BackHomeButton.tsx   |  12 ++++
 components/BookForm.tsx         | 100 ++++++++++++++++++++++++++++++++
 11 files changed, 264 insertions(+), 159 deletions(-)
 create mode 100644 app/book/com/page.tsx
 create mode 100644 components/BackHomeButton.tsx
 create mode 100644 components/BookForm.tsx

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 5e43f74..f988dff 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,8 +1,19 @@
 {
+  // ESLint
   "editor.defaultFormatter": "dbaeumer.vscode-eslint",
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.fixAll": "explicit"
   },
+
+  // TailwindCSS
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
+  "editor.quickSuggestions": {
+    "strings": "on"
+  },
+
+  // TypeScript
   "typescript.tsdk": "node_modules/typescript/lib"
 }
\ No newline at end of file
diff --git a/app/book/[bookId]/edit/page.tsx b/app/book/[bookId]/edit/page.tsx
index 56aa74a..9db87d7 100644
--- a/app/book/[bookId]/edit/page.tsx
+++ b/app/book/[bookId]/edit/page.tsx
@@ -1,58 +1,14 @@
-'use client';
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useState, useEffect, type FormEvent } from "react";
-import { getBook, updateBook, type Book } from "../../../firebase";
-import { Router } from "next/router";
+import BookForm from "@/components/BookForm";
+import BackHomeButton from "@/components/BackHomeButton";
 
 export default function BookEdit({params}: {params: {bookId: string}}) {
-  const router = useRouter();
-  const bookId = params.bookId;
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [error, setError] = useState<string | null>(null);
-  const [book, setBook] = useState<Book>();
-
-  useEffect(()=> {
-    getBook(bookId).then(book => {
-      if (book) setBook(book as Book);
-    });
-  }, [bookId]);
-  
-  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    setIsLoading(true);
-    setError(null);
-  
-    const formData = new FormData(event.currentTarget);
-    const isbn = formData.get('isbn') || book?.isbn;
-    const title = formData.get('title') || book?.title;
-    const memo = formData.get('memo') || book?.memo;
-    if (!title) {
-        setError('タイトルは必須です');
-        console.error(title);
-        return;
-    }
-    if (typeof title !== 'string' || typeof isbn !== 'string' || typeof memo !== 'string') {
-        setError('invalid form');
-        console.error(title,isbn,memo);
-        return;
-    }
-    await updateBook({bookId, isbn, title, memo});
-    setIsLoading(false);
-    router.push(`/book/${bookId}`);
-  }
-
   return (
-    <main>
-      <h1>本の編集</h1>
-      {error && <div>{error}</div>}
-      <form onSubmit={handleSubmit}>
-        <label>ISBN: <input type="text" name="isbn" placeholder={book?.isbn} /></label>
-        <label>タイトル：<input type="text" name="title" placeholder={book?.title} /></label>
-        <label>メモ：<textarea name="memo" placeholder={book?.memo} /></label>
-        <button type="submit" disabled={isLoading}>{isLoading ? '保存中...' : '変更を保存'}</button>
-      </form>
-      <p><Link href="/">一覧に戻る</Link></p>
-    </main>
+    <>
+      <h2 className="my-6 sm:my-8 text-3xl sm:text-4xl font-bold">本の編集</h2>
+      <BookForm type="edit" bookId={params.bookId} />
+      <p className="my-6 text-right">
+        <BackHomeButton />
+      </p>
+    </>
   );
 }
diff --git a/app/book/[bookId]/page.tsx b/app/book/[bookId]/page.tsx
index bffa6e3..1262082 100644
--- a/app/book/[bookId]/page.tsx
+++ b/app/book/[bookId]/page.tsx
@@ -1,7 +1,8 @@
 'use client';
 import Link from "next/link";
 import { useState, useEffect } from "react";
-import { getBook, type Book } from "../../firebase";
+import { getBook, type Book } from "@/app/firebase";
+import BackHomeButton from "@/components/BackHomeButton";
 
 export default function BookDetail({params}: {params: {bookId: string}}) {
   const bookId = params.bookId;
@@ -14,17 +15,25 @@ export default function BookDetail({params}: {params: {bookId: string}}) {
   }, [bookId]);
 
   return (
-    <main>
-      <h1>{book?.title ?? ''}</h1>
-      <p>
-        {book?.isbn ? `ISBN: ${book.isbn}` : ''}
-        <br />
-        {book?.memo ? `メモ: ${book.memo}` : ''}
+    <>
+      <h1 className="text-3xl sm:text-4xl my-6 sm:my-8">{book?.title ?? 'タイトル未登録'}</h1>
+      <dl className="grid gap-4 grid-cols-5 mx-auto">
+        <dt className="text-right text-low-contrast font-semibold">ISBN</dt>
+        <dd className="text-justify col-span-4">{book?.isbn}</dd>
+        <dt className="text-right text-low-contrast font-semibold">メモ</dt>
+        <dd className="text-justify col-span-4">{book?.memo}</dd>
+      </dl>
+      <p className="my-6">
+        <Link
+          href={`/book/${bookId}/edit`}
+          className="font-bold text-low-contrast"
+        >
+          編集する
+        </Link>
       </p>
-      <p>
-        <Link href={`/book/${bookId}/edit`}>編集する</Link>
+      <p className="my-6 text-right">
+        <BackHomeButton />
       </p>
-      <p><Link href="/">一覧に戻る</Link></p>
-    </main>
+    </>
   );
 }
diff --git a/app/book/com/page.tsx b/app/book/com/page.tsx
new file mode 100644
index 0000000..2b7ff5c
--- /dev/null
+++ b/app/book/com/page.tsx
@@ -0,0 +1,6 @@
+'use client';
+import BookForm from '@/components/BookForm';
+
+export default function TestPage() {
+    return <BookForm type="new" />;
+}
\ No newline at end of file
diff --git a/app/book/new/page.tsx b/app/book/new/page.tsx
index 84d89ae..7443678 100644
--- a/app/book/new/page.tsx
+++ b/app/book/new/page.tsx
@@ -1,45 +1,14 @@
-'use client';
-import Link from "next/link";
-import { useState, type FormEvent } from "react";
-import { addBook, type Book } from "../../firebase";
-
-export default function Home() {
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [error, setError] = useState<string | null>(null);
-  
-  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    setIsLoading(true);
-    setError(null);
-  
-    const formData = new FormData(event.currentTarget);
-    const isbn = formData.get('isbn');
-    const title = formData.get('title');
-    const memo = formData.get('memo');
-    if (!title) {
-        setError('タイトルは必須です');
-        return;
-    }
-    if (typeof title !== 'string' || typeof isbn !== 'string' || typeof memo !== 'string') {
-        setError('invalid form');
-        console.error(title,isbn,memo);
-        return;
-    }
-    const bookId = await addBook({isbn, title, memo});
-    setIsLoading(false);
-  }
+import BookForm from "@/components/BookForm";
+import BackHomeButton from "@/components/BackHomeButton";
 
+export default function BookNew() {
   return (
-    <main>
-      <h1>本の登録</h1>
-      {error && <div>{error}</div>}
-      <form onSubmit={handleSubmit}>
-        <label>ISBN<input type="text" name="isbn" placeholder="ISBN978-4-488-74701-5" /></label>
-        <label>タイトル<input type="text" name="title" /></label>
-        <label>メモ<textarea name="memo" /></label>
-        <button type="submit" disabled={isLoading}>{isLoading ? '登録中...' : '登録'}</button>
-      </form>
-      <p><Link href="/">一覧に戻る</Link></p>
-    </main>
+    <>
+      <h2 className="my-6 sm:my-8 text-3xl sm:text-4xl font-bold">本の登録</h2>
+      <BookForm type="new" />
+      <p className="my-6 text-right">
+        <BackHomeButton />
+      </p>
+    </>
   );
 }
diff --git a/app/firebase.ts b/app/firebase.ts
index 38dd181..5968d9f 100644
--- a/app/firebase.ts
+++ b/app/firebase.ts
@@ -23,14 +23,10 @@ export type Book = {
   memo?: string;
 }
 
-export type BookWithID = Book & {
-  bookId: string;
-}
-
-const addBook = async (book: Book) => {
+const addBook = async (book: Readonly<Book>) => {
   try {
-    const docRef = await addDoc(booksCollection, book);
-    return docRef.id;
+    const bookId = (await addDoc(booksCollection, book)).id;
+    return bookId;
   } catch (e) {
     console.error('! Error adding document: ', e);
   }
@@ -40,7 +36,7 @@ const getBook = async (bookId: string) => {
   try {
     const querySnapshot = await getDoc(doc(firestore, 'books', bookId));
     if (querySnapshot.exists()){
-      return querySnapshot.data();
+      return querySnapshot.data() as Book;
     } else {
       console.error('! Error no such document!');
     }
@@ -58,7 +54,7 @@ const getAllBooks = async () => {
   }
 }
 
-const updateBook = async ({bookId, ...book}: BookWithID) => {
+const updateBook = async (bookId: string, book: Readonly<Partial<Book>>) => {
   try {
     await updateDoc(doc(firestore, 'books', bookId), book);
   } catch (e) {
diff --git a/app/globals.css b/app/globals.css
index 96b4710..9c237c1 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -4,10 +4,8 @@
 
 :root {
   --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-  --accent-rgb: 214, 141, 152;
-  --button-image: linear-gradient(135deg, #fecfef 80%, #ff9ac1 100%);
+  --background-rgb: 220, 255, 236;
+  --button-image: linear-gradient(135deg, #fecfef 0%, #f698bc 100%);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -18,39 +16,72 @@
   }
 }
 
+.text-low-contrast {
+  @media (prefers-color-scheme: light) {
+    color: rgba(var(--foreground-rgb), 0.68);
+  }
+}
+
+.after\:link-icon {
+  &::after {
+    content: '🔗';
+  }
+}
+
+.after\:link-back-icon {
+  &::after {
+    content: '↩';
+  }
+}
+
+.bg-image-transparent {
+  background: transparent;
+}
+
 body {
   color: rgb(var(--foreground-rgb));
   background: rgb(var(--background-rgb));
 
-  h1 {
-    font-size: 2rem;
-    font-weight: bold;
-  }
-
-  a {
-    display: inline-block;
-    padding: 4px;
-    margin: 4px;
+  header, footer {
     background-image: var(--button-image);
-    &::after {
-      content: '🔗';
+
+    a {
+      background: transparent;
+      &::after {
+        display: none;
+      }
+
+      @media (prefers-color-scheme: light) {
+        color: rgba(var(--foreground-rgb), 0.68);
+      }
     }
   }
 
-  button:not([disabled]) {
+}
+
+h1 {
+  font-size: 2rem;
+  font-weight: bold;
+}
+
+a {
+  display: inline-block;
+  border-radius: 8px;
+  padding: 8px;
+  background-image: var(--button-image);
+}
+
+button {
+  width: fit-content;
+  border-radius: 8px;
+  padding: 8px;
+  font-weight: bold;
+  background-image: var(--button-image);
+
+  &:not([disabled]) {
     cursor: pointer;
   }
-
-  form {
-    display: grid;
-    grid-row: 1;
-    label, button {
-      margin: 0.5rem 0;
-    }
-    button {
-      background-image: var(--button-image);
-      width: fit-content;
-      padding: 4px;
-    }
+  &[disabled] {
+    cursor: default;
   }
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index c5e7f45..20e00cc 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,9 +1,7 @@
+import Link from 'next/link';
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
 import "./globals.css";
 
-const inter = Inter({ subsets: ["latin"] });
-
 export const metadata: Metadata = {
   title: "Firebase Manage Book App",
   description: "FirebaseとNext.jsで作られた蔵書管理アプリ",
@@ -16,7 +14,19 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="ja">
-      <body className={inter.className}>{children}</body>
+      <body className="min-h-dvh sm:text-2xl">
+        <header className="w-full">
+          <h1 className="font-bold text-xl sm:text-3xl">
+            <Link href="/">Firebase Book Manage App</Link>
+          </h1>
+        </header>
+        <main className="max-w-3xl mx-auto px-4 text-center">
+          {children}
+        </main>
+        <footer className="absolute bottom-0 w-full text-right p-2 text-sm">
+          © 2024, RedImpulz inc.
+        </footer>
+      </body>
     </html>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
index 76f5537..c1b8351 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,9 +1,11 @@
 'use client';
 import Link from "next/link";
 
-import { Book, BookWithID, getAllBooks, removeBook } from "./firebase";
+import { getAllBooks, removeBook, type Book } from "./firebase";
 import { useEffect, useState } from "react";
 
+type BookWithID = Book & { bookId: string };
+
 export default function Home() {
   const [bookList, setBookList] = useState<BookWithID[]>([]);
 
@@ -12,11 +14,10 @@ export default function Home() {
     const bookList: BookWithID[] = [];
     booksSnapshot?.forEach(bookDocument => {
       const book = bookDocument.data() as Book;
-      const bookWithID: BookWithID = {
+      bookList.push({
         bookId: bookDocument.id,
         ...book,
-      };
-      bookList.push(bookWithID);
+      });
     });
     setBookList(bookList);
   };
@@ -32,18 +33,22 @@ export default function Home() {
   }
 
   return (
-    <main>
-      <h1>蔵書一覧</h1>
-      <ul>
+    <>
+      <h2 className="my-6 sm:my-8 text-3xl sm:text-4xl font-bold">蔵書一覧</h2>
+      <ul className="grid gap-2 grid-cols-5">
         {bookList.map(book => (
-          <li key={book.bookId}>
-            <span>{book.title ? book.title : book.isbn}</span>
-            <Link href={`/book/${book.bookId}`}>詳しくみる</Link>
-            <button type="button" onClick={() => handleDelete(book)}>🗑️</button>
+          <li key={book.bookId} className="contents">
+            <span className="col-span-3">{book.title ? book.title : book.isbn}</span>
+            <Link href={`/book/${book.bookId}`}>詳細</Link>
+            <button
+              type="button"
+              onClick={() => handleDelete(book)}
+              className="bg-image-transparent"
+            >🗑️</button>
           </li>
         ))}
       </ul>
-      <p><Link href="/book/new">登録する</Link></p>
-    </main>
+      <p className="my-4"><Link href="/book/new">登録</Link></p>
+    </>
   );
 }
diff --git a/components/BackHomeButton.tsx b/components/BackHomeButton.tsx
new file mode 100644
index 0000000..e7863d4
--- /dev/null
+++ b/components/BackHomeButton.tsx
@@ -0,0 +1,12 @@
+import Link from 'next/link';
+
+export default function BackHomeButton(){
+  return (
+    <Link
+      href="/"
+      className="bg-image-transparent after:link-back-icon text-base sm:text-lg"
+    >
+        一覧に戻る
+    </Link>
+  );
+}
\ No newline at end of file
diff --git a/components/BookForm.tsx b/components/BookForm.tsx
new file mode 100644
index 0000000..4b45368
--- /dev/null
+++ b/components/BookForm.tsx
@@ -0,0 +1,100 @@
+'use client';
+import { useRouter } from "next/navigation";
+import { useEffect, useState, type FormEvent } from "react";
+import { addBook, getBook, updateBook, type Book } from "@/app/firebase";
+
+type Props = { type: 'new' } | { type: 'edit', bookId: string };
+
+export default function BookForm(props: Readonly<Props>) {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [formValueISBN, setFormValueISBN] = useState<string>();
+  const [formValueTitle, setFormValueTitle] = useState<string>('');
+  const [formValueMemo, setFormValueMemo] = useState<string>();
+  const isNew = props.type === 'new';
+
+  const [book, setBook] = useState<Book>();
+  useEffect(()=> {
+    if (props.type === 'edit') {
+      getBook(props.bookId).then(book => {
+        if (book) {
+          setBook(book as Book);
+          setFormValueISBN(book.isbn);
+          setFormValueTitle(book.title);
+          setFormValueMemo(book.memo);
+        }
+      });
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.type]);
+  
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setIsLoading(true);
+
+    const newBook = {
+      isbn: formValueISBN,
+      title: formValueTitle,
+      memo: formValueMemo
+    } satisfies Book;
+
+    if (isNew) {
+      await addBook(newBook);
+      setIsLoading(false);
+      window.alert(`『${formValueTitle}』を登録しました。`);
+    } else {
+      if (window.confirm(`次の内容に更新しますか？\nISBN: ${formValueISBN}\nタイトル: ${formValueTitle}\nメモ: ${formValueMemo}`)){
+        await updateBook(props.bookId, newBook);
+        window.alert('編集内容を保存しました。');
+        router.push(`/book/${props.bookId}`);
+      }
+      setIsLoading(false);
+    }
+    return;
+  }
+
+  return (
+    <>
+      <form
+        onSubmit={handleSubmit}
+        className="grid grid-cols-5 gap-4 align-middle leading-relaxed"
+      >
+        <label htmlFor="isbn" className="text-right">ISBN</label>
+        <input
+          name="isbn"
+          type="text"
+          value={formValueISBN}
+          onChange={e => setFormValueISBN(e.target.value)}
+          placeholder={book?.isbn}
+          className="col-span-4"
+        />
+        <label htmlFor="title" className="text-right">タイトル</label>
+        <input
+          name="title"
+          type="text"
+          value={formValueTitle}
+          onChange={e => setFormValueTitle(e.target.value)}
+          placeholder={book?.title}
+          required
+          className="col-span-4"
+        />
+        <label htmlFor="memo" className="text-right">メモ</label>
+        <textarea
+          name="memo"
+          value={formValueMemo}
+          onChange={e => setFormValueMemo(e.target.value)}
+          placeholder={book?.memo}
+          className="col-span-4"
+        />
+        <button
+          type="submit"
+          disabled={isLoading}
+          className="mx-auto col-start-3 text-low-contrast"
+        >
+          {isNew && (isLoading ? '登録中...' : '登録')}
+          {!isNew && (isLoading ? '保存中...' : '変更を保存')}
+        </button>
+      </form>
+    </>
+  );
+}

From 4cb8aa30b25af1dc932eded8d2a8388216aeb347 Mon Sep 17 00:00:00 2001
From: u-sho <26079835+u-sho@users.noreply.github.com>
Date: Thu, 23 May 2024 15:15:07 +0900
Subject: [PATCH 06/15] =?UTF-8?q?=E7=94=BB=E5=83=8FCRUD=E3=81=AE=E5=AE=9F?=
 =?UTF-8?q?=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/book/[bookId]/page.tsx               |  39 +++++---
 app/book/com/page.tsx                    |   6 --
 app/globals.css                          |  91 +++++++-----------
 app/layout.tsx                           |  29 +++++-
 app/page.tsx                             |  29 ++++--
 components/BackHomeButton.tsx            |   7 +-
 components/BookForm.tsx                  | 112 ++++++++++++++++-------
 components/BookImage.tsx                 |  21 +++++
 firebase/firebaseApp.ts                  |  13 +++
 app/firebase.ts => firebase/firestore.ts |  41 ++++-----
 firebase/storage.ts                      |  41 +++++++++
 next.config.mjs                          |   8 +-
 public/200x283.png                       | Bin 0 -> 2913 bytes
 public/next.svg                          |   1 -
 public/vercel.svg                        |   1 -
 15 files changed, 286 insertions(+), 153 deletions(-)
 delete mode 100644 app/book/com/page.tsx
 create mode 100644 components/BookImage.tsx
 create mode 100644 firebase/firebaseApp.ts
 rename app/firebase.ts => firebase/firestore.ts (51%)
 create mode 100644 firebase/storage.ts
 create mode 100644 public/200x283.png
 delete mode 100644 public/next.svg
 delete mode 100644 public/vercel.svg

diff --git a/app/book/[bookId]/page.tsx b/app/book/[bookId]/page.tsx
index 1262082..cd4fef3 100644
--- a/app/book/[bookId]/page.tsx
+++ b/app/book/[bookId]/page.tsx
@@ -1,33 +1,46 @@
 'use client';
 import Link from "next/link";
 import { useState, useEffect } from "react";
-import { getBook, type Book } from "@/app/firebase";
+
+import { getBook, type Book } from "@/firebase/firestore";
+import { getBookImageURL } from "@/firebase/storage";
+
 import BackHomeButton from "@/components/BackHomeButton";
+import BookImage from "@/components/BookImage";
 
 export default function BookDetail({params}: {params: {bookId: string}}) {
   const bookId = params.bookId;
-  const [book, setBook] = useState<Book>();
+  const [bookImage, setBookImage] = useState<string>('/200x283.png');
+  const [bookTitle, setBookTitle] = useState<Book['title']>('タイトル未登録');
+  const [bookISBN, setBookISBN] = useState<Book['isbn']>();
+  const [bookMemo, setBookMemo] = useState<Book['memo']>();
 
   useEffect(()=> {
     getBook(bookId).then(book => {
-      if (book) setBook(book as Book);
+      if (book) {
+        if (book.title) setBookTitle(book.title);
+        setBookISBN(book.isbn);
+        setBookMemo(book.memo);
+      }
+      getBookImageURL(book?.image)
+        .then(imageURL => setBookImage(imageURL));
     });
   }, [bookId]);
 
   return (
     <>
-      <h1 className="text-3xl sm:text-4xl my-6 sm:my-8">{book?.title ?? 'タイトル未登録'}</h1>
-      <dl className="grid gap-4 grid-cols-5 mx-auto">
-        <dt className="text-right text-low-contrast font-semibold">ISBN</dt>
-        <dd className="text-justify col-span-4">{book?.isbn}</dd>
-        <dt className="text-right text-low-contrast font-semibold">メモ</dt>
-        <dd className="text-justify col-span-4">{book?.memo}</dd>
+      <h2 className="text-3xl sm:text-4xl font-bold my-6 sm:my-8">
+        {bookTitle}
+      </h2>
+      <BookImage src={bookImage} />
+      <dl className="grid gap-y-4 gap-x-3 grid-cols-5 mt-4 mx-auto">
+        <dt className="text-right font-semibold">ISBN</dt>
+        <dd className="text-justify col-span-4">{bookISBN}</dd>
+        <dt className="text-right font-semibold">メモ</dt>
+        <dd className="text-justify col-span-4">{bookMemo}</dd>
       </dl>
       <p className="my-6">
-        <Link
-          href={`/book/${bookId}/edit`}
-          className="font-bold text-low-contrast"
-        >
+        <Link href={`/book/${bookId}/edit`} className="button-center">
           編集する
         </Link>
       </p>
diff --git a/app/book/com/page.tsx b/app/book/com/page.tsx
deleted file mode 100644
index 2b7ff5c..0000000
--- a/app/book/com/page.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-'use client';
-import BookForm from '@/components/BookForm';
-
-export default function TestPage() {
-    return <BookForm type="new" />;
-}
\ No newline at end of file
diff --git a/app/globals.css b/app/globals.css
index 9c237c1..30f3ed5 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -3,85 +3,60 @@
 @tailwind utilities;
 
 :root {
-  --foreground-rgb: 0, 0, 0;
+  --foreground-rgb: 44, 51, 47;
   --background-rgb: 220, 255, 236;
-  --button-image: linear-gradient(135deg, #fecfef 0%, #f698bc 100%);
+  --accent-foreground-rgba: var(--foreground-rgb), 0.85;
+  --accent-background-image: linear-gradient(135deg, #fecfef 0%, #f698bc 100%);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --foreground-rgb: 255, 255, 255;
     --background-rgb: 0, 0, 0;
-    --button-image: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+    --accent-foreground-rgba: var(--foreground-rgb), 1;
+    --accent-background-image: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
   }
 }
 
-.text-low-contrast {
-  @media (prefers-color-scheme: light) {
-    color: rgba(var(--foreground-rgb), 0.68);
-  }
-}
-
-.after\:link-icon {
-  &::after {
-    content: '🔗';
-  }
-}
-
-.after\:link-back-icon {
-  &::after {
-    content: '↩';
-  }
-}
-
-.bg-image-transparent {
-  background: transparent;
-}
-
 body {
   color: rgb(var(--foreground-rgb));
   background: rgb(var(--background-rgb));
+}
 
-  header, footer {
-    background-image: var(--button-image);
-
-    a {
-      background: transparent;
-      &::after {
-        display: none;
-      }
+header, footer {
+  background-image: var(--accent-background-image);
+  color: rgba(var(--accent-foreground-rgba));
 
-      @media (prefers-color-scheme: light) {
-        color: rgba(var(--foreground-rgb), 0.68);
-      }
-    }
+  a {
+    background: transparent;
   }
-
 }
 
-h1 {
-  font-size: 2rem;
-  font-weight: bold;
+input, textarea {
+  @media (prefers-color-scheme: dark) {
+    background: rgb(var(--foreground-rgb));
+    color: rgb(var(--background-rgb));
+  }
 }
 
-a {
-  display: inline-block;
-  border-radius: 8px;
-  padding: 8px;
-  background-image: var(--button-image);
+input[type="file"] {
+  background: transparent;
+  color: rgb(var(--foreground-rgb));
 }
 
-button {
-  width: fit-content;
-  border-radius: 8px;
-  padding: 8px;
-  font-weight: bold;
-  background-image: var(--button-image);
-
-  &:not([disabled]) {
-    cursor: pointer;
+@layer components {
+  .button-center {
+    @apply inline-block max-w-80 mx-auto p-2 sm:px-4 rounded-lg border-none;
+    @apply font-medium;
+    @apply cursor-pointer disabled:cursor-default hover:scale-105;
+    background-image: var(--accent-background-image);
+    color: rgba(var(--accent-foreground-rgba));
   }
-  &[disabled] {
-    cursor: default;
+
+  .button-back {
+    @apply text-base sm:text-lg hover:underline;
+    &::after {
+      content: '↩';
+    }
   }
-}
+}
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
index 20e00cc..6adb4fd 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -17,14 +17,35 @@ export default function RootLayout({
       <body className="min-h-dvh sm:text-2xl">
         <header className="w-full">
           <h1 className="font-bold text-xl sm:text-3xl">
-            <Link href="/">Firebase Book Manage App</Link>
+            <Link href="/" className="inline-block p-2">
+              Firebase Book Manage App
+            </Link>
           </h1>
         </header>
-        <main className="max-w-3xl mx-auto px-4 text-center">
+        <main className="max-w-3xl mx-auto px-2 text-center">
           {children}
         </main>
-        <footer className="absolute bottom-0 w-full text-right p-2 text-sm">
-          © 2024, RedImpulz inc.
+        <footer className="absolute bottom-0 w-full text-sm">
+          <ul className="inline-flex justify-between w-full">
+            <li className="inline-block p-2">
+              <Link
+                href="https://github.com/redimpulz/firebase-book-manage-app"
+                className="font-bold"
+              >
+                GitHub Repo.
+              </Link>
+            </li>
+            <li className="inline-block p-2">
+              © 2024
+              <Link
+                href="https://redimpulz.com"
+                target="_blank"
+                rel="noreferrer"
+              >
+                RedImpulz inc.
+              </Link>
+            </li>
+          </ul>
         </footer>
       </body>
     </html>
diff --git a/app/page.tsx b/app/page.tsx
index c1b8351..7a84338 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,8 +1,7 @@
 'use client';
 import Link from "next/link";
-
-import { getAllBooks, removeBook, type Book } from "./firebase";
 import { useEffect, useState } from "react";
+import { getAllBooks, removeBook, type Book } from "@/firebase/firestore";
 
 type BookWithID = Book & { bookId: string };
 
@@ -26,7 +25,7 @@ export default function Home() {
 
   const handleDelete = async (book: BookWithID) => {
     if (window.confirm(`『${book.title}』を本当に削除しますか？`)) {
-      await removeBook(book.bookId);
+      await removeBook(book.bookId, book);
       await getBooks();
     }
     return;
@@ -34,21 +33,31 @@ export default function Home() {
 
   return (
     <>
-      <h2 className="my-6 sm:my-8 text-3xl sm:text-4xl font-bold">蔵書一覧</h2>
-      <ul className="grid gap-2 grid-cols-5">
+      <h2 className="mt-6 sm:mt-8 text-3xl sm:text-4xl font-bold">蔵書一覧</h2>
+      <ul className="grid gap-y-2 sm:gap-x-4 grid-cols-5 my-6 sm:my-12">
         {bookList.map(book => (
           <li key={book.bookId} className="contents">
-            <span className="col-span-3">{book.title ? book.title : book.isbn}</span>
-            <Link href={`/book/${book.bookId}`}>詳細</Link>
+            <span className="col-span-3">
+              {book.title ? book.title : book.isbn}
+            </span>
+            <span className="w-fit ml-auto">
+              <Link href={`/book/${book.bookId}`} className="button-center">
+                詳細
+              </Link>
+            </span>
             <button
               type="button"
               onClick={() => handleDelete(book)}
-              className="bg-image-transparent"
-            >🗑️</button>
+              className="text-left"
+            >
+              🗑️
+            </button>
           </li>
         ))}
       </ul>
-      <p className="my-4"><Link href="/book/new">登録</Link></p>
+      <p className="text-center">
+        <Link href="/book/new" className="button-center">本を追加</Link>
+      </p>
     </>
   );
 }
diff --git a/components/BackHomeButton.tsx b/components/BackHomeButton.tsx
index e7863d4..8e646b3 100644
--- a/components/BackHomeButton.tsx
+++ b/components/BackHomeButton.tsx
@@ -2,11 +2,8 @@ import Link from 'next/link';
 
 export default function BackHomeButton(){
   return (
-    <Link
-      href="/"
-      className="bg-image-transparent after:link-back-icon text-base sm:text-lg"
-    >
-        一覧に戻る
+    <Link href="/" className="button-back">
+      一覧に戻る
     </Link>
   );
 }
\ No newline at end of file
diff --git a/components/BookForm.tsx b/components/BookForm.tsx
index 4b45368..06059a4 100644
--- a/components/BookForm.tsx
+++ b/components/BookForm.tsx
@@ -1,16 +1,23 @@
 'use client';
 import { useRouter } from "next/navigation";
-import { useEffect, useState, type FormEvent } from "react";
-import { addBook, getBook, updateBook, type Book } from "@/app/firebase";
+import { useEffect, useState, type ChangeEvent, type FormEvent } from "react";
+
+import { addBook, getBook, updateBook, type Book } from "@/firebase/firestore";
+import { addBookImage, getBookImageURL, removeBookImage } from "@/firebase/storage";
+import BookImage from "./BookImage";
+
+type RBook = Required<Book>;
 
 type Props = { type: 'new' } | { type: 'edit', bookId: string };
 
 export default function BookForm(props: Readonly<Props>) {
   const router = useRouter();
   const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [formValueISBN, setFormValueISBN] = useState<string>();
-  const [formValueTitle, setFormValueTitle] = useState<string>('');
-  const [formValueMemo, setFormValueMemo] = useState<string>();
+  const [formValueImage, setImage] = useState<File>();
+  const [formValueImageURL, setImageURL] = useState<RBook['image']>('/200x283.png');
+  const [formValueISBN, setISBN] = useState<RBook['isbn']>('');
+  const [formValueTitle, setTitle] = useState<RBook['title']>('');
+  const [formValueMemo, setMemo] = useState<RBook['memo']>('');
   const isNew = props.type === 'new';
 
   const [book, setBook] = useState<Book>();
@@ -19,37 +26,67 @@ export default function BookForm(props: Readonly<Props>) {
       getBook(props.bookId).then(book => {
         if (book) {
           setBook(book as Book);
-          setFormValueISBN(book.isbn);
-          setFormValueTitle(book.title);
-          setFormValueMemo(book.memo);
+          getBookImageURL(book.image).then(imageURL => setImageURL(imageURL));
+          setISBN(book.isbn || '');
+          setTitle(book.title || '');
+          setMemo(book.memo || '');
         }
+        return;
       });
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.type]);
-  
+
+  const handleImageSelect = (event: ChangeEvent<HTMLInputElement>) => {
+    event.preventDefault();
+
+    const imageFile = event.target.files ? event.target.files[0] : null;
+    if (imageFile) {
+      setImage(imageFile);
+      setImageURL(URL.createObjectURL(imageFile));
+    }
+  }
+
   const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     setIsLoading(true);
 
-    const newBook = {
-      isbn: formValueISBN,
-      title: formValueTitle,
-      memo: formValueMemo
-    } satisfies Book;
+    const getNewBook = async () => {
+      const newBook: Book = {
+        image: book?.image,
+        isbn: formValueISBN,
+        title: formValueTitle,
+        memo: formValueMemo
+      };
+      if (formValueImage) {
+        // 古いほうは削除
+        if (typeof book?.image === 'string') await removeBookImage(book.image);
+        newBook.image = await addBookImage(formValueImage);
+      }
+      return newBook;
+    }
 
+    const newBookString = ` 書影: ${formValueImage?.name || '未登録'}\n`
+                        + ` ISBN: ${formValueISBN || '未登録'}\n`
+                        + ` タイトル: ${formValueTitle}\n`
+                        + ` メモ: ${formValueMemo || '未登録'}`;
+    
     if (isNew) {
-      await addBook(newBook);
-      setIsLoading(false);
-      window.alert(`『${formValueTitle}』を登録しました。`);
+      if (window.confirm(`次の内容で登録しますか？\n${newBookString}`)) {
+        const newBook = await getNewBook();
+        const newBookId = await addBook(newBook);
+        window.alert(`『${formValueTitle}』を登録しました。`);
+        router.push(`/book/${newBookId}`);
+      }
     } else {
-      if (window.confirm(`次の内容に更新しますか？\nISBN: ${formValueISBN}\nタイトル: ${formValueTitle}\nメモ: ${formValueMemo}`)){
+      if (window.confirm(`次の内容に更新しますか？\n${newBookString}`)) {
+        const newBook = await getNewBook();
         await updateBook(props.bookId, newBook);
         window.alert('編集内容を保存しました。');
         router.push(`/book/${props.bookId}`);
       }
-      setIsLoading(false);
     }
+    setIsLoading(false);
     return;
   }
 
@@ -59,37 +96,48 @@ export default function BookForm(props: Readonly<Props>) {
         onSubmit={handleSubmit}
         className="grid grid-cols-5 gap-4 align-middle leading-relaxed"
       >
+        <BookImage src={formValueImageURL} className="col-span-5" />
+        <label htmlFor="image" className="text-right">画像</label>
+        <input
+          name="image"
+          type="file"
+          accept="image/*"
+          capture="environment"
+          onChange={handleImageSelect}
+          className="col-span-4 file:button-center file:py-0 file:sm:mx-1"
+        />
+
         <label htmlFor="isbn" className="text-right">ISBN</label>
         <input
-          name="isbn"
+          id="isbn"
           type="text"
           value={formValueISBN}
-          onChange={e => setFormValueISBN(e.target.value)}
-          placeholder={book?.isbn}
-          className="col-span-4"
+          onChange={e => setISBN(e.target.value)}
+          className="col-span-4 rounded-lg ps-1"
         />
         <label htmlFor="title" className="text-right">タイトル</label>
+
         <input
-          name="title"
+          id="title"
           type="text"
           value={formValueTitle}
-          onChange={e => setFormValueTitle(e.target.value)}
-          placeholder={book?.title}
+          onChange={e => setTitle(e.target.value)}
           required
-          className="col-span-4"
+          className="col-span-4 rounded-lg ps-1"
         />
+
         <label htmlFor="memo" className="text-right">メモ</label>
         <textarea
-          name="memo"
+          id="memo"
           value={formValueMemo}
-          onChange={e => setFormValueMemo(e.target.value)}
-          placeholder={book?.memo}
-          className="col-span-4"
+          onChange={e => setMemo(e.target.value)}
+          className="col-span-4 rounded-lg ps-1"
         />
+
         <button
           type="submit"
           disabled={isLoading}
-          className="mx-auto col-start-3 text-low-contrast"
+          className="col-start-2 col-span-3 button-center"
         >
           {isNew && (isLoading ? '登録中...' : '登録')}
           {!isNew && (isLoading ? '保存中...' : '変更を保存')}
diff --git a/components/BookImage.tsx b/components/BookImage.tsx
new file mode 100644
index 0000000..dcb69f9
--- /dev/null
+++ b/components/BookImage.tsx
@@ -0,0 +1,21 @@
+'use client';
+import Image from "next/image";
+
+type Prop = {
+  src: string,
+  className?: string
+}
+
+export default function BookImage({ src, className }: Prop) {
+  return (
+    <div className={`mx-auto w-48 sm:w-60 min-h-48 grid place-items-center ${className}`}>
+      <Image
+        src={src}
+        alt="書影"
+        width={200}
+        height={283}
+        className="bg-white mx-auto"
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/firebase/firebaseApp.ts b/firebase/firebaseApp.ts
new file mode 100644
index 0000000..307cbd0
--- /dev/null
+++ b/firebase/firebaseApp.ts
@@ -0,0 +1,13 @@
+import { initializeApp } from "firebase/app";
+
+const firebaseConfig = {
+  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
+  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
+  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
+  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID
+};
+
+const firebaseApp = initializeApp(firebaseConfig);
+
+export default firebaseApp;
diff --git a/app/firebase.ts b/firebase/firestore.ts
similarity index 51%
rename from app/firebase.ts
rename to firebase/firestore.ts
index 5968d9f..10b099e 100644
--- a/app/firebase.ts
+++ b/firebase/firestore.ts
@@ -1,29 +1,27 @@
-// Import the functions you need from the SDKs you need
-import { initializeApp } from "firebase/app";
-import { getFirestore, collection, doc, addDoc, getDoc, getDocs, updateDoc, deleteDoc } from "firebase/firestore";
+import firebaseApp from './firebaseApp'
+import {
+  getFirestore,
+  collection,
+  doc,
+  addDoc,
+  getDoc,
+  getDocs,
+  updateDoc,
+  deleteDoc
+} from "firebase/firestore";
+import { removeBookImage } from './storage';
 
-const firebaseConfig = {
-  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
-  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
-  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
-  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
-  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID
-};
-
-// Initialize Firebase
-const firebaseApp = initializeApp(firebaseConfig);
-
-// Initialize Cloud Firestore and get a reference to the service
 const firestore = getFirestore(firebaseApp);
 const booksCollection = collection(firestore, '/books');
 
 export type Book = {
+  image?: string;
   isbn?: string;
   title: string;
   memo?: string;
 }
 
-const addBook = async (book: Readonly<Book>) => {
+export const addBook = async (book: Readonly<Book>) => {
   try {
     const bookId = (await addDoc(booksCollection, book)).id;
     return bookId;
@@ -32,7 +30,7 @@ const addBook = async (book: Readonly<Book>) => {
   }
 }
 
-const getBook = async (bookId: string) => {
+export const getBook = async (bookId: string) => {
   try {
     const querySnapshot = await getDoc(doc(firestore, 'books', bookId));
     if (querySnapshot.exists()){
@@ -45,7 +43,7 @@ const getBook = async (bookId: string) => {
   }
 }
 
-const getAllBooks = async () => {
+export const getAllBooks = async () => {
   try {
     const querySnapshot = await getDocs(booksCollection);
     return querySnapshot;
@@ -54,7 +52,7 @@ const getAllBooks = async () => {
   }
 }
 
-const updateBook = async (bookId: string, book: Readonly<Partial<Book>>) => {
+export const updateBook = async (bookId: string, book: Partial<Book>) => {
   try {
     await updateDoc(doc(firestore, 'books', bookId), book);
   } catch (e) {
@@ -62,12 +60,11 @@ const updateBook = async (bookId: string, book: Readonly<Partial<Book>>) => {
   }
 }
 
-const removeBook = async (bookId: string) => {
+export const removeBook = async (bookId: string, book: Readonly<Book>) => {
   try {
+    if (book.image) await removeBookImage(book.image);
     await deleteDoc(doc(firestore, 'books', bookId));
   } catch (e) {
     console.error('! Error deleting document: ', e);
   }
 }
-
-export { firebaseApp, firestore, addBook, getBook, getAllBooks, updateBook, removeBook };
\ No newline at end of file
diff --git a/firebase/storage.ts b/firebase/storage.ts
new file mode 100644
index 0000000..6ab8568
--- /dev/null
+++ b/firebase/storage.ts
@@ -0,0 +1,41 @@
+import firebaseApp from "./firebaseApp";
+import {
+  getStorage,
+  ref,
+  uploadBytes,
+  getDownloadURL,
+  deleteObject
+} from 'firebase/storage';
+
+const storage = getStorage(firebaseApp);
+
+export const addBookImage = async (image: File) => {
+  console.log(image);
+  try {
+    // TODO: uuidで一意にしたい
+    const imagePath = `images/${image.name}`;
+    const result = await uploadBytes(ref(storage, imagePath), image);
+    return result.metadata.fullPath;
+  } catch (e) {
+    console.error('! Error adding image: ', e);
+  }
+}
+
+export const getBookImageURL = async (imagePath?: string) => {
+  if (!imagePath) return '/200x283.png';
+  try {
+    const url = await getDownloadURL(ref(storage, imagePath));
+    return url;
+  } catch (e) {
+    console.error('! Error getting image URL: ', e);
+    return '/200x283.png';
+  }
+}
+
+export const removeBookImage = async (imagePath: string) => {
+  try {
+    await deleteObject(ref(storage, imagePath));
+  } catch (e) {
+    console.error('! Error deleting image: ', e);
+  }
+}
diff --git a/next.config.mjs b/next.config.mjs
index 4678774..c03e434 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,4 +1,10 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  images: {
+    remotePatterns: [{
+      hostname: 'firebasestorage.googleapis.com',
+    }]
+  }
+};
 
 export default nextConfig;
diff --git a/public/200x283.png b/public/200x283.png
new file mode 100644
index 0000000000000000000000000000000000000000..bdfdc0b86749356dffdcfd751dadf2cdef5e65a8
GIT binary patch
literal 2913
zcmd5;X;2eL8Vx9iQIH*+Q9%eSry@r{4nZzKP5}|Q35VP_;U<Cz3?n!~<Q4)13>uCY
zZX=OHML<CWg2)k)3?K;s0z!zGfUw!AEz6mmt=g*nvp>4}Rd;`{URQU$?`2=HH5USk
z0RaGjkfnv`Rqp&60N@c9<mVz}=1>E7IuvE$8Up|v_4()EsWn6g0|19bElrKDCC)HN
zNgjo9yaOBSYR{uyrPTfWR8_-4sg-3_BHXGBe>~cj(XO669jYy}bXCK6%wqDea{Jqo
zA6%)%=t9?GVs#tiv$_q5q~4lB=a1GIl<qyXBcPV{+~ZS7<H!zZv6Q00{BnWmLoKBx
znVAf>mkRR)m4F%mQX;pE0K7bc2fqV=gS;YwMpA&ZKY~9W`@QhrkNv*#9osklKeBx*
z{9kEr8M*NNS?Yh(z!mdfUu_T0ZUyS9rYxVhbO|DbAXN_|5>^HXXPkg(Rntpj&S#p<
zF@s8P-8x!ot=EZuz<WsKw(6EsgN=}o6K>(bgO{<?%Q<0MdgA#;oubE%)iyPW;1=%M
z*m>V3Ro|Zy#4QX{LtM`~!Ha#~%<shYJtupr-q_HSbL;f`bqEY?{+nBop^15qUR_d0
zW{X>RSS;_x>=d}SuoV1aVFL=yJ2O+Z5I<YqA-?qnEzsrm)9v1BT*7M1d3jk`3shqd
z0kvbD1;4ttNl^lWowBo=-PBU+TVk~8(<}r(_T=@>jS?1#9=Y@n$}=b<eowM{2Xo!=
z+DE?pn!&-=Gwj`_^bDI29rvL@d6AJ-MKYQMx=D|p#kadIll9H~{n14RDZ$Tt`{5GU
z9W;D9$@K_-hGa@&{t#GN+E^uWo5>viXgL|gX@hQVYg^@84b>O2KZ#Z7*uUdf5SfI@
z_bIi|arMqh;3}vlXGgqfR->8(wzv0r*Q21I@Hz|&-SbGmdQy^OUWQ9)?+5%mvj4>3
zxZLu_K!h{p*MjnKVbFPO$Fz7{{p{O*1(EGF1gyXeqWzl2MxlDQR_g^wxd?-Bj|L<>
zWgoRxil17%5dRF~+iy4*efeT?A@Fd(ld=y=9f-Bc=nS(QF<HZm7w5k|#%+fz)=y5+
zq(nxz4^yERxB)XLIBmqAVJv*xgvAnK<bpZkKaOra>A&7Q7_m?Hoq!z$wPLa4MFwrz
zonmKdTKfT;WKpe5h7}b%2EQRZ=8PXt_0JH^O4$6V>p|zG#zcJzwS=a~{W(@cwxOF6
z9gN)4du8*xreS;O7aI-xHvK`b!mwj^cK@!=HZ42*Q^S*<&&@!unTInoFfFaLSkE47
zSiN&&M8trmA=o7SfF|`(H6xc!X$(Xc_f4kUgRJknN=wT#hzTwa{T(I9+x{hc7X^fG
z4wxCHl4?8<bZ^ZzRbR9E2t;CB38hhcz*tu|zxyUh#tN@yyZB?kLz^W0Fr!k^vZMy{
zmKZxUEYlV=7QmQg@rifyc^Z4@I7WQHncLwdO3KTt0I4X96QbMDb2&aa&Zc5uXmrdV
zr*|%hGyb*P()_NOq5lOP<2u~kLfPT6ICRL$JNkm1Ffb>PkIp;1BV}0Z6!-M#e9q{o
zR5)dxla(BmWqH#EbmZv_x)xhEUPC0RIQV_!D?`S>`61A}n3+38mu6Z6d+KeSTkR2_
zfb%c8pHY&LasM(;e$CHcEEuqaX5xl|ZE<J_Cto;H`@|8TkkDq($*z;cu&Gh&tuH8?
zl8Or9d^oF2o5c}Fwu~Km74xXdh>wpCc7g1zmUxa#x{t@h^b6bZ)_X$ABLtzNM;-g`
zy0ccq`SsAQkF}KDn<0Jcg-tJr#7CWd%PvTRY@o1uheSz13U2<o%r(~}r)ef|Hn*`c
za+I>S2S=*LI^2?f^hl9`U2(6d@QA~^#l&bWKj$&%S{7`SQhBQP6;;|tcq$Vf+!W6?
zf0)UqF`+Cyv%>Dy{Zt`|V0U6WU{&gpmmO!5&~vG6fjz~v$jG?C!-6#?DID1lR{aqq
zl@$-F(RYPoC#p>-xKhbuew)kTWcCnOiy0U^_l}Mp9EQcS#5qADH??%r65lP+Xyc;I
za(3Isy0Bzt+aiRfA#RlM6*HJxH32Qi@B)ofoekf=dVj2|g>BM>Uqor4Yi=3M>h778
z2KZfIM&8&(MdadK&I%dyq!63tAmPM4b4RC2M$}~&m#k>2?by7Wd+hT2;7XB$1UCpI
z1))$iwuD|<`lOPI*^F*w8X?i?m(#?c6M*dl?&Zxy%!`niljgU2?3poZW50QMVjS5=
zm#Q%nXOv`q;DyR?tqb8<PFmc)u`uQ83Hq9weQ5GQXE3DuEYF_VqMvrZwB?w+4}OuF
z2lGh*+W~mlBhL0vGc#Y}*MiqsSNP6BYA48ic4&PaG07jU6VllZntoAUmieT)D{C)H
zwx-D@m_*(UTdwWGB1pnW8d5{gruR0B3G1fl-&3{3U-yn=>@U~Ga0rI8jnyV9d9pU$
zGR|5ENVfiU|K@Xvv6<e4Oz5EdeeB1N{Yp|2!ncc6h*qZ#&Lh5jQKS(?yuL)Aj%-Cl
zoO+-TKzf)z0uP$r3};k6kvtVf7*C?#$;lqw++}dQ69y&;aB)44lNu3@QBe!VSDulu
zazjs`=PHbnwYiFE?s>@Z=R-GEn$6{{^M4VhH)M-mZKHPJX6}lgzkVzKhWu-9HN~Ab
zr>(5+O!lW&JnonMoaN|5HKi%RWhdTOj;CiL+7dvGrw$ShO-#hqV{})TyWAf0jxtp#
zW`IFP(?~0`lZuJZ5+INgny@PHtmj&Ico+3;x3!OtG+uX6J$z=XTMVO>`3pZC7mU&j
zp4S8(*$plL>3y~vu5hjb-Bk2FAZkJD+<)QK_CVB2sSKwE=@Cn+8(2Ws<T$}NF0|vy
ztI6w!yS@-qN|>vp1PhJ8#z}|6>kjd@X}mT(cxJAB*#)*+CQe6SXf3L?cF9+N|D`az
zXD-j^x2s%d<#-e>F?Y$8`Fq1S1;5tmMOx&wu~6hvX`q)gcl!}Z+l*_}2l%(5bHkG?
z7FSFL3bo|yxR)J#d%x;X-RZ|`+eDN?d+fB6gh6z9j+GQ7@O@l{F006h%x!mB)PTrq
zi7r`8^{KLD-5ij1=R}=sK#Wa8q(z<>Mc9gfXZ7Jj5>w;WB~f?oXv|z`a_H-mYthq5
zLm2G|l=m#mdbiVGy#dNWPAJrEoUpv1w>lgWy3($;?$26BVzkM-nBJj;F)&tu$K$uu
z`@DY$T>pwlf0<$q@_q|Y--EwOG2GPie@e^C^DXXu5B^H6ln8*qIZk)q3Qh077tPJg
O0Lx3Zrr3+#>Hh$?J_z*y

literal 0
HcmV?d00001

diff --git a/public/next.svg b/public/next.svg
deleted file mode 100644
index 5174b28..0000000
--- a/public/next.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
diff --git a/public/vercel.svg b/public/vercel.svg
deleted file mode 100644
index d2f8422..0000000
--- a/public/vercel.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
\ No newline at end of file

From 6b346d9922346ecd730deabcec321dfd3b68ae7d Mon Sep 17 00:00:00 2001
From: u-sho <26079835+u-sho@users.noreply.github.com>
Date: Fri, 24 May 2024 16:34:13 +0900
Subject: [PATCH 07/15] =?UTF-8?q?wip.=20=E3=83=AD=E3=82=B0=E3=82=A4?=
 =?UTF-8?q?=E3=83=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/layout.tsx              |  4 +-
 app/login/page.tsx          | 83 +++++++++++++++++++++++++++++++++++++
 components/BookForm.tsx     |  2 +-
 components/LogoutButton.tsx | 14 +++++++
 firebase/authentication.ts  | 50 ++++++++++++++++++++++
 middleware.ts               | 16 +++++++
 6 files changed, 167 insertions(+), 2 deletions(-)
 create mode 100644 app/login/page.tsx
 create mode 100644 components/LogoutButton.tsx
 create mode 100644 firebase/authentication.ts
 create mode 100644 middleware.ts

diff --git a/app/layout.tsx b/app/layout.tsx
index 6adb4fd..1d7902c 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import type { Metadata } from "next";
 import "./globals.css";
+import LogoutButton from '@/components/LogoutButton';
 
 export const metadata: Metadata = {
   title: "Firebase Manage Book App",
@@ -15,12 +16,13 @@ export default function RootLayout({
   return (
     <html lang="ja">
       <body className="min-h-dvh sm:text-2xl">
-        <header className="w-full">
+        <header className="w-full inline-grid grid-flow-col place-content-between">
           <h1 className="font-bold text-xl sm:text-3xl">
             <Link href="/" className="inline-block p-2">
               Firebase Book Manage App
             </Link>
           </h1>
+          <LogoutButton />
         </header>
         <main className="max-w-3xl mx-auto px-2 text-center">
           {children}
diff --git a/app/login/page.tsx b/app/login/page.tsx
new file mode 100644
index 0000000..4ba40fc
--- /dev/null
+++ b/app/login/page.tsx
@@ -0,0 +1,83 @@
+'use client';
+import { useState, type FormEvent } from "react";
+import { useRouter } from "next/navigation";
+import { createUser, isLogin, loginUser } from "@/firebase/authentication";
+
+export default function Login() {
+  const router = useRouter();
+  const [formValueEmail, setFormValueEmail] = useState<string>('');
+  const [formValuePassword, setFormValuePassword] = useState<string>('');
+
+  const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    console.log(formValueEmail, formValuePassword);
+
+    try {
+      await loginUser({
+        email: formValueEmail as string,
+        password: formValuePassword as string
+      });
+      router.push('/');
+    } catch (e) {
+      window.alert(`${e}`);
+    }
+  };
+
+  // const handleSignUp = async (e: FormEvent<HTMLButtonElement>) => {
+  //   e.preventDefault();
+  //   console.log(isLogin());
+
+  //   await createUser({
+  //     email: formValueEmail as string,
+  //     password: formValuePassword as string
+  //   });
+  //   window.alert(`${formValueEmail}を登録しました`);
+  //   router.push('/');
+  // }
+
+  return (
+    <>
+      <h2 className="text-3xl sm:text-4xl font-bold my-6 sm:my-8">ログイン</h2>
+      <form
+        onSubmit={handleLogin}
+        className="grid grid-cols-2 gap-4 align-middle max-w-96 mx-auto text-2xl"
+      >
+        <input
+          name="email"
+          type="email"
+          placeholder="メールアドレス"
+          value={formValueEmail}
+          onChange={e => {setFormValueEmail(e.target.value); console.log(formValueEmail);}}
+          required
+          className="col-span-2 rounded-lg ps-1 py-2"
+        />
+
+        <input
+          name="password"
+          type="password"
+          placeholder="パスワード"
+          value={formValuePassword}
+          onChange={e => setFormValuePassword(e.target.value)}
+          minLength={8}
+          required
+          className="col-span-2 rounded-lg ps-1 py-2"
+        />
+
+        <button
+          type="submit"
+          className="button-center w-full"
+        >
+          ログイン
+        </button>
+
+        {/* <button
+          type="submit"
+          onClick={handleSignUp}
+          className="button-center w-full">
+          新規登録
+        </button> */}
+      </form>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/components/BookForm.tsx b/components/BookForm.tsx
index 06059a4..b102570 100644
--- a/components/BookForm.tsx
+++ b/components/BookForm.tsx
@@ -115,8 +115,8 @@ export default function BookForm(props: Readonly<Props>) {
           onChange={e => setISBN(e.target.value)}
           className="col-span-4 rounded-lg ps-1"
         />
-        <label htmlFor="title" className="text-right">タイトル</label>
 
+        <label htmlFor="title" className="text-right">タイトル</label>
         <input
           id="title"
           type="text"
diff --git a/components/LogoutButton.tsx b/components/LogoutButton.tsx
new file mode 100644
index 0000000..41b2f9d
--- /dev/null
+++ b/components/LogoutButton.tsx
@@ -0,0 +1,14 @@
+'use client';
+import { isLogin, logoutUser } from "@/firebase/authentication";
+export default function LogoutButton() {
+    if (!isLogin()) {
+        return '';
+    }
+    return (
+    <button
+    onClick={() => logoutUser()}
+    className="text-lg sm:text-2xl p-2"
+  >
+    ログアウト
+    </button>);
+}
\ No newline at end of file
diff --git a/firebase/authentication.ts b/firebase/authentication.ts
new file mode 100644
index 0000000..b1caddd
--- /dev/null
+++ b/firebase/authentication.ts
@@ -0,0 +1,50 @@
+import firebaseApp from './firebaseApp';
+import {
+  getAuth,
+  createUserWithEmailAndPassword,
+  signInWithEmailAndPassword,
+  onAuthStateChanged,
+  signOut,
+  type AuthError,
+} from 'firebase/auth';
+
+const auth = getAuth(firebaseApp);
+
+type AuthKey = Readonly<{
+  email: string,
+  password: string
+}>;
+
+const errorFunction = ({ code, message }: Partial<AuthError>) => {
+  throw {code, message};
+}
+
+export const createUser = async ({ email, password }: AuthKey) => {
+  try {
+    await createUserWithEmailAndPassword(auth, email, password);
+  } catch (e) {
+    errorFunction(e as AuthError);
+  }
+};
+
+export const loginUser = async ({ email, password }: AuthKey) => {
+  try {
+    signInWithEmailAndPassword(auth, email, password);
+    return;
+  } catch (e) {
+    errorFunction(e as AuthError);
+  }
+};
+
+export const isLogin = () => {
+    console.log(auth.currentUser);
+  return !!auth.currentUser;
+}
+
+export const logoutUser = async () => {
+  try {
+    await signOut(auth);
+  } catch (e) {
+    errorFunction(e as AuthError);
+  }
+};
diff --git a/middleware.ts b/middleware.ts
new file mode 100644
index 0000000..688fcbf
--- /dev/null
+++ b/middleware.ts
@@ -0,0 +1,16 @@
+import type { NextRequest } from "next/server";
+import { isLogin } from "./firebase/authentication";
+
+export function middleware(request: NextRequest) {
+  // if (!isLogin() && !request.nextUrl.pathname.startsWith('/login')) {
+  //   return Response.redirect(new URL('/login', request.url));
+  // }
+
+  // if (isLogin() && request.nextUrl.pathname.startsWith('/login')) {
+  //   return Response.redirect(new URL('/', request.url));
+  // }
+}
+
+export const config = {
+  matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)']
+}

From 2dec17bd4fe14d630501aa9432d9851798195c4f Mon Sep 17 00:00:00 2001
From: u-sho <26079835+u-sho@users.noreply.github.com>
Date: Wed, 29 May 2024 16:35:39 +0900
Subject: [PATCH 08/15] =?UTF-8?q?=E3=83=AD=E3=82=B0=E3=82=A4=E3=83=B3?=
 =?UTF-8?q?=E6=A9=9F=E8=83=BD=E3=82=92=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/login/page.tsx          | 70 ++++++++++++++++++++++++++-----------
 components/LogoutButton.tsx | 36 +++++++++++++------
 firebase/authentication.ts  | 23 ++++++------
 middleware.ts               | 16 ---------
 4 files changed, 86 insertions(+), 59 deletions(-)
 delete mode 100644 middleware.ts

diff --git a/app/login/page.tsx b/app/login/page.tsx
index 4ba40fc..4569f72 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -1,54 +1,84 @@
 'use client';
 import { useState, type FormEvent } from "react";
 import { useRouter } from "next/navigation";
-import { createUser, isLogin, loginUser } from "@/firebase/authentication";
+import {
+  createUser,
+  loginUser,
+  type AuthKey
+} from "@/firebase/authentication";
+import type { AuthError } from "firebase/auth";
 
 export default function Login() {
   const router = useRouter();
+  const [error, setError] = useState<string | null>(null);
   const [formValueEmail, setFormValueEmail] = useState<string>('');
   const [formValuePassword, setFormValuePassword] = useState<string>('');
 
   const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
+    setError(null);
 
-    console.log(formValueEmail, formValuePassword);
+    const authKey = {
+      email: formValueEmail || '',
+      password: formValuePassword || '',
+    } satisfies AuthKey;
 
     try {
-      await loginUser({
-        email: formValueEmail as string,
-        password: formValuePassword as string
-      });
+      await loginUser(authKey);
+      window.alert('ログインに成功しました。蔵書一覧ページに移動します');
       router.push('/');
     } catch (e) {
-      window.alert(`${e}`);
+      const { code, message } = e as AuthError;
+      if (code === 'auth/invalid-email') {
+        setError('有効なメールアドレスを入力してください。');
+      } else if (code === 'auth/wrong-password') {
+        setError('パスワードが間違っています。');
+      } else if (code === 'auth/user-disabled') {
+        setError('このメールアドレスは使用できません。');
+      } else if (code === 'auth/user-not-found') {
+        if (window.confirm('ユーザー登録しますか？')) {
+          await _signUp(authKey);
+        }
+      } else {
+        setError(message);
+      }
     }
   };
 
-  // const handleSignUp = async (e: FormEvent<HTMLButtonElement>) => {
-  //   e.preventDefault();
-  //   console.log(isLogin());
-
-  //   await createUser({
-  //     email: formValueEmail as string,
-  //     password: formValuePassword as string
-  //   });
-  //   window.alert(`${formValueEmail}を登録しました`);
-  //   router.push('/');
-  // }
+  const _signUp = async ({ email, password }: AuthKey) => {
+    setError(null);
+    try {
+      await createUser({ email, password });
+      window.alert(`${email} を登録しました。蔵書一覧ページに移動します。`);
+      router.push('/');
+    } catch (e) {
+      const { code, message } = e as AuthError;
+      if (code === 'auth/invalid-email') {
+        setError('有効なメールアドレスを入力してください。');
+      } else if (code === 'auth/weak-password') {
+        setError('パスワードが脆弱です。');
+      } else {
+        setError(message);
+      }
+    }
+  }
 
   return (
     <>
-      <h2 className="text-3xl sm:text-4xl font-bold my-6 sm:my-8">ログイン</h2>
+      <h2 className="text-3xl sm:text-4xl font-bold my-6 sm:my-8">
+        ログイン
+      </h2>
       <form
         onSubmit={handleLogin}
         className="grid grid-cols-2 gap-4 align-middle max-w-96 mx-auto text-2xl"
       >
+        {error && <div className="text-red text-base">{error}</div>}
         <input
           name="email"
           type="email"
           placeholder="メールアドレス"
           value={formValueEmail}
-          onChange={e => {setFormValueEmail(e.target.value); console.log(formValueEmail);}}
+          onChange={e => setFormValueEmail(e.target.value)}
           required
           className="col-span-2 rounded-lg ps-1 py-2"
         />
diff --git a/components/LogoutButton.tsx b/components/LogoutButton.tsx
index 41b2f9d..439c206 100644
--- a/components/LogoutButton.tsx
+++ b/components/LogoutButton.tsx
@@ -1,14 +1,28 @@
 'use client';
-import { isLogin, logoutUser } from "@/firebase/authentication";
+import { useEffect, useState } from "react";
+import { usePathname, useRouter } from "next/navigation";
+import { onLoginUserChanged, logoutUser } from "@/firebase/authentication";
+
 export default function LogoutButton() {
-    if (!isLogin()) {
-        return '';
-    }
-    return (
-    <button
-    onClick={() => logoutUser()}
-    className="text-lg sm:text-2xl p-2"
-  >
-    ログアウト
-    </button>);
+  const router = useRouter();
+  const pathname = usePathname();
+  const [isLogin, setIsLogin] = useState<boolean>(false);
+
+  useEffect(() => {
+    onLoginUserChanged(user => setIsLogin(!!user));
+  }, [pathname]);
+
+  const handleLogout = () => {
+    logoutUser().then(() => router.push('/login'));
+  }
+
+  return (
+    <>
+      {isLogin &&
+        <button onClick={handleLogout} className="text-base sm:text-xl p-2">
+          ログアウト
+        </button>
+      }
+    </>
+  );
 }
\ No newline at end of file
diff --git a/firebase/authentication.ts b/firebase/authentication.ts
index b1caddd..9e0e206 100644
--- a/firebase/authentication.ts
+++ b/firebase/authentication.ts
@@ -6,24 +6,22 @@ import {
   onAuthStateChanged,
   signOut,
   type AuthError,
+  type NextOrObserver,
+  type User,
 } from 'firebase/auth';
 
 const auth = getAuth(firebaseApp);
 
-type AuthKey = Readonly<{
+export type AuthKey = Readonly<{
   email: string,
   password: string
 }>;
 
-const errorFunction = ({ code, message }: Partial<AuthError>) => {
-  throw {code, message};
-}
-
 export const createUser = async ({ email, password }: AuthKey) => {
   try {
     await createUserWithEmailAndPassword(auth, email, password);
   } catch (e) {
-    errorFunction(e as AuthError);
+    throw e as AuthError;
   }
 };
 
@@ -32,19 +30,20 @@ export const loginUser = async ({ email, password }: AuthKey) => {
     signInWithEmailAndPassword(auth, email, password);
     return;
   } catch (e) {
-    errorFunction(e as AuthError);
+    throw e as AuthError;
   }
 };
 
-export const isLogin = () => {
-    console.log(auth.currentUser);
-  return !!auth.currentUser;
-}
+export const getLoginUser = () => auth.currentUser;
+
+export const onLoginUserChanged = (
+  callback: NextOrObserver<User>
+) => onAuthStateChanged(auth, callback);
 
 export const logoutUser = async () => {
   try {
     await signOut(auth);
   } catch (e) {
-    errorFunction(e as AuthError);
+    throw e as AuthError;
   }
 };
diff --git a/middleware.ts b/middleware.ts
deleted file mode 100644
index 688fcbf..0000000
--- a/middleware.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { NextRequest } from "next/server";
-import { isLogin } from "./firebase/authentication";
-
-export function middleware(request: NextRequest) {
-  // if (!isLogin() && !request.nextUrl.pathname.startsWith('/login')) {
-  //   return Response.redirect(new URL('/login', request.url));
-  // }
-
-  // if (isLogin() && request.nextUrl.pathname.startsWith('/login')) {
-  //   return Response.redirect(new URL('/', request.url));
-  // }
-}
-
-export const config = {
-  matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)']
-}

From efca3f3571bb39083118f9e0cdd26b23217c5c84 Mon Sep 17 00:00:00 2001
From: u-sho <26079835+u-sho@users.noreply.github.com>
Date: Wed, 29 May 2024 17:09:20 +0900
Subject: [PATCH 09/15] format with prettier

---
 .prettierrc                     |  6 ++++
 app/book/[bookId]/edit/page.tsx |  6 ++--
 app/book/[bookId]/page.tsx      | 19 ++++++-----
 app/book/new/page.tsx           |  4 +--
 app/globals.css                 | 10 +++---
 app/layout.tsx                  | 22 ++++++-------
 app/login/page.tsx              | 27 ++++++----------
 app/page.tsx                    | 20 +++++++-----
 components/BackHomeButton.tsx   |  4 +--
 components/BookForm.tsx         | 56 ++++++++++++++++++++-------------
 components/BookImage.tsx        | 14 +++++----
 components/LogoutButton.tsx     | 14 ++++-----
 firebase/authentication.ts      | 12 +++----
 firebase/firebaseApp.ts         |  2 +-
 firebase/firestore.ts           | 18 +++++------
 firebase/storage.ts             |  8 ++---
 next.config.mjs                 |  4 +--
 postcss.config.mjs              |  4 +--
 tailwind.config.ts              | 10 +++---
 19 files changed, 138 insertions(+), 122 deletions(-)
 create mode 100644 .prettierrc

diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..bf6e452
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "arrowParens": "avoid",
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "none"
+}
\ No newline at end of file
diff --git a/app/book/[bookId]/edit/page.tsx b/app/book/[bookId]/edit/page.tsx
index 9db87d7..6bd885c 100644
--- a/app/book/[bookId]/edit/page.tsx
+++ b/app/book/[bookId]/edit/page.tsx
@@ -1,7 +1,7 @@
-import BookForm from "@/components/BookForm";
-import BackHomeButton from "@/components/BackHomeButton";
+import BookForm from '@/components/BookForm';
+import BackHomeButton from '@/components/BackHomeButton';
 
-export default function BookEdit({params}: {params: {bookId: string}}) {
+export default function BookEdit({ params }: { params: { bookId: string } }) {
   return (
     <>
       <h2 className="my-6 sm:my-8 text-3xl sm:text-4xl font-bold">本の編集</h2>
diff --git a/app/book/[bookId]/page.tsx b/app/book/[bookId]/page.tsx
index cd4fef3..14f7cc5 100644
--- a/app/book/[bookId]/page.tsx
+++ b/app/book/[bookId]/page.tsx
@@ -1,29 +1,28 @@
 'use client';
-import Link from "next/link";
-import { useState, useEffect } from "react";
+import Link from 'next/link';
+import { useState, useEffect } from 'react';
 
-import { getBook, type Book } from "@/firebase/firestore";
-import { getBookImageURL } from "@/firebase/storage";
+import { getBook, type Book } from '@/firebase/firestore';
+import { getBookImageURL } from '@/firebase/storage';
 
-import BackHomeButton from "@/components/BackHomeButton";
-import BookImage from "@/components/BookImage";
+import BackHomeButton from '@/components/BackHomeButton';
+import BookImage from '@/components/BookImage';
 
-export default function BookDetail({params}: {params: {bookId: string}}) {
+export default function BookDetail({ params }: { params: { bookId: string } }) {
   const bookId = params.bookId;
   const [bookImage, setBookImage] = useState<string>('/200x283.png');
   const [bookTitle, setBookTitle] = useState<Book['title']>('タイトル未登録');
   const [bookISBN, setBookISBN] = useState<Book['isbn']>();
   const [bookMemo, setBookMemo] = useState<Book['memo']>();
 
-  useEffect(()=> {
+  useEffect(() => {
     getBook(bookId).then(book => {
       if (book) {
         if (book.title) setBookTitle(book.title);
         setBookISBN(book.isbn);
         setBookMemo(book.memo);
       }
-      getBookImageURL(book?.image)
-        .then(imageURL => setBookImage(imageURL));
+      getBookImageURL(book?.image).then(imageURL => setBookImage(imageURL));
     });
   }, [bookId]);
 
diff --git a/app/book/new/page.tsx b/app/book/new/page.tsx
index 7443678..9d81e63 100644
--- a/app/book/new/page.tsx
+++ b/app/book/new/page.tsx
@@ -1,5 +1,5 @@
-import BookForm from "@/components/BookForm";
-import BackHomeButton from "@/components/BackHomeButton";
+import BookForm from '@/components/BookForm';
+import BackHomeButton from '@/components/BackHomeButton';
 
 export default function BookNew() {
   return (
diff --git a/app/globals.css b/app/globals.css
index 30f3ed5..a37227f 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -23,7 +23,8 @@ body {
   background: rgb(var(--background-rgb));
 }
 
-header, footer {
+header,
+footer {
   background-image: var(--accent-background-image);
   color: rgba(var(--accent-foreground-rgba));
 
@@ -32,14 +33,15 @@ header, footer {
   }
 }
 
-input, textarea {
+input,
+textarea {
   @media (prefers-color-scheme: dark) {
     background: rgb(var(--foreground-rgb));
     color: rgb(var(--background-rgb));
   }
 }
 
-input[type="file"] {
+input[type='file'] {
   background: transparent;
   color: rgb(var(--foreground-rgb));
 }
@@ -59,4 +61,4 @@ input[type="file"] {
       content: '↩';
     }
   }
-}
\ No newline at end of file
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 1d7902c..1145dd4 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,18 +1,18 @@
 import Link from 'next/link';
-import type { Metadata } from "next";
-import "./globals.css";
+import type { Metadata } from 'next';
+
+import './globals.css';
+
 import LogoutButton from '@/components/LogoutButton';
 
 export const metadata: Metadata = {
-  title: "Firebase Manage Book App",
-  description: "FirebaseとNext.jsで作られた蔵書管理アプリ",
+  title: 'Firebase Manage Book App',
+  description: 'FirebaseとNext.jsで作られた蔵書管理アプリ'
 };
 
 export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
+  children
+}: Readonly<{ children: React.ReactNode }>) {
   return (
     <html lang="ja">
       <body className="min-h-dvh sm:text-2xl">
@@ -24,9 +24,9 @@ export default function RootLayout({
           </h1>
           <LogoutButton />
         </header>
-        <main className="max-w-3xl mx-auto px-2 text-center">
-          {children}
-        </main>
+
+        <main className="max-w-3xl mx-auto px-2 text-center">{children}</main>
+
         <footer className="absolute bottom-0 w-full text-sm">
           <ul className="inline-flex justify-between w-full">
             <li className="inline-block p-2">
diff --git a/app/login/page.tsx b/app/login/page.tsx
index 4569f72..127a519 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -1,12 +1,8 @@
 'use client';
-import { useState, type FormEvent } from "react";
-import { useRouter } from "next/navigation";
-import {
-  createUser,
-  loginUser,
-  type AuthKey
-} from "@/firebase/authentication";
-import type { AuthError } from "firebase/auth";
+import { useState, type FormEvent } from 'react';
+import { useRouter } from 'next/navigation';
+import { createUser, loginUser, type AuthKey } from '@/firebase/authentication';
+import type { AuthError } from 'firebase/auth';
 
 export default function Login() {
   const router = useRouter();
@@ -20,7 +16,7 @@ export default function Login() {
 
     const authKey = {
       email: formValueEmail || '',
-      password: formValuePassword || '',
+      password: formValuePassword || ''
     } satisfies AuthKey;
 
     try {
@@ -61,13 +57,11 @@ export default function Login() {
         setError(message);
       }
     }
-  }
+  };
 
   return (
     <>
-      <h2 className="text-3xl sm:text-4xl font-bold my-6 sm:my-8">
-        ログイン
-      </h2>
+      <h2 className="text-3xl sm:text-4xl font-bold my-6 sm:my-8">ログイン</h2>
       <form
         onSubmit={handleLogin}
         className="grid grid-cols-2 gap-4 align-middle max-w-96 mx-auto text-2xl"
@@ -94,10 +88,7 @@ export default function Login() {
           className="col-span-2 rounded-lg ps-1 py-2"
         />
 
-        <button
-          type="submit"
-          className="button-center w-full"
-        >
+        <button type="submit" className="button-center w-full">
           ログイン
         </button>
 
@@ -110,4 +101,4 @@ export default function Login() {
       </form>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/app/page.tsx b/app/page.tsx
index 7a84338..0b5c4cc 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,27 +1,29 @@
 'use client';
-import Link from "next/link";
-import { useEffect, useState } from "react";
-import { getAllBooks, removeBook, type Book } from "@/firebase/firestore";
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { getAllBooks, removeBook, type Book } from '@/firebase/firestore';
 
 type BookWithID = Book & { bookId: string };
 
 export default function Home() {
   const [bookList, setBookList] = useState<BookWithID[]>([]);
 
-  const getBooks = async ()=> {
+  const getBooks = async () => {
     const booksSnapshot = await getAllBooks();
     const bookList: BookWithID[] = [];
     booksSnapshot?.forEach(bookDocument => {
       const book = bookDocument.data() as Book;
       bookList.push({
         bookId: bookDocument.id,
-        ...book,
+        ...book
       });
     });
     setBookList(bookList);
   };
 
-  useEffect(() => {getBooks()}, []);
+  useEffect(() => {
+    getBooks();
+  }, []);
 
   const handleDelete = async (book: BookWithID) => {
     if (window.confirm(`『${book.title}』を本当に削除しますか？`)) {
@@ -29,7 +31,7 @@ export default function Home() {
       await getBooks();
     }
     return;
-  }
+  };
 
   return (
     <>
@@ -56,7 +58,9 @@ export default function Home() {
         ))}
       </ul>
       <p className="text-center">
-        <Link href="/book/new" className="button-center">本を追加</Link>
+        <Link href="/book/new" className="button-center">
+          本を追加
+        </Link>
       </p>
     </>
   );
diff --git a/components/BackHomeButton.tsx b/components/BackHomeButton.tsx
index 8e646b3..0e2c2bc 100644
--- a/components/BackHomeButton.tsx
+++ b/components/BackHomeButton.tsx
@@ -1,9 +1,9 @@
 import Link from 'next/link';
 
-export default function BackHomeButton(){
+export default function BackHomeButton() {
   return (
     <Link href="/" className="button-back">
       一覧に戻る
     </Link>
   );
-}
\ No newline at end of file
+}
diff --git a/components/BookForm.tsx b/components/BookForm.tsx
index b102570..4735adb 100644
--- a/components/BookForm.tsx
+++ b/components/BookForm.tsx
@@ -1,27 +1,32 @@
 'use client';
-import { useRouter } from "next/navigation";
-import { useEffect, useState, type ChangeEvent, type FormEvent } from "react";
+import { useRouter } from 'next/navigation';
+import { useEffect, useState, type ChangeEvent, type FormEvent } from 'react';
 
-import { addBook, getBook, updateBook, type Book } from "@/firebase/firestore";
-import { addBookImage, getBookImageURL, removeBookImage } from "@/firebase/storage";
-import BookImage from "./BookImage";
+import { addBook, getBook, updateBook, type Book } from '@/firebase/firestore';
+import {
+  addBookImage,
+  getBookImageURL,
+  removeBookImage
+} from '@/firebase/storage';
+import BookImage from './BookImage';
 
 type RBook = Required<Book>;
 
-type Props = { type: 'new' } | { type: 'edit', bookId: string };
+type Props = { type: 'new' } | { type: 'edit'; bookId: string };
 
 export default function BookForm(props: Readonly<Props>) {
   const router = useRouter();
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [formValueImage, setImage] = useState<File>();
-  const [formValueImageURL, setImageURL] = useState<RBook['image']>('/200x283.png');
+  const [formValueImageURL, setImageURL] =
+    useState<RBook['image']>('/200x283.png');
   const [formValueISBN, setISBN] = useState<RBook['isbn']>('');
   const [formValueTitle, setTitle] = useState<RBook['title']>('');
   const [formValueMemo, setMemo] = useState<RBook['memo']>('');
   const isNew = props.type === 'new';
 
   const [book, setBook] = useState<Book>();
-  useEffect(()=> {
+  useEffect(() => {
     if (props.type === 'edit') {
       getBook(props.bookId).then(book => {
         if (book) {
@@ -34,7 +39,7 @@ export default function BookForm(props: Readonly<Props>) {
         return;
       });
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.type]);
 
   const handleImageSelect = (event: ChangeEvent<HTMLInputElement>) => {
@@ -45,7 +50,7 @@ export default function BookForm(props: Readonly<Props>) {
       setImage(imageFile);
       setImageURL(URL.createObjectURL(imageFile));
     }
-  }
+  };
 
   const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
@@ -64,13 +69,14 @@ export default function BookForm(props: Readonly<Props>) {
         newBook.image = await addBookImage(formValueImage);
       }
       return newBook;
-    }
+    };
+
+    const newBookString =
+      ` 書影: ${formValueImage?.name || '未登録'}\n` +
+      ` ISBN: ${formValueISBN || '未登録'}\n` +
+      ` タイトル: ${formValueTitle}\n` +
+      ` メモ: ${formValueMemo || '未登録'}`;
 
-    const newBookString = ` 書影: ${formValueImage?.name || '未登録'}\n`
-                        + ` ISBN: ${formValueISBN || '未登録'}\n`
-                        + ` タイトル: ${formValueTitle}\n`
-                        + ` メモ: ${formValueMemo || '未登録'}`;
-    
     if (isNew) {
       if (window.confirm(`次の内容で登録しますか？\n${newBookString}`)) {
         const newBook = await getNewBook();
@@ -88,7 +94,7 @@ export default function BookForm(props: Readonly<Props>) {
     }
     setIsLoading(false);
     return;
-  }
+  };
 
   return (
     <>
@@ -97,7 +103,9 @@ export default function BookForm(props: Readonly<Props>) {
         className="grid grid-cols-5 gap-4 align-middle leading-relaxed"
       >
         <BookImage src={formValueImageURL} className="col-span-5" />
-        <label htmlFor="image" className="text-right">画像</label>
+        <label htmlFor="image" className="text-right">
+          画像
+        </label>
         <input
           name="image"
           type="file"
@@ -107,7 +115,9 @@ export default function BookForm(props: Readonly<Props>) {
           className="col-span-4 file:button-center file:py-0 file:sm:mx-1"
         />
 
-        <label htmlFor="isbn" className="text-right">ISBN</label>
+        <label htmlFor="isbn" className="text-right">
+          ISBN
+        </label>
         <input
           id="isbn"
           type="text"
@@ -116,7 +126,9 @@ export default function BookForm(props: Readonly<Props>) {
           className="col-span-4 rounded-lg ps-1"
         />
 
-        <label htmlFor="title" className="text-right">タイトル</label>
+        <label htmlFor="title" className="text-right">
+          タイトル
+        </label>
         <input
           id="title"
           type="text"
@@ -126,7 +138,9 @@ export default function BookForm(props: Readonly<Props>) {
           className="col-span-4 rounded-lg ps-1"
         />
 
-        <label htmlFor="memo" className="text-right">メモ</label>
+        <label htmlFor="memo" className="text-right">
+          メモ
+        </label>
         <textarea
           id="memo"
           value={formValueMemo}
diff --git a/components/BookImage.tsx b/components/BookImage.tsx
index dcb69f9..3d22839 100644
--- a/components/BookImage.tsx
+++ b/components/BookImage.tsx
@@ -1,14 +1,16 @@
 'use client';
-import Image from "next/image";
+import Image from 'next/image';
 
 type Prop = {
-  src: string,
-  className?: string
-}
+  src: string;
+  className?: string;
+};
 
 export default function BookImage({ src, className }: Prop) {
   return (
-    <div className={`mx-auto w-48 sm:w-60 min-h-48 grid place-items-center ${className}`}>
+    <div
+      className={`mx-auto w-48 sm:w-60 min-h-48 grid place-items-center ${className}`}
+    >
       <Image
         src={src}
         alt="書影"
@@ -18,4 +20,4 @@ export default function BookImage({ src, className }: Prop) {
       />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/components/LogoutButton.tsx b/components/LogoutButton.tsx
index 439c206..6f6cae4 100644
--- a/components/LogoutButton.tsx
+++ b/components/LogoutButton.tsx
@@ -1,7 +1,7 @@
 'use client';
-import { useEffect, useState } from "react";
-import { usePathname, useRouter } from "next/navigation";
-import { onLoginUserChanged, logoutUser } from "@/firebase/authentication";
+import { useEffect, useState } from 'react';
+import { usePathname, useRouter } from 'next/navigation';
+import { onLoginUserChanged, logoutUser } from '@/firebase/authentication';
 
 export default function LogoutButton() {
   const router = useRouter();
@@ -14,15 +14,15 @@ export default function LogoutButton() {
 
   const handleLogout = () => {
     logoutUser().then(() => router.push('/login'));
-  }
+  };
 
   return (
     <>
-      {isLogin &&
+      {isLogin && (
         <button onClick={handleLogout} className="text-base sm:text-xl p-2">
           ログアウト
         </button>
-      }
+      )}
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/firebase/authentication.ts b/firebase/authentication.ts
index 9e0e206..dd60265 100644
--- a/firebase/authentication.ts
+++ b/firebase/authentication.ts
@@ -1,3 +1,4 @@
+'use client';
 import firebaseApp from './firebaseApp';
 import {
   getAuth,
@@ -7,14 +8,14 @@ import {
   signOut,
   type AuthError,
   type NextOrObserver,
-  type User,
+  type User
 } from 'firebase/auth';
 
 const auth = getAuth(firebaseApp);
 
 export type AuthKey = Readonly<{
-  email: string,
-  password: string
+  email: string;
+  password: string;
 }>;
 
 export const createUser = async ({ email, password }: AuthKey) => {
@@ -36,9 +37,8 @@ export const loginUser = async ({ email, password }: AuthKey) => {
 
 export const getLoginUser = () => auth.currentUser;
 
-export const onLoginUserChanged = (
-  callback: NextOrObserver<User>
-) => onAuthStateChanged(auth, callback);
+export const onLoginUserChanged = (callback: NextOrObserver<User>) =>
+  onAuthStateChanged(auth, callback);
 
 export const logoutUser = async () => {
   try {
diff --git a/firebase/firebaseApp.ts b/firebase/firebaseApp.ts
index 307cbd0..849041b 100644
--- a/firebase/firebaseApp.ts
+++ b/firebase/firebaseApp.ts
@@ -1,4 +1,4 @@
-import { initializeApp } from "firebase/app";
+import { initializeApp } from 'firebase/app';
 
 const firebaseConfig = {
   apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
diff --git a/firebase/firestore.ts b/firebase/firestore.ts
index 10b099e..45db2c7 100644
--- a/firebase/firestore.ts
+++ b/firebase/firestore.ts
@@ -1,4 +1,4 @@
-import firebaseApp from './firebaseApp'
+import firebaseApp from './firebaseApp';
 import {
   getFirestore,
   collection,
@@ -8,7 +8,7 @@ import {
   getDocs,
   updateDoc,
   deleteDoc
-} from "firebase/firestore";
+} from 'firebase/firestore';
 import { removeBookImage } from './storage';
 
 const firestore = getFirestore(firebaseApp);
@@ -19,7 +19,7 @@ export type Book = {
   isbn?: string;
   title: string;
   memo?: string;
-}
+};
 
 export const addBook = async (book: Readonly<Book>) => {
   try {
@@ -28,12 +28,12 @@ export const addBook = async (book: Readonly<Book>) => {
   } catch (e) {
     console.error('! Error adding document: ', e);
   }
-}
+};
 
 export const getBook = async (bookId: string) => {
   try {
     const querySnapshot = await getDoc(doc(firestore, 'books', bookId));
-    if (querySnapshot.exists()){
+    if (querySnapshot.exists()) {
       return querySnapshot.data() as Book;
     } else {
       console.error('! Error no such document!');
@@ -41,7 +41,7 @@ export const getBook = async (bookId: string) => {
   } catch (e) {
     console.error('! Error getting document: ', e);
   }
-}
+};
 
 export const getAllBooks = async () => {
   try {
@@ -50,7 +50,7 @@ export const getAllBooks = async () => {
   } catch (e) {
     console.error('! Error getting documents: ', e);
   }
-}
+};
 
 export const updateBook = async (bookId: string, book: Partial<Book>) => {
   try {
@@ -58,7 +58,7 @@ export const updateBook = async (bookId: string, book: Partial<Book>) => {
   } catch (e) {
     console.error('! Error updating document: ', e);
   }
-}
+};
 
 export const removeBook = async (bookId: string, book: Readonly<Book>) => {
   try {
@@ -67,4 +67,4 @@ export const removeBook = async (bookId: string, book: Readonly<Book>) => {
   } catch (e) {
     console.error('! Error deleting document: ', e);
   }
-}
+};
diff --git a/firebase/storage.ts b/firebase/storage.ts
index 6ab8568..c61715d 100644
--- a/firebase/storage.ts
+++ b/firebase/storage.ts
@@ -1,4 +1,4 @@
-import firebaseApp from "./firebaseApp";
+import firebaseApp from './firebaseApp';
 import {
   getStorage,
   ref,
@@ -19,7 +19,7 @@ export const addBookImage = async (image: File) => {
   } catch (e) {
     console.error('! Error adding image: ', e);
   }
-}
+};
 
 export const getBookImageURL = async (imagePath?: string) => {
   if (!imagePath) return '/200x283.png';
@@ -30,7 +30,7 @@ export const getBookImageURL = async (imagePath?: string) => {
     console.error('! Error getting image URL: ', e);
     return '/200x283.png';
   }
-}
+};
 
 export const removeBookImage = async (imagePath: string) => {
   try {
@@ -38,4 +38,4 @@ export const removeBookImage = async (imagePath: string) => {
   } catch (e) {
     console.error('! Error deleting image: ', e);
   }
-}
+};
diff --git a/next.config.mjs b/next.config.mjs
index c03e434..74d65ae 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,9 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   images: {
-    remotePatterns: [{
-      hostname: 'firebasestorage.googleapis.com',
-    }]
+    remotePatterns: [{ hostname: 'firebasestorage.googleapis.com' }]
   }
 };
 
diff --git a/postcss.config.mjs b/postcss.config.mjs
index 1a69fd2..df76ed2 100644
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -1,8 +1,8 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
-  },
+    tailwindcss: {}
+  }
 };
 
 export default config;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 5f28497..300ab12 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,10 +1,10 @@
-import type { Config } from "tailwindcss";
+import type { Config } from 'tailwindcss';
 
 const config: Config = {
   content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}'
+  ]
 };
 export default config;

From a91fd07dc61d87e57edb2d0ba9000cb7e1213e7b Mon Sep 17 00:00:00 2001
From: u-sho <26079835+u-sho@users.noreply.github.com>
Date: Fri, 31 May 2024 10:15:55 +0900
Subject: [PATCH 10/15] =?UTF-8?q?=E9=9D=9E=E3=83=AD=E3=82=B0=E3=82=A4?=
 =?UTF-8?q?=E3=83=B3=E7=8A=B6=E6=85=8B=E3=81=A7=E3=81=AE=E3=82=A2=E3=82=AF?=
 =?UTF-8?q?=E3=82=BB=E3=82=B9=E3=82=92=E5=88=B6=E5=BE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/book/[bookId]/page.tsx  |  2 +-
 app/layout.tsx              | 67 ++++++++++++++++---------------
 app/login/page.tsx          | 61 +++++++---------------------
 app/signup/page.tsx         | 73 ++++++++++++++++++++++++++++++++++
 components/AuthButton.tsx   | 36 +++++++++++++++++
 components/AuthContext.tsx  | 79 +++++++++++++++++++++++++++++++++++++
 components/LogoutButton.tsx | 28 -------------
 firebase/authentication.ts  | 65 +++++++++++++++++++++---------
 8 files changed, 285 insertions(+), 126 deletions(-)
 create mode 100644 app/signup/page.tsx
 create mode 100644 components/AuthButton.tsx
 create mode 100644 components/AuthContext.tsx
 delete mode 100644 components/LogoutButton.tsx

diff --git a/app/book/[bookId]/page.tsx b/app/book/[bookId]/page.tsx
index 14f7cc5..7240b04 100644
--- a/app/book/[bookId]/page.tsx
+++ b/app/book/[bookId]/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 import Link from 'next/link';
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 import { getBook, type Book } from '@/firebase/firestore';
 import { getBookImageURL } from '@/firebase/storage';
diff --git a/app/layout.tsx b/app/layout.tsx
index 1145dd4..16c0def 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -3,7 +3,8 @@ import type { Metadata } from 'next';
 
 import './globals.css';
 
-import LogoutButton from '@/components/LogoutButton';
+import { AuthProvider } from '@/components/AuthContext';
+import AuthButton from '@/components/AuthButton';
 
 export const metadata: Metadata = {
   title: 'Firebase Manage Book App',
@@ -16,39 +17,41 @@ export default function RootLayout({
   return (
     <html lang="ja">
       <body className="min-h-dvh sm:text-2xl">
-        <header className="w-full inline-grid grid-flow-col place-content-between">
-          <h1 className="font-bold text-xl sm:text-3xl">
-            <Link href="/" className="inline-block p-2">
-              Firebase Book Manage App
-            </Link>
-          </h1>
-          <LogoutButton />
-        </header>
+        <AuthProvider>
+          <header className="w-full inline-grid grid-flow-col place-content-between">
+            <h1 className="font-bold text-xl sm:text-3xl">
+              <Link href="/" className="inline-block p-2">
+                Firebase Book Manage App
+              </Link>
+            </h1>
+            <AuthButton />
+          </header>
 
-        <main className="max-w-3xl mx-auto px-2 text-center">{children}</main>
+          <main className="max-w-3xl mx-auto px-2 text-center">{children}</main>
 
-        <footer className="absolute bottom-0 w-full text-sm">
-          <ul className="inline-flex justify-between w-full">
-            <li className="inline-block p-2">
-              <Link
-                href="https://github.com/redimpulz/firebase-book-manage-app"
-                className="font-bold"
-              >
-                GitHub Repo.
-              </Link>
-            </li>
-            <li className="inline-block p-2">
-              © 2024
-              <Link
-                href="https://redimpulz.com"
-                target="_blank"
-                rel="noreferrer"
-              >
-                RedImpulz inc.
-              </Link>
-            </li>
-          </ul>
-        </footer>
+          <footer className="absolute bottom-0 w-full text-sm">
+            <ul className="inline-flex justify-between w-full">
+              <li className="inline-block p-2">
+                <Link
+                  href="https://github.com/redimpulz/firebase-book-manage-app"
+                  className="font-bold"
+                >
+                  GitHub Repo.
+                </Link>
+              </li>
+              <li className="inline-block p-2">
+                © 2024
+                <Link
+                  href="https://redimpulz.com"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  RedImpulz inc.
+                </Link>
+              </li>
+            </ul>
+          </footer>
+        </AuthProvider>
       </body>
     </html>
   );
diff --git a/app/login/page.tsx b/app/login/page.tsx
index 127a519..0ef3201 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -1,61 +1,32 @@
 'use client';
-import { useState, type FormEvent } from 'react';
+import Link from 'next/link';
 import { useRouter } from 'next/navigation';
-import { createUser, loginUser, type AuthKey } from '@/firebase/authentication';
-import type { AuthError } from 'firebase/auth';
+import { useContext, useState, type FormEvent } from 'react';
+import { AuthContext } from '@/components/AuthContext';
+import type { AuthError, AuthKey } from '@/firebase/authentication';
 
 export default function Login() {
   const router = useRouter();
+  const { login } = useContext(AuthContext);
   const [error, setError] = useState<string | null>(null);
-  const [formValueEmail, setFormValueEmail] = useState<string>('');
-  const [formValuePassword, setFormValuePassword] = useState<string>('');
+  const [formValueEmail, setFormValueEmail] = useState('');
+  const [formValuePassword, setFormValuePassword] = useState('');
 
   const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setError(null);
 
     const authKey = {
-      email: formValueEmail || '',
-      password: formValuePassword || ''
+      email: formValueEmail,
+      password: formValuePassword
     } satisfies AuthKey;
 
     try {
-      await loginUser(authKey);
+      await login(authKey);
       window.alert('ログインに成功しました。蔵書一覧ページに移動します');
       router.push('/');
     } catch (e) {
-      const { code, message } = e as AuthError;
-      if (code === 'auth/invalid-email') {
-        setError('有効なメールアドレスを入力してください。');
-      } else if (code === 'auth/wrong-password') {
-        setError('パスワードが間違っています。');
-      } else if (code === 'auth/user-disabled') {
-        setError('このメールアドレスは使用できません。');
-      } else if (code === 'auth/user-not-found') {
-        if (window.confirm('ユーザー登録しますか？')) {
-          await _signUp(authKey);
-        }
-      } else {
-        setError(message);
-      }
-    }
-  };
-
-  const _signUp = async ({ email, password }: AuthKey) => {
-    setError(null);
-    try {
-      await createUser({ email, password });
-      window.alert(`${email} を登録しました。蔵書一覧ページに移動します。`);
-      router.push('/');
-    } catch (e) {
-      const { code, message } = e as AuthError;
-      if (code === 'auth/invalid-email') {
-        setError('有効なメールアドレスを入力してください。');
-      } else if (code === 'auth/weak-password') {
-        setError('パスワードが脆弱です。');
-      } else {
-        setError(message);
-      }
+      setError((e as AuthError).message);
     }
   };
 
@@ -91,13 +62,9 @@ export default function Login() {
         <button type="submit" className="button-center w-full">
           ログイン
         </button>
-
-        {/* <button
-          type="submit"
-          onClick={handleSignUp}
-          className="button-center w-full">
-          新規登録
-        </button> */}
+        <Link href="/signup" className="w-full text-center">
+          新規登録🔗
+        </Link>
       </form>
     </>
   );
diff --git a/app/signup/page.tsx b/app/signup/page.tsx
new file mode 100644
index 0000000..dfb6795
--- /dev/null
+++ b/app/signup/page.tsx
@@ -0,0 +1,73 @@
+'use client';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useContext, useState, type FormEvent } from 'react';
+import { AuthContext } from '@/components/AuthContext';
+import type { AuthError, AuthKey } from '@/firebase/authentication';
+
+export default function SignUp() {
+  const router = useRouter();
+  const { signUp } = useContext(AuthContext);
+  const [error, setError] = useState<string | null>(null);
+  const [formValueEmail, setFormValueEmail] = useState('');
+  const [formValuePassword, setFormValuePassword] = useState('');
+
+  const handleSignUp = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setError(null);
+
+    const authKey = {
+      email: formValueEmail,
+      password: formValuePassword
+    } satisfies AuthKey;
+
+    try {
+      await signUp(authKey);
+      window.alert(
+        `${authKey.email} を登録しました。蔵書一覧ページに移動します。`
+      );
+      router.push('/');
+    } catch (e) {
+      setError((e as AuthError).message);
+    }
+  };
+
+  return (
+    <>
+      <h2 className="text-3xl sm:text-4xl font-bold my-6 sm:my-8">新規登録</h2>
+      <form
+        onSubmit={handleSignUp}
+        className="grid grid-cols-2 gap-4 align-middle max-w-96 mx-auto text-2xl"
+      >
+        {error && <div className="text-red text-base">{error}</div>}
+        <input
+          name="email"
+          type="email"
+          placeholder="メールアドレス"
+          value={formValueEmail}
+          onChange={e => setFormValueEmail(e.target.value)}
+          required
+          className="col-span-2 rounded-lg ps-1 py-2"
+        />
+
+        <input
+          name="password"
+          type="password"
+          placeholder="パスワード"
+          value={formValuePassword}
+          onChange={e => setFormValuePassword(e.target.value)}
+          minLength={8}
+          required
+          className="col-span-2 rounded-lg ps-1 py-2"
+        />
+
+        <button type="submit" className="button-center w-full">
+          新規登録
+        </button>
+        <Link href="/login" className="w-full text-center">
+          ログイン🔗
+        </Link>
+      </form>
+    </>
+  );
+}
diff --git a/components/AuthButton.tsx b/components/AuthButton.tsx
new file mode 100644
index 0000000..f9c0fb3
--- /dev/null
+++ b/components/AuthButton.tsx
@@ -0,0 +1,36 @@
+'use client';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { MouseEvent, MouseEventHandler, useContext } from 'react';
+import { AuthContext } from './AuthContext';
+
+export default function AuthButton() {
+  const pathname = usePathname();
+  const { isLogin, logout } = useContext(AuthContext);
+
+  const handleClick: MouseEventHandler<HTMLButtonElement> = e => {
+    e.preventDefault();
+    logout();
+    return;
+  };
+
+  return (
+    <div className="inline-grid">
+      {isLogin && (
+        <button onClick={handleClick} className="text-base sm:text-xl p-2">
+          ログアウト
+        </button>
+      )}
+      {!isLogin && pathname !== '/login' && (
+        <Link href="/login" className="text-base sm:text-xl p-2">
+          ログイン
+        </Link>
+      )}
+      {!isLogin && pathname !== '/signup' && (
+        <Link href="/signup" className="text-base sm:text-xl p-2">
+          新規登録
+        </Link>
+      )}
+    </div>
+  );
+}
diff --git a/components/AuthContext.tsx b/components/AuthContext.tsx
new file mode 100644
index 0000000..7fe3d2d
--- /dev/null
+++ b/components/AuthContext.tsx
@@ -0,0 +1,79 @@
+'use client';
+import { createContext, useEffect, useState, type ReactNode } from 'react';
+import { usePathname, useRouter } from 'next/navigation';
+
+import {
+  createUser,
+  getLoginUser,
+  loginUser,
+  logoutUser,
+  onLoginUserChanged,
+  type AuthKey
+} from '@/firebase/authentication';
+
+type Value = {
+  isLogin: boolean;
+  signUp: (a: AuthKey) => Promise<void>;
+  login: (a: AuthKey) => Promise<void>;
+  logout: () => Promise<void>;
+};
+const defaultValue: Value = {
+  isLogin: false,
+  signUp: async () => {},
+  login: async () => {},
+  logout: async () => {}
+};
+export const AuthContext = createContext<Value>(defaultValue);
+
+export function AuthProvider({ children }: Readonly<{ children: ReactNode }>) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const [isLogin, setIsLogin] = useState<Value['isLogin']>(!!getLoginUser());
+
+  const signUp: Value['signUp'] = async authKey => {
+    try {
+      await createUser(authKey);
+      setIsLogin(true);
+    } catch (e) {
+      throw e;
+    }
+  };
+
+  const login: Value['login'] = async authKey => {
+    try {
+      await loginUser(authKey);
+      setIsLogin(true);
+    } catch (e) {
+      throw e;
+    }
+  };
+
+  const logout: Value['logout'] = async () => {
+    try {
+      await logoutUser();
+      setIsLogin(false);
+    } catch (e) {
+      throw e;
+    }
+  };
+
+  useEffect(() => {
+    onLoginUserChanged(maybeUser => {
+      setIsLogin(!!maybeUser);
+    });
+  }, []);
+
+  useEffect(() => {
+    const noAuthPage = ['/login', '/signup'];
+    if (!isLogin && !noAuthPage.includes(pathname)) {
+      router.replace('/login');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pathname, isLogin]);
+
+  return (
+    <AuthContext.Provider value={{ isLogin, signUp, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
diff --git a/components/LogoutButton.tsx b/components/LogoutButton.tsx
deleted file mode 100644
index 6f6cae4..0000000
--- a/components/LogoutButton.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-'use client';
-import { useEffect, useState } from 'react';
-import { usePathname, useRouter } from 'next/navigation';
-import { onLoginUserChanged, logoutUser } from '@/firebase/authentication';
-
-export default function LogoutButton() {
-  const router = useRouter();
-  const pathname = usePathname();
-  const [isLogin, setIsLogin] = useState<boolean>(false);
-
-  useEffect(() => {
-    onLoginUserChanged(user => setIsLogin(!!user));
-  }, [pathname]);
-
-  const handleLogout = () => {
-    logoutUser().then(() => router.push('/login'));
-  };
-
-  return (
-    <>
-      {isLogin && (
-        <button onClick={handleLogout} className="text-base sm:text-xl p-2">
-          ログアウト
-        </button>
-      )}
-    </>
-  );
-}
diff --git a/firebase/authentication.ts b/firebase/authentication.ts
index dd60265..3afe7ba 100644
--- a/firebase/authentication.ts
+++ b/firebase/authentication.ts
@@ -1,4 +1,3 @@
-'use client';
 import firebaseApp from './firebaseApp';
 import {
   getAuth,
@@ -6,12 +5,13 @@ import {
   signInWithEmailAndPassword,
   onAuthStateChanged,
   signOut,
-  type AuthError,
   type NextOrObserver,
-  type User
+  type User,
+  type AuthError
 } from 'firebase/auth';
+export type { AuthError };
 
-const auth = getAuth(firebaseApp);
+export const auth = getAuth(firebaseApp);
 
 export type AuthKey = Readonly<{
   email: string;
@@ -20,30 +20,59 @@ export type AuthKey = Readonly<{
 
 export const createUser = async ({ email, password }: AuthKey) => {
   try {
-    await createUserWithEmailAndPassword(auth, email, password);
+    const { user } = await createUserWithEmailAndPassword(
+      auth,
+      email,
+      password
+    );
+    return user;
   } catch (e) {
-    throw e as AuthError;
+    if (!(e instanceof Error)) throw { message: '不明なエラーです。' };
+
+    const { code } = e as AuthError;
+    switch (code) {
+      case 'auth/email-already-in-use':
+        e.message = 'このメールアドレスはすでに登録されています。';
+      case 'auth/invalid-email':
+        e.message = '有効なメールアドレスを入力してください。';
+      case 'auth/operation-not-allowed':
+        e.message = 'アカウント登録は許可されていません。';
+      case 'auth/weak-password':
+        e.message = 'パスワードが脆弱です。';
+      default:
+        break;
+    }
+    throw e;
   }
 };
 
 export const loginUser = async ({ email, password }: AuthKey) => {
   try {
-    signInWithEmailAndPassword(auth, email, password);
-    return;
+    const { user } = await signInWithEmailAndPassword(auth, email, password);
+    return user;
   } catch (e) {
-    throw e as AuthError;
+    if (!(e instanceof Error)) throw e;
+
+    const { code } = e as AuthError;
+    switch (code) {
+      case 'auth/invalid-email':
+        e.message = '有効なメールアドレスを入力してください。';
+      case 'auth/user-disabled':
+        e.message = 'このメールアドレスは使用できません。';
+      case 'auth/user-not-found':
+        e.message = 'このメールアドレスのユーザーは存在しません。';
+      case 'auth/wrong-password':
+        e.message = 'パスワードが間違っています。';
+      default:
+        break;
+    }
+    throw e;
   }
 };
 
 export const getLoginUser = () => auth.currentUser;
 
-export const onLoginUserChanged = (callback: NextOrObserver<User>) =>
-  onAuthStateChanged(auth, callback);
+export const onLoginUserChanged = (f: NextOrObserver<User>) =>
+  onAuthStateChanged(auth, f);
 
-export const logoutUser = async () => {
-  try {
-    await signOut(auth);
-  } catch (e) {
-    throw e as AuthError;
-  }
-};
+export const logoutUser = () => signOut(auth);

From b5304b13b5cf35377bbbd905ba3628c5df0600a1 Mon Sep 17 00:00:00 2001
From: u-sho <26079835+u-sho@users.noreply.github.com>
Date: Fri, 31 May 2024 10:26:30 +0900
Subject: [PATCH 11/15] =?UTF-8?q?firebase=E3=81=AE=E3=82=A2=E3=82=AF?=
 =?UTF-8?q?=E3=82=BB=E3=82=B9=E3=83=AB=E3=83=BC=E3=83=AB=E3=82=92=E8=BF=BD?=
 =?UTF-8?q?=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 firestore.rules | 2 +-
 storage.rules   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/firestore.rules b/firestore.rules
index 72af018..097ed59 100644
--- a/firestore.rules
+++ b/firestore.rules
@@ -13,7 +13,7 @@ service cloud.firestore {
     // all client requests to your Firestore database will be denied until you Update
     // your rules
     match /{document=**} {
-      allow read, write: if request.time < timestamp.date(2024, 6, 16);
+      allow read, write: if request.auth != null;
     }
   }
 }
\ No newline at end of file
diff --git a/storage.rules b/storage.rules
index f08744f..8dd34e4 100644
--- a/storage.rules
+++ b/storage.rules
@@ -6,7 +6,7 @@ rules_version = '2';
 service firebase.storage {
   match /b/{bucket}/o {
     match /{allPaths=**} {
-      allow read, write: if false;
+      allow read, write: if request.auth != null;
     }
   }
 }

From eae331714648771114f4c03cb4f686455321ee2c Mon Sep 17 00:00:00 2001
From: u-sho <26079835+u-sho@users.noreply.github.com>
Date: Fri, 31 May 2024 15:43:33 +0900
Subject: [PATCH 12/15] =?UTF-8?q?=E3=83=9A=E3=83=BC=E3=82=B8=E9=81=B7?=
 =?UTF-8?q?=E7=A7=BB=E3=82=92layout.tsx=E3=81=AB=E5=AF=84=E3=81=9B?=
 =?UTF-8?q?=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/globals.css                          |  8 ++++
 app/layout.tsx                           | 57 +++++++++++++++---------
 app/login/page.tsx                       |  6 +--
 app/signup/page.tsx                      |  6 +--
 components/AppHeader.tsx                 | 42 +++++++++++++++++
 components/AuthButton.tsx                | 36 ---------------
 {components => provider}/AuthContext.tsx | 11 -----
 7 files changed, 93 insertions(+), 73 deletions(-)
 create mode 100644 components/AppHeader.tsx
 delete mode 100644 components/AuthButton.tsx
 rename {components => provider}/AuthContext.tsx (79%)

diff --git a/app/globals.css b/app/globals.css
index a37227f..513461c 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -61,4 +61,12 @@ input[type='file'] {
       content: '↩';
     }
   }
+
+  .button-link {
+    @apply text-center grid grid-flow-col place-content-center;
+    @apply hover:underline;
+    &::after {
+      content: '🔗';
+    }
+  }
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index 16c0def..efa52cd 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,34 +1,51 @@
+'use client';
 import Link from 'next/link';
-import type { Metadata } from 'next';
+import { usePathname, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
 
-import './globals.css';
-
-import { AuthProvider } from '@/components/AuthContext';
-import AuthButton from '@/components/AuthButton';
+import { getLoginUser, onLoginUserChanged } from '@/firebase/authentication';
+import { AuthProvider } from '@/provider/AuthContext';
+import AppHeader from '@/components/AppHeader';
 
-export const metadata: Metadata = {
-  title: 'Firebase Manage Book App',
-  description: 'FirebaseとNext.jsで作られた蔵書管理アプリ'
-};
+import './globals.css';
 
 export default function RootLayout({
   children
 }: Readonly<{ children: React.ReactNode }>) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const [isLogin, setIsLogin] = useState(!!getLoginUser());
+
+  useEffect(() => {
+    onLoginUserChanged(maybeUser => {
+      setIsLogin(!!maybeUser);
+    });
+  }, []);
+
+  useEffect(() => {
+    console.log(pathname, isLogin);
+    if (!isLogin && pathname !== 'login' && pathname !== '/signup') {
+      router.push('/login');
+    }
+  }, [pathname, isLogin, router]);
+
   return (
     <html lang="ja">
+      <head>
+        <title>Firebase Manage Book App</title>
+        <meta
+          name="description"
+          content="FirebaseとNext.jsで作られた蔵書管理アプリ"
+        />
+      </head>
       <body className="min-h-dvh sm:text-2xl">
         <AuthProvider>
-          <header className="w-full inline-grid grid-flow-col place-content-between">
-            <h1 className="font-bold text-xl sm:text-3xl">
-              <Link href="/" className="inline-block p-2">
-                Firebase Book Manage App
-              </Link>
-            </h1>
-            <AuthButton />
-          </header>
-
-          <main className="max-w-3xl mx-auto px-2 text-center">{children}</main>
-
+          <AppHeader />
+          <main className="max-w-3xl mx-auto px-2 text-center">
+            {!isLogin && pathname !== '/login' && pathname !== '/signup'
+              ? 'loading...'
+              : children}
+          </main>
           <footer className="absolute bottom-0 w-full text-sm">
             <ul className="inline-flex justify-between w-full">
               <li className="inline-block p-2">
diff --git a/app/login/page.tsx b/app/login/page.tsx
index 0ef3201..fb0d850 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -2,7 +2,7 @@
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useContext, useState, type FormEvent } from 'react';
-import { AuthContext } from '@/components/AuthContext';
+import { AuthContext } from '@/provider/AuthContext';
 import type { AuthError, AuthKey } from '@/firebase/authentication';
 
 export default function Login() {
@@ -62,8 +62,8 @@ export default function Login() {
         <button type="submit" className="button-center w-full">
           ログイン
         </button>
-        <Link href="/signup" className="w-full text-center">
-          新規登録🔗
+        <Link href="/signup" className="button-link">
+          新規登録
         </Link>
       </form>
     </>
diff --git a/app/signup/page.tsx b/app/signup/page.tsx
index dfb6795..feab10d 100644
--- a/app/signup/page.tsx
+++ b/app/signup/page.tsx
@@ -2,7 +2,7 @@
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useContext, useState, type FormEvent } from 'react';
-import { AuthContext } from '@/components/AuthContext';
+import { AuthContext } from '@/provider/AuthContext';
 import type { AuthError, AuthKey } from '@/firebase/authentication';
 
 export default function SignUp() {
@@ -64,8 +64,8 @@ export default function SignUp() {
         <button type="submit" className="button-center w-full">
           新規登録
         </button>
-        <Link href="/login" className="w-full text-center">
-          ログイン🔗
+        <Link href="/login" className="w-full button-link">
+          ログイン
         </Link>
       </form>
     </>
diff --git a/components/AppHeader.tsx b/components/AppHeader.tsx
new file mode 100644
index 0000000..b400880
--- /dev/null
+++ b/components/AppHeader.tsx
@@ -0,0 +1,42 @@
+'use client';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useContext } from 'react';
+import { AuthContext } from '@/provider/AuthContext';
+
+export default function AppHeader() {
+  const pathname = usePathname();
+  const { isLogin, logout } = useContext(AuthContext);
+
+  return (
+    <header className="w-full inline-grid grid-flow-col place-content-between">
+      <h1 className="font-bold text-xl sm:text-3xl">
+        {isLogin ? (
+          <Link href="/" className="inline-block p-2">
+            Firebase Book Manage App
+          </Link>
+        ) : (
+          <span className="inline-block p-2">Firebase Book Manage App</span>
+        )}
+      </h1>
+      <div className="inline-grid grid-flow-col text-base sm:text-xl p-2">
+        {isLogin ? (
+          <button onClick={logout}>ログアウト</button>
+        ) : (
+          <>
+            {pathname !== '/login' && (
+              <Link href="/login" className="button-link after:hidden">
+                ログイン
+              </Link>
+            )}
+            {pathname !== '/signup' && (
+              <Link href="/signup" className="button-link after:hidden">
+                新規登録
+              </Link>
+            )}
+          </>
+        )}
+      </div>
+    </header>
+  );
+}
diff --git a/components/AuthButton.tsx b/components/AuthButton.tsx
deleted file mode 100644
index f9c0fb3..0000000
--- a/components/AuthButton.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-'use client';
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import { MouseEvent, MouseEventHandler, useContext } from 'react';
-import { AuthContext } from './AuthContext';
-
-export default function AuthButton() {
-  const pathname = usePathname();
-  const { isLogin, logout } = useContext(AuthContext);
-
-  const handleClick: MouseEventHandler<HTMLButtonElement> = e => {
-    e.preventDefault();
-    logout();
-    return;
-  };
-
-  return (
-    <div className="inline-grid">
-      {isLogin && (
-        <button onClick={handleClick} className="text-base sm:text-xl p-2">
-          ログアウト
-        </button>
-      )}
-      {!isLogin && pathname !== '/login' && (
-        <Link href="/login" className="text-base sm:text-xl p-2">
-          ログイン
-        </Link>
-      )}
-      {!isLogin && pathname !== '/signup' && (
-        <Link href="/signup" className="text-base sm:text-xl p-2">
-          新規登録
-        </Link>
-      )}
-    </div>
-  );
-}
diff --git a/components/AuthContext.tsx b/provider/AuthContext.tsx
similarity index 79%
rename from components/AuthContext.tsx
rename to provider/AuthContext.tsx
index 7fe3d2d..a53b940 100644
--- a/components/AuthContext.tsx
+++ b/provider/AuthContext.tsx
@@ -1,6 +1,5 @@
 'use client';
 import { createContext, useEffect, useState, type ReactNode } from 'react';
-import { usePathname, useRouter } from 'next/navigation';
 
 import {
   createUser,
@@ -26,8 +25,6 @@ const defaultValue: Value = {
 export const AuthContext = createContext<Value>(defaultValue);
 
 export function AuthProvider({ children }: Readonly<{ children: ReactNode }>) {
-  const router = useRouter();
-  const pathname = usePathname();
   const [isLogin, setIsLogin] = useState<Value['isLogin']>(!!getLoginUser());
 
   const signUp: Value['signUp'] = async authKey => {
@@ -63,14 +60,6 @@ export function AuthProvider({ children }: Readonly<{ children: ReactNode }>) {
     });
   }, []);
 
-  useEffect(() => {
-    const noAuthPage = ['/login', '/signup'];
-    if (!isLogin && !noAuthPage.includes(pathname)) {
-      router.replace('/login');
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pathname, isLogin]);
-
   return (
     <AuthContext.Provider value={{ isLogin, signUp, login, logout }}>
       {children}

From c473712b2ff968105b861419afd6ec4316b12d86 Mon Sep 17 00:00:00 2001
From: u-sho <26079835+u-sho@users.noreply.github.com>
Date: Fri, 31 May 2024 16:01:46 +0900
Subject: [PATCH 13/15] =?UTF-8?q?=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3?=
 =?UTF-8?q?=E3=82=92github=E3=81=A3=E3=81=BD=E3=81=8F=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/globals.css         | 59 ++++++++++++++++++++++++-----------------
 app/login/page.tsx      |  6 ++---
 app/signup/page.tsx     |  8 +++---
 components/BookForm.tsx |  8 +++---
 4 files changed, 46 insertions(+), 35 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 513461c..a9dac00 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -3,18 +3,21 @@
 @tailwind utilities;
 
 :root {
-  --foreground-rgb: 44, 51, 47;
-  --background-rgb: 220, 255, 236;
-  --accent-foreground-rgba: var(--foreground-rgb), 0.85;
-  --accent-background-image: linear-gradient(135deg, #fecfef 0%, #f698bc 100%);
+  --foreground-rgb: 31, 35,40;
+  --background-rgb: 255, 255, 255;
+  --border-rgb: 208, 215, 222;
+  --button-foreground-rgb: 255, 255, 255;
+  --button-background-rgb: 31, 136, 61;
+  --button-hover-background-rgb: 28, 129, 57;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-rgb: 0, 0, 0;
-    --accent-foreground-rgba: var(--foreground-rgb), 1;
-    --accent-background-image: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+    --foreground-rgb: 197, 209, 222;
+    --background-rgb: 34, 39, 46;
+    --border-rgb: 68, 76, 86;
+    --button-background-rgb: 52, 125, 57;
+    --button-hover-background-rgb: 59, 124, 64;
   }
 }
 
@@ -23,40 +26,48 @@ body {
   background: rgb(var(--background-rgb));
 }
 
-header,
+header {
+  border-bottom: 1px solid rgb(var(--border-rgb));
+}
 footer {
-  background-image: var(--accent-background-image);
-  color: rgba(var(--accent-foreground-rgba));
-
-  a {
-    background: transparent;
-  }
+  border-top: 1px solid rgb(var(--border-rgb));
 }
 
 input,
 textarea {
+  @apply rounded-md px-1;
+
+  border: 1px solid rgb(var(--border-rgb));
+
   @media (prefers-color-scheme: dark) {
-    background: rgb(var(--foreground-rgb));
-    color: rgb(var(--background-rgb));
+    background: rgb(var(--background-rgb));
+    color: rgb(var(--foreground-rgb));
   }
 }
 
 input[type='file'] {
-  background: transparent;
+  @apply bg-transparent px-0;
+
   color: rgb(var(--foreground-rgb));
+  border: none;
 }
 
 @layer components {
   .button-center {
-    @apply inline-block max-w-80 mx-auto p-2 sm:px-4 rounded-lg border-none;
+    @apply inline-block max-w-80 mx-auto py-1 px-2 sm:px-4 rounded-md border-none;
     @apply font-medium;
-    @apply cursor-pointer disabled:cursor-default hover:scale-105;
-    background-image: var(--accent-background-image);
-    color: rgba(var(--accent-foreground-rgba));
+    @apply cursor-pointer disabled:cursor-default;
+
+    background: rgb(var(--button-background-rgb));
+    color: rgb(var(--button-foreground-rgb));
+
+    &:hover {
+      background: rgb(var(--button-hover-background-rgb));
+    }
   }
 
   .button-back {
-    @apply text-base sm:text-lg hover:underline;
+    @apply text-base sm:text-lg hover:text-blue-500 hover:underline;
     &::after {
       content: '↩';
     }
@@ -64,7 +75,7 @@ input[type='file'] {
 
   .button-link {
     @apply text-center grid grid-flow-col place-content-center;
-    @apply hover:underline;
+    @apply hover:text-blue-500 hover:underline;
     &::after {
       content: '🔗';
     }
diff --git a/app/login/page.tsx b/app/login/page.tsx
index fb0d850..d6c736c 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -35,7 +35,7 @@ export default function Login() {
       <h2 className="text-3xl sm:text-4xl font-bold my-6 sm:my-8">ログイン</h2>
       <form
         onSubmit={handleLogin}
-        className="grid grid-cols-2 gap-4 align-middle max-w-96 mx-auto text-2xl"
+        className="grid grid-cols-2 gap-4 max-w-96 mx-auto text-2xl"
       >
         {error && <div className="text-red text-base">{error}</div>}
         <input
@@ -45,7 +45,7 @@ export default function Login() {
           value={formValueEmail}
           onChange={e => setFormValueEmail(e.target.value)}
           required
-          className="col-span-2 rounded-lg ps-1 py-2"
+          className="col-span-2 py-2"
         />
 
         <input
@@ -56,7 +56,7 @@ export default function Login() {
           onChange={e => setFormValuePassword(e.target.value)}
           minLength={8}
           required
-          className="col-span-2 rounded-lg ps-1 py-2"
+          className="col-span-2 py-2"
         />
 
         <button type="submit" className="button-center w-full">
diff --git a/app/signup/page.tsx b/app/signup/page.tsx
index feab10d..ce82601 100644
--- a/app/signup/page.tsx
+++ b/app/signup/page.tsx
@@ -37,7 +37,7 @@ export default function SignUp() {
       <h2 className="text-3xl sm:text-4xl font-bold my-6 sm:my-8">新規登録</h2>
       <form
         onSubmit={handleSignUp}
-        className="grid grid-cols-2 gap-4 align-middle max-w-96 mx-auto text-2xl"
+        className="grid grid-cols-2 gap-4 max-w-96 mx-auto text-2xl"
       >
         {error && <div className="text-red text-base">{error}</div>}
         <input
@@ -47,7 +47,7 @@ export default function SignUp() {
           value={formValueEmail}
           onChange={e => setFormValueEmail(e.target.value)}
           required
-          className="col-span-2 rounded-lg ps-1 py-2"
+          className="col-span-2 py-2"
         />
 
         <input
@@ -58,10 +58,10 @@ export default function SignUp() {
           onChange={e => setFormValuePassword(e.target.value)}
           minLength={8}
           required
-          className="col-span-2 rounded-lg ps-1 py-2"
+          className="col-span-2 py-2"
         />
 
-        <button type="submit" className="button-center w-full">
+        <button type="submit" className="w-full button-center">
           新規登録
         </button>
         <Link href="/login" className="w-full button-link">
diff --git a/components/BookForm.tsx b/components/BookForm.tsx
index 4735adb..c8dd08e 100644
--- a/components/BookForm.tsx
+++ b/components/BookForm.tsx
@@ -112,7 +112,7 @@ export default function BookForm(props: Readonly<Props>) {
           accept="image/*"
           capture="environment"
           onChange={handleImageSelect}
-          className="col-span-4 file:button-center file:py-0 file:sm:mx-1"
+          className="col-span-4 file:button-center file:py-0 file:sm:mr-1"
         />
 
         <label htmlFor="isbn" className="text-right">
@@ -123,7 +123,7 @@ export default function BookForm(props: Readonly<Props>) {
           type="text"
           value={formValueISBN}
           onChange={e => setISBN(e.target.value)}
-          className="col-span-4 rounded-lg ps-1"
+          className="col-span-4"
         />
 
         <label htmlFor="title" className="text-right">
@@ -135,7 +135,7 @@ export default function BookForm(props: Readonly<Props>) {
           value={formValueTitle}
           onChange={e => setTitle(e.target.value)}
           required
-          className="col-span-4 rounded-lg ps-1"
+          className="col-span-4"
         />
 
         <label htmlFor="memo" className="text-right">
@@ -145,7 +145,7 @@ export default function BookForm(props: Readonly<Props>) {
           id="memo"
           value={formValueMemo}
           onChange={e => setMemo(e.target.value)}
-          className="col-span-4 rounded-lg ps-1"
+          className="col-span-4"
         />
 
         <button

From 4711c5e01c2180612c455bf9ad09814aafad8205 Mon Sep 17 00:00:00 2001
From: u-sho <26079835+u-sho@users.noreply.github.com>
Date: Fri, 31 May 2024 16:11:50 +0900
Subject: [PATCH 14/15] =?UTF-8?q?=E3=83=8D=E3=82=B9=E3=83=88=E3=82=92?=
 =?UTF-8?q?=E6=B5=85=E3=81=8F=E3=81=97=E3=81=A6=E4=B8=8D=E8=A6=81=E3=81=AA?=
 =?UTF-8?q?=E3=83=AA=E3=83=B3=E3=82=AF=E3=82=92=E5=89=8A=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/AppHeader.tsx | 23 +++++------------------
 1 file changed, 5 insertions(+), 18 deletions(-)

diff --git a/components/AppHeader.tsx b/components/AppHeader.tsx
index b400880..19ec893 100644
--- a/components/AppHeader.tsx
+++ b/components/AppHeader.tsx
@@ -19,24 +19,11 @@ export default function AppHeader() {
           <span className="inline-block p-2">Firebase Book Manage App</span>
         )}
       </h1>
-      <div className="inline-grid grid-flow-col text-base sm:text-xl p-2">
-        {isLogin ? (
-          <button onClick={logout}>ログアウト</button>
-        ) : (
-          <>
-            {pathname !== '/login' && (
-              <Link href="/login" className="button-link after:hidden">
-                ログイン
-              </Link>
-            )}
-            {pathname !== '/signup' && (
-              <Link href="/signup" className="button-link after:hidden">
-                新規登録
-              </Link>
-            )}
-          </>
-        )}
-      </div>
+      {isLogin && (
+        <button onClick={logout} className="text-base sm:text-xl p-2">
+          ログアウト
+        </button>
+      )}
     </header>
   );
 }

From d8c0f6eb47322072341cba99c777799b5de13add Mon Sep 17 00:00:00 2001
From: Ken Takahashi <takaken@redimpulz.com>
Date: Thu, 11 Jul 2024 16:46:56 +0900
Subject: [PATCH 15/15] =?UTF-8?q?=E3=83=AA=E3=83=95=E3=82=A1=E3=82=AF?=
 =?UTF-8?q?=E3=82=BF=E3=83=AA=E3=83=B3=E3=82=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env => .env.example                |   4 +-
 .gitignore                          |   5 +-
 README.md                           |  56 ++-------
 app/book/[bookId]/edit/page.tsx     |  29 ++++-
 app/book/[bookId]/page.tsx          |  40 +++----
 app/book/new/page.tsx               |   5 +-
 app/layout.tsx                      |  32 +-----
 app/login/page.tsx                  |  44 +++----
 app/page.tsx                        |  73 +++++++-----
 app/signup/page.tsx                 |  46 +++-----
 components/AppHeader.tsx            |  26 ++---
 components/BookForm.tsx             | 171 +++++++++++++---------------
 firebase/{firebaseApp.ts => app.ts} |  11 +-
 firebase/auth.ts                    |   4 +
 firebase/authentication.ts          |  78 -------------
 firebase/firestore.ts               |  72 +-----------
 firebase/storage.ts                 |  43 +------
 firestore.rules                     |  17 +--
 provider/AuthContext.tsx            |  69 ++++-------
 storage.rules                       |   3 -
 types.ts                            |   7 ++
 21 files changed, 293 insertions(+), 542 deletions(-)
 rename .env => .env.example (67%)
 rename firebase/{firebaseApp.ts => app.ts} (58%)
 create mode 100644 firebase/auth.ts
 delete mode 100644 firebase/authentication.ts
 create mode 100644 types.ts

diff --git a/.env b/.env.example
similarity index 67%
rename from .env
rename to .env.example
index 8e6fca5..1371e01 100644
--- a/.env
+++ b/.env.example
@@ -1,5 +1,7 @@
 NEXT_PUBLIC_FIREBASE_API_KEY=
-NEXT_PUBLIC_FIREBASE_PROJECT_ID=
 NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
+NEXT_PUBLIC_FIREBASE_DATABASE_URL=
+NEXT_PUBLIC_FIREBASE_PROJECT_ID=
 NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
+NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
 NEXT_PUBLIC_FIREBASE_APP_ID=
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index c39a806..3c68840 100644
--- a/.gitignore
+++ b/.gitignore
@@ -38,4 +38,7 @@ next-env.d.ts
 # firebase
 firebase-debug.log
 firestore-debug.log
-ui-debug.log
\ No newline at end of file
+ui-debug.log
+
+# env
+.env
\ No newline at end of file
diff --git a/README.md b/README.md
index eaaf2fe..ebac121 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,6 @@
 # firebase-book-manage-app
 
-firebase-book-manage-appは
-自宅やサークルの部室、研究室などの蔵書が管理できるWebアプリです！
+firebase-book-manage-appは自宅やサークルの部室、研究室などの蔵書が管理できるWebアプリです！
 Next.jsとfirebaseで作成しています。
 
 ## 機能一覧
@@ -19,57 +18,18 @@ Next.jsとfirebaseで作成しています。
 - TypeScript
 - React / Next.js
 - Firebase
-    - Cloud Firestore
-    - Authentication
-    - Cloud Storage for Firebase
+  - Cloud Firestore
+  - Authentication
+  - Cloud Storage for Firebase
 - Tailwind CSS
-- Vercel
 
-## 開発のススメ
+## はじめに
 
-はじめに、`.env`ファイルを`.env.local`ファイルとしてコピーし、`.env.local`にfirebase configを設定します．
+`.env.example`ファイルを`.env`ファイルとしてコピーし、Firebaseの設定を追加してください
 
-```sh
-cp .env .env.local
-```
-
-```dotenv:.env.local
-NEXT_PUBLIC_FIREBASE_API_KEY=YourFirebaseAPIkey
-NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-firebase-project-id
-NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-firebase-project-id.firebaseapp.com
-NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-firebase-project-id.appspot.com
-NEXT_PUBLIC_FIREBASE_APP_ID=your:firebase:app:id
-```
-
-Second, run the development server:
+## ローカルでの実行
 
 ```bash
+npm install
 npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
 ```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/app/book/[bookId]/edit/page.tsx b/app/book/[bookId]/edit/page.tsx
index 6bd885c..2a7fecd 100644
--- a/app/book/[bookId]/edit/page.tsx
+++ b/app/book/[bookId]/edit/page.tsx
@@ -1,11 +1,36 @@
+'use client';
+import { useEffect, useState } from 'react';
+import { getDoc, doc } from 'firebase/firestore';
+
+import { firestore } from '@/firebase/firestore';
+import { Book } from '@/types';
+
 import BookForm from '@/components/BookForm';
 import BackHomeButton from '@/components/BackHomeButton';
 
-export default function BookEdit({ params }: { params: { bookId: string } }) {
+export default function Page({ params }: { params: { bookId: string } }) {
+  const { bookId } = params;
+  const [book, setBook] = useState<Book>();
+
+  useEffect(() => {
+    const getBook = async () => {
+      try {
+        const snapShot = await getDoc(doc(firestore, 'books', bookId));
+        setBook({
+          id: bookId,
+          ...snapShot.data()
+        } as Book);
+      } catch (error) {
+        console.log(error);
+      }
+    };
+    if (bookId) getBook();
+  }, [bookId]);
+
   return (
     <>
       <h2 className="my-6 sm:my-8 text-3xl sm:text-4xl font-bold">本の編集</h2>
-      <BookForm type="edit" bookId={params.bookId} />
+      <BookForm book={book} />
       <p className="my-6 text-right">
         <BackHomeButton />
       </p>
diff --git a/app/book/[bookId]/page.tsx b/app/book/[bookId]/page.tsx
index 7240b04..475733f 100644
--- a/app/book/[bookId]/page.tsx
+++ b/app/book/[bookId]/page.tsx
@@ -1,42 +1,44 @@
 'use client';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
+import { getDoc, doc } from 'firebase/firestore';
 
-import { getBook, type Book } from '@/firebase/firestore';
-import { getBookImageURL } from '@/firebase/storage';
+import { firestore } from '@/firebase/firestore';
+import { Book } from '@/types';
 
 import BackHomeButton from '@/components/BackHomeButton';
 import BookImage from '@/components/BookImage';
 
-export default function BookDetail({ params }: { params: { bookId: string } }) {
-  const bookId = params.bookId;
-  const [bookImage, setBookImage] = useState<string>('/200x283.png');
-  const [bookTitle, setBookTitle] = useState<Book['title']>('タイトル未登録');
-  const [bookISBN, setBookISBN] = useState<Book['isbn']>();
-  const [bookMemo, setBookMemo] = useState<Book['memo']>();
+export default function Page({ params }: { params: { bookId: string } }) {
+  const { bookId } = params;
+  const [book, setBook] = useState<Book>();
 
   useEffect(() => {
-    getBook(bookId).then(book => {
-      if (book) {
-        if (book.title) setBookTitle(book.title);
-        setBookISBN(book.isbn);
-        setBookMemo(book.memo);
+    const getBook = async () => {
+      try {
+        const snapShot = await getDoc(doc(firestore, 'books', bookId));
+        setBook({
+          id: bookId,
+          ...snapShot.data()
+        } as Book);
+      } catch (error) {
+        console.log(error);
       }
-      getBookImageURL(book?.image).then(imageURL => setBookImage(imageURL));
-    });
+    };
+    if (bookId) getBook();
   }, [bookId]);
 
   return (
     <>
       <h2 className="text-3xl sm:text-4xl font-bold my-6 sm:my-8">
-        {bookTitle}
+        {book?.title}
       </h2>
-      <BookImage src={bookImage} />
+      <BookImage src={book?.image || '/200x283.png'} />
       <dl className="grid gap-y-4 gap-x-3 grid-cols-5 mt-4 mx-auto">
         <dt className="text-right font-semibold">ISBN</dt>
-        <dd className="text-justify col-span-4">{bookISBN}</dd>
+        <dd className="text-justify col-span-4">{book?.isbn || '-'}</dd>
         <dt className="text-right font-semibold">メモ</dt>
-        <dd className="text-justify col-span-4">{bookMemo}</dd>
+        <dd className="text-justify col-span-4">{book?.memo || '-'}</dd>
       </dl>
       <p className="my-6">
         <Link href={`/book/${bookId}/edit`} className="button-center">
diff --git a/app/book/new/page.tsx b/app/book/new/page.tsx
index 9d81e63..e8c676b 100644
--- a/app/book/new/page.tsx
+++ b/app/book/new/page.tsx
@@ -1,11 +1,12 @@
+'use client';
 import BookForm from '@/components/BookForm';
 import BackHomeButton from '@/components/BackHomeButton';
 
-export default function BookNew() {
+export default function Page() {
   return (
     <>
       <h2 className="my-6 sm:my-8 text-3xl sm:text-4xl font-bold">本の登録</h2>
-      <BookForm type="new" />
+      <BookForm />
       <p className="my-6 text-right">
         <BackHomeButton />
       </p>
diff --git a/app/layout.tsx b/app/layout.tsx
index efa52cd..192d033 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,9 +1,6 @@
 'use client';
 import Link from 'next/link';
-import { usePathname, useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
 
-import { getLoginUser, onLoginUserChanged } from '@/firebase/authentication';
 import { AuthProvider } from '@/provider/AuthContext';
 import AppHeader from '@/components/AppHeader';
 
@@ -11,24 +8,9 @@ import './globals.css';
 
 export default function RootLayout({
   children
-}: Readonly<{ children: React.ReactNode }>) {
-  const router = useRouter();
-  const pathname = usePathname();
-  const [isLogin, setIsLogin] = useState(!!getLoginUser());
-
-  useEffect(() => {
-    onLoginUserChanged(maybeUser => {
-      setIsLogin(!!maybeUser);
-    });
-  }, []);
-
-  useEffect(() => {
-    console.log(pathname, isLogin);
-    if (!isLogin && pathname !== 'login' && pathname !== '/signup') {
-      router.push('/login');
-    }
-  }, [pathname, isLogin, router]);
-
+}: {
+  children: React.ReactNode;
+}) {
   return (
     <html lang="ja">
       <head>
@@ -41,11 +23,7 @@ export default function RootLayout({
       <body className="min-h-dvh sm:text-2xl">
         <AuthProvider>
           <AppHeader />
-          <main className="max-w-3xl mx-auto px-2 text-center">
-            {!isLogin && pathname !== '/login' && pathname !== '/signup'
-              ? 'loading...'
-              : children}
-          </main>
+          <main className="max-w-3xl mx-auto px-2 text-center">{children}</main>
           <footer className="absolute bottom-0 w-full text-sm">
             <ul className="inline-flex justify-between w-full">
               <li className="inline-block p-2">
@@ -63,7 +41,7 @@ export default function RootLayout({
                   target="_blank"
                   rel="noreferrer"
                 >
-                  RedImpulz inc.
+                  {` REDIMPULZ inc.`}
                 </Link>
               </li>
             </ul>
diff --git a/app/login/page.tsx b/app/login/page.tsx
index d6c736c..e1ab263 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -1,32 +1,25 @@
 'use client';
+import { useState, type FormEvent } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
-import { useContext, useState, type FormEvent } from 'react';
-import { AuthContext } from '@/provider/AuthContext';
-import type { AuthError, AuthKey } from '@/firebase/authentication';
+import { signInWithEmailAndPassword } from 'firebase/auth';
 
-export default function Login() {
-  const router = useRouter();
-  const { login } = useContext(AuthContext);
-  const [error, setError] = useState<string | null>(null);
-  const [formValueEmail, setFormValueEmail] = useState('');
-  const [formValuePassword, setFormValuePassword] = useState('');
+import { auth } from '@/firebase/auth';
 
-  const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    setError(null);
+export default function Page() {
+  const { push } = useRouter();
 
-    const authKey = {
-      email: formValueEmail,
-      password: formValuePassword
-    } satisfies AuthKey;
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
 
+  const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
     try {
-      await login(authKey);
-      window.alert('ログインに成功しました。蔵書一覧ページに移動します');
-      router.push('/');
-    } catch (e) {
-      setError((e as AuthError).message);
+      await signInWithEmailAndPassword(auth, email, password);
+      push('/');
+    } catch (error) {
+      console.log(error);
+      window.alert(error);
     }
   };
 
@@ -37,13 +30,12 @@ export default function Login() {
         onSubmit={handleLogin}
         className="grid grid-cols-2 gap-4 max-w-96 mx-auto text-2xl"
       >
-        {error && <div className="text-red text-base">{error}</div>}
         <input
           name="email"
           type="email"
           placeholder="メールアドレス"
-          value={formValueEmail}
-          onChange={e => setFormValueEmail(e.target.value)}
+          value={email}
+          onChange={e => setEmail(e.target.value)}
           required
           className="col-span-2 py-2"
         />
@@ -52,8 +44,8 @@ export default function Login() {
           name="password"
           type="password"
           placeholder="パスワード"
-          value={formValuePassword}
-          onChange={e => setFormValuePassword(e.target.value)}
+          value={password}
+          onChange={e => setPassword(e.target.value)}
           minLength={8}
           required
           className="col-span-2 py-2"
diff --git a/app/page.tsx b/app/page.tsx
index 0b5c4cc..0a132a6 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,55 +1,72 @@
 'use client';
 import Link from 'next/link';
-import { useEffect, useState } from 'react';
-import { getAllBooks, removeBook, type Book } from '@/firebase/firestore';
+import { useContext, useEffect, useState } from 'react';
+import {
+  collection,
+  getDocs,
+  deleteDoc,
+  doc,
+  query,
+  where
+} from 'firebase/firestore';
 
-type BookWithID = Book & { bookId: string };
+import { firestore } from '@/firebase/firestore';
+import { Book } from '@/types';
+import { AuthContext } from '@/provider/AuthContext';
 
-export default function Home() {
-  const [bookList, setBookList] = useState<BookWithID[]>([]);
+export default function Page() {
+  const [books, setBooks] = useState<Book[]>([]);
+
+  const { user } = useContext(AuthContext);
 
   const getBooks = async () => {
-    const booksSnapshot = await getAllBooks();
-    const bookList: BookWithID[] = [];
-    booksSnapshot?.forEach(bookDocument => {
-      const book = bookDocument.data() as Book;
-      bookList.push({
-        bookId: bookDocument.id,
-        ...book
-      });
-    });
-    setBookList(bookList);
+    try {
+      const q = query(
+        collection(firestore, 'books'),
+        where('uid', '==', user?.uid)
+      );
+      const snapShot = await getDocs(q);
+      const data = snapShot.docs.map(doc => ({
+        ...doc.data(),
+        id: doc.id
+      })) as Book[];
+      setBooks(data);
+    } catch (error) {
+      console.error(error);
+    }
   };
 
   useEffect(() => {
     getBooks();
-  }, []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [user?.uid]);
 
-  const handleDelete = async (book: BookWithID) => {
-    if (window.confirm(`『${book.title}』を本当に削除しますか？`)) {
-      await removeBook(book.bookId, book);
-      await getBooks();
+  const handleDelete = async (book: Book) => {
+    try {
+      if (window.confirm(`「${book.title}」を削除しますか？`)) {
+        await deleteDoc(doc(firestore, 'books', book.id));
+        await getBooks();
+      }
+    } catch (error) {
+      console.error(error);
     }
-    return;
   };
 
   return (
     <>
       <h2 className="mt-6 sm:mt-8 text-3xl sm:text-4xl font-bold">蔵書一覧</h2>
       <ul className="grid gap-y-2 sm:gap-x-4 grid-cols-5 my-6 sm:my-12">
-        {bookList.map(book => (
-          <li key={book.bookId} className="contents">
-            <span className="col-span-3">
-              {book.title ? book.title : book.isbn}
-            </span>
+        {books.map(x => (
+          <li key={x.id} className="contents">
+            <span className="col-span-3">{x.title ? x.title : x.isbn}</span>
             <span className="w-fit ml-auto">
-              <Link href={`/book/${book.bookId}`} className="button-center">
+              <Link href={`/book/${x.id}`} className="button-center">
                 詳細
               </Link>
             </span>
             <button
               type="button"
-              onClick={() => handleDelete(book)}
+              onClick={() => handleDelete(x)}
               className="text-left"
             >
               🗑️
diff --git a/app/signup/page.tsx b/app/signup/page.tsx
index ce82601..87a4040 100644
--- a/app/signup/page.tsx
+++ b/app/signup/page.tsx
@@ -1,34 +1,25 @@
 'use client';
+import { useState, type FormEvent } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
-import { useContext, useState, type FormEvent } from 'react';
-import { AuthContext } from '@/provider/AuthContext';
-import type { AuthError, AuthKey } from '@/firebase/authentication';
 
-export default function SignUp() {
-  const router = useRouter();
-  const { signUp } = useContext(AuthContext);
-  const [error, setError] = useState<string | null>(null);
-  const [formValueEmail, setFormValueEmail] = useState('');
-  const [formValuePassword, setFormValuePassword] = useState('');
+import { createUserWithEmailAndPassword } from 'firebase/auth';
+import { auth } from '@/firebase/auth';
 
-  const handleSignUp = async (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    setError(null);
+export default function Page() {
+  const { push } = useRouter();
 
-    const authKey = {
-      email: formValueEmail,
-      password: formValuePassword
-    } satisfies AuthKey;
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
 
+  const handleSignUp = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
     try {
-      await signUp(authKey);
-      window.alert(
-        `${authKey.email} を登録しました。蔵書一覧ページに移動します。`
-      );
-      router.push('/');
-    } catch (e) {
-      setError((e as AuthError).message);
+      await createUserWithEmailAndPassword(auth, email, password);
+      push('/');
+    } catch (error) {
+      console.log(error);
+      window.alert(error);
     }
   };
 
@@ -39,13 +30,12 @@ export default function SignUp() {
         onSubmit={handleSignUp}
         className="grid grid-cols-2 gap-4 max-w-96 mx-auto text-2xl"
       >
-        {error && <div className="text-red text-base">{error}</div>}
         <input
           name="email"
           type="email"
           placeholder="メールアドレス"
-          value={formValueEmail}
-          onChange={e => setFormValueEmail(e.target.value)}
+          value={email}
+          onChange={e => setEmail(e.target.value)}
           required
           className="col-span-2 py-2"
         />
@@ -54,8 +44,8 @@ export default function SignUp() {
           name="password"
           type="password"
           placeholder="パスワード"
-          value={formValuePassword}
-          onChange={e => setFormValuePassword(e.target.value)}
+          value={password}
+          onChange={e => setPassword(e.target.value)}
           minLength={8}
           required
           className="col-span-2 py-2"
diff --git a/components/AppHeader.tsx b/components/AppHeader.tsx
index 19ec893..ebb909f 100644
--- a/components/AppHeader.tsx
+++ b/components/AppHeader.tsx
@@ -1,28 +1,28 @@
 'use client';
 import Link from 'next/link';
-import { usePathname } from 'next/navigation';
 import { useContext } from 'react';
+import { signOut } from 'firebase/auth';
+
 import { AuthContext } from '@/provider/AuthContext';
+import { auth } from '@/firebase/auth';
 
 export default function AppHeader() {
-  const pathname = usePathname();
-  const { isLogin, logout } = useContext(AuthContext);
+  const { user } = useContext(AuthContext);
+  const isLogin = !!user;
 
   return (
     <header className="w-full inline-grid grid-flow-col place-content-between">
       <h1 className="font-bold text-xl sm:text-3xl">
-        {isLogin ? (
-          <Link href="/" className="inline-block p-2">
-            Firebase Book Manage App
-          </Link>
-        ) : (
-          <span className="inline-block p-2">Firebase Book Manage App</span>
-        )}
+        <Link href="/" className="inline-block p-2">
+          Firebase Book Manage App
+        </Link>
       </h1>
       {isLogin && (
-        <button onClick={logout} className="text-base sm:text-xl p-2">
-          ログアウト
-        </button>
+        <div className="text-base sm:text-xl p-2">
+          {user.email}
+          {` / `}
+          <button onClick={() => signOut(auth)}>ログアウト</button>
+        </div>
       )}
     </header>
   );
diff --git a/components/BookForm.tsx b/components/BookForm.tsx
index c8dd08e..af441d0 100644
--- a/components/BookForm.tsx
+++ b/components/BookForm.tsx
@@ -1,99 +1,93 @@
 'use client';
 import { useRouter } from 'next/navigation';
-import { useEffect, useState, type ChangeEvent, type FormEvent } from 'react';
-
-import { addBook, getBook, updateBook, type Book } from '@/firebase/firestore';
 import {
-  addBookImage,
-  getBookImageURL,
-  removeBookImage
-} from '@/firebase/storage';
+  useContext,
+  useEffect,
+  useState,
+  type ChangeEvent,
+  type FormEvent
+} from 'react';
+
+import { addDoc, doc, collection, updateDoc } from 'firebase/firestore';
+import { ref, uploadBytes, getDownloadURL } from 'firebase/storage';
+
+import { firestore } from '@/firebase/firestore';
+import { storage } from '@/firebase/storage';
+import { Book } from '@/types';
+
+import { AuthContext } from '@/provider/AuthContext';
+
 import BookImage from './BookImage';
 
-type RBook = Required<Book>;
+type Props = { book?: Book };
+
+export default function BookForm({ book }: Props) {
+  const { push } = useRouter();
+
+  const { user } = useContext(AuthContext);
 
-type Props = { type: 'new' } | { type: 'edit'; bookId: string };
+  const [isLoading, setIsLoading] = useState(false);
+  const [title, setTitle] = useState('');
+  const [image, setImage] = useState<File>();
+  const [imageUrl, setImageUrl] = useState('');
+  const [ISBN, setISBN] = useState('');
+  const [memo, setMemo] = useState('');
 
-export default function BookForm(props: Readonly<Props>) {
-  const router = useRouter();
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [formValueImage, setImage] = useState<File>();
-  const [formValueImageURL, setImageURL] =
-    useState<RBook['image']>('/200x283.png');
-  const [formValueISBN, setISBN] = useState<RBook['isbn']>('');
-  const [formValueTitle, setTitle] = useState<RBook['title']>('');
-  const [formValueMemo, setMemo] = useState<RBook['memo']>('');
-  const isNew = props.type === 'new';
+  const isNew = !book;
 
-  const [book, setBook] = useState<Book>();
   useEffect(() => {
-    if (props.type === 'edit') {
-      getBook(props.bookId).then(book => {
-        if (book) {
-          setBook(book as Book);
-          getBookImageURL(book.image).then(imageURL => setImageURL(imageURL));
-          setISBN(book.isbn || '');
-          setTitle(book.title || '');
-          setMemo(book.memo || '');
-        }
-        return;
-      });
+    if (book) {
+      setTitle(book.title);
+      setISBN(book.isbn || '');
+      setMemo(book.memo || '');
+      setImageUrl(book.image || '');
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.type]);
+  }, [book]);
 
-  const handleImageSelect = (event: ChangeEvent<HTMLInputElement>) => {
-    event.preventDefault();
-
-    const imageFile = event.target.files ? event.target.files[0] : null;
+  const handleImageSelect = (e: ChangeEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    const imageFile = e.target.files ? e.target.files[0] : null;
     if (imageFile) {
       setImage(imageFile);
-      setImageURL(URL.createObjectURL(imageFile));
+      setImageUrl(URL.createObjectURL(imageFile));
     }
   };
 
-  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
     setIsLoading(true);
-
-    const getNewBook = async () => {
-      const newBook: Book = {
-        image: book?.image,
-        isbn: formValueISBN,
-        title: formValueTitle,
-        memo: formValueMemo
-      };
-      if (formValueImage) {
-        // 古いほうは削除
-        if (typeof book?.image === 'string') await removeBookImage(book.image);
-        newBook.image = await addBookImage(formValueImage);
+    let uploadImageUrl = '';
+    let bookId = book?.id;
+    try {
+      if (image) {
+        const imagePath = `images/${Date.now()}`;
+        await uploadBytes(ref(storage, imagePath), image);
+        uploadImageUrl = await getDownloadURL(ref(storage, imagePath));
       }
-      return newBook;
-    };
-
-    const newBookString =
-      ` 書影: ${formValueImage?.name || '未登録'}\n` +
-      ` ISBN: ${formValueISBN || '未登録'}\n` +
-      ` タイトル: ${formValueTitle}\n` +
-      ` メモ: ${formValueMemo || '未登録'}`;
-
-    if (isNew) {
-      if (window.confirm(`次の内容で登録しますか？\n${newBookString}`)) {
-        const newBook = await getNewBook();
-        const newBookId = await addBook(newBook);
-        window.alert(`『${formValueTitle}』を登録しました。`);
-        router.push(`/book/${newBookId}`);
-      }
-    } else {
-      if (window.confirm(`次の内容に更新しますか？\n${newBookString}`)) {
-        const newBook = await getNewBook();
-        await updateBook(props.bookId, newBook);
-        window.alert('編集内容を保存しました。');
-        router.push(`/book/${props.bookId}`);
+      if (isNew) {
+        const doc = await addDoc(collection(firestore, 'books'), {
+          uid: user?.uid,
+          title: title,
+          image: uploadImageUrl,
+          isbn: ISBN,
+          memo: memo
+        });
+        bookId = doc.id;
+      } else {
+        await updateDoc(doc(firestore, 'books', book.id), {
+          title: title,
+          image: uploadImageUrl || book.image,
+          isbn: ISBN,
+          memo: memo
+        });
       }
+      setIsLoading(false);
+      window.alert('保存しました');
+      push(`/book/${bookId}`);
+    } catch (error) {
+      console.log(error);
     }
     setIsLoading(false);
-    return;
   };
 
   return (
@@ -102,7 +96,7 @@ export default function BookForm(props: Readonly<Props>) {
         onSubmit={handleSubmit}
         className="grid grid-cols-5 gap-4 align-middle leading-relaxed"
       >
-        <BookImage src={formValueImageURL} className="col-span-5" />
+        <BookImage src={imageUrl || '/200x283.png'} className="col-span-5" />
         <label htmlFor="image" className="text-right">
           画像
         </label>
@@ -110,31 +104,30 @@ export default function BookForm(props: Readonly<Props>) {
           name="image"
           type="file"
           accept="image/*"
-          capture="environment"
           onChange={handleImageSelect}
           className="col-span-4 file:button-center file:py-0 file:sm:mr-1"
         />
 
-        <label htmlFor="isbn" className="text-right">
-          ISBN
+        <label htmlFor="title" className="text-right">
+          タイトル
         </label>
         <input
-          id="isbn"
+          id="title"
           type="text"
-          value={formValueISBN}
-          onChange={e => setISBN(e.target.value)}
+          value={title}
+          onChange={e => setTitle(e.target.value)}
+          required
           className="col-span-4"
         />
 
-        <label htmlFor="title" className="text-right">
-          タイトル
+        <label htmlFor="isbn" className="text-right">
+          ISBN
         </label>
         <input
-          id="title"
+          id="isbn"
           type="text"
-          value={formValueTitle}
-          onChange={e => setTitle(e.target.value)}
-          required
+          value={ISBN}
+          onChange={e => setISBN(e.target.value)}
           className="col-span-4"
         />
 
@@ -143,7 +136,7 @@ export default function BookForm(props: Readonly<Props>) {
         </label>
         <textarea
           id="memo"
-          value={formValueMemo}
+          value={memo}
           onChange={e => setMemo(e.target.value)}
           className="col-span-4"
         />
diff --git a/firebase/firebaseApp.ts b/firebase/app.ts
similarity index 58%
rename from firebase/firebaseApp.ts
rename to firebase/app.ts
index 849041b..e01d20b 100644
--- a/firebase/firebaseApp.ts
+++ b/firebase/app.ts
@@ -1,13 +1,12 @@
 import { initializeApp } from 'firebase/app';
+import { getStorage } from 'firebase/storage';
 
-const firebaseConfig = {
+export const firebaseApp = initializeApp({
   apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
   authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
+  databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
   projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
   storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
   appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID
-};
-
-const firebaseApp = initializeApp(firebaseConfig);
-
-export default firebaseApp;
+});
diff --git a/firebase/auth.ts b/firebase/auth.ts
new file mode 100644
index 0000000..446ac09
--- /dev/null
+++ b/firebase/auth.ts
@@ -0,0 +1,4 @@
+import { getAuth } from 'firebase/auth';
+import { firebaseApp } from './app';
+
+export const auth = getAuth(firebaseApp);
diff --git a/firebase/authentication.ts b/firebase/authentication.ts
deleted file mode 100644
index 3afe7ba..0000000
--- a/firebase/authentication.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import firebaseApp from './firebaseApp';
-import {
-  getAuth,
-  createUserWithEmailAndPassword,
-  signInWithEmailAndPassword,
-  onAuthStateChanged,
-  signOut,
-  type NextOrObserver,
-  type User,
-  type AuthError
-} from 'firebase/auth';
-export type { AuthError };
-
-export const auth = getAuth(firebaseApp);
-
-export type AuthKey = Readonly<{
-  email: string;
-  password: string;
-}>;
-
-export const createUser = async ({ email, password }: AuthKey) => {
-  try {
-    const { user } = await createUserWithEmailAndPassword(
-      auth,
-      email,
-      password
-    );
-    return user;
-  } catch (e) {
-    if (!(e instanceof Error)) throw { message: '不明なエラーです。' };
-
-    const { code } = e as AuthError;
-    switch (code) {
-      case 'auth/email-already-in-use':
-        e.message = 'このメールアドレスはすでに登録されています。';
-      case 'auth/invalid-email':
-        e.message = '有効なメールアドレスを入力してください。';
-      case 'auth/operation-not-allowed':
-        e.message = 'アカウント登録は許可されていません。';
-      case 'auth/weak-password':
-        e.message = 'パスワードが脆弱です。';
-      default:
-        break;
-    }
-    throw e;
-  }
-};
-
-export const loginUser = async ({ email, password }: AuthKey) => {
-  try {
-    const { user } = await signInWithEmailAndPassword(auth, email, password);
-    return user;
-  } catch (e) {
-    if (!(e instanceof Error)) throw e;
-
-    const { code } = e as AuthError;
-    switch (code) {
-      case 'auth/invalid-email':
-        e.message = '有効なメールアドレスを入力してください。';
-      case 'auth/user-disabled':
-        e.message = 'このメールアドレスは使用できません。';
-      case 'auth/user-not-found':
-        e.message = 'このメールアドレスのユーザーは存在しません。';
-      case 'auth/wrong-password':
-        e.message = 'パスワードが間違っています。';
-      default:
-        break;
-    }
-    throw e;
-  }
-};
-
-export const getLoginUser = () => auth.currentUser;
-
-export const onLoginUserChanged = (f: NextOrObserver<User>) =>
-  onAuthStateChanged(auth, f);
-
-export const logoutUser = () => signOut(auth);
diff --git a/firebase/firestore.ts b/firebase/firestore.ts
index 45db2c7..7df6793 100644
--- a/firebase/firestore.ts
+++ b/firebase/firestore.ts
@@ -1,70 +1,4 @@
-import firebaseApp from './firebaseApp';
-import {
-  getFirestore,
-  collection,
-  doc,
-  addDoc,
-  getDoc,
-  getDocs,
-  updateDoc,
-  deleteDoc
-} from 'firebase/firestore';
-import { removeBookImage } from './storage';
+import { getFirestore } from 'firebase/firestore';
+import { firebaseApp } from './app';
 
-const firestore = getFirestore(firebaseApp);
-const booksCollection = collection(firestore, '/books');
-
-export type Book = {
-  image?: string;
-  isbn?: string;
-  title: string;
-  memo?: string;
-};
-
-export const addBook = async (book: Readonly<Book>) => {
-  try {
-    const bookId = (await addDoc(booksCollection, book)).id;
-    return bookId;
-  } catch (e) {
-    console.error('! Error adding document: ', e);
-  }
-};
-
-export const getBook = async (bookId: string) => {
-  try {
-    const querySnapshot = await getDoc(doc(firestore, 'books', bookId));
-    if (querySnapshot.exists()) {
-      return querySnapshot.data() as Book;
-    } else {
-      console.error('! Error no such document!');
-    }
-  } catch (e) {
-    console.error('! Error getting document: ', e);
-  }
-};
-
-export const getAllBooks = async () => {
-  try {
-    const querySnapshot = await getDocs(booksCollection);
-    return querySnapshot;
-  } catch (e) {
-    console.error('! Error getting documents: ', e);
-  }
-};
-
-export const updateBook = async (bookId: string, book: Partial<Book>) => {
-  try {
-    await updateDoc(doc(firestore, 'books', bookId), book);
-  } catch (e) {
-    console.error('! Error updating document: ', e);
-  }
-};
-
-export const removeBook = async (bookId: string, book: Readonly<Book>) => {
-  try {
-    if (book.image) await removeBookImage(book.image);
-    await deleteDoc(doc(firestore, 'books', bookId));
-  } catch (e) {
-    console.error('! Error deleting document: ', e);
-  }
-};
+export const firestore = getFirestore(firebaseApp);
diff --git a/firebase/storage.ts b/firebase/storage.ts
index c61715d..0ddb7ee 100644
--- a/firebase/storage.ts
+++ b/firebase/storage.ts
@@ -1,41 +1,4 @@
-import firebaseApp from './firebaseApp';
-import {
-  getStorage,
-  ref,
-  uploadBytes,
-  getDownloadURL,
-  deleteObject
-} from 'firebase/storage';
+import { getStorage } from 'firebase/storage';
+import { firebaseApp } from './app';
 
-const storage = getStorage(firebaseApp);
-
-export const addBookImage = async (image: File) => {
-  console.log(image);
-  try {
-    // TODO: uuidで一意にしたい
-    const imagePath = `images/${image.name}`;
-    const result = await uploadBytes(ref(storage, imagePath), image);
-    return result.metadata.fullPath;
-  } catch (e) {
-    console.error('! Error adding image: ', e);
-  }
-};
-
-export const getBookImageURL = async (imagePath?: string) => {
-  if (!imagePath) return '/200x283.png';
-  try {
-    const url = await getDownloadURL(ref(storage, imagePath));
-    return url;
-  } catch (e) {
-    console.error('! Error getting image URL: ', e);
-    return '/200x283.png';
-  }
-};
-
-export const removeBookImage = async (imagePath: string) => {
-  try {
-    await deleteObject(ref(storage, imagePath));
-  } catch (e) {
-    console.error('! Error deleting image: ', e);
-  }
-};
+export const storage = getStorage(firebaseApp);
diff --git a/firestore.rules b/firestore.rules
index 097ed59..e27f108 100644
--- a/firestore.rules
+++ b/firestore.rules
@@ -2,18 +2,11 @@ rules_version = '2';
 
 service cloud.firestore {
   match /databases/{database}/documents {
-
-    // This rule allows anyone with your Firestore database reference to view, edit,
-    // and delete all data in your Firestore database. It is useful for getting
-    // started, but it is configured to expire after 30 days because it
-    // leaves your app open to attackers. At that time, all client
-    // requests to your Firestore database will be denied.
-    //
-    // Make sure to write security rules for your app before that time, or else
-    // all client requests to your Firestore database will be denied until you Update
-    // your rules
-    match /{document=**} {
-      allow read, write: if request.auth != null;
+    match /books/{bookId} {
+      allow read: if request.auth != null && request.auth.uid == resource.data.uid;
+      allow create: if request.auth != null;
+      allow update: if request.auth != null && request.auth.uid == resource.data.uid;
+      allow delete: if request.auth != null && request.auth.uid == resource.data.uid;
     }
   }
 }
\ No newline at end of file
diff --git a/provider/AuthContext.tsx b/provider/AuthContext.tsx
index a53b940..a2f526c 100644
--- a/provider/AuthContext.tsx
+++ b/provider/AuthContext.tsx
@@ -1,68 +1,37 @@
 'use client';
 import { createContext, useEffect, useState, type ReactNode } from 'react';
+import { useRouter, usePathname } from 'next/navigation';
+import { onAuthStateChanged, User } from 'firebase/auth';
 
-import {
-  createUser,
-  getLoginUser,
-  loginUser,
-  logoutUser,
-  onLoginUserChanged,
-  type AuthKey
-} from '@/firebase/authentication';
+import { auth } from '@/firebase/auth';
 
 type Value = {
-  isLogin: boolean;
-  signUp: (a: AuthKey) => Promise<void>;
-  login: (a: AuthKey) => Promise<void>;
-  logout: () => Promise<void>;
+  user: User | null;
 };
+
 const defaultValue: Value = {
-  isLogin: false,
-  signUp: async () => {},
-  login: async () => {},
-  logout: async () => {}
+  user: null
 };
 export const AuthContext = createContext<Value>(defaultValue);
 
-export function AuthProvider({ children }: Readonly<{ children: ReactNode }>) {
-  const [isLogin, setIsLogin] = useState<Value['isLogin']>(!!getLoginUser());
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const { push } = useRouter();
+  const pathname = usePathname();
 
-  const signUp: Value['signUp'] = async authKey => {
-    try {
-      await createUser(authKey);
-      setIsLogin(true);
-    } catch (e) {
-      throw e;
-    }
-  };
-
-  const login: Value['login'] = async authKey => {
-    try {
-      await loginUser(authKey);
-      setIsLogin(true);
-    } catch (e) {
-      throw e;
-    }
-  };
-
-  const logout: Value['logout'] = async () => {
-    try {
-      await logoutUser();
-      setIsLogin(false);
-    } catch (e) {
-      throw e;
-    }
-  };
+  const [user, setUser] = useState<User | null>(null);
 
   useEffect(() => {
-    onLoginUserChanged(maybeUser => {
-      setIsLogin(!!maybeUser);
-    });
+    onAuthStateChanged(auth, setUser);
   }, []);
 
+  useEffect(() => {
+    const isLogin = !!user;
+    if (!isLogin && pathname !== 'login' && pathname !== '/signup') {
+      push('/login');
+    }
+  }, [pathname, push, user]);
+
   return (
-    <AuthContext.Provider value={{ isLogin, signUp, login, logout }}>
-      {children}
-    </AuthContext.Provider>
+    <AuthContext.Provider value={{ user }}>{children}</AuthContext.Provider>
   );
 }
diff --git a/storage.rules b/storage.rules
index 8dd34e4..7c2f99b 100644
--- a/storage.rules
+++ b/storage.rules
@@ -1,8 +1,5 @@
 rules_version = '2';
 
-// Craft rules based on data in your Firestore database
-// allow write: if firestore.get(
-//    /databases/(default)/documents/users/$(request.auth.uid)).data.isAdmin;
 service firebase.storage {
   match /b/{bucket}/o {
     match /{allPaths=**} {
diff --git a/types.ts b/types.ts
new file mode 100644
index 0000000..ee18974
--- /dev/null
+++ b/types.ts
@@ -0,0 +1,7 @@
+export type Book = {
+  id: string;
+  title: string;
+  image?: string;
+  isbn?: string;
+  memo?: string;
+};