hyungi/TK-FB-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 로그인 페이지 개선 - 문서 관리 시스템 제거 및 브라우저 호환성 개선

Browse Source 
🗑️ 불필요한 기능 제거:
- 문서 관리 시스템 섹션 완전 제거
- 관련 CSS 스타일 정리
- 깔끔한 로그인 페이지 구성

🔧 JavaScript 브라우저 호환성 개선:
1. api-helper.js:
   - ES6 import/export → 브라우저 호환 스크립트
   - 함수들을 window 객체에 등록
   - 의존성 제거 (API_BASE_URL, getToken, clearAuthData 직접 구현)

2. login.js:
   - ES6 import 제거
   - saveAuthData, clearAuthData 직접 구현
   - window.login 함수 사용

3. index.html:
   - type="module" 제거
   - 스크립트 로딩 순서 최적화 (api-config.js → api-helper.js → login.js)

✅ 개선 효과:
- SyntaxError: Importing binding name 'API_BASE_URL' is not found 해결
- 모든 브라우저에서 로그인 기능 정상 작동
- 깔끔하고 집중된 로그인 UI
- 안정적인 스크립트 로딩

🎯 사용자 경험:
- 불필요한 요소 제거로 집중도 향상
- 빠른 로딩 속도
- 오류 없는 안정적인 로그인

테스트: http://localhost:20000/
This commit is contained in:
Hyungi Ahn
2025-11-03 12:07:41 +09:00
parent 3e992ad521
commit 68e3c68880
3 changed files with 46 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
web-ui/index.html
View File

@@ -6,52 +6,6 @@
<title>(주)테크니컬코리아 생산팀 포털</title>
<link rel="stylesheet" href="css/login.css" />
<link rel="icon" type="image/png" href="img/favicon.png">
<style>
/* 문서시스템 버튼 스타일 */
.docs-section {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.docs-button {
display: inline-block;
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
padding: 15px 25px;
border: 1px solid rgba(255, 255, 255, 0.15);
font-weight: 400;
font-size: 14px;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
width: 100%;
text-align: center;
box-sizing: border-box;
}
.docs-button:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.25);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.docs-title {
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
margin-bottom: 15px;
font-weight: 400;
text-align: center;
}
@media (max-width: 480px) {
.docs-button {
padding: 12px 20px;
font-size: 13px;
}
}
</style>
</head>
<body>
<div class="login-container">
@@ -65,16 +19,11 @@
</form>
<div id="error" class="error-message"></div>
<!-- 📋 문서관리 시스템 섹션 -->
<div class="docs-section">
<div class="docs-title">회사 문서시스템</div>
<a href="docs/" class="docs-button">
문서관리 시스템
</a>
</div>
</div>
<!-- ✅ 모듈로 지정 (import 쓸 수 있도록) -->
<script type="module" src="js/login.js"></script>
<!-- 스크립트 로딩 (순서 중요) -->
<script src="js/api-config.js"></script>
<script src="js/api-helper.js"></script>
<script src="js/login.js"></script>
</body>
</html>