# 前端工程師
👨‍💻Engineer: James Hub
🧑‍💼Manager: 陳厚陽
🧑‍✈️Supervisor: 劉宇倫

## Week 1:
### 1. 工作主軸
以 Figma 為主完成「Model Web」產品選擇流程介面（首頁、分類頁、產品詳情頁）的 Neuromorphism（新擬態）風格重設

### 2. 已完成事項
* Figma 版面：Model Web 主要流程（首頁 → 分類 → 詳情）已調整
* 元件：產品卡、分類卡、詳情資訊區塊樣式完成
* 樣式語言：Neumorphism 基礎陰影 / 光源 / 邊界 / 空白策略已初版固化
* 里程碑：首批新擬態（Neuromorphism）UI 視覺導入完成 (v1.0)
### 3. 詳細內容:[工作周誌1](https://hackmd.io/@C9Seo8LzSRSTGCaJk96GTQ/Hk7r0n0Vxl)

## Week 2:
### 1. 工作主軸
* 聚焦於建立一個 BIM Viewer（IFC 3D 檢視器）之初版開發環境與使用流程整理。
* 目的：確認以 Next.js + React 整合 thatOpen.engine（@thatopen/engine）並可搭配 HeroUI / Hero Icons 與 Tailwind CSS 的可行性。
### 2. 已完成事項
* 調研並紀錄 ThatOpen/engine_templates 的用途與結構。
* 撰寫/整理使用步驟（A~E）：
A) 建立或複製 Next.js 模板專案。
B) 安裝核心套件：@thatopen/engine、@heroicons/react、Tailwind CSS 相關依賴。
C) 設定 Tailwind（於 globals.css 加入基礎指令）。
D) 建立基本 Viewer 元件（MyViewer.jsx），示範使用 useRef 建立引擎实例與釋放資源。
E) 示範如何在頁面組合 Hero Icons 提升介面視覺。
* 提供最小可執行範例架構（app/page.tsx + components/MyViewer.jsx）。
* 初步整理與上傳 Figma 視覺稿（標記「Progress Figma Finalized」並附示意截圖）。
### 3. 詳細內容: [工作周誌2](https://hackmd.io/@C9Seo8LzSRSTGCaJk96GTQ/BJfGFPcHel)

## Week 3:
### 1. 工作主軸
* 聚焦於建立 BIM Viewer（3D/BIM 模型檢視）之初版 Web 架構與互動流程，驗證以 Next.js + React 串接模型上傳 / 載入流程與基礎 UI 導覽的可行性，為後續渲染與 worker 管線奠定骨架。

### 2. 已完成事項
* 建立使用者帳號流程（註冊 / 登入 / 登出）並串接後端 API
* 建構主導覽與版面：Navbar（登入/導覽）、Sidebar（自適應狀態 + 上傳入口）
* 完成模型相關頁面：Models 列表、Model Detail、Collection、Upload（初版可用）
* 標準化模型卡片與 Grid 版面（含編輯 / 刪除 / 圖示變更）
* 實作 BIM Wrapper：前端環境判斷 + 模型載入邏輯（模型資料載入成功但尚未渲染顯示）
* 上傳流程打通（可提交並觸發載入）
* 初步 Grid 顯示（載入過程短暫顯示後變藍，顯示渲染/worker 待完善）
* 新增 favicon、基本動畫與組件目錄結構重整
* 製作 React Redux 與 Next.js 組件控制學習筆記（團隊知識補充）
### 3. 詳細內容: [工作周誌3](https://hackmd.io/@C9Seo8LzSRSTGCaJk96GTQ/SJJAnw0rxg)

## Week 4:
### 1. 工作主軸
針對 v1.1 Iteration：強化模型上傳工作流、3D Viewer 狀態保持與截圖（含複製到剪貼簿）功能；同步優化 Upload 介面與 Sidebar 佈局，提升操作流暢度並為後續與 BIM 後端串接（端到端上傳）做準備。

### 2. 已完成事項
- 截圖功能：可擷取 Viewer 畫面並直接複製至剪貼簿
- Viewer 狀態保持：上傳進行中維持當前視角與場景，避免過早重置
- 上傳流程增強：
- 新增上傳 metadata
- 加入截圖容器（與檔案一同提交準備）
- 改善 Upload 頁面版面配置
- 上傳控制：新增 Cancel 按鈕，可中止進行中的上傳
- UI/UX 微調：
- Sidebar 版面清理
- 透明背景選項
- Viewer 測試流程 E2E 驗證通過
- 偵錯支援：加入檔案 / 上傳相關 debug logs
- 狀態：無阻塞性問題；截圖與上傳整合仍需進一步測試

