refactor: 로그인 페이지 개선 - 문서 관리 시스템 제거 및 브라우저 호환성 개선
🗑️ 불필요한 기능 제거: - 문서 관리 시스템 섹션 완전 제거 - 관련 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:
@@ -1,7 +1,19 @@
|
||||
// /public/js/api-helper.js
|
||||
// ES6 모듈 의존성 제거 - 브라우저 호환성 개선
|
||||
|
||||
import { API_BASE_URL } from './api-config.js';
|
||||
import { getToken, clearAuthData } from './auth.js';
|
||||
// API 설정 (window 객체에서 가져오기)
|
||||
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 요청)
|
||||
@@ -9,7 +21,7 @@ import { getToken, clearAuthData } from './auth.js';
|
||||
* @param {string} password - 사용자 비밀번호
|
||||
* @returns {Promise<object>} - API 응답 결과
|
||||
*/
|
||||
export async function login(username, password) {
|
||||
async function login(username, password) {
|
||||
const response = await fetch(`${API_BASE_URL}/auth/login`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
@@ -72,7 +84,7 @@ async function authFetch(endpoint, options = {}) {
|
||||
* GET 요청 헬퍼
|
||||
* @param {string} endpoint - API 엔드포인트
|
||||
*/
|
||||
export async function apiGet(endpoint) {
|
||||
async function apiGet(endpoint) {
|
||||
const response = await authFetch(endpoint);
|
||||
return response.json();
|
||||
}
|
||||
@@ -82,7 +94,7 @@ export async function apiGet(endpoint) {
|
||||
* @param {string} endpoint - API 엔드포인트
|
||||
* @param {object} data - 전송할 데이터
|
||||
*/
|
||||
export async function apiPost(endpoint, data) {
|
||||
async function apiPost(endpoint, data) {
|
||||
const response = await authFetch(endpoint, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(data)
|
||||
@@ -95,7 +107,7 @@ export async function apiPost(endpoint, data) {
|
||||
* @param {string} endpoint - API 엔드포인트
|
||||
* @param {object} data - 전송할 데이터
|
||||
*/
|
||||
export async function apiPut(endpoint, data) {
|
||||
async function apiPut(endpoint, data) {
|
||||
const response = await authFetch(endpoint, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(data)
|
||||
@@ -107,9 +119,18 @@ export async function apiPut(endpoint, data) {
|
||||
* DELETE 요청 헬퍼
|
||||
* @param {string} endpoint - API 엔드포인트
|
||||
*/
|
||||
export async function apiDelete(endpoint) {
|
||||
async function apiDelete(endpoint) {
|
||||
const response = await authFetch(endpoint, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
return response.json();
|
||||
}
|
||||
}
|
||||
|
||||
// 전역 함수로 설정
|
||||
window.login = login;
|
||||
window.apiGet = apiGet;
|
||||
window.apiPost = apiPost;
|
||||
window.apiPut = apiPut;
|
||||
window.apiDelete = apiDelete;
|
||||
window.getToken = getToken;
|
||||
window.clearAuthData = clearAuthData;
|
||||
@@ -1,7 +1,16 @@
|
||||
// /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) {
|
||||
e.preventDefault();
|
||||
@@ -19,8 +28,8 @@ document.getElementById('loginForm').addEventListener('submit', async function (
|
||||
errorDiv.style.display = 'none';
|
||||
|
||||
try {
|
||||
// API 헬퍼를 통해 로그인 요청
|
||||
const result = await login(username, password);
|
||||
// API 헬퍼를 통해 로그인 요청 (window 객체에서 가져오기)
|
||||
const result = await window.login(username, password);
|
||||
|
||||
if (result.success && result.data && result.data.token) {
|
||||
// 인증 정보 저장
|
||||
|
||||
Reference in New Issue
Block a user