refactor:esign 페이지 및 전역 레이아웃 React CDN 통합

- esign 전자서명 관련 9개 파일 업데이트
- layouts/app.blade.php 업데이트
- fcm.js React 관련 변경사항 반영
This commit is contained in:
김보곤
2026-02-12 10:35:04 +09:00
parent 56d060a37d
commit 440cd11ece
10 changed files with 46 additions and 45 deletions

View File

@@ -11,7 +11,8 @@
'use strict';
console.log('[FCM] fcm.js LOADED v2');
const DEBUG = window.SAM_CONFIG?.debug || false;
const log = (...args) => { if (DEBUG) console.log('[FCM]', ...args); };
const CONFIG = {
apiBaseUrl: window.SAM_CONFIG?.apiBaseUrl || 'https://api.codebridge-x.com',
@@ -36,12 +37,12 @@
// Capacitor 네이티브 환경(ios, android)에서만 실행
const platform = window.Capacitor?.getPlatform?.();
if (platform !== 'ios' && platform !== 'android') {
console.log('[FCM] Not running in native app (platform:', platform || 'web', ')');
log(' Not running in native app (platform:', platform || 'web', ')');
return;
}
if (!window.Capacitor?.Plugins?.PushNotifications) {
console.log('[FCM] PushNotifications plugin not available');
log(' PushNotifications plugin not available');
return;
}
@@ -51,7 +52,7 @@
App.addListener('appStateChange', ({ isActive }) => {
isAppForeground = isActive;
console.log('[FCM] App state:', isActive ? 'foreground' : 'background');
log(' App state:', isActive ? 'foreground' : 'background');
});
}
@@ -67,8 +68,8 @@
// ✅ 2. 리스너를 먼저 등록 (가장 중요)
PushNotifications.addListener('registration', async (token) => {
console.log('[FCM] 🔥 registration event fired');
console.log('[FCM] Token received:', token.value?.substring(0, 20) + '...');
log(' 🔥 registration event fired');
log(' Token received:', token.value?.substring(0, 20) + '...');
await handleTokenRegistration(token.value);
});
@@ -77,12 +78,12 @@
});
PushNotifications.addListener('pushNotificationReceived', (notification) => {
console.log('[FCM] Push received (foreground):', notification);
log(' Push received (foreground):', notification);
handleForegroundNotification(notification);
});
PushNotifications.addListener('pushNotificationActionPerformed', (action) => {
console.log('[FCM] Push action performed:', action);
log(' Push action performed:', action);
const data = action.notification?.data;
if (data?.url) {
window.location.href = data.url;
@@ -91,10 +92,10 @@
// ✅ 3. 그 다음에 권한 요청
const perm = await PushNotifications.requestPermissions();
console.log('[FCM] Push permission:', perm.receive);
log(' Push permission:', perm.receive);
if (perm.receive !== 'granted') {
console.log('[FCM] Push permission not granted');
log(' Push permission not granted');
return;
}
@@ -110,7 +111,7 @@
const oldToken = sessionStorage.getItem(CONFIG.fcmTokenKey);
if (oldToken === newToken) {
console.log('[FCM] Token unchanged, skip');
log(' Token unchanged, skip');
return;
}
@@ -118,7 +119,7 @@
if (success) {
sessionStorage.setItem(CONFIG.fcmTokenKey, newToken);
console.log('[FCM] Token saved to sessionStorage');
log(' Token saved to sessionStorage');
}
}
@@ -153,7 +154,7 @@
});
if (response.ok) {
console.log('[FCM] Token registered successfully');
log(' Token registered successfully');
return true;
}
@@ -216,7 +217,7 @@
const url = data.url;
const soundKey = data.sound_key;
console.log('[FCM] Notification data:', { type, url, soundKey });
log(' Notification data:', { type, url, soundKey });
// 1. 포그라운드에서만 사운드 재생 (백그라운드는 OS 채널 사운드)
if (isAppForeground && soundKey) {
@@ -299,7 +300,7 @@
if (typeof showToast === 'function') {
showToast(`${title}: ${body}`, 'info');
}
console.log('[FCM] showClickableToast not implemented, URL click ignored');
log(' showClickableToast not implemented, URL click ignored');
};
}

View File

@@ -8,9 +8,7 @@
@endsection
@push('scripts')
<script src="https://unpkg.com/react@18/umd/react.development.js?v={{ time() }}"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js?v={{ time() }}"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js?v={{ time() }}"></script>
@include('partials.react-cdn')
@verbatim
<script type="text/babel">
const { useState, useRef } = React;
@@ -151,7 +149,7 @@ className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm
);
};
ReactDOM.render(<App />, document.getElementById('esign-create-root'));
ReactDOM.createRoot(document.getElementById('esign-create-root')).render(<App />);
</script>
@endverbatim
@endpush

View File

