フロントエンドライブラリなど (#76)

frontend/docs/architecture.md

@@ -1,9 +1,12 @@
 # アーキテクチャ
+
 Frost Frontendで採用するアーキテクチャについて
 
 ## 技術選定
+
 - 言語: TypeScript
 - モジュールバンドラ: Vite
 - フレームワーク: React
 - UIフレームワーク: Mantine
 - アイコンフォント: Phosphor Icons
+- ルーティングフレームワーク: Tanstack Router

frontend/docs/regulations.md

@@ -1,4 +1,18 @@
 # お約束
-実装する上での注意事項など
 
-**TODO**
+## ルーティング関係
+
+ドキュメント: https://tanstack.com/router/latest/docs/framework/react/overview
+
+- ページのファイルは`route.tsx`か`route.lazy.tsx`とし、`createFileRoute`か`createLazyFileRoute`を使って`Route`コンポーネントをエクスポートする
+  - lazyで使う場合はlazyを使う
+- ルートを出力しないファイル・フォルダーに関してはファイル先頭に`-`を付ける(`-components/`)など
+- 型定義ファイルを出力するために、`pnpm dev`のほかに`pnpm generate-routes`もしくは`pnpm watch-routes`コマンドを実行する
+- `__root.tsx`はすべてのルートで適用されます
+
+## UIコンポーネントライブラリ関係
+
+ドキュメント: https://mantine.dev/core/stack/
+
+- 基本的にスタイリングは[Style Props](https://mantine.dev/styles/style-props/)を使う
+  - Style Propsで間に合わない場合は[style prop](https://mantine.dev/styles/style/)を使う

frontend/package.json

@@ -4,18 +4,27 @@
   "packageManager": "[email protected]+sha512.f549b8a52c9d2b8536762f99c0722205efc5af913e77835dbccc3b0b0b2ca9e7dc8022b78062c17291c48e88749c70ce88eb5a74f1fa8c4bf5e18bb46c8bd83a",
   "type": "module",
   "scripts": {
+    "generate-routes": "tsr generate",
+    "watch-routes": "tsr watch",
     "dev": "vite",
-    "build": "tsc -b && vite build && node ./scripts/generate-ejs.js",
+    "build": "generate-routes && tsc -b && vite build && node ./scripts/generate-ejs.js",
     "preview": "vite preview",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "lint:fix": "pnpm lint --fix",
     "format": "prettier --write src/**/*.{js,jsx,ts,tsx,css,scss}"
   },
   "dependencies": {
+    "@mantine/core": "^7.11.0",
+    "@mantine/hooks": "^7.11.0",
+    "@phosphor-icons/react": "^2.1.7",
+    "@tanstack/react-router": "^1.43.3",
+    "@tanstack/router-devtools": "^1.43.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@tanstack/router-cli": "^1.43.1",
+    "@tanstack/router-plugin": "^1.43.1",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.13.1",