frontend — 사용자 인터페이스 (SPA)

package.json name은 "nuxt-app", README는 기본 "Nuxt Minimal Starter" 템플릿 그대로라 실질 미작성. 정체성은 코드/CI에서 드러난다 — 배포 경로 /opt/factorysight/frontend/webroot, 산출물 historian-frontend-*.zip, 모든 API baseURL /historian/api.

pnpm install            # (--frozen-lockfile 로 CI 재현성)
pnpm dev                # 개발 서버 (vite proxy: /historian/api → :8080)
pnpm generate           # 정적 산출물 생성 (.output/public)
pnpm preview            # 산출물 미리보기

주요 라우트 그룹

메뉴는 정적 라우트가 아니라 백엔드에서 동적으로 받은 메뉴 트리(arrayToTree) + 탭 네비게이션으로 구성. <NuxtPage keepalive />로 페이지가 메모리 상주.

모두 setup-store(컴포지션) 스타일 + HMR. storesDirs로 자동 등록, persistedstate로 localStorage 영속화.

• authStore (영속 authState): access/refresh 토큰을 쿠키 + 스토어 동시 저장, login/loginByXApiKey(임베드)/logout/checkAuth. 비밀번호 초기화 강제 이동 로직 보유.
• historianStore (영속 tabs): 메뉴 트리, 탭 네비게이션 전체 로직, isLoading(전역 로더), snackbar/drawer/toasts. MONITORING 타입 메뉴는 URI를 /monitoring/MonitoringViewer/{no}로 재작성.
• 그 외 tagStore, tag/tagGridStore, common/commonStore(집계함수 목록 등), dstts/histogramStore.

3중 구조로 체계적이다.

1. repository/FetchFactory.ts — 기반 클래스. call(method,url,data,opts) 표준 호출(GET body 생략, isLoading 플래그로 전역 로더 토글), useAsyncFetch(), excelExportStream()(견고한 Blob 다운로드 — Content-Disposition 파싱, RFC 5987 filename*, sanitize).
2. repository/modules/** (60+) — 각 extends FetchFactory, PREFIX_URI(대개 /api/v1) + 엔드포인트 메서드. 응답 CommonResponse {result,code,message,data}.
3. plugins/apiHistorian.ts (client) — DI 컨테이너. 모든 모듈을 $api 도메인 트리(api.factory.tag, api.analytics.tagTrend …)로 provide. $fetch.create의 onRequest(Bearer 토큰 자동 주입, 없으면 /login) / onResponseError(401→/login).
4. plugins/code.ts (client) — 부팅 시 공통코드 전량 로드 후 Map 메모이즈 → $code(id) 헬퍼(매번 API 호출 없이 코드 조회).

핵심은 middleware/auth.global.ts (전역, client-only — if(import.meta.server) return).

• 임베드 모드(?embed=true): 레이아웃 empty 강제, ?token= 있으면 loginByXApiKey로 X-API-KEY 로그인 → 성공 시 URL에서 token 제거, 실패 시 /error/401. (외부 iframe 임베드 인증, docs/embedded-guide와 대응)
• 일반 모드: /login 진입 시 clearAuth(); 비밀번호 초기화 대상 → /changePassword; accessToken 쿠키 있으면 통과; refreshToken만 있으면 /auth/refresh-token 재발급; 둘 다 없으면 /login.
• 토큰 주입은 미들웨어가 아닌 apiHistorian onRequest에서, 401은 onResponseError에서 이중 방어.

레이아웃: default(AppBar/Navigation/TabBar/Loader/SnackBar), login, empty(임베드).

총 213개 .vue 컴포넌트, 자동 import(pathPrefix:false)로 전역 사용. 도메인별: system 33, editor 32, analytics 24, custom 24, form 19 …

• components/form/ (19) — Kendo 입력을 사내 표준으로 래핑(FormInput·FormDropDownList·FormDateTimePicker …).
• components/editor/ (32) — 모니터링 대시보드 비주얼 에디터(도형/레이어 조건/뷰어). 제품의 가장 복잡한 영역.
• components/grid/ — Kendo Grid 커스텀 셀/필터.

• nuxt.config.ts: ssr:false, compatibilityDate 2024-11-01, viewport maximum-scale=1(줌 차단, 키오스크 지향). modules 12종, plugins 5종 전부 mode:"client". vite proxy + usePolling(파일 변경 폴링).
• tsconfig.json: strict:false · noImplicitAny:false · strictNullChecks:false · skipLibCheck:true — 타입 안정성 의도적 완화(빌드 통과 우선).
• 환경변수: runtimeConfig 미사용, baseURL·프록시·서버 IP가 코드/설정에 하드코딩 → 멀티 환경 대응 취약.

• pnpm 고정(packageManager: pnpm@9.15.2), pnpm.overrides로 일부 버전 핀.
• CI(.gitlab-ci.yml) 2-stage: build(pnpm install --frozen-lockfile → pnpm generate → historian-frontend-{VERSION}.zip, develop/tags) → deploy(수동, 웹루트 비우고 unzip, fsuser 권한, 백업).
• 전통적 온프레미스 정적 zip 배포.

읽는 순서

1. nuxt.config.ts — 모듈·프록시·플러그인 전반
2. app.vue + layouts/default.vue — 셸·네비게이션 구조
3. middleware/auth.global.ts — 인증·임베드 흐름
4. repository/FetchFactory.ts + plugins/apiHistorian.ts — API 계층·$api DI(핵심)
5. stores/authStore.ts, stores/historianStore.ts — 전역 상태·탭
6. 대표 페이지 pages/analytics/TagTrend.vue — 검색바+차트+다이얼로그 패턴
7. components/form/*, components/editor/* — 표준 폼·에디터