seonkyu.kim/AcaMate_Web
1
0
Fork 0
forked from AcaMate/AcaMate_Web
Code Pull Requests Activity

[🎨] Bootstrap 걷어내고 Tailwind로 전체 적용

Browse Source
This commit is contained in:
김선규 2025-04-25 15:14:00 +09:00
parent f15471621a
commit 1fb6491814
1 changed files with 42 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
wwwroot/index.html
View File

@ -1,74 +1,53 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- 문자 인코딩 설정 -->
<meta charset="utf-8" /> <meta charset="utf-8" />
<!-- 반응형 웹 설정 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 브라우저의 탭에 표시되는 제목 -->
<title>AcaMate</title> <title>AcaMate</title>
<!-- 라우팅 시스템을 위한 기본 주소. 절대 경로로 링크를 인식하게 함 -->
<base href="/" /> <base href="/" />
<!-- CSS 파일 연결 부분 --> <link rel="stylesheet" href="css/tailwind.css" />
<link rel="stylesheet" href="_content/Blazored.Modal/blazored-modal.css" />
<!-- BootStrap 프레임 워크 스타일 -->
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<!-- 프로젝트 전용 커스텀 스타일-->
<link rel="stylesheet" href="css/app.css" /> <link rel="stylesheet" href="css/app.css" />
<!-- .razor.css 들을 묶어서 자동으로 생성된 파일 -->
<link href="Front.styles.css" rel="stylesheet" />
<!-- 브라우저 탭에 표시될 파비콘 설정 -->
<link rel="icon" type="image/png" href="favicon.png" /> <link rel="icon" type="image/png" href="favicon.png" />
</head> </head>
<body class="bg-gray-50 text-gray-900 font-sans">
<!-- 로딩 오버레이 -->
<body> <div class="fixed inset-0 z-50 flex items-center justify-center bg-gray-100" id="loading-overlay">
<!-- 로딩 오버레이 내부 -->
<div class="loading-overlay"> <div class="flex flex-col items-center">
<div class="custom-loading"> <div class="relative w-48 h-48 overflow-hidden">
<div class="logo-mask"> <img src="/logo.png" alt="logo"
<img src="logo.png" alt="logo" /> class="absolute top-0 left-0 w-full h-full clip-reveal" />
<div class="logo-progress"></div>
</div> </div>
<div class="mt-4 text-lg text-gray-700 animate-blink">Loading...</div>
<div class="loading-text">Loading...</div>
</div> </div>
<!-- Blazor 가 제대로 실행이 되면 이 자리에 .razor UI가 들어가게 됨 -->
</div> </div>
<div id="app"></div> <div id="app"></div>
<div id="blazor-error-ui"> <!-- Blazor 에러 UI -->
<div id="blazor-error-ui" class="hidden fixed bottom-0 left-0 w-full bg-yellow-100 text-red-800 p-4 shadow z-50">
An unhandled error has occurred. An unhandled error has occurred.
<a href="" class="reload">Reload</a> <a href="" class="underline text-blue-600 ml-2">Reload</a>
<a class="dismiss">🗙</a> <button class="ml-4 text-red-600 font-bold dismiss">✕</button>
</div> </div>
<!-- WASM 를 브라우저에서 실행시켜주는 핵심 JS 파일이며 이게 실행되어야 .razor 파일들이 렌더링된다. --> <!-- Blazor WASM 로딩 스크립트 -->
<script src="_framework/blazor.webassembly.js" autostart="false"></script> <script src="_framework/blazor.webassembly.js" autostart="false"></script>
<!-- 3초 유지 스크립트 -->
<script> <script>
const MIN_LOADING_MS = 2700; const MIN_LOADING_MS = 2700;
const loadingStart = performance.now(); const loadingStart = performance.now();
Blazor.start().then(() => { Blazor.start().then(() => {
console.log("✅ Blazor 로딩 완료됨");
const elapsed = performance.now() - loadingStart; const elapsed = performance.now() - loadingStart;
const remaining = Math.max(0, MIN_LOADING_MS - elapsed); const remaining = Math.max(0, MIN_LOADING_MS - elapsed);
setTimeout(() => { setTimeout(() => {
const overlay = document.querySelector('.loading-overlay'); const overlay = document.getElementById('loading-overlay');
if (overlay) { if (overlay) overlay.remove();
console.log("✅ 오버레이 제거");
overlay.remove();
}
}, remaining); }, remaining);
}).catch(err => { }).catch(err => {
console.error("❌ Blazor 로딩 실패", err); console.error("❌ Blazor 로딩 실패", err);
}); });
</script> </script>
</body> </body>
</html> </html>