開発環境を立てた際にモックサーバーが立つようにmswを導入

[Futadaruma]

User description

tpf-UIでの同様の変更に沿った変更を行なっています

---

PR Type

Enhancement

---

Description

• 開発環境にMSWモックサーバーを導入

• src/mocks以下に各APIのハンドラを追加

• main.tsで開発時にworker起動ロジック追加

• vite設定と不要CSSを削除・調整

---

Changes walkthrough 📝

	Relevant files
Miscellaneous	1 files ProjectNew.vue 不要な `.prPermittedForm` CSS 削除                                                        +0/-5
Enhancement	6 files main.ts 開発環境でMSW worker起動ロジック追加                                                                    +20/-6    contests.ts コンテスト関連のモックハンドラ実装                                                                                +118/-0  groups.ts グループ関連のモックハンドラ実装                                                                                  +51/-0    handler.ts setupWorkerでハンドラ統合・エクスポート                                                                +14/-0    projects.ts プロジェクト関連のモックハンドラ実装                                                                              +73/-0    users.ts ユーザー関連のモックハンドラ実装                                                                                  +142/-0
Configuration changes	2 files vite-env.d.ts Vite環境向け型定義参照を追加                                                                                  +2/-0      vite.config.ts `/api`プロキシ削除とSCSSオプション調整                                                                  +1/-10
Dependencies	2 files mockServiceWorker.js MSW生成モックサービスワーカー追加                                                                              +344/-0  package.json MSW依存追加と不要スクリプト削除                                                                                +8/-3

---

Need help?

Type /help how to ... in the comments thread for any questions about PR-Agent usage.

Check out the documentation for more information.

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Error Handling enableMocking() の Promise が reject された場合にキャッチせず、アプリのマウント処理が行われない可能性があります。エラーをハンドリングして、常にアプリが起動するように catch を追加してください。 enableMocking().then(() => { const pinia = createPinia() const app = createApp(App) app.use(router) app.use(pinia) app.use(Toast, options) app.mount('#app') }) Typo Import groupeHandlers という変数名が誤字のように見えます。ファイル名の groups ハンドラを扱うなら、groupHandlers にスペルを統一すると可読性が向上します。 import { handlers as groupeHandlers } from './groups'

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	mock起動失敗時もマウント保証 worker.start() の失敗時にアプリの初期化が行われないため、エラーをキャッチしてマウント処理を保証するように catch を追加しましょう。これにより、開発環境以外やサービスワーカー起動失敗時でもアプリが起動します。 src/main.ts [36-44] -enableMocking().then(() => { - const pinia = createPinia() - const app = createApp(App) - app.use(router) - app.use(pinia) - app.use(Toast, options) - app.mount('#app') -}) +enableMocking() + .catch((e) => { + console.error('mock worker failed to start', e) + }) + .then(() => { + const pinia = createPinia() + const app = createApp(App) + app.use(router) + app.use(pinia) + app.use(Toast, options) + app.mount('#app') + }) Suggestion importance[1-10]: 7 __ Why: Adding a catch to the enableMocking() promise ensures that the app mounts even if worker.start() fails in development, preventing the app from being stuck uninitialized.	Medium