chore: add avator icon

.env.example

@@ -1,6 +1,8 @@
 # frontend
 VITE_API_URL=
+VITE_CLIENT_URL=
 VITE_REDIRECT_URL=
+VITE_IDENTEAPOT_SALT=
 
 # backend
 POSTGRES_USER=

.github/workflows/deploy-frontend.yaml

@@ -26,6 +26,7 @@ jobs:
           VITE_API_URL: ${{ secrets.VITE_API_URL }}
           VITE_CLIENT_URL: ${{ secrets.VITE_CLIENT_URL }}
           VITE_REDIRECT_URL: ${{ secrets.VITE_REDIRECT_URL }}
+          VITE_IDENTEAPOT_SALT: ${{ secrets.VITE_IDENTEAPOT_SALT }}
         run: nix develop --command bash -c "pnpm i && pnpm run build"
       # Deploy Frontend to Cloudflare Workers
       - name: Deploy Frontend to Cloudflare Workers

.github/workflows/preview-frontend.yaml

@@ -28,6 +28,7 @@ jobs:
           VITE_API_URL: ${{ secrets.VITE_API_URL }}
           VITE_CLIENT_URL: ${{ secrets.VITE_CLIENT_URL }}
           VITE_REDIRECT_URL: ${{ secrets.VITE_REDIRECT_URL }}
+          VITE_IDENTEAPOT_SALT: ${{ secrets.VITE_IDENTEAPOT_SALT }}
         run: nix develop --command bash -c "pnpm i && pnpm run frontend:build"
       # Deploy Preview to Cloudflare Workers
       # Ref: https://zenn.dev/lalalatotoro/articles/b8fa632b53d332

AI.md

@@ -93,39 +93,3 @@ groupのメンバー
 貸し借りの登録ボタン
 {groupId}の履歴一覧
 ※各履歴には、削除ボタンを付ける (削除すると、削除したメンバーがその項目に表示されると共に、その項目の文字列に訂正線が引かれる。「削除されました」の文字も追加する)
-
-
-
-- メモ
-
-```ts
-import { useEffect, type FC } from 'react';
-// @tanstack/react-query
-import { $api } from '../../api/fetchClient';
-// react-router
-import { useNavigate } from 'react-router';
-
-const SessionCheck: FC = () => {
-  // sessionのチェック
-  const navigate = useNavigate();
-  const sessionCheckMutation = $api.useMutation('get', '/api/session', {
-    onError: () => {
-      navigate('/login', { replace: true });
-    },
-  });
-  useEffect(() => {
-    sessionCheckMutation.mutate({ credentials: 'include' });
-  }, []);
-
-  return (
-    <>
-      <h1>Pay Crew2</h1>
-      {sessionCheckMutation.isPending && <p>セッションの確認中...</p>}
-      {sessionCheckMutation.isError && <p>セッションが無効です。ログインページへリダイレクトします...。</p>}
-      {sessionCheckMutation.isSuccess && <p>各コンテンツ</p>;};
-    </>
-    );
-}
-
-export default SessionCheck;
-```

package.json

@@ -84,6 +84,7 @@
     "@hookform/resolvers": "catalog:frontend",
     "@scalar/hono-api-reference": "catalog:backend",
     "@tanstack/react-query": "^5.90.5",
+    "@teapotlabs/identeapots": "catalog:frontend",
     "@types/pg": "catalog:backend",
     "@types/react": "catalog:frontend",
     "@types/react-dom": "catalog:frontend",

pnpm-workspace.yaml

@@ -33,6 +33,7 @@ catalogs:
     '@hookform/error-message': ^2.0.1
     '@hookform/resolvers': ^5.2.2
     '@tanstack/react-query': ^5.90.5
+    "@teapotlabs/identeapots": ^1.1.1
     '@types/react': ^19.2.2
     '@types/react-dom': ^19.2.2
     '@vitejs/plugin-react-swc': ^4.2.0

products/frontend/.env.example

@@ -1,3 +1,4 @@
 VITE_API_URL=
 VITE_CLIENT_URL=
 VITE_REDIRECT_URL=
+VITE_IDENTEAPOT_SALT=

products/frontend/package.json

@@ -15,6 +15,7 @@
     "ui": "vitest run --ui --typecheck"
   },
   "dependencies": {
+    "@teapotlabs/identeapots": "catalog:frontend",
     "@hookform/error-message": "catalog:frontend",
     "@hookform/resolvers": "catalog:frontend",
     "better-auth": "catalog:",

products/frontend/src/api/openapi.d.ts

@@ -30,6 +30,8 @@ export interface paths {
                         "application/json": {
                             user_id: string;
                             user_name: string;
+                            /** Format: uri */
+                            user_avatar_url: string | null;
                         };
                     };
                 };

products/frontend/src/routes/Root/components/Borrow/index.module.css

@@ -5,6 +5,7 @@
 .ul {
   list-style: none;
   margin: 0 auto;
+  width: fit-content;
   max-width: 900px;
 }
 

