前台
---

### 1. 廣告輪播
> 豐裕有提供 swiper-bundle.min.js
> 以有用自訂Hook(useFrameResources)於進入點載入
> Vanilla JS 可以參考豐裕提供之 app.js
> 以及 swiper online doc
> PC：3則廣告、MB： 1則廣告

### 2. 數字鍵盤/小鍵盤
>已撰寫好HOC(withKeyboard)
>已撰寫好Component(Keyboard.Numeric)需調整，
>
>另需要調整Component(Input)增加 prop ，
>去控制密碼模式下不用眼睛按鈕，改為呈現 Keyboard.Numeric
>
>目前豐裕需調整不同裝置行為，需等調整完後再設計
>2023/07/07調整完成
>
>另需要調整HOC(withKeyboard)
>根據豐裕註解
>2023-07-03 v4
>客戶要求當啟用小鍵盤時，不鎖住正常鍵盤輸入

### 3. Link.Icon(IconLink)
>
> 考慮擴充性，所以不單指為 File icon
>
> Link 採用 Dot Notation 新增 Link.Icon
> component 名稱為 IconLink
>
> icon 需制定常數於type.js
> 可參考元件庫 elements-list.html
>
> 預計prop:
> - icon : icon 類型，必填
> - iconOrderLast : icon 是否為置後
> - onClick : 點擊事件

### 4. 表格標題
> component 名稱為 TableTile
> 預計prop:
> - title : 標題文字，必填
> - description : 描述，如未傳入則應該連其描述元素都不渲染

### 5. 多列凍結比較表格
> 已有 凍結表格 Table.Sticky.A
> 已與豐裕Grant確認，
> 應該是 凍結表格 Table.Sticky.A 的變種，
> thead 多了 tr.th_limitset (比較列)
> 可以參考 props.totalColumns 的設計
> 

### 6. 表格群組
> 預計作法為:
> 當前表格組件，要多提供 prop-attachClassName
> 看能不能抽出抽象方法給所有表格組件使用

### 7. Table.Normal.C(Table.Normal.C)
> Table 採用 Dot Notation 新增 Table.Normal.C
> component 名稱為 TableNormalC
> 要和其他表格組件一樣提供相同 prop 接口
> 一樣使用React.forwardRef 可轉發(ref)
> 後續發現只於一支交易(FUNEQR01)有使用且為聲明頁
> 2023/07/19 詢問負責之SA(William)
> 確認該聲明頁來源為後台上稿
> 所以不需要開發此組件

### 8. DateTag(日期Tag)
> 可以搭配現已開發好組件(Datepicker.jsx)，組合封裝
> 組件邏輯行為需要找 SA 討論，
> 目前初步看來可設計功能:
> - 可控禁用
> - 日期範圍
> - 預設日期

### 9. 聲明頁共用JS
> 此是為了方便開發，非必需性，
> 初步是做自定義Hook，
> 名稱暫定為 useStatementCollapse，
> Vanilla JS 可以參考豐裕提供之 app.js
> - [data-oneway-collapse]
> - [data-oneway-collapse-close]
> - [data-twoway-collapse]

### 10. 加入日期選擇器
> 元件庫 elements-form.html
> Kevin已開發初版，需Codereview，視情況重構
> - 多語系
> - 數字範圍
> - 內部事件(全選、重新選擇)
> - 確認 callback

### 11. 交易暫禁
> 需與後端串接

### 12. PdfGenerator
> - 提供 CallBack 函式下載:
> 下載有兩種，一種是後端提供的下載，
> 另外一種是友善列印的下載，區別是友善列印是另開分頁，
> 而下載是直接下載檔案，而就是這段需要設計接口，
> 實作方法須從內部邏輯解藕出來
> - 調整PDF燈箱款式:
> 參考PDF.html，方法實作基本都有，
> 但須調整結構以及樣式，
> 另外因Modal結構固定，所以原有Modal不擴充，
> 而是單獨 PdfGenerator 內部實作

### 13. 晶片金融卡安控元件
> API文件可以參考 FS_系統串接與共用服務_PGIFZZ09_晶片金融卡安控元件串接_V0.1.docx
> - 規格書整理邏輯:
> 已跟PG要了「FS_臺幣存匯_申請設定.pdf」、「FS_臺幣存匯_臺幣轉帳服務_TWDETR01_立即預約轉帳_V0.1.docx」、「PGS_首頁登入_IBAPTR02_重設代號及密碼_V0.1.docx」三份規格書，需要從中了解交易所需邏輯，並設計接口，除了規格書以外，應該還要參考靜態網頁畫面是否有規格書沒有之邏輯
> - 廠商元件/AP:
> 需要進行測試，預計是在撰寫共用元件(真)進行，已有先跟公司申請Macbook測試，以及還需要跟後台串接測試雙向驗證，讀卡機以及測試卡片等需要等客戶提供，Rong已經有跟Vince反應此事，有一代讀卡機，但其餘東西還需要採購，皆尚未提供
> - 共用元件:
> 預計採用自訂Hook提供交易使用接口，廠商元件掛載則平台處理(進入點)，要先做一個假的元件給PG們開發

