support: Use jotai for state management

.changeset/healthy-pianos-brake.md

@@ -0,0 +1,5 @@
+---
+'@growi/core': major
+---
+
+Remove global socket management and useSWRStatic

.changeset/lazy-penguins-hammer.md

@@ -0,0 +1,5 @@
+---
+'@growi/core': major
+---
+
+Update IPage interfaces family

.gitignore

@@ -36,8 +36,10 @@ yarn-error.log*
 
 # IDE, dev #
 .idea
+.claude
 *.orig
 *.code-workspace
+*.timestamp-*.mjs
 
 # turborepo
 .turbo

.serena/memories/apps-app-detailed-architecture.md

@@ -0,0 +1,104 @@
+# apps/app アーキテクチャ詳細ガイド
+
+## 概要
+`apps/app` は GROWI のメインアプリケーションで、Next.js ベースのフルスタック Web アプリケーションです。
+
+## エントリーポイント
+- **サーバーサイド**: `server/app.ts` - OpenTelemetry 初期化と Crowi サーバー起動を担当
+- **クライアントサイド**: `pages/_app.page.tsx` - Next.js アプリのルートコンポーネント
+
+## ディレクトリ構成の方針
+
+### フィーチャーベース（新しい方針）
+`features/` ディレクトリは機能ごとに整理され、各フィーチャーは以下の構造を持つ：
+- `interfaces/` - TypeScript 型定義
+- `server/` - サーバーサイドロジック（models, routes, services）
+- `client/` - クライアントサイドロジック（components, stores, services）
+- `utils/` - 共通ユーティリティ
+
+#### 主要フィーチャー
+- `openai/` - AI アシスタント機能（OpenAI 統合）
+- `external-user-group/` - 外部ユーザーグループ管理
+- `page-bulk-export/` - ページ一括エクスポート
+- `growi-plugin/` - プラグインシステム
+- `search/` - 検索機能
+- `mermaid/` - Mermaid 図表レンダリング
+- `plantuml/` - PlantUML 図表レンダリング
+- `callout/` - コールアウト（注意書き）機能
+- `comment/` - コメント機能
+- `templates/` - テンプレート機能
+- `rate-limiter/` - レート制限
+- `opentelemetry/` - テレメトリ・監視
+
+### レガシー構造（段階的移行予定）
+
+#### ユニバーサル（サーバー・クライアント共通）
+- `components/` - React コンポーネント（ページレベル、レイアウト、共通）
+- `interfaces/` - TypeScript インターフェース
+- `models/` - データモデル定義
+- `services/` - ビジネスロジック（レンダラーなど）
+- `stores-universal/` - ユニバーサル状態管理（SWR コンテキスト等）
+
+#### サーバーサイド専用
+- `server/` - サーバーサイドコード
+  - `models/` - Mongoose モデル
+  - `routes/` - Express ルート（API v3含む）
+  - `service/` - サーバーサイドサービス
+  - `middlewares/` - Express ミドルウェア
+  - `util/` - サーバーサイドユーティリティ
+  - `events/` - イベントエミッター
+  - `crowi/` - アプリケーション初期化
+
+#### クライアントサイド専用
+- `client/` - クライアントサイドコード
+  - `components/` - React コンポーネント
+  - `services/` - クライアントサイドサービス
+  - `util/` - クライアントサイドユーティリティ
+  - `interfaces/` - クライアント固有の型定義
+  - `models/` - クライアントサイドモデル
+
+#### Next.js Pages Router
+- `pages/` - Next.js ページルート
+  - `admin/` - 管理画面ページ
+  - `me/` - ユーザー設定ページ
+  - `[[...path]]/` - 動的ページルート（Catch-all）
+  - `share/` - 共有ページ
+  - `login/` - ログインページ
+
+#### 状態管理・UI
+- `states/` - Jotai 状態管理（ページ、UI、サーバー設定）
+- `stores/` - レガシー状態管理（段階的に states/ に移行）
+- `styles/` - SCSS スタイル
+
+#### その他
+- `utils/` - 汎用ユーティリティ
+- `migrations/` - データベースマイグレーション
+- `@types/` - TypeScript 型拡張
+
+## 開発指針
+
+### 新機能開発
+新しい機能は `features/` ディレクトリにフィーチャーベースで実装し、以下を含める：
+1. インターフェース定義
+2. サーバーサイド実装（必要に応じて）
+3. クライアントサイド実装（必要に応じて）
+4. 共通ユーティリティ
+
+### 既存機能の改修
+既存のレガシー構造は段階的に features/ に移行することが推奨される。
+
+### 重要な技術スタック
+- **フレームワーク**: Next.js (Pages Router)
+- **状態管理**: Jotai (新), SWR (データフェッチング)
+- **スタイル**: SCSS, CSS Modules
+- **サーバー**: Express.js
+- **データベース**: MongoDB (Mongoose)
+- **型システム**: TypeScript
+- **監視**: OpenTelemetry
+
+## 特記事項
+- AI 統合機能（OpenAI）は最も複雑なフィーチャーの一つ
+- プラグインシステムにより機能拡張可能
+- 多言語対応（i18next）
+- 複数の認証方式サポート
+- レート制限・セキュリティ機能内蔵