products/frontend/src/routes/Root/components/Lent/index.module.css

@@ -5,6 +5,7 @@
 .ul {
   list-style: none;
   margin: 0 auto;
+  width: fit-content;
   max-width: 900px;
 }
 

products/frontend/src/routes/Share/components/Header/index.module.css

@@ -15,11 +15,18 @@
 
 .nav {
   display: flex;
+  align-items: center;
   gap: var(--space-base);
 }
 
-@media screen and (max-width: 499px) {
-  .nav {
+.identicon {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+
+@media screen and (max-width: 599px) {
+  .navLink {
     display: none;
   }
 }

products/frontend/src/routes/Share/components/Header/index.tsx

@@ -1,19 +1,34 @@
-import { useEffect, type FC } from 'react';
+import { useEffect, useState, type FC } from 'react';
 // @tanstack/react-query
 import { $api } from '../../../../api/fetchClient';
 // react-router
 import { Link, NavLink, useNavigate } from 'react-router';
+// icons
+import { generateIdenteapot } from '@teapotlabs/identeapots';
+// toast
+import { toast } from 'react-hot-toast';
 // css
 import styles from './index.module.css';
 
 const Header: FC = () => {
+  const [identicon, setIdenticon] = useState<string>('');
   // sessionのチェック
   const navigate = useNavigate();
   const sessionCheckMutation = $api.useMutation('get', '/api/session', {
+    onSuccess: async (data) => {
+      try {
+        const salt = import.meta.env.VITE_IDENTEAPOT_SALT satisfies string;
+        const icon = await generateIdenteapot(data.user_id, salt);
+        setIdenticon(icon);
+      } catch {
+        toast.error('アイコンの生成に失敗しました。');
+      }
+    },
     onError: () => {
       navigate('/login', { replace: true });
     },
   });
+
   useEffect(() => {
     sessionCheckMutation.mutate({ credentials: 'include' });
   }, []);
@@ -24,8 +39,17 @@ const Header: FC = () => {
         Pay Crew2
       </Link>
       <nav className={styles.nav}>
-        <NavLink to="/">トップ</NavLink>
-        <NavLink to="/gen-group">グループ作成</NavLink>
+        <NavLink className={styles.navLink} to="/">
+          トップ
+        </NavLink>
+        <NavLink className={styles.navLink} to="/gen-group">
+          グループ作成
+        </NavLink>
+        {sessionCheckMutation.isSuccess ? (
+          <>{identicon && <img className={styles.identicon} src={identicon} alt="User Identicon" />}</>
+        ) : (
+          <NavLink to="/login"> ログイン</NavLink>
+        )}
       </nav>
     </header>
   );

setup/src/functions.ts

@@ -11,6 +11,7 @@ export const dotenvLoader = (): EnvConfig => {
   const viteApiUrl = caster.castString(process.env.VITE_API_URL);
   const viteClientUrl = caster.castString(process.env.VITE_CLIENT_URL);
   const viteRedirectUrl = caster.castString(process.env.VITE_REDIRECT_URL);
+  const viteIdenteapotSalt = caster.castString(process.env.VITE_IDENTEAPOT_SALT);
   const postgresUser = caster.castString(process.env.POSTGRES_USER);
   const postgresPassword = caster.castString(process.env.POSTGRES_PASSWORD);
   const postgresDb = caster.castString(process.env.POSTGRES_DB);
@@ -33,6 +34,7 @@ export const dotenvLoader = (): EnvConfig => {
     VITE_API_URL: viteApiUrl,
     VITE_CLIENT_URL: viteClientUrl,
     VITE_REDIRECT_URL: viteRedirectUrl,
+    VITE_IDENTEAPOT_SALT: viteIdenteapotSalt ? '*****' : '',
     POSTGRES_USER: postgresUser,
     POSTGRES_PASSWORD: postgresPassword ? '*****' : '',
     POSTGRES_DB: postgresDb,
@@ -50,6 +52,7 @@ export const dotenvLoader = (): EnvConfig => {
     viteApiUrl,
     viteClientUrl,
     viteRedirectUrl,
+    viteIdenteapotSalt,
   };
   const backendConfig: BackendConfig = {
     postgresUser,

setup/src/index.ts

@@ -19,6 +19,7 @@ const main = () => {
     const frontendDotenvData = `VITE_API_URL=${envConfig.frontendConfig.viteApiUrl}
 VITE_CLIENT_URL=${envConfig.frontendConfig.viteClientUrl}
 VITE_REDIRECT_URL=${envConfig.frontendConfig.viteRedirectUrl}
+VITE_IDENTEAPOT_SALT=${envConfig.frontendConfig.viteIdenteapotSalt}
 `;
     fileWriter('./products/frontend/.env', frontendDotenvData);
   }

setup/src/types.ts

@@ -7,6 +7,7 @@ export type FrontendConfig = {
   viteApiUrl: string;
   viteClientUrl: string;
   viteRedirectUrl: string;
+  viteIdenteapotSalt: string;
 };
 
 export type BackendConfig = {