Develop

.env.example

@@ -0,0 +1,7 @@
+NEXT_PUBLIC_FIREBASE_API_KEY=
+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=

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "red-firebase-book-manage-app"
+  }
+}

.gitignore

@@ -34,3 +34,11 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# firebase
+firebase-debug.log
+firestore-debug.log
+ui-debug.log
+
+# env
+.env

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "arrowParens": "avoid",
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "none"
+}

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "bradlc.vscode-tailwindcss",
+    "dotenv.dotenv-vscode",
+    "chflick.firecode"
+  ]
+}

.vscode/settings.json

@@ -0,0 +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"
+}

README.md

@@ -1,36 +1,35 @@
-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).
+# firebase-book-manage-app
 
-## Getting Started
+firebase-book-manage-appは自宅やサークルの部室、研究室などの蔵書が管理できるWebアプリです！
+Next.jsとfirebaseで作成しています。
 
-First, run the development server:
+## 機能一覧
 
-```bash
-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
+- TypeScript
+- React / Next.js
+- Firebase
+  - Cloud Firestore
+  - Authentication
+  - Cloud Storage for Firebase
+- Tailwind CSS
 
-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.
+`.env.example`ファイルを`.env`ファイルとしてコピーし、Firebaseの設定を追加してください
 
-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.
+```bash
+npm install
+npm run dev
+```

app/book/[bookId]/edit/page.tsx

@@ -0,0 +1,39 @@
+'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 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 book={book} />
+      <p className="my-6 text-right">
+        <BackHomeButton />
+      </p>
+    </>
+  );
+}

app/book/[bookId]/page.tsx

@@ -0,0 +1,53 @@
+'use client';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { getDoc, doc } from 'firebase/firestore';
+
+import { firestore } from '@/firebase/firestore';
+import { Book } from '@/types';
+
+import BackHomeButton from '@/components/BackHomeButton';
+import BookImage from '@/components/BookImage';
+
+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="text-3xl sm:text-4xl font-bold my-6 sm:my-8">
+        {book?.title}
+      </h2>
+      <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">{book?.isbn || '-'}</dd>
+        <dt className="text-right font-semibold">メモ</dt>
+        <dd className="text-justify col-span-4">{book?.memo || '-'}</dd>
+      </dl>
+      <p className="my-6">
+        <Link href={`/book/${bookId}/edit`} className="button-center">
+          編集する
+        </Link>
+      </p>
+      <p className="my-6 text-right">
+        <BackHomeButton />
+      </p>
+    </>
+  );
+}

app/book/new/page.tsx

@@ -0,0 +1,15 @@
+'use client';
+import BookForm from '@/components/BookForm';
+import BackHomeButton from '@/components/BackHomeButton';
+
+export default function Page() {
+  return (
+    <>
+      <h2 className="my-6 sm:my-8 text-3xl sm:text-4xl font-bold">本の登録</h2>
+      <BookForm />
+      <p className="my-6 text-right">
+        <BackHomeButton />
+      </p>
+    </>
+  );
+}

app/globals.css

@@ -3,31 +3,81 @@
 @tailwind utilities;
 
 :root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+  --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-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
+    --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;
   }
 }
 
 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));
 }
 
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
+header {
+  border-bottom: 1px solid rgb(var(--border-rgb));
+}
+footer {
+  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(--background-rgb));
+    color: rgb(var(--foreground-rgb));
+  }
+}
+
+input[type='file'] {
+  @apply bg-transparent px-0;
+
+  color: rgb(var(--foreground-rgb));
+  border: none;
+}
+
+@layer components {
+  .button-center {
+    @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;
+
+    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:text-blue-500 hover:underline;
+    &::after {
+      content: '↩';
+    }
+  }
+
+  .button-link {
+    @apply text-center grid grid-flow-col place-content-center;
+    @apply hover:text-blue-500 hover:underline;
+    &::after {
+      content: '🔗';
+    }
   }
 }