Figma 設計稿

https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fywr1YFOekgWOWF3YuoXFr6%2FCapstone%253A-Twitter_2022%3Fnode-id%3D0%253A1

• Desktop 版本：此為 AC 指定規格，請同學於指定時間內完成。

• 後台管理：此為 AC 指定規格，請同學於指定時間內完成。

  ⚠️ 注意：後台的 UI 設計稿，羽毛筆的部分是 tweet 總數，不是 reply！

• Mobile 版本：手機版設計為行有餘力的挑戰規格，不包含在指定功能的規格內，小組可在 Twitter 專案指定功能繳交後，自行決定是否進行額外挑戰。

設計稿還原度：

• 💥 需要 100% 還原：基本元件設計 (input, button, tab)、顏色、font-family ➡️ 參考 figma 中的 Style Guide 與 Basic Elements、UI Components
• 視覺上大致還原：版面 layout（padding, margin, container）
• 想像空間：設計稿只能看出特定 breakpoint，如何達成 RWD 需討論

<aside> ⚠️ / 是 figma 按照資訊層級分出的資料夾，**和本專案的路由設計及規範「沒有」關聯及暗示！**路由設計需要請後端同學檢查測試檔中的規範

</aside>

1. 註冊＆登入相關：

   1. 註冊頁 - /regist
   2. 前台登入頁 - /login

2. 前台主畫面相關：

   1. 首頁 tweets 總表- /main
   2. 主畫面滾動示意圖 - /main：捲動範圍示意

3. 主畫面發文相關：

   1. 新增 tweet - /main/tweet
   2. 推文提示 - Tweet Style

4. 主畫回覆相關：

   1. 首頁回覆 modal - /main/reply modal
   2. 單一 tweet 詳情頁 - /repli_list
   3. 單一 tweet 詳情頁回覆 modal - /repli_list/reply modal

5. 前台個人資料頁面：

   1. 推文清單 - /user/self（Tab=推文）
   2. 回覆過他人的留言清單 - /user/self（Tab=回覆）
   3. 喜歡的內容 - /user/self（Tab=喜歡的內容）
   4. 自己的 user profile - 編輯資料 - /user/self/edit
   5. user 點擊跟隨者清單 - /user/self/follower
   6. user 點擊正在跟隨清單 - /user/self/following

6. 查看他人資料前台頁面：

   1. 別人的 user profile - /user/other
   2. 別人的 user profile (已訂閱/開啟小鈴鐺) - /user/other/noti

   🔔 在 /user/other 畫面中可看見通知 (小鈴鐺) 與私訊按鈕，為進階功能挑戰，暫時不需理會。若行有餘力，可以在挑戰功能單元，查看更詳細的規格說明。

7. 前台設定：

   1. 個人資料設定 - /setting

8. IPad 版主畫面