### 14. Navbar
> 預計應為有兩種款式
> 目前已經採用 Dot Notation 設計以下組件:
> - Navbar.Section.LoginInfoBlk.HeaderLoginMode
> - Navbar.Section.LoginInfoBlk.Default
>
> 已經實作功能:
> - 多語系切換
> - 左側收合功能
>
> 待做功能:
> - 招呼語以及最後登入時間:
> 左側可能會有風格icon，這段需要與SA討論，
> 至於問號語以及稱謂，之前和Jackson討論過，
> 就單純 名字 + 您好 的格式就好，
> 另外所需資料(名字以及最後登入時間)，
> 平台登入後會用Redux持久化儲存(authSlice)，
> 這段除了名字以外，基本上應該要做多語系
>
> - 計時器:
> 這段需要做多語系，
> 以及倒數需要用Redux持久化儲存(authSlice)，
> 另外倒數結束會有燈箱提醒，
> 延長需與後端串接，
> 除了前端倒數以外，還有後端session延長，
> 需要與後端串接
>
> - 登出:
> 需要調用Redux action (authSlice)，
> 清除本地 local storage 以及 redux storage，
> 需要與後端串接
>
> - 常用功能:
> 這部分會有PG去處理開發交易，會連內部以及外部

### 15. 左側選單
> 須調整當前選單組件已符合當前廠商樣式結構行為

### 16. 錯誤邊界
> 機制類，用來捕捉並處理子元件中產生的 JavaScript 錯誤，以避免整個應用程序崩潰

### 17. 色碼表
> 圓餅圖/甘特用所用顏色色碼列表
> 按照會議結果，
> 顏色順序為 1~10 16~20 11~15

### 18. PUSH 認證登入新機制
> 2023/07/10 已和 SA John 確認新增以下機制
> - 登入頁到第二個階段時，身分證/統編欄位要 disabled
> - 第二個階段倒數結束時，身分證/統編欄位要解除 disabled

### 19. 聲明頁做法
> - PDF組件(已經完成初版)
> - HTML嵌PDF做法
> - HTML嵌HTML做法
> - 整理上述說明做法文件

### 20. Table.Normal.D(Table.Normal.D)
> Table 採用 Dot Notation 新增 Table.Normal.D
> component 名稱為 TableNormalD
> 要和其他表格組件一樣提供相同 prop 接口
> 一樣使用React.forwardRef 可轉發(ref)

### 21. 列表組件 新增自定義附加樣式接口
> 預計統一添加 prop.attachClassName

### 21. ResultsPage.Wrapper.NoWork 擴充接口
> 新增 props.type 可自訂 results-no-work 樣式

### 22. 列表組件 新增自定義標籤元素
> 新增 props.type 可自訂標籤元素(ul ol dl)

### 23. qrcode、push 跳出視窗教學
> 豐裕已提供切版，需調整IBAPTR10

### 24. RowWrapper調整extension為動態值

後台
---

### 1. ColAutoWrapper
> 新增me-5樣式、新增接口可自行附加樣式

### 2. PBtnFloatingWrapper
> 目前按鈕要套入新的結構(P-btn-floating-bottom)內
> 按照名稱推斷，應該會有其他方位，
> 到時候開發要考量擴充性

### 3. Modal 按鈕順序
> 預設按鈕順序統一改成：確定 刪除 取消

### 4. TableToolbar(表格工具列)
> Kevin已開發初版，需Codereview，視情況重構
> 參考 00_table-bars.html

### 5. TableTitlebar(表格標題列)
> Kevin已開發初版，需Codereview，視情況重構
> 參考 00_table-bars.html

### 6. Checkbox元件 新增 FormCheckWrapper 接口
> 要新增接口判斷是否需要FormCheckWrapper

### 7. TableWrapper 傳遞 ref
> 將TableWrapper組件改寫為使用React.forwardRef，
> 用於向下傳遞 ref 屬性到組件的內部元素，
> 因為目前有遇到一支交易需要客製TR
> 可以使用寫法達成，但還是開個接口，
> 讓PG可以減少重工

### 8. Toast元件位置設計
> 需要等T.Y.整理設計出個位置，再調整元件
>
> 2023/07/12 確認目前只需要 MIDDLE_TOP
> 預計保留位置彈性
> 只是預設要調整為 MIDDLE_TOP 以及樣式更新

### 9. Dropdown.Search(下拉式搜尋組件)
> Kevin已開發初版，需重構

### 9. Modal 預設樣式
> 目前新增有預設樣式，原預設樣式需調整