@xfilecom/xframe 0.1.37 → 0.1.38

package/defaults.json

@@ -1,4 +1,4 @@
 {
-  "backendCore": "^1.0.17",
-  "frontCore": "^0.2.23"
+  "backendCore": "^1.0.18",
+  "frontCore": "^0.2.24"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xfilecom/xframe",
-  "version": "0.1.37",
+  "version": "0.1.38",
   "description": "Scaffold full-stack app: Nest + @xfilecom/backend-core, Vite/React + @xfilecom/front-core",
   "license": "UNLICENSED",
   "bin": {

package/template/shared/endpoint/endpoint.ts

@@ -44,6 +44,7 @@ export const healthEndpoint: EndpointDef = {
   path: '/health',
   /** health 는 인디케이터 없이 조용히 호출하는 경우가 많음 */
   showIndicator: false,
+  post: unwrapResponseData,
 };
 
 export const appMetaEndpoint: EndpointDef = {

package/template/web/admin/src/App.tsx

@@ -1,10 +1,10 @@
 import { Badge, Text } from '@xfilecom/front-core';
-import { Shell, useHealthStatus } from '__WEB_SHARED_WORKSPACE__';
+import { safeJsonStringify, Shell, useHealthStatus } from '__WEB_SHARED_WORKSPACE__';
 
 const title = import.meta.env.VITE_APP_TITLE || '__PACKAGE_NAME__ (admin)';
 
 export function App() {
-  const { text, error } = useHealthStatus();
+  const { data } = useHealthStatus();
 
   return (
     <Shell
@@ -18,15 +18,9 @@ export function App() {
         </>
       }
     >
-      {error ? (
-        <Text as="pre" variant="body" style={{ color: 'var(--xfc-warning)', margin: 0, whiteSpace: 'pre-wrap' }}>
-          {error}
-        </Text>
-      ) : (
-        <Text as="pre" variant="small" style={{ margin: 0, overflow: 'auto' }}>
-          {text}
-        </Text>
-      )}
+      <Text as="pre" variant="small" style={{ margin: 0, overflow: 'auto' }}>
+        {data != null ? safeJsonStringify(data, 2) : '—'}
+      </Text>
     </Shell>
   );
 }

package/template/web/client/src/App.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Badge, Button, Stack, Text } from '@xfilecom/front-core';
-import { Shell, useHealthStatus } from '__WEB_SHARED_WORKSPACE__';
+import { safeJsonStringify, Shell, useHealthStatus } from '__WEB_SHARED_WORKSPACE__';
 import { FrontCoreShowcase } from './FrontCoreShowcase';
 
 const title = import.meta.env.VITE_APP_TITLE || '__PACKAGE_NAME__';
@@ -9,7 +9,7 @@ type Tab = 'api' | 'atoms';
 
 export function App() {
   const [tab, setTab] = useState<Tab>('atoms');
-  const { text, error } = useHealthStatus();
+  const { data } = useHealthStatus();
 
   return (
     <Shell
@@ -44,13 +44,9 @@ export function App() {
 
         {tab === 'atoms' ? (
           <FrontCoreShowcase />
-        ) : error ? (
-          <Text as="pre" variant="body" style={{ color: 'var(--xfc-warning)', margin: 0, whiteSpace: 'pre-wrap' }}>
-            {error}
-          </Text>
         ) : (
           <Text as="pre" variant="small" style={{ margin: 0, overflow: 'auto' }}>
-            {text}
+            {data != null ? safeJsonStringify(data, 2) : '—'}
           </Text>
         )}
       </Stack>

package/template/web/shared/src/api/client.ts

@@ -75,11 +75,13 @@ function logRequest(config: InternalAxiosRequestConfig) {
 }
 
 function logResponseSuccess(response: AxiosResponse) {
+  const body = response.data;
+  const data = isCommonResponsePayload(body) ? body.data : body;
   console.log(`${LOG_PREFIX} response`, {
     status: response.status,
     statusText: response.statusText,
     url: response.config.url,
-    data: response.data,
+    data,
   });
 }
 

package/template/web/shared/src/context/StoreProvider.tsx

@@ -1,9 +1,13 @@
 /**
  * RootStore 컨텍스트 — useStore / useParamStore / useSendMessage 등
  * (싱글톤 rootStore 이므로 Provider 없이도 rootStore 직접 import 가능)
+ *
+ * 최상위 레이어: HTTP 로딩 바(`indicator`) · `rootStore.toasts` → ToastList
  */
 
 import React, { createContext, useCallback, useContext } from 'react';
+import { ToastList } from '@xfilecom/front-core';
+import { observer } from 'mobx-react-lite';
 import type { EndpointDef } from '@shared/endpoint';
 import type { SendMessageOptions } from '../types/ui';
 import { rootStore } from '../store/root-store';
@@ -12,6 +16,34 @@ type RootStoreApi = typeof rootStore;
 
 const StoreContext = createContext<RootStoreApi | null>(null);
 
+const GlobalHttpIndicatorView = observer(function GlobalHttpIndicatorView() {
+  if (!rootStore.indicator.loading) return null;
+  return (
+    <div
+      className="xfc-global-http-indicator"
+      role="progressbar"
+      aria-busy="true"
+      aria-label="Loading"
+    />
+  );
+});
+
+const GlobalToastStackView = observer(function GlobalToastStackView() {
+  const entries = rootStore.toasts.map((t) => ({
+    id: t.id,
+    severity: t.severity,
+    message: t.message,
+  }));
+  return (
+    <ToastList
+      toasts={entries}
+      onDismiss={(id) => {
+        rootStore.removeToast(id);
+      }}
+    />
+  );
+});
+
 export function useStore(): RootStoreApi {
   const ctx = useContext(StoreContext);
   if (!ctx) throw new Error('StoreProvider is required');
@@ -19,7 +51,13 @@ export function useStore(): RootStoreApi {
 }
 
 export function StoreProvider({ children }: { children: React.ReactNode }) {
-  return <StoreContext.Provider value={rootStore}>{children}</StoreContext.Provider>;
+  return (
+    <StoreContext.Provider value={rootStore}>
+      <GlobalHttpIndicatorView />
+      <GlobalToastStackView />
+      {children}
+    </StoreContext.Provider>
+  );
 }
 
 export function useSendMessage() {

package/template/web/shared/src/hooks/useAppStore.ts

@@ -5,6 +5,7 @@ import { rootStore } from '../store/root-store';
 /**
  * Zustand 스타일 셀렉터 — RootStore(MobX) 구독
  * 예: `useAppStore((s) => s.lastHealthAt)`, `useAppStore((s) => s.setLastHealthAt)`
+ * (프로토타입 메서드는 분리 시 this 가 깨지므로, 콜백으로 쓸 메서드는 스토어에서 화살표 필드로 두거나 `bind` 하세요.)
  */
 export function useAppStore<T>(selector: (store: typeof rootStore) => T): T {
   return useSyncExternalStore(

package/template/web/shared/src/hooks/useHealthStatus.ts

@@ -1,38 +1,34 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { configureApi } from '../api/client';
 import { fetchHealth } from '../methods/health';
-import { safeJsonStringify } from '../utils/safeJsonStringify';
+import { rootStore } from '../store/root-store';
 import { useAppStore } from './useAppStore';
 
 /**
  * @param apiBaseUrl 선택 — 넘기면 `configureApi` 로 baseURL 갱신. 앱 entry 에서 이미 `configureApi` 했다면 생략 가능.
+ * `data`·`error` 는 `rootStore` 에 저장·`runInAction`; 로딩 표시는 `StoreProvider` 전역 바 + `indicator`(axios).
  */
 export function useHealthStatus(apiBaseUrl?: string) {
-  const setLastHealthAt = useAppStore((s) => s.setLastHealthAt);
-  const [text, setText] = useState('loading…');
-  const [error, setError] = useState<string | null>(null);
+  const data = useAppStore((s) => s.healthData);
+  const error = useAppStore((s) => s.healthError);
 
   useEffect(() => {
     if (apiBaseUrl != null && apiBaseUrl !== '') {
       configureApi({ baseURL: apiBaseUrl });
     }
     let cancelled = false;
-    setError(null);
-    setText('loading…');
+    rootStore.applyHealthFetchStart();
     fetchHealth()
       .then((body) => {
-        if (!cancelled) {
-          setText(safeJsonStringify(body, 2));
-          setLastHealthAt(Date.now());
-        }
+        if (!cancelled) rootStore.applyHealthFetchSuccess(body);
       })
-      .catch((e: Error) => {
-        if (!cancelled) setError(e.message);
+      .catch((e: unknown) => {
+        if (!cancelled) rootStore.applyHealthFetchFailure(e);
       });
     return () => {
       cancelled = true;
     };
-  }, [apiBaseUrl, setLastHealthAt]);
+  }, [apiBaseUrl]);
 
-  return { text, error };
+  return { data, error };
 }

package/template/web/shared/src/store/root-store.ts

@@ -2,6 +2,7 @@
  * Root store — session, param, cache, indicator, execute/sendMessage (business-promotion 패턴 축소판)
  */
 
+import axios from 'axios';
 import { makeAutoObservable, runInAction } from 'mobx';
 import { setApiHooks } from '../api/client';
 import {
@@ -28,6 +29,7 @@ import { sessionStore } from './session-store';
 import { ParamStore } from '../params/param-store';
 import type { ApiErrorItem, IndicatorState, SendMessageOptions, ToastItem } from '../types/ui';
 import type { ToastSeverity } from '../types/ui';
+import type { HealthData } from '../types/api';
 
 function genId() {
   return `id_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
@@ -88,6 +90,10 @@ export class RootStore {
   /** 데모·useHealthStatus 용 타임스탬프 */
   lastHealthAt: number | null = null;
 
+  /** `/health` 성공 본문 (axios 공통 래핑 제거 후) */
+  healthData: HealthData | null = null;
+  healthError: string | null = null;
+
   constructor() {
     makeAutoObservable(this);
     this.sessionStore.registerLogoutCallback(() => {
@@ -104,7 +110,9 @@ export class RootStore {
         if (this._multiEndpointBatch) return;
         runInAction(() => this._endRequest());
       },
-      onError: () => {},
+      onError: (message) => {
+        runInAction(() => this.addToast(message, 'error'));
+      },
       onCommonBusinessError: (message) => {
         runInAction(() => this.addToast(message, 'error'));
       },
@@ -123,9 +131,31 @@ export class RootStore {
     return this._toasts;
   }
 
-  setLastHealthAt(t: number) {
+  /** useAppStore 셀렉터로 넘길 때 this 유지 */
+  setLastHealthAt = (t: number) => {
     this.lastHealthAt = t;
-  }
+  };
+
+  /** 로딩 표시는 `indicator`(axios 훅) — 여기선 에러만 초기화 */
+  applyHealthFetchStart = () => {
+    runInAction(() => {
+      this.healthError = null;
+    });
+  };
+
+  applyHealthFetchSuccess = (data: HealthData) => {
+    runInAction(() => {
+      this.healthError = null;
+      this.healthData = data;
+      this.lastHealthAt = Date.now();
+    });
+  };
+
+  applyHealthFetchFailure = (err: unknown) => {
+    runInAction(() => {
+      this.healthError = getErrorMessage(err);
+    });
+  };
 
   private _startRequest() {
     this._requestDepth++;
@@ -239,7 +269,11 @@ export class RootStore {
         }
         return result;
       } catch (e) {
-        if (showErrorToast && !(e instanceof CommonResponseRejectedError)) {
+        if (
+          showErrorToast &&
+          !(e instanceof CommonResponseRejectedError) &&
+          !axios.isAxiosError(e)
+        ) {
           runInAction(() => this.addToast(getErrorMessage(e), 'error'));
         }
         throw e;
@@ -358,7 +392,11 @@ export class RootStore {
       return data;
     } catch (e) {
       runInAction(() => {
-        if (showErrorToast && !(e instanceof CommonResponseRejectedError)) {
+        if (
+          showErrorToast &&
+          !(e instanceof CommonResponseRejectedError) &&
+          !axios.isAxiosError(e)
+        ) {
           this.addToast(getErrorMessage(e), 'error');
         }
       });

package/template/web/shared/src/styles/app.css

@@ -67,4 +67,27 @@
   border-bottom: 1px solid var(--xfc-border-header);
 }
 
+/* apiClient 진행 중 — StoreProvider 가 `rootStore.indicator.loading` 과 연동 */
+.xfc-global-http-indicator {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  z-index: 99999;
+  background: var(--xfc-accent, var(--xfc-border));
+  pointer-events: none;
+  animation: xfc-global-http-pulse 0.9s ease-in-out infinite;
+}
+
+@keyframes xfc-global-http-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.45;
+  }
+}
+
 /* —— front-core atoms 추가 오버라이드는 xfc-theme.css 또는 여기 (app이 마지막 로드) —— */