フロントエンド: API接続先env化・レスポンシブ・設定ファイル追加・mcp.json追加 #1
Conversation
- Added package.json with dependencies for React, Vite, and related libraries. - Included Vite logo SVG in public directory. - Created App.css for styling the application. - Developed App.tsx as the main application component. - Added React logo SVG in assets directory. - Established global styles in index.css. - Set up main.tsx for rendering the application. - Included Vite environment types in vite-env.d.ts. - Configured TypeScript with tsconfig.app.json and tsconfig.node.json. - Created Vite configuration file (vite.config.ts) for project setup. こんな感じで、copilotにcommit messageを作ってもらえます
- アンケートフォーム、集計結果表示、API通信機能を実装 - React、TypeScript、MUIを使用 - 入力バリデーションにZodを導入
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://purple-sea-093b8b000-1.eastasia.2.azurestaticapps.net |
There was a problem hiding this comment.
Pull Request Overview
Front-end refactoring to externalize the API base URL via environment variables, improve responsive layouts, and add project configuration files for TypeScript, ESLint, environment management, and VS Code.
- Externalize
API_BASE_URLwith.envand update.env.example/.gitignore - Enhance responsive design in
Home.tsxand global CSS (index.css,App.css) - Add and configure project files:
tsconfig*,eslint.config.js,.vscode/mcp.json
Reviewed Changes
Copilot reviewed 23 out of 28 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/vite.config.ts | Vite setup with React plugin |
| frontend/.env.example | Example env var for API base URL |
| frontend/.gitignore | Ignore rules for env files and VS Code config |
| frontend/src/api/surveys.ts | Use import.meta.env.VITE_API_BASE_URL for fetch URLs |
| frontend/src/pages/Home.tsx | Updated container breakpoints and padding for responsiveness |
| frontend/src/index.css | Global styles with dark/light color schemes and mobile support |
| frontend/src/components/SurveyForm.tsx | Zod schema and React Hook Form integration for inputs |
| frontend/src/components/SurveyResult.tsx | Table rendering for aggregated results |
| frontend/.vscode/mcp.json | VS Code multiplexer server settings |
| frontend/tsconfig*.json | TypeScript build and project references |
| frontend/eslint.config.js | ESLint configuration for TypeScript and React |
| frontend/README.md | Template README for React + TS + Vite |
Comments suppressed due to low confidence (1)
frontend/src/components/SurveyForm.tsx:32
- [nitpick] Consider adding unit tests for the Zod schema and form behavior in
SurveyFormto cover edge cases like conditionaljobRoleOtherrequirements and max-length constraints.
const schema = z.object({
| <Typography variant="h6" sx={{ mb: 2 }}> | ||
| 集計結果 | ||
| </Typography> | ||
| <Typography>総回答数: {result.total}</Typography> |
There was a problem hiding this comment.
The component references result.total, but the SurveyResult type defines the count as data.totalResponses. Update this to result.data.totalResponses or adjust the type/interface to match the flattened property.
| <Typography>総回答数: {result.total}</Typography> | |
| <Typography>総回答数: {result.data.totalResponses}</Typography> |
| </TableRow> | ||
| </TableHead> | ||
| <TableBody> | ||
| {Object.entries(result.jobRoleStats).map(([role, count]) => ( |
There was a problem hiding this comment.
result.jobRoleStats doesn’t exist on the API response shape (data.jobRole). Either render from result.data.jobRole or rename the property in the type to match the component.
| {Object.entries(result.jobRoleStats).map(([role, count]) => ( | |
| {Object.entries(result.data.jobRole).map(([role, count]) => ( |
| </TableRow> | ||
| </TableHead> | ||
| <TableBody> | ||
| {Object.entries(result.eventRatingStats).map(([rating, count]) => ( |
There was a problem hiding this comment.
result.eventRatingStats is not defined in the SurveyResult type (should use data.eventRating.distribution). Update to result.data.eventRating.distribution or adjust the interface accordingly.
| {Object.entries(result.eventRatingStats).map(([rating, count]) => ( | |
| {Object.entries(result.data.eventRating.distribution).map(([rating, count]) => ( |
| <Controller | ||
| name="jobRoleOther" | ||
| control={control} | ||
| rules={{ required: true, maxLength: 100 }} |
There was a problem hiding this comment.
When using zodResolver, Controller-level rules are ignored, so the conditional required for jobRoleOther won’t be enforced. Model this dependency in the Zod schema (e.g., with refine/superRefine) to ensure it's validated.
| rules={{ required: true, maxLength: 100 }} | |
|
|
||
| # Editor directories and files | ||
| .vscode/* | ||
| !.vscode/extensions.json |
There was a problem hiding this comment.
[nitpick] The .gitignore rule ignores all files under .vscode/, so mcp.json will be excluded in fresh clones. Consider adding !.vscode/mcp.json to ensure this config file is tracked.
| !.vscode/extensions.json | |
| !.vscode/extensions.json | |
| !.vscode/mcp.json |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://purple-sea-093b8b000-1.eastasia.2.azurestaticapps.net |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://purple-sea-093b8b000-1.eastasia.2.azurestaticapps.net |
ご確認よろしくお願いします。