
どこかで、きっと、また。

LINE LIFF 前台與 React 後台管理系統。核心處理多群編 / 多公司登入選擇與切換流程,並整合 LIFF 登入、登出跳轉、資料刷新與 React 頁面狀態管理。
- ROLE
- 前端開發工程師
- CLIENT
- Internal System
- YEAR
- 2024
- CHANNEL
- LINE LIFF
- IDENTITY
- Multi Group
- STATE
- Session Sync
Overview專案概述
前台以 LINE LIFF + Next.js 開發,處理 LINE 內嵌環境中的登入驗證、登入時公司 / 群編選擇、切換時重新登出登入、跳轉與資料重新取得。
後台以 React 建置模板管理與訊息發送流程,並配合登入身分切換處理頁面狀態重置、資料刷新與錯誤跳轉情境。
TECH STACK使用技術
FEATURES產品功能
LINE LIFF 登入與身分切換
多群編 / 多公司選擇流程
訊息模板設定與管理
條件式訊息發送
前後台雙平台分離架構
My Contribution我負責的事
- 01規劃多群編 / 多公司登入選擇與切換流程,讓不同市區對應的公司資料能正確載入。
- 02整合 LIFF 登入、登出、重新登入與跳轉流程,優化切換身分時的使用體驗。
- 03處理 React 頁面狀態、資料刷新與錯誤跳轉情境,避免舊身分資料殘留。
- 04建置後台模板管理與訊息發送流程,支援資料維護、條件篩選與動態模板內容。
Problems & Decisions問題與決策
本專案為企業內部系統的新版改造,前台採用 LINE LIFF + Next.js,後台使用 React。該公司有多個群編,不同市區會對應不同公司,因此登入時需要選擇身分,切換時也必須重新登出登入、跳轉並重新取得資料;後台同時要維持模板管理、訊息發送與 React 頁面狀態的一致性。
CHALLENGES過程中處理的問題
- 01
多群編 / 多公司身分切換時,需重新建立登入狀態並刷新對應資料。Case 01
- 02
LIFF 登出登入、跳轉流程與 React 頁面狀態管理需要同步處理。Case 01
- 03
處理使用者錯誤跳轉、舊資料殘留與切換過程中的 UX 中斷。Case 01
CASE 01
多群編登入與身分切換
- Finding
- 同一套系統需要支援多個群編/公司身分;切換時需處理 LIFF 登出登入、跳轉、資料重新取得與 React 頁面狀態重置。
- Decision
- 將身分切換視為重新建立 session,重新梳理登入選擇、登出、重新登入、資料刷新與頁面導向流程,並處理使用者錯誤跳轉情境。
- Result
- 完成重新登入、取得對應公司資料及頁面狀態重置,切換後不沿用舊身分資料。

NEXT PROJECT下一個專案
日系電商平台
Japanese Style E-commerce
Nuxt 3 SSR 日系電商平台,整合 Orval 自動生成型別安全 API Client 與完整前後台系統。

