116 lines
4.2 KiB
TypeScript
116 lines
4.2 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { HashRouter, Routes, Route } from 'react-router-dom';
|
|
import { Layout } from '@/components/layout';
|
|
import { Dashboard, Todo, Kuntae, Jobreport, Project, Login, CommonCodePage, ItemsPage, UserListPage, MonthlyWorkPage, MailFormPage, UserAuthPage, Note } from '@/pages';
|
|
import { PatchList } from '@/pages/PatchList';
|
|
import { MailList } from '@/pages/MailList';
|
|
import { Customs } from '@/pages/Customs';
|
|
import { comms } from '@/communication';
|
|
import { UserInfo } from '@/types';
|
|
import { Loader2 } from 'lucide-react';
|
|
|
|
export default function App() {
|
|
const [isConnected, setIsConnected] = useState(false);
|
|
const [isLoggedIn, setIsLoggedIn] = useState<boolean | null>(null); // null = 체크 중
|
|
const [user, setUser] = useState<UserInfo | null>(null);
|
|
|
|
useEffect(() => {
|
|
// 통신 상태 구독
|
|
const unsubscribe = comms.subscribe((msg: unknown) => {
|
|
const message = msg as { type?: string; connected?: boolean };
|
|
if (message?.type === 'CONNECTION_STATE') {
|
|
setIsConnected(message.connected ?? false);
|
|
// 연결되면 로그인 상태 체크
|
|
if (message.connected) {
|
|
checkLoginStatus();
|
|
}
|
|
}
|
|
});
|
|
|
|
// 초기 연결 상태 설정
|
|
setIsConnected(comms.getConnectionState());
|
|
|
|
// 연결되어 있으면 바로 로그인 상태 체크
|
|
if (comms.getConnectionState()) {
|
|
checkLoginStatus();
|
|
}
|
|
|
|
return () => {
|
|
unsubscribe();
|
|
};
|
|
}, []);
|
|
|
|
const checkLoginStatus = async () => {
|
|
try {
|
|
const result = await comms.checkLoginStatus();
|
|
if (result.Success) {
|
|
setIsLoggedIn(result.IsLoggedIn);
|
|
setUser(result.User);
|
|
} else {
|
|
setIsLoggedIn(false);
|
|
setUser(null);
|
|
}
|
|
} catch (err) {
|
|
console.error('로그인 상태 체크 실패:', err);
|
|
setIsLoggedIn(false);
|
|
setUser(null);
|
|
}
|
|
};
|
|
|
|
const handleLoginSuccess = () => {
|
|
checkLoginStatus();
|
|
};
|
|
|
|
// 로그인 상태 체크 중
|
|
if (isLoggedIn === null) {
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-blue-900 via-purple-900 to-indigo-900 flex items-center justify-center">
|
|
<div className="text-center">
|
|
<Loader2 className="w-10 h-10 text-white animate-spin mx-auto mb-4" />
|
|
<p className="text-white/70">로그인 상태 확인 중...</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 로그인 안됨 → 로그인 화면 표시
|
|
if (!isLoggedIn) {
|
|
return <Login onLoginSuccess={handleLoginSuccess} />;
|
|
}
|
|
|
|
// 로그인 됨 → 메인 앱 표시
|
|
return (
|
|
<HashRouter>
|
|
<Routes>
|
|
<Route element={<Layout isConnected={isConnected} user={user} />}>
|
|
<Route path="/" element={<Dashboard />} />
|
|
<Route path="/dashboard" element={<Dashboard />} />
|
|
<Route path="/todo" element={<Todo />} />
|
|
<Route path="/kuntae" element={<Kuntae />} />
|
|
<Route path="/jobreport" element={<Jobreport />} />
|
|
<Route path="/project" element={<Project />} />
|
|
<Route path="/common" element={<CommonCodePage />} />
|
|
<Route path="/items" element={<ItemsPage />} />
|
|
<Route path="/customs" element={<Customs />} />
|
|
<Route path="/user/list" element={<UserListPage />} />
|
|
<Route path="/user/auth" element={<UserAuthPage />} />
|
|
<Route path="/monthly-work" element={<MonthlyWorkPage />} />
|
|
<Route path="/mail-form" element={<MailFormPage />} />
|
|
<Route path="/note" element={<Note />} />
|
|
<Route path="/patch-list" element={<PatchList />} />
|
|
<Route path="/mail-list" element={<MailList />} />
|
|
</Route>
|
|
</Routes>
|
|
{/* Tailwind Breakpoint Indicator - 개발용 */}
|
|
<div className="fixed bottom-2 right-2 z-50 bg-black/80 text-white text-xs px-2 py-1 rounded font-mono">
|
|
<span className="sm:hidden">XS</span>
|
|
<span className="hidden sm:inline md:hidden">SM</span>
|
|
<span className="hidden md:inline lg:hidden">MD</span>
|
|
<span className="hidden lg:inline xl:hidden">LG</span>
|
|
<span className="hidden xl:inline 2xl:hidden">XL</span>
|
|
<span className="hidden 2xl:inline">2XL</span>
|
|
</div>
|
|
</HashRouter>
|
|
);
|
|
}
|