# 國泰產險投保平台的元件規劃

## Component

- 精靈表單

    <cub-stepper #stepper>

        <cub-step label="需求分析">
          <app-step-a [data]="data" (dataChange)="onDataChange($event)"></app-step-a>
        </cub-step>

        <cub-step label="行照資料">
          <app-step-b [data]="data" (dataChange)="onDataChange($event)"></app-step-b>
        </cub-step>

        <cub-step label="投保內容">
          <app-step-c [data]="data" (dataChange)="onDataChange($event)"></app-step-c>
        </cub-step>

    </cub-stepper>

[範例 (stackblitz)](https://stackblitz.com/edit/angular-cub-stepper)

- 簽名板

## Directive
- 轉換大小寫
- 自訂驗證 (身分證、民國年、電話、電子郵件、地址等等)

## Pipe
- 單位轉換 (KG、CM等等)

## 結論

1. 我覺得有很多`Popup`的畫面，但是感覺只要善用 primeNG、Angular Material、Angular CDK Overlay 等內建的 Dialog 就很夠用了。
2. 然後有很多畫面，我覺得都是刻板下的功夫居多，有一些區塊可能可以等完成之後，在試著抽出共用的component。