@@ -8,10 +8,8 @@
@endsection
@push('scripts')
<script src="https://unpkg.com/react@18/umd/react.development.js?v={{ time() }}"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js?v={{ time() }}"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js?v={{ time() }}"></script>
<script src="https://unpkg.com/lucide@latest?v={{ time() }}"></script>
@include('partials.react-cdn')
<script src="https://unpkg.com/lucide@latest"></script>
@verbatim
<script type="text/babel">
const { useState, useEffect, useCallback } = React;
@@ -172,7 +170,7 @@ className={`px-3 py-1 text-sm rounded ${p === pagination.current_page ? 'bg-blue
);
};
ReactDOM.render(<App />, document.getElementById('esign-dashboard-root'));
ReactDOM.createRoot(document.getElementById('esign-dashboard-root')).render(<App />);
</script>
@endverbatim
@endpush

View File

@@ -8,9 +8,7 @@
@endsection
@push('scripts')
<script src="https://unpkg.com/react@18/umd/react.development.js?v={{ time() }}"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js?v={{ time() }}"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js?v={{ time() }}"></script>
@include('partials.react-cdn')
@verbatim
<script type="text/babel">
const { useState, useEffect, useCallback } = React;
@@ -203,7 +201,7 @@ className="block w-full text-center px-4 py-2 border rounded-lg text-gray-700 ho
);
};
ReactDOM.render(<App />, document.getElementById('esign-detail-root'));
ReactDOM.createRoot(document.getElementById('esign-detail-root')).render(<App />);
</script>
@endverbatim
@endpush

View File

@@ -8,9 +8,7 @@
@endsection
@push('scripts')
<script src="https://unpkg.com/react@18/umd/react.development.js?v={{ time() }}"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js?v={{ time() }}"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js?v={{ time() }}"></script>
@include('partials.react-cdn')
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script>pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';</script>
@verbatim
@@ -249,7 +247,7 @@ className="border rounded px-2 py-1 text-xs" />
);
};
ReactDOM.render(<App />, document.getElementById('esign-fields-root'));
ReactDOM.createRoot(document.getElementById('esign-fields-root')).render(<App />);
</script>
@endverbatim
@endpush

View File

@@ -8,9 +8,7 @@
@endsection
@push('scripts')
<script src="https://unpkg.com/react@18/umd/react.development.js?v={{ time() }}"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js?v={{ time() }}"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js?v={{ time() }}"></script>
@include('partials.react-cdn')
@verbatim
<script type="text/babel">
const { useState, useEffect, useCallback } = React;
@@ -125,7 +123,7 @@ className="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 text-
);
};
ReactDOM.render(<App />, document.getElementById('esign-send-root'));
ReactDOM.createRoot(document.getElementById('esign-send-root')).render(<App />);
</script>
@endverbatim
@endpush

View File

@@ -9,8 +9,11 @@
<body class="bg-gray-50 min-h-screen">
<div id="esign-auth-root" data-token="{{ $token }}"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script>
(function(){var w=console.warn;console.warn=function(){if(typeof arguments[0]==='string'&&arguments[0].indexOf('in-browser Babel')>-1)return;w.apply(console,arguments)};})();
</script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const { useState, useEffect, useCallback } = React;
@@ -158,7 +161,7 @@ className="w-full py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-
);
};
ReactDOM.render(<App />, document.getElementById('esign-auth-root'));
ReactDOM.createRoot(document.getElementById('esign-auth-root')).render(<App />);
</script>
</body>
</html>

View File

@@ -9,8 +9,11 @@
<body class="bg-gray-50 min-h-screen">
<div id="esign-done-root" data-token="{{ $token }}"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script>
(function(){var w=console.warn;console.warn=function(){if(typeof arguments[0]==='string'&&arguments[0].indexOf('in-browser Babel')>-1)return;w.apply(console,arguments)};})();
</script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const { useState, useEffect } = React;
@@ -121,7 +124,7 @@
);
};
ReactDOM.render(<App />, document.getElementById('esign-done-root'));
ReactDOM.createRoot(document.getElementById('esign-done-root')).render(<App />);
</script>
</body>
</html>

View File

@@ -9,8 +9,11 @@
<body class="bg-gray-50 min-h-screen">
<div id="esign-sign-root" data-token="{{ $token }}"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script>
(function(){var w=console.warn;console.warn=function(){if(typeof arguments[0]==='string'&&arguments[0].indexOf('in-browser Babel')>-1)return;w.apply(console,arguments)};})();
</script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.1.7/dist/signature_pad.umd.min.js"></script>
<script type="text/babel">
@@ -222,7 +225,7 @@ className="flex-1 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 fon
);
};
ReactDOM.render(<App />, document.getElementById('esign-sign-root'));
ReactDOM.createRoot(document.getElementById('esign-sign-root')).render(<App />);
</script>
</body>
</html>

View File

@@ -12,6 +12,7 @@
apiBaseUrl: '{{ config('services.api.base_url', 'https://api.codebridge-x.com') }}',
apiKey: '{{ config('services.api.key', '') }}',
appVersion: '{{ config('app.version', '1.0.0') }}',
debug: {{ config('app.debug') ? 'true' : 'false' }},
};
// API 토큰 sessionStorage 동기화 (FCM 등에서 사용)