# 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

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

```bash
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、後端驗證訊息原樣顯示。