feat: Integrate OpenAPI-generated API client, refactor profile data model to use English keys, and update social media fields (X/Instagram) across frontend and backend.#13
Conversation
…odel to use English keys, and update social media fields (X/Instagram) across frontend and backend.
| import ReactMarkdown from "react-markdown" | ||
| import { DefaultApi, Configuration } from "@/src/lib/api" | ||
|
|
||
| const apiClient = new DefaultApi(new Configuration({ basePath: "http://localhost:8080" })) |
There was a problem hiding this comment.
Pull request overview
Integrates the OpenAPI-generated TypeScript client into the profile page UI while refactoring the frontend profile state model to use English (camelCase) keys and updating visibility controls for X/Instagram; also adjusts backend CORS configuration.
Changes:
- Switch
frontend/app/profile/page.tsxto fetch/update profile data via the generated OpenAPI client and refactor profile state keys to English. - Add UI controls for the new visibility fields (name/self-introduction/X/Instagram) and update payload mapping to API snake_case.
- Update backend CORS
Access-Control-Allow-Originbehavior and add a small Makefile comment for client generation output.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| frontend/app/profile/page.tsx | Uses generated OpenAPI client for GET/PUT profile basic-info and refactors profile state keys + visibility UI. |
| frontend/Makefile | Adds documentation comment about where generated client code is stored. |
| backend/main.go | Changes CORS allow-origin header from a fixed localhost origin to wildcard. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| import ReactMarkdown from "react-markdown" | ||
| import { DefaultApi, Configuration } from "@/src/lib/api" | ||
|
|
||
| const apiClient = new DefaultApi(new Configuration({ basePath: "http://localhost:8080" })) |
There was a problem hiding this comment.
apiClient の basePath が http://localhost:8080 にハードコードされています。これだとデプロイ環境・ポート変更・HTTPS 化でフロントがそのまま動かなくなるため、NEXT_PUBLIC_... の環境変数や相対パス（同一オリジン + リバースプロキシ）で注入できるようにしてください。
| const apiClient = new DefaultApi(new Configuration({ basePath: "http://localhost:8080" })) | |
| const apiBasePath = process.env.NEXT_PUBLIC_API_BASE_PATH | |
| const apiClient = new DefaultApi( | |
| new Configuration(apiBasePath ? { basePath: apiBasePath } : {}), | |
| ) |
| const response = await apiClient.apiProfileBasicInfoPut(payload) | ||
| if (response.status === 200) { | ||
| alert("プロフィールが公開されました！") | ||
| } else { | ||
| alert("公開に失敗しました。もう一度お試しください。") | ||
| } |
There was a problem hiding this comment.
apiProfileBasicInfoPut は axios ベースの生成クライアントなので、通常は 4xx/5xx の場合ここで例外になり else 側（公開失敗）は到達しません。成功時は try 内で即成功扱いにし、失敗時は catch でハンドリングする形に整理してください。また生成クライアントの型は PUT のレスポンスを UpdateResponse としている一方、バックエンド実装は BasicInfo を返しているため（OpenAPI と実装が不一致）、response.data を使うようになった場合に破綻します。OpenAPI/実装のどちらかを揃えるのが安全です。
| const response = await apiClient.apiProfileBasicInfoPut(payload) | |
| if (response.status === 200) { | |
| alert("プロフィールが公開されました！") | |
| } else { | |
| alert("公開に失敗しました。もう一度お試しください。") | |
| } | |
| await apiClient.apiProfileBasicInfoPut(payload) | |
| alert("プロフィールが公開されました！") |
| router.Use(func(c *gin.Context) { | ||
| c.Header("Access-Control-Allow-Origin", "http://localhost:3000") | ||
| c.Header("Access-Control-Allow-Origin", "*") | ||
| c.Header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS") | ||
| c.Header("Access-Control-Allow-Headers", "Content-Type") |
There was a problem hiding this comment.
CORS の Access-Control-Allow-Origin を * に広げると、想定外のオリジンからも API レスポンスを読み取れる状態になり得ます（将来 Cookie/認証を入れた場合は withCredentials とも両立できません）。少なくとも本番は許可オリジンを設定値（環境変数/設定ファイル）で限定し、必要なら Access-Control-Allow-Credentials: true と組み合わせてください。
No description provided.