하이라이트 색상 문제 해결 및 다중 하이라이트 렌더링 개선

주요 수정사항:
- 하이라이트 생성 시 color → highlight_color 필드명 수정으로 색상 전달 문제 해결
- 분홍색을 더 연하게 변경하여 글씨 가독성 향상
- 다중 하이라이트 렌더링을 위아래 균등 분할로 개선
- CSS highlight-span 클래스 추가 및 색상 적용 강화
- 하이라이트 생성/렌더링 과정에 상세한 디버깅 로그 추가

UI 개선:
- 단일 하이라이트: 선택한 색상으로 정확히 표시
- 다중 하이라이트: 위아래로 균등하게 색상 분할 표시
- 메모 입력 모달에서 선택된 텍스트 표시 개선

버그 수정:
- 프론트엔드-백엔드 API 스키마 불일치 해결
- CSS 스타일 우선순위 문제 해결
- 하이라이트 색상이 노랑색으로만 표시되던 문제 해결

frontend/static/js/api.js

@@ -3,12 +3,14 @@
  */
 class DocumentServerAPI {
     constructor() {
-        // nginx를 통한 프록시 API (24100 포트)
-        this.baseURL = 'http://localhost:24100/api';
+        // nginx 프록시를 통한 API 호출 (절대 경로로 강제)
+        this.baseURL = `${window.location.origin}/api`;
         this.token = localStorage.getItem('access_token');
         
         console.log('🌐 API Base URL (NGINX PROXY):', this.baseURL);
-        console.log('🔧 nginx 프록시 환경 설정 완료 - 버전 2025012607');
+        console.log('🔧 현재 브라우저 위치:', window.location.origin);
+        console.log('🔧 현재 브라우저 전체 URL:', window.location.href);
+        console.log('🔧 nginx 프록시 환경 설정 완료 - 상대 경로 사용');
     }
 
     // 토큰 설정
@@ -36,16 +38,25 @@ class DocumentServerAPI {
 
     // GET 요청
     async get(endpoint, params = {}) {
-        const url = new URL(`${this.baseURL}${endpoint}`, window.location.origin);
-        Object.keys(params).forEach(key => {
-            if (params[key] !== null && params[key] !== undefined) {
-                url.searchParams.append(key, params[key]);
-            }
-        });
+        // URL 생성 시 포트 유지를 위해 단순 문자열 연결 사용
+        let url = `${this.baseURL}${endpoint}`;
+        
+        // 쿼리 파라미터 추가
+        if (Object.keys(params).length > 0) {
+            const searchParams = new URLSearchParams();
+            Object.keys(params).forEach(key => {
+                if (params[key] !== null && params[key] !== undefined) {
+                    searchParams.append(key, params[key]);
+                }
+            });
+            url += `?${searchParams.toString()}`;
+        }
 
         const response = await fetch(url, {
             method: 'GET',
             headers: this.getHeaders(),
+            mode: 'cors',
+            credentials: 'same-origin'
         });
 
         return this.handleResponse(response);
@@ -53,21 +64,41 @@ class DocumentServerAPI {
 
     // POST 요청
     async post(endpoint, data = {}) {
-        const response = await fetch(`${this.baseURL}${endpoint}`, {
+        const url = `${this.baseURL}${endpoint}`;
+        console.log('🌐 POST 요청 시작');
+        console.log('  - baseURL:', this.baseURL);
+        console.log('  - endpoint:', endpoint);
+        console.log('  - 최종 URL:', url);
+        console.log('  - 데이터:', data);
+        
+        console.log('🔍 fetch 호출 직전 URL 검증:', url);
+        console.log('🔍 URL 타입:', typeof url);
+        console.log('🔍 URL 절대/상대 여부:', url.startsWith('http') ? '절대경로' : '상대경로');
+        
+        const response = await fetch(url, {
             method: 'POST',
             headers: this.getHeaders(),
             body: JSON.stringify(data),
+            mode: 'cors',
+            credentials: 'same-origin'
         });
 
+        console.log('📡 POST 응답 받음:', response.url, response.status);
+        console.log('📡 실제 요청된 URL:', response.url);
         return this.handleResponse(response);
     }
 
     // PUT 요청
     async put(endpoint, data = {}) {
-        const response = await fetch(`${this.baseURL}${endpoint}`, {
+        const url = `${this.baseURL}${endpoint}`;
+        console.log('🌐 PUT 요청 URL:', url); // 디버깅용
+        
+        const response = await fetch(url, {
             method: 'PUT',
             headers: this.getHeaders(),
             body: JSON.stringify(data),
+            mode: 'cors',
+            credentials: 'same-origin'
         });
 
         return this.handleResponse(response);
@@ -75,9 +106,14 @@ class DocumentServerAPI {
 
     // DELETE 요청
     async delete(endpoint) {
-        const response = await fetch(`${this.baseURL}${endpoint}`, {
+        const url = `${this.baseURL}${endpoint}`;
+        console.log('🌐 DELETE 요청 URL:', url); // 디버깅용
+        
+        const response = await fetch(url, {
             method: 'DELETE',
             headers: this.getHeaders(),
+            mode: 'cors',
+            credentials: 'same-origin'
         });
 
         return this.handleResponse(response);
@@ -85,15 +121,20 @@ class DocumentServerAPI {
 
     // 파일 업로드
     async uploadFile(endpoint, formData) {
+        const url = `${this.baseURL}${endpoint}`;
+        console.log('🌐 UPLOAD 요청 URL:', url); // 디버깅용
+        
         const headers = {};
         if (this.token) {
             headers['Authorization'] = `Bearer ${this.token}`;
         }
 
-        const response = await fetch(`${this.baseURL}${endpoint}`, {
+        const response = await fetch(url, {
             method: 'POST',
             headers: headers,
             body: formData,
+            mode: 'cors',
+            credentials: 'same-origin'
         });
 
         return this.handleResponse(response);
@@ -206,6 +247,7 @@ class DocumentServerAPI {
 
     // 하이라이트 관련 API
     async createHighlight(highlightData) {
+        console.log('🎨 createHighlight 메서드 호출됨:', highlightData);
         return await this.post('/highlights/', highlightData);
     }
 
@@ -310,6 +352,7 @@ class DocumentServerAPI {
     }
 
     async createHighlight(highlightData) {
+        console.log('🎨 createHighlight 메서드 호출됨:', highlightData);
         return await this.post('/highlights/', highlightData);
     }
 
@@ -434,6 +477,7 @@ class DocumentServerAPI {
     }
 
     async createHighlight(highlightData) {
+        console.log('🎨 createHighlight 메서드 호출됨:', highlightData);
         return await this.post('/highlights/', highlightData);
     }