.serena/memories/apps-app-development-patterns.md

@@ -0,0 +1,163 @@
+# apps/app 開発ワークフロー・パターン集
+
+## よくある開発パターン
+
+### 新しいページ作成
+1. `pages/` にページファイル作成（`.page.tsx`）
+2. 必要に応じてレイアウト定義
+3. サーバーサイドプロパティ設定 (`getServerSideProps`)
+4. 状態管理セットアップ
+5. スタイル追加
+
+### 新しい API エンドポイント
+1. `server/routes/apiv3/` にルートファイル作成
+2. バリデーション定義
+3. サービス層実装
+4. レスポンス形式定義
+5. OpenAPI 仕様更新
+
+### 新しいフィーチャー実装
+1. `features/新機能名/` ディレクトリ作成
+2. `interfaces/` で型定義
+3. `server/` でバックエンド実装
+4. `client/` でフロントエンド実装
+5. `utils/` で共通ロジック
+
+### コンポーネント作成
+1. 適切なディレクトリに配置
+2. TypeScript プロパティ定義
+3. CSS Modules でスタイル
+4. JSDoc コメント追加
+5. テストファイル作成
+
+## 重要な設計パターン
+
+### SWR データフェッチング
+```typescript
+const { data, error, mutate } = useSWR('/api/v3/pages', fetcher);
+```
+
+### Jotai 状態管理
+```typescript
+const pageAtom = atom(initialPageState);
+const [page, setPage] = useAtom(pageAtom);
+```
+
+### CSS Modules スタイリング
+```scss
+.componentName {
+  @extend %some-placeholder;
+  @include some-mixin;
+}
+```
+
+### API ルート実装
+```typescript
+export const getPageHandler = async(req: NextApiRequest, res: NextApiResponse) => {
+  // バリデーション
+  // ビジネスロジック
+  // レスポンス
+};
+```
+
+## ファイル構成のベストプラクティス
+
+### フィーチャーディレクトリ例
+```
+features/my-feature/
+├── interfaces/
+│   └── my-feature.ts
+├── server/
+│   ├── models/
+│   ├── routes/
+│   └── services/
+├── client/
+│   ├── components/
+│   ├── stores/
+│   └── services/
+└── utils/
+    └── common-logic.ts
+```
+
+### コンポーネントディレクトリ例
+```
+components/MyComponent/
+├── MyComponent.tsx
+├── MyComponent.module.scss
+├── MyComponent.spec.tsx
+├── index.ts
+└── sub-components/
+```
+
+## 開発時のチェックリスト
+
+### コード品質
+- [ ] TypeScript エラーなし
+- [ ] ESLint ルール準拠
+- [ ] テストケース作成
+- [ ] 型安全性確保
+- [ ] パフォーマンス影響確認
+
+### 機能要件
+- [ ] 国際化対応（i18n）
+- [ ] セキュリティチェック
+- [ ] アクセシビリティ対応
+- [ ] レスポンシブデザイン
+- [ ] エラーハンドリング
+
+### API 設計
+- [ ] RESTful 設計原則
+- [ ] 適切な HTTP ステータスコード
+- [ ] バリデーション実装
+- [ ] レート制限対応
+- [ ] ドキュメント更新
+
+## デバッグ・トラブルシューティング
+
+### よくある問題
+1. **型エラー**: tsconfig.json 設定確認
+2. **スタイル適用されない**: CSS Modules インポート確認
+3. **API エラー**: ミドルウェア順序確認
+4. **状態同期問題**: SWR キー重複確認
+5. **ビルドエラー**: 依存関係バージョン確認
+
+### デバッグツール
+- Next.js Dev Tools
+- React Developer Tools
+- Network タブ（API 監視）
+- Console ログ
+- Lighthouse（パフォーマンス）
+
+## パフォーマンス最適化
+
+### フロントエンド
+- コンポーネント lazy loading
+- 画像最適化
+- Bundle サイズ監視
+- メモ化（useMemo, useCallback）
+
+### バックエンド
+- データベースクエリ最適化
+- キャッシュ戦略
+- 非同期処理
+- リソース使用量監視
+
+## セキュリティ考慮事項
+
+### 実装時の注意
+- 入力サニタイゼーション
+- CSRF 対策
+- XSS 防止
+- 認証・認可チェック
+- 機密情報の適切な取り扱い
+
+## デプロイ・運用
+
+### 環境設定
+- 環境変数管理
+- データベース接続
+- 外部サービス連携
+- ログ設定
+- 監視設定
+
+このガイドは apps/app の開発を効率的に進めるための包括的な情報源として活用してください。