From 68e3c68880d2b6a98099ea7dcef9f52d44d38d21 Mon Sep 17 00:00:00 2001 From: Hyungi Ahn Date: Mon, 3 Nov 2025 12:07:41 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B0=9C=EC=84=A0=20-=20?= =?UTF-8?q?=EB=AC=B8=EC=84=9C=20=EA=B4=80=EB=A6=AC=20=EC=8B=9C=EC=8A=A4?= =?UTF-8?q?=ED=85=9C=20=EC=A0=9C=EA=B1=B0=20=EB=B0=8F=20=EB=B8=8C=EB=9D=BC?= =?UTF-8?q?=EC=9A=B0=EC=A0=80=20=ED=98=B8=ED=99=98=EC=84=B1=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ๐Ÿ—‘๏ธ ๋ถˆํ•„์š”ํ•œ ๊ธฐ๋Šฅ ์ œ๊ฑฐ: - ๋ฌธ์„œ ๊ด€๋ฆฌ ์‹œ์Šคํ…œ ์„น์…˜ ์™„์ „ ์ œ๊ฑฐ - ๊ด€๋ จ 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/ --- web-ui/index.html | 59 +++-------------------------------------- web-ui/js/api-helper.js | 37 ++++++++++++++++++++------ web-ui/js/login.js | 17 +++++++++--- 3 files changed, 46 insertions(+), 67 deletions(-) diff --git a/web-ui/index.html b/web-ui/index.html index 1e91260..406948d 100644 --- a/web-ui/index.html +++ b/web-ui/index.html @@ -6,52 +6,6 @@ (์ฃผ)ํ…Œํฌ๋‹ˆ์ปฌ์ฝ”๋ฆฌ์•„ ์ƒ์‚ฐํŒ€ ํฌํ„ธ -
@@ -65,16 +19,11 @@
- -
-
ํšŒ์‚ฌ ๋ฌธ์„œ์‹œ์Šคํ…œ
- - ๋ฌธ์„œ๊ด€๋ฆฌ ์‹œ์Šคํ…œ - -
- - + + + + \ No newline at end of file diff --git a/web-ui/js/api-helper.js b/web-ui/js/api-helper.js index 8057bc9..d322e3f 100644 --- a/web-ui/js/api-helper.js +++ b/web-ui/js/api-helper.js @@ -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} - 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(); -} \ No newline at end of file +} + +// ์ „์—ญ ํ•จ์ˆ˜๋กœ ์„ค์ • +window.login = login; +window.apiGet = apiGet; +window.apiPost = apiPost; +window.apiPut = apiPut; +window.apiDelete = apiDelete; +window.getToken = getToken; +window.clearAuthData = clearAuthData; \ No newline at end of file diff --git a/web-ui/js/login.js b/web-ui/js/login.js index 911ec4b..1cecd98 100644 --- a/web-ui/js/login.js +++ b/web-ui/js/login.js @@ -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) { // ์ธ์ฆ ์ •๋ณด ์ €์žฅ