### 3. 詳細內容: [工作周誌4](https://hackmd.io/@C9Seo8LzSRSTGCaJk96GTQ/Hko3C0sUee)

## Week 5:
### 1. 工作主軸
聚焦優化「模型上傳 → Viewer 體驗」整體閉環：提升 2D/3D 上傳流暢度、上傳期間視圖狀態保持、截圖（含剪貼簿 / PDF）能力、Collections 管理與搜尋/篩選效率，並為後續佈署與新版 UI 樣式整合鋪路。

### 2. 已完成事項
- 功能 / Viewer：
- 截圖 → 可複製到剪貼簿、支援 PDF 匯出
- Viewer 上傳中不重置狀態（視角 / 場景保持）
- 加入 3D Viewer 行為 debug logging
- 上傳流程：
- 支援 2D / 3D 上傳模式切換
- 上傳成功指示、工具列互動優化
- 新版上傳頁：影像輪播 / 縮圖預覽 / metadata 區塊
- Collection & 模型管理：
- Collection 新增 / 儲存 / 刪除 / 編輯
- 分頁、搜尋、確認 / 移除 modal
- 模型篩選、Show All 邏輯、搜尋列優化
- UI/UX：
- 圖片解析度標準化
- Sidebar / Toolbar toggle 行為調整
- 上傳選項與下拉式樣式統一
- Debug / 開發體驗：
- 時間與 token 處理 logging
- Auth context 改善 & 上傳頁 SSR 處理調整
- 狀態：
- 無阻塞性問題（No blocking issues）
- 截圖 / 剪貼簿 / Viewer 互動需進一步整合與跨瀏覽器測試

### 3. 詳細內容: [工作周誌5](https://hackmd.io/@C9Seo8LzSRSTGCaJk96GTQ/H1L7kBqDxe)

## Week 6:
### 1. 工作主軸
聚焦「全站導覽與搜尋體驗一致性」：重構 Navigation（左右導覽列、Explore 分頁、分類下拉）、搜尋列元件化與樣式統一、Grid 顯示切換、登入與主要頁面樣式標準化，並透過程式重構（結構拆分 + 環境變數管理 API）降低後續維運與佈署摩擦。

### 2. 已完成事項
- 導覽 / 版面：
- 左 / 右 Navbar 新樣式
- 新增 Explore 分頁
- Category 下拉（分類過濾入口）
- Grid View 開 / 關 Toggle
- 搜尋 / 篩選：
- 搜尋列樣式改版（寬度 / 排版修正）
- 搜尋列抽象為 Reusable Molecule Component
- Filter 與 Keyword UI 對齊 / 間距修正
- Header 類別 + 關鍵字對齊校正
- 樣式：
- 登入頁更新
- 全站樣式一致化（Typography / spacing / 元件狀態）
- 程式碼 / 結構：
- 前端目錄與元件重構（提升可維護性 / 可組合性）
- API endpoints 抽離至 .env.local
- 狀態：
- 無阻塞性問題
- 樣式變更待跨瀏覽器（Chrome / Firefox / Safari / Edge）驗證
- 未列但推論（隱性價值）：
- 元件拆分 → 減少重複 & 提升後續擴充搜尋/篩選邏輯的彈性
- 環境變數化 → 佈署與多環境（dev / staging / prod）切換更安全
### 3. 詳細內容: [工作周誌6](https://hackmd.io/@C9Seo8LzSRSTGCaJk96GTQ/HkJZEpmOxx)

## Week 7:
### 1. 工作主軸
將「IFC 檔 → Fragment（.frag）轉換 → 3D Viewer 渲染」流程前置到前端（含代理層串接），移除 submodule 依賴，統一專案結構與建置路徑，建立後續效能優化、驗證與多模型擴充的最低可行工作流（MVP）。

### 2. 已完成事項
- 3D Viewer：
- 可載入 / 顯示 fragment 檔（基本渲染流程打通）
- 透過 proxy 串接後端取得 fragment 資料
- IFC → Fragment 轉換：
- 前端內部完成轉換流程（去除外部依賴 / 簡化部署組態）
- 專案結構：
- 移除前端 git submodule（程式碼遷入主 repo）
- 重建 module 路徑與建置設定（Webpack / 路徑 alias 調整）
- 初始化：
- 基礎專案初始化（來自 orpheus016 初始提交）
- 現況：
- 功能路徑貫通（上傳 / 轉換 / 渲染）
- 尚欠：大檔效能、轉換結果自動驗證、回歸測試

（隱性收穫推論）
- 整合後可減少多 repo 同步 / 版本漂移問題
- 可逐步引入增量載入、快取策略與質量檢查
### 3. 詳細內容: [工作周誌7](https://hackmd.io/@C9Seo8LzSRSTGCaJk96GTQ/B1eZr6muee)