124 lines
3.8 KiB
TypeScript
Executable File
124 lines
3.8 KiB
TypeScript
Executable File
import { useState, useEffect } from 'react'
|
|
import { GoogleOAuthProvider } from '@react-oauth/google'
|
|
import { MainLayout } from './components/layout/MainLayout'
|
|
import { LoginPage } from './components/auth/LoginPage'
|
|
import { registerMainTabSwitcher } from './hooks/useSubMenu'
|
|
import { useAuthStore } from './store/authStore'
|
|
import { useMenuStore } from './store/menuStore'
|
|
import { OilSpillView } from './components/views/OilSpillView'
|
|
import { ReportsView } from './components/views/ReportsView'
|
|
import { HNSView } from './components/views/HNSView'
|
|
import { AerialView } from './components/views/AerialView'
|
|
import { AssetsView } from './components/views/AssetsView'
|
|
import { BoardView } from './components/views/BoardView'
|
|
import { WeatherView } from './components/views/WeatherView'
|
|
import { IncidentsView } from './components/views/IncidentsView'
|
|
import { AdminView } from './components/views/AdminView'
|
|
import { PreScatView } from './components/views/PreScatView'
|
|
import { RescueView } from './components/views/RescueView'
|
|
|
|
export type MainTab = 'prediction' | 'hns' | 'rescue' | 'reports' | 'aerial' | 'assets' | 'scat' | 'incidents' | 'board' | 'weather' | 'admin'
|
|
|
|
const GOOGLE_CLIENT_ID = import.meta.env.VITE_GOOGLE_CLIENT_ID || ''
|
|
|
|
function App() {
|
|
const [activeMainTab, setActiveMainTab] = useState<MainTab>('prediction')
|
|
const { isAuthenticated, isLoading, checkSession } = useAuthStore()
|
|
const { loadMenuConfig } = useMenuStore()
|
|
|
|
useEffect(() => {
|
|
checkSession()
|
|
}, [checkSession])
|
|
|
|
useEffect(() => {
|
|
if (isAuthenticated) {
|
|
loadMenuConfig()
|
|
}
|
|
}, [isAuthenticated, loadMenuConfig])
|
|
|
|
useEffect(() => {
|
|
registerMainTabSwitcher(setActiveMainTab)
|
|
}, [])
|
|
|
|
// 감사 로그: 탭 이동 기록
|
|
useEffect(() => {
|
|
if (!isAuthenticated) return
|
|
const blob = new Blob(
|
|
[JSON.stringify({ action: 'TAB_VIEW', detail: activeMainTab })],
|
|
{ type: 'text/plain' }
|
|
)
|
|
navigator.sendBeacon('/api/audit/log', blob)
|
|
}, [activeMainTab, isAuthenticated])
|
|
|
|
// 세션 확인 중 스플래시
|
|
if (isLoading) {
|
|
return (
|
|
<div style={{
|
|
width: '100vw', height: '100vh', display: 'flex',
|
|
flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
|
|
background: '#001028', gap: 16,
|
|
}}>
|
|
<img src="/wing_logo_text_white.svg" alt="WING" style={{ height: 28, opacity: 0.8 }} />
|
|
<div style={{
|
|
width: 32, height: 32, border: '3px solid rgba(6,182,212,0.2)',
|
|
borderTop: '3px solid rgba(6,182,212,0.8)', borderRadius: '50%',
|
|
animation: 'loginSpin 0.8s linear infinite',
|
|
}} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// 미인증 → 로그인 페이지
|
|
if (!isAuthenticated) {
|
|
return <LoginPage />
|
|
}
|
|
|
|
const renderView = () => {
|
|
switch (activeMainTab) {
|
|
case 'prediction':
|
|
return <OilSpillView />
|
|
case 'reports':
|
|
return <ReportsView />
|
|
case 'hns':
|
|
return <HNSView />
|
|
case 'aerial':
|
|
return <AerialView />
|
|
case 'assets':
|
|
return <AssetsView />
|
|
case 'board':
|
|
return <BoardView />
|
|
case 'weather':
|
|
return <WeatherView />
|
|
case 'incidents':
|
|
return <IncidentsView />
|
|
case 'scat':
|
|
return <PreScatView />
|
|
case 'admin':
|
|
return <AdminView />
|
|
case 'rescue':
|
|
return <RescueView />
|
|
default:
|
|
return <div className="flex items-center justify-center h-full text-text-3">준비 중입니다...</div>
|
|
}
|
|
}
|
|
|
|
return (
|
|
<MainLayout activeMainTab={activeMainTab} onMainTabChange={setActiveMainTab}>
|
|
{renderView()}
|
|
</MainLayout>
|
|
)
|
|
}
|
|
|
|
function AppWithProviders() {
|
|
if (!GOOGLE_CLIENT_ID) {
|
|
return <App />
|
|
}
|
|
return (
|
|
<GoogleOAuthProvider clientId={GOOGLE_CLIENT_ID}>
|
|
<App />
|
|
</GoogleOAuthProvider>
|
|
)
|
|
}
|
|
|
|
export default AppWithProviders
|