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> <title>(주)테크니컬코리아 생산팀 포털</title>
<link rel="stylesheet" href="css/login.css" /> <link rel="stylesheet" href="css/login.css" />
<link rel="icon" type="image/png" href="img/favicon.png"> <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> </head>
<body> <body>
<div class="login-container"> <div class="login-container">
@@ -65,16 +19,11 @@
</form> </form>
<div id="error" class="error-message"></div> <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> </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> </body>
</html> </html>

37
web-ui/js/api-helper.js
View File

@@ -1,7 +1,19 @@
// /public/js/api-helper.js // /public/js/api-helper.js
// ES6 모듈 의존성 제거 - 브라우저 호환성 개선
import { API_BASE_URL } from './api-config.js'; // API 설정 (window 객체에서 가져오기)
import { getToken, clearAuthData } from './auth.js'; const API_BASE_URL = window.API_BASE_URL || 'http://localhost:20005/api';
// 인증 관련 함수들 (직접 구현)
function getToken() {
const token = localStorage.getItem('token');
return token && token !== 'undefined' && token !== 'null' ? token : null;
}
function clearAuthData() {
localStorage.removeItem('token');
localStorage.removeItem('user');
}
/** /**
* 로그인 API를 호출합니다. (인증이 필요 없는 public 요청) * 로그인 API를 호출합니다. (인증이 필요 없는 public 요청)
@@ -9,7 +21,7 @@ import { getToken, clearAuthData } from './auth.js';
* @param {string} password - 사용자 비밀번호 * @param {string} password - 사용자 비밀번호
* @returns {Promise<object>} - API 응답 결과 * @returns {Promise<object>} - API 응답 결과
*/ */
export async function login(username, password) { async function login(username, password) {
const response = await fetch(`${API_BASE_URL}/auth/login`, { const response = await fetch(`${API_BASE_URL}/auth/login`, {
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
@@ -72,7 +84,7 @@ async function authFetch(endpoint, options = {}) {
* GET 요청 헬퍼 * GET 요청 헬퍼
* @param {string} endpoint - API 엔드포인트 * @param {string} endpoint - API 엔드포인트
*/ */
export async function apiGet(endpoint) { async function apiGet(endpoint) {
const response = await authFetch(endpoint); const response = await authFetch(endpoint);
return response.json(); return response.json();
} }
@@ -82,7 +94,7 @@ export async function apiGet(endpoint) {
* @param {string} endpoint - API 엔드포인트 * @param {string} endpoint - API 엔드포인트
* @param {object} data - 전송할 데이터 * @param {object} data - 전송할 데이터
*/ */
export async function apiPost(endpoint, data) { async function apiPost(endpoint, data) {
const response = await authFetch(endpoint, { const response = await authFetch(endpoint, {
method: 'POST', method: 'POST',
body: JSON.stringify(data) body: JSON.stringify(data)
@@ -95,7 +107,7 @@ export async function apiPost(endpoint, data) {
* @param {string} endpoint - API 엔드포인트 * @param {string} endpoint - API 엔드포인트
* @param {object} data - 전송할 데이터 * @param {object} data - 전송할 데이터
*/ */
export async function apiPut(endpoint, data) { async function apiPut(endpoint, data) {
const response = await authFetch(endpoint, { const response = await authFetch(endpoint, {
method: 'PUT', method: 'PUT',
body: JSON.stringify(data) body: JSON.stringify(data)
@@ -107,9 +119,18 @@ export async function apiPut(endpoint, data) {
* DELETE 요청 헬퍼 * DELETE 요청 헬퍼
* @param {string} endpoint - API 엔드포인트 * @param {string} endpoint - API 엔드포인트
*/ */
export async function apiDelete(endpoint) { async function apiDelete(endpoint) {
const response = await authFetch(endpoint, { const response = await authFetch(endpoint, {
method: 'DELETE' method: 'DELETE'
}); });
return response.json(); return response.json();
} }
// 전역 함수로 설정
window.login = login;
window.apiGet = apiGet;
window.apiPost = apiPost;
window.apiPut = apiPut;
window.apiDelete = apiDelete;
window.getToken = getToken;
window.clearAuthData = clearAuthData;

17
web-ui/js/login.js
View File

@@ -1,7 +1,16 @@
// /js/login.js // /js/login.js
// ES6 모듈 의존성 제거 - 브라우저 호환성 개선
import { login } from './api-helper.js'; // 인증 데이터 저장 함수 (직접 구현)
import { saveAuthData, clearAuthData } from './auth.js'; function saveAuthData(token, user) {
localStorage.setItem('token', token);
localStorage.setItem('user', JSON.stringify(user));
}
function clearAuthData() {
localStorage.removeItem('token');
localStorage.removeItem('user');
}
document.getElementById('loginForm').addEventListener('submit', async function (e) { document.getElementById('loginForm').addEventListener('submit', async function (e) {
e.preventDefault(); e.preventDefault();
@@ -19,8 +28,8 @@ document.getElementById('loginForm').addEventListener('submit', async function (
errorDiv.style.display = 'none'; errorDiv.style.display = 'none';
try { try {
// API 헬퍼를 통해 로그인 요청 // API 헬퍼를 통해 로그인 요청 (window 객체에서 가져오기)
const result = await login(username, password); const result = await window.login(username, password);
if (result.success && result.data && result.data.token) { if (result.success && result.data && result.data.token) {
// 인증 정보 저장 // 인증 정보 저장