thread-master/docs/product/demand-radar/tasks/T515-fe-service-profile-tab-brands.md

T515 — fe-service-profile-tab-brands

Status: done
Milestone: M1
Kind: feat
Est. change: ~180 lines

Goal

完成後系統應：/app/brands 多一個「服務檔案」分頁，可完整編修服務檔案並存檔。

Depends on

• T502、T511

Inputs

• Spec：../spec.md §4.1、§5.3
• 既有：apps/web/src/pages/BrandsPage.tsx、src/components/ui/、src/styles/radar.css

Outputs

程式變更（預期路徑）

路徑	動作	說明
apps/web/src/pages/BrandsPage.tsx	edit	加分頁切換，掛入服務檔案面板
apps/web/src/components/radar/ServiceProfileForm.tsx	add	服務項目＋價格區間、案例、不能說的內容、FAQ、服務地區＋可遠端、空檔、語氣備註
apps/web/src/data/live/radarRepos.ts	edit	service-profile GET／PUT 實作
apps/web/src/styles/radar.css	edit	表單樣式

行為變更

• 尚未建立時顯示引導文案與必填提示；存檔成功後顯示更新時間。
• 「不能說的內容」明示用途：會硬性過濾 AI 回覆用詞。
• 驗證錯誤就地顯示後端 message，不吞錯。

Out of scope

• 雷達訂閱管理（T516）
• 側欄新增項目（T553）

Acceptance

• 填寫→存檔→重載欄位一致（mock 與 live 皆可）
• 新樣式只進 radar.css
• 指令：

cd apps/web && npm run build && npm run check:tokens && npm run test && npm run lint

Notes

放在 /app/brands 而非新側欄項，是為了不讓側欄再膨脹（spec §5.3）。

實作落點

• apps/web/src/components/radar/ServiceProfileForm.tsx：服務項目（可增刪）＋價格區間、服務區域 chip＋可遠端、禁語（一行一條）、案例、FAQ、可接案時間、口吻備註。
• apps/web/src/components/radar/serviceAreas.ts：22 個縣市代碼表，與後端 radar/domain/service_profile.go 的 serviceAreaCodes 一致；後端會拒絕表外代碼，所以不自行擴充。
• apps/web/src/pages/BrandsPage.tsx：分頁改成頁層（品牌庫｜服務檔案），不是品牌內分頁——服務檔案是每會員一份，掛在某個品牌底下會讓人以為可以一牌一份。
• apps/web/src/styles/radar.css：.hb-radar-row／.hb-radar-area-grid／.hb-radar-chip.is-active／.hb-radar-check／.hb-radar-actions。

決策

• 驗證錯誤顯示後端原句：apiErrors.ts 把 400100 加進「優先顯示後端 message」的碼單。後端會回 services[0].name required 這種指到欄位的訊息，比通用句有用；訊息太短（<24 字元且非中文）時仍退回語言包。
• 價格留空 = 面議：空字串轉 undefined 而非 0，否則後端會收到「免費」。
• 禁語一行一條：禁語本身可能含逗號，用換行切比逗號安全。
• 測試 ServiceProfileForm.test.tsx 蓋：首次引導文案、填寫→存檔→重載一致、空價格不送 0、後端驗證訊息原樣顯示。