+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
🏠 확장 프로그램 개요
+
+
+ 환영합니다! 내차는언제타냐 통합확장기는 지재권검색, 멀티번역, 시간관리 등 다양한 기능을 제공하는 올인원 도구입니다.
+
+
+
+ 주의사항: 지재권검색 및 멀티번역은 API 호출량을 소모합니다. 회원등급에 따라 일일 사용량이 제한됩니다.
+
+
+
+
+
🔍 지재권검색 기능
+
키프리스(KIPRIS) 지재권검색을 자동화하여 빠르고 정확한 상표조사를 지원합니다.
+
+ - 검색할 단어를 드래그 후 단축키(컨트롤+쉬프트+S) 입력
+ - 또는 우클릭으로 해당 지재권을 Search하고 결과 수집
+ - 현재 활성된 상태의 결과만 필터링
+ - 해당하는 상품군을 바로 확인할 수 있음
+ - 내 금지어목록에 바로 적용 및 편집알바생과 연동
+
+
+
+
+
🌐 멀티번역 기능
+
여러 언어로 동시 번역하여 애매한 중국어를 이해할수 있도록 지원합니다.
+
+ - 멀티번역: Ctrl+Shift+E
+ - 또는 우클릭으로 해당 문장을 Translate하고 결과 수집
+ - 무료로 구글번역과 메모리 번역지원
+ - 일정등급 이상은 딥러닝 번역 DeepL 사용가능
+ - 챗GPT로 의역 지원가능 (Gemini는 현재 점검 중)
+ - 원클릭으로 많은 엔진의 결과를 확인할수 있음
+
+
+
+
+
🌐 원키번역 기능
+
구글 기계번역으로 매우 빠르게 번역할수 있습니다.
+
+ - 번역할 문장이나 단어를 드래그 후 단축키(컨트롤+쉬프트+Z) 입력
+ - 웹페이지에서 바로 한글과 중국어를 빠르게 번역
+ - 위챗등의 대화에서 한글 입력 후 선택 및 단축키로 바로 번역
+ - 웹페이지에서 중국어를 드래그 후 단축키로 바로 번역 결과 확인
+
+
+
+
+
⏰ 시간관리 기능
+
포모도로 기법 기반의 시간관리로 생산성을 극대화합니다.
+
+ - 자동 작업/휴식 타이머
+ - 휴식시간 추천 활동
+ - 실시간 타이머 알림
+ - 개인화된 시간 설정
+
+
+
+
+
🚫 금지어 관리
+
지재권검색 시 제외할 키워드를 효율적으로 관리합니다.
+
+ - 개인별 금지어 목록
+ - 실시간 금지어 추가/삭제
+ - 금지어 등급관리 및 검색결과 확인
+ - 수동금지어 등록 및 파생금지어 등록가능
+
+
+
+
+
+ 현재 버전: v1.0.0 | 최종 업데이트: 2025년 6월
+
+
+
+
+
🔍 지재권검색 사용법
+
+
+ 키프리스(KIPRIS)에서 자동으로 지재권검색을 수행하고 결과를 정리해주는 기능입니다.
+
+
+
+
1️⃣ 지재권검색 시작하기
+
+ - 검색하고 싶은 단어를 드래그 후 우클릭 - 지재권 검색 선택
+ - 검색하고 싶은 단어를 드래그 후 단축키(Search) - Ctrl + Shift + S
+ - 로그인 후 지재권검색 기능 활성화
+
+
+
+
+
2️⃣ 검색 과정
+
+ - 해당단어를 키프리스에서 검색실행
+ - 검색 결과 유효한 권리상태만 필터링
+ - 지재권 해당하는 상품군 정리
+ - 실시간 진행상황 팝업 표시
+
+
+
+
+
3️⃣ 결과 확인 및 추가
+
+ - 검색 완료 후 결과 요약 표시
+ - 검색결과를 내 금지어에 원클릭 등록가능
+ - 상표 이미지 및 상세정보 포함
+
+
+
+
+
+
+
+
🌐 멀티번역 사용법
+
+
+ 하나의 텍스트나 문장을 여러 번역엔진으로 동시에 번역하여 번역기 마다 다른 애매한 내용들을 정리해줍니다.
+
+
+
+
1️⃣ 번역 시작하기
+
+ - 번역할 텍스트를 드래그 후 우클릭 - 멀티번역 선택
+ - 번역할 텍스트를 드래그 후 단축키(Translate) - Ctrl + Shift + T
+ - 설정에서 선택한 엔진들로 번역
+
+
+
+
+
2️⃣ 지원 엔진
+
+
+
무료 엔진:
+
+ - 구글 기계번역
+ - myMemory 메모리 번역
+
+
+
+
+
+
VIP등급 엔진 - 의역 지원:
+
+ - 챗GPT 의역 번역
+ - 구글 제미나이 의역 번역
+
+
+
+
+
+
3️⃣ 번역 결과 활용
+
+ - 실시간 번역 결과 확인
+ - 자연스러운 딥러닝 엔진인 Deepl 사용
+ - 맥락을 이해하고 현재 단어나 문장이 어떤의미인지 어떨때 쓰이는지 파악
+
+
+
+
+
+
⏰ 시간관리 기능
+
+
+ 포모도로 기법을 활용한 자동 시간관리로 생산성을 향상시킵니다.
+
+
+
+
1️⃣ 시간관리 설정
+
+ - 설정 페이지에서 "시간 알림" 활성화
+ - 작업 시간 설정 (기본: 60분)
+ - 휴식 시간 설정 (기본: 5분)
+ - 알림 방식 선택
+
+
+
+
+
2️⃣ 자동 타이머 작동
+
+ - 로그인 시 자동으로 작업 타이머 시작
+ - 작업 시간 완료 시 휴식 모달 표시
+ - 휴식 시간 동안 추천 활동 제공
+ - 휴식 시간 동안 타냐대장경 제공
+ - 휴식 완료 후 자동으로 다음 작업 시작
+
+
+
+
+
3️⃣ 휴식 시간 추천 활동
+
+
+
신체 활동:
+
+ - 가벼운 스트레칭
+ - 목과 어깨 마사지
+ - 잠깐 산책하기
+
+
+
+
정신 건강:
+
+ - 깊은 호흡 연습
+ - 간단한 명상
+ - 긍정적 생각하기
+
+
+
+
+
+
+
4️⃣ 타이머 상태 확인
+
+ - 팝업에서 다음 휴식까지 남은 시간 확인
+ - 작업/휴식 사이클 진행상황 표시
+ - 일일 작업 시간 통계
+ - 생산성 향상 팁 제공
+
+
+
+
+
+
🚫 금지어 관리
+
+
+ 상품편집시 지식재산권을 피하기 위해금지 키워드를 관리합니다.
+
+
+
+
1️⃣ 금지어 추가하기
+
+ - 설정 페이지에서 "금지어 관리" 선택
+ - 새로운 금지어 입력
+ - "추가" 버튼 클릭하여 저장
+ - 실시간으로 금지어 목록 업데이트
+
+
+
+
+
2️⃣ 금지어 관리
+
+ - 기존 금지어 목록 확인
+ - 불필요한 금지어 삭제
+ - 금지어 등급변경
+ - 금지어 검색 및 필터링
+
+
+
+
+
+
+ 팁: 자주 나타나는 불필요한 키워드들을 금지어로 등록하면 편집알바생의 효율성이 크게 향상됩니다.
+
+
+
+
+
+
+
+
+
💬 타냐대장경
+
+
+ 업무에 도움이 되는 타냐센세의 대장경과 조언을 모아놓은 특별한 기능입니다.
+
+
+
+
1️⃣ 타냐대장경이란?
+
+ - 업무 효율성을 높이는 대장경 모음
+ - 동기부여와 영감을 주는 메시지
+ - 관리자가 승인한 검증된 조언
+
+
+
+
+
2️⃣ 사용 방법
+
+ - 팝업에서 "타냐대장경" 버튼 클릭
+ - 오늘의 대장경 확인
+ - 대장경 카테고리별 탐색
+
+
+
+
+
3️⃣ 대장경 카테고리
+
+
+
업무 효율성:
+
+ - 시간 관리 조언
+ - 생산성 향상 팁
+ - 마켓의 로직변화관리
+ - 타냐센세의 계절별 조언
+
+
+
+
동기부여:
+
+ - 성공 마인드셋
+ - 도전 정신 격려
+ - 긍정적 사고방식
+
+
+
+
+
+
+
+
⚙️ 설정 가이드
+
+
+ 확장 프로그램의 모든 기능을 개인 취향에 맞게 설정할 수 있습니다.
+
+
+
+
+
+
2️⃣ 시간관리 설정
+
+ - 시간 알림 ON/OFF
+ - 작업 시간 설정 (분 단위)
+ - 휴식 시간 설정 (분 단위)
+ - 알림 방식 선택
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/wrmc_ext/manual.js b/wrmc_ext/manual.js
new file mode 100644
index 0000000..48b8a6b
--- /dev/null
+++ b/wrmc_ext/manual.js
@@ -0,0 +1,38 @@
+// 탭 전환 기능
+document.addEventListener('DOMContentLoaded', function() {
+ // 탭 전환 기능
+ document.querySelectorAll('.tab').forEach(tab => {
+ tab.addEventListener('click', () => {
+ console.log('탭 클릭됨:', tab.dataset.tab);
+
+ // 모든 탭과 콘텐츠에서 active 클래스 제거
+ document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+ document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+
+ // 클릭된 탭과 해당 콘텐츠에 active 클래스 추가
+ tab.classList.add('active');
+ const targetContent = document.getElementById(tab.dataset.tab);
+ if (targetContent) {
+ targetContent.classList.add('active');
+ console.log('탭 전환 완료:', tab.dataset.tab);
+ } else {
+ console.error('탭 콘텐츠를 찾을 수 없습니다:', tab.dataset.tab);
+ }
+ });
+ });
+
+ console.log('매뉴얼 탭 기능 초기화 완료');
+});
+
+// 필요한 버튼 클릭 이벤트 함수들만 유지
+function openSettings() {
+ chrome.tabs.create({ url: chrome.runtime.getURL('settings.html') });
+}
+
+function openBannedWords() {
+ chrome.tabs.create({ url: chrome.runtime.getURL('bannedWords.html') });
+}
+
+function openSayings() {
+ chrome.tabs.create({ url: chrome.runtime.getURL('sayings.html') });
+}
\ No newline at end of file
diff --git a/wrmc_ext/popup.html b/wrmc_ext/popup.html
new file mode 100644
index 0000000..5af4375
--- /dev/null
+++ b/wrmc_ext/popup.html
@@ -0,0 +1,496 @@
+
+
+
+
+
내차는언제타냐 통합확장기
+
+
+
+
+
+
내차는언제타냐 통합확장 로그인
+
+
+
+ 초기화 중...
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
🔄 로그인 중입니다...
+
+
+
+
+
+
+
+
👋 내차는언제타냐 통합확장기
+
이메일:
+
회원등급:
+
오늘 호출량: 회
+
등급 만료일:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ | 순번 |
+ 금지어 |
+ 등급 |
+ 작업 |
+
+
+
+
+
+
+
+
+ 🔄 금지어 목록을 불러오는 중...
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 🔄 키프리스 결과를 불러오는 중...
+
+
+
+
+
+
+
diff --git a/wrmc_ext/popup.js b/wrmc_ext/popup.js
new file mode 100644
index 0000000..36dc0d2
--- /dev/null
+++ b/wrmc_ext/popup.js
@@ -0,0 +1,1864 @@
+// Chrome Extension 환경에서 안정적으로 동작하도록 수정
+// 백엔드 설정은 background.js에서 중앙 관리됨
+
+// 백엔드 설정 가져오기 함수
+async function getBackendConfig() {
+ try {
+ console.log('[popup.js] 백엔드 설정 요청 시작');
+
+ const response = await chrome.runtime.sendMessage({
+ action: 'getBackendConfig'
+ });
+
+ console.log('[popup.js] 백엔드 설정 응답:', response);
+
+ if (response && response.success && response.config) {
+ console.log('[popup.js] 백엔드 설정 로드 성공:', response.config);
+ return response.config;
+ } else {
+ throw new Error('백엔드 설정 응답이 올바르지 않습니다');
+ }
+ } catch (error) {
+ console.error('[popup.js] 백엔드 설정 로드 실패:', error);
+ console.log('[popup.js] 폴백 설정 사용');
+
+ // 폴백 설정
+ const fallbackConfig = {
+ SUPABASE_URL: "http://146.56.101.199:8000",
+ SUPABASE_ANON_KEY: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyAgCiAgICAicm9sZSI6ICJhbm9uIiwKICAgICJpc3MiOiAic3VwYWJhc2UtZGVtbyIsCiAgICAiaWF0IjogMTY0MTc2OTIwMCwKICAgICJleHAiOiAxNzk5NTM1NjAwCn0.dc_X5iR_VP_qT0zsiyj_I_OZ2T9FtRU2BBNWN8Bu4GE"
+ };
+
+ console.log('[popup.js] 폴백 설정:', fallbackConfig);
+ return fallbackConfig;
+ }
+}
+
+// 디버그 모드 플래그 (개발 시에만 true로 설정)
+// const DEBUG_MODE = true; // false로 설정하면 디버그 정보 숨김
+const DEBUG_MODE = false; // false로 설정하면 디버그 정보 숨김
+
+// 로그 레벨 정의
+const LOG_LEVELS = {
+ ERROR: 'ERROR',
+ WARN: 'WARN',
+ INFO: 'INFO',
+ DEBUG: 'DEBUG'
+};
+
+// 로그 저장 및 관리 시스템
+class Logger {
+ constructor() {
+ this.maxLogs = 100; // 최대 저장할 로그 수
+ }
+
+ // 로그 저장
+ async saveLog(level, message, data = null) {
+ const timestamp = new Date().toISOString();
+ const logEntry = {
+ timestamp,
+ level,
+ message,
+ data: data ? JSON.stringify(data) : null
+ };
+
+ try {
+ const { loginLogs = [] } = await chrome.storage.local.get('loginLogs');
+ loginLogs.unshift(logEntry); // 최신 로그를 앞에 추가
+
+ // 최대 로그 수 제한
+ if (loginLogs.length > this.maxLogs) {
+ loginLogs.splice(this.maxLogs);
+ }
+
+ await chrome.storage.local.set({ loginLogs });
+ } catch (error) {
+ console.error('로그 저장 실패:', error);
+ }
+ }
+
+ // 로그 조회
+ async getLogs() {
+ try {
+ const { loginLogs = [] } = await chrome.storage.local.get('loginLogs');
+ return loginLogs;
+ } catch (error) {
+ console.error('로그 조회 실패:', error);
+ return [];
+ }
+ }
+
+ // 로그 삭제
+ async clearLogs() {
+ try {
+ await chrome.storage.local.remove('loginLogs');
+ return true;
+ } catch (error) {
+ console.error('로그 삭제 실패:', error);
+ return false;
+ }
+ }
+
+ // 통합 로그 함수
+ async log(level, message, data = null) {
+ // 콘솔에 출력
+ const consoleMessage = `[${level}] ${message}`;
+ switch (level) {
+ case LOG_LEVELS.ERROR:
+ console.error(consoleMessage, data);
+ break;
+ case LOG_LEVELS.WARN:
+ console.warn(consoleMessage, data);
+ break;
+ case LOG_LEVELS.INFO:
+ console.info(consoleMessage, data);
+ break;
+ case LOG_LEVELS.DEBUG:
+ if (DEBUG_MODE) console.log(consoleMessage, data);
+ break;
+ }
+
+ // 스토리지에 저장
+ await this.saveLog(level, message, data);
+
+ // 디버그 정보 업데이트
+ if (DEBUG_MODE) {
+ updateDebugInfo(`[${level}] ${message}`);
+ }
+ }
+}
+
+// 전역 로거 인스턴스
+const logger = new Logger();
+
+// 디버그 정보 업데이트 함수 (수정됨)
+function updateDebugInfo(message) {
+ const debugEl = document.getElementById("debug-info");
+ if (debugEl) {
+ if (DEBUG_MODE) {
+ // 기존 로그 버튼 찾기
+ const existingButton = debugEl.querySelector('button');
+
+ // 메시지만 업데이트 (버튼은 유지)
+ if (existingButton) {
+ // 버튼이 있으면 텍스트 노드만 업데이트
+ const textNode = debugEl.firstChild;
+ if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+ textNode.textContent = message;
+ } else {
+ // 텍스트 노드가 없으면 새로 생성
+ debugEl.insertBefore(document.createTextNode(message), debugEl.firstChild);
+ }
+ } else {
+ // 버튼이 없으면 전체 내용 설정
+ debugEl.textContent = message;
+ }
+
+ debugEl.style.display = "block";
+ console.log('디버그 정보 업데이트:', message);
+ } else {
+ debugEl.style.display = "none";
+ }
+ } else {
+ console.warn('debug-info 요소를 찾을 수 없습니다');
+ }
+}
+
+// 로그 표시 함수
+async function showLogs() {
+ const logs = await logger.getLogs();
+ const logWindow = window.open('', '_blank', 'width=800,height=600');
+
+ const logHtml = `
+
+
+
+
로그인 로그
+
+
+
+
로그인 로그
+
+
+
+
+
+ ${logs.map(log => `
+
+
${new Date(log.timestamp).toLocaleString()}
+
[${log.level}]
+
${log.message}
+ ${log.data ? `
${log.data}
` : ''}
+
+ `).join('')}
+
+
+
+
+ `;
+
+ logWindow.document.write(logHtml);
+ logWindow.document.close();
+}
+
+// 이메일 형식 검증 함수
+function isValidEmail(email) {
+ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+ return emailRegex.test(email);
+}
+
+// Supabase 클라이언트 초기화 (직접 fetch 사용)
+async function supabaseAuth(email, password) {
+ await logger.log(LOG_LEVELS.INFO, '로그인 API 호출 시작', { email });
+
+ // 백엔드 설정 가져오기
+ const { SUPABASE_URL, SUPABASE_ANON_KEY } = await getBackendConfig();
+
+ const url = `${SUPABASE_URL}/auth/v1/token?grant_type=password`;
+ await logger.log(LOG_LEVELS.DEBUG, '로그인 API URL', { url });
+
+ try {
+ const response = await fetch(url, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'apikey': SUPABASE_ANON_KEY
+ },
+ body: JSON.stringify({
+ email: email,
+ password: password
+ })
+ });
+
+ await logger.log(LOG_LEVELS.DEBUG, '로그인 API 응답 상태', {
+ status: response.status,
+ statusText: response.statusText,
+ ok: response.ok,
+ headers: Object.fromEntries(response.headers.entries())
+ });
+
+ if (!response.ok) {
+ const error = await response.json();
+ await logger.log(LOG_LEVELS.ERROR, '로그인 API 응답 오류', {
+ status: response.status,
+ error: error
+ });
+ throw new Error(error.error_description || error.message || '로그인 실패');
+ }
+
+ const result = await response.json();
+ await logger.log(LOG_LEVELS.INFO, '로그인 API 응답 성공', {
+ hasAccessToken: !!result.access_token,
+ tokenLength: result.access_token ? result.access_token.length : 0
+ });
+ return result;
+
+ } catch (error) {
+ await logger.log(LOG_LEVELS.ERROR, '로그인 API 호출 중 네트워크 오류', {
+ error: error.message,
+ name: error.name,
+ url: url
+ });
+
+ // 네트워크 에러 메시지 개선
+ if (error.name === 'TypeError' && (error.message.includes('fetch') || error.message.includes('Failed to fetch'))) {
+ throw new Error(`서버에 연결할 수 없습니다.\n- 인터넷 연결을 확인해주세요\n- 서버가 실행 중인지 확인해주세요\n- 방화벽 설정을 확인해주세요\n\n기술적 세부사항: ${error.message}`);
+ }
+
+ throw error;
+ }
+}
+
+// 모달 드래그 기능
+function makeModalDraggable(modal) {
+ const modalContent = modal.querySelector('.modal-content');
+ const modalHeader = modal.querySelector('.modal-header');
+ let isDragging = false;
+ let currentX;
+ let currentY;
+ let initialX;
+ let initialY;
+ let xOffset = 0;
+ let yOffset = 0;
+
+ modalHeader.addEventListener('mousedown', dragStart);
+ document.addEventListener('mousemove', drag);
+ document.addEventListener('mouseup', dragEnd);
+
+ function dragStart(e) {
+ if (e.target.classList.contains('close')) return;
+
+ initialX = e.clientX - xOffset;
+ initialY = e.clientY - yOffset;
+
+ if (e.target === modalHeader) {
+ isDragging = true;
+ }
+ }
+
+ function drag(e) {
+ if (isDragging) {
+ e.preventDefault();
+
+ currentX = e.clientX - initialX;
+ currentY = e.clientY - initialY;
+
+ xOffset = currentX;
+ yOffset = currentY;
+
+ setTranslate(currentX, currentY, modalContent);
+ }
+ }
+
+ function dragEnd(e) {
+ initialX = currentX;
+ initialY = currentY;
+ isDragging = false;
+ }
+
+ function setTranslate(xPos, yPos, el) {
+ el.style.transform = `translate(${xPos}px, ${yPos}px)`;
+ }
+}
+
+// 모달 리사이즈 기능
+function makeModalResizable(modal) {
+ const modalContent = modal.querySelector('.modal-content');
+ const resizer = document.createElement('div');
+ resizer.className = 'resizer';
+ modalContent.appendChild(resizer);
+
+ let isResizing = false;
+ let originalWidth;
+ let originalHeight;
+ let originalX;
+ let originalY;
+
+ resizer.addEventListener('mousedown', initResize);
+ document.addEventListener('mousemove', resize);
+ document.addEventListener('mouseup', stopResize);
+
+ function initResize(e) {
+ isResizing = true;
+ originalWidth = modalContent.offsetWidth;
+ originalHeight = modalContent.offsetHeight;
+ originalX = e.clientX;
+ originalY = e.clientY;
+ e.preventDefault();
+ }
+
+ function resize(e) {
+ if (!isResizing) return;
+
+ const width = originalWidth + (e.clientX - originalX);
+ const height = originalHeight + (e.clientY - originalY);
+
+ if (width > 400) {
+ modalContent.style.width = width + 'px';
+ }
+ if (height > 300) {
+ modalContent.style.height = height + 'px';
+ }
+ }
+
+ function stopResize() {
+ isResizing = false;
+ }
+}
+
+// 모달 초기화 함수
+function initializeModal(modalId) {
+ const modal = document.getElementById(modalId);
+ if (!modal) return;
+
+ makeModalDraggable(modal);
+ makeModalResizable(modal);
+
+ // 모달 외부 클릭 시 닫기
+ modal.addEventListener('click', (e) => {
+ if (e.target === modal) {
+ modal.style.display = 'none';
+ }
+ });
+
+ // 닫기 버튼
+ const closeBtn = modal.querySelector('.close');
+ if (closeBtn) {
+ closeBtn.addEventListener('click', () => {
+ modal.style.display = 'none';
+ });
+ }
+}
+
+// JWT 토큰 유효성 검증 함수 추가
+async function validateToken(token) {
+ if (!token) {
+ await logger.log(LOG_LEVELS.DEBUG, '토큰이 없음');
+ return false;
+ }
+
+ try {
+ // JWT 토큰 만료 시간 확인 (클라이언트 사이드)
+ const payload = JSON.parse(atob(token.split('.')[1]));
+ const currentTime = Math.floor(Date.now() / 1000);
+
+ if (payload.exp && payload.exp < currentTime) {
+ await logger.log(LOG_LEVELS.WARN, '토큰이 만료됨', {
+ exp: payload.exp,
+ currentTime,
+ expired: true
+ });
+ return false;
+ }
+
+ // 백엔드 설정 가져오기
+ const { SUPABASE_URL, SUPABASE_ANON_KEY } = await getBackendConfig();
+
+ // 서버에서 토큰 유효성 검증
+ const authUrl = `${SUPABASE_URL}/auth/v1/user`;
+ const authRes = await fetch(authUrl, {
+ headers: {
+ Authorization: `Bearer ${token}`,
+ apikey: SUPABASE_ANON_KEY,
+ 'Content-Type': 'application/json'
+ }
+ });
+
+ if (authRes.ok) {
+ await logger.log(LOG_LEVELS.INFO, '토큰 유효성 검증 성공');
+ return true;
+ } else {
+ await logger.log(LOG_LEVELS.WARN, '토큰 유효성 검증 실패', {
+ status: authRes.status,
+ statusText: authRes.statusText
+ });
+ return false;
+ }
+ } catch (error) {
+ await logger.log(LOG_LEVELS.ERROR, '토큰 유효성 검증 중 오류', {
+ error: error.message
+ });
+ return false;
+ }
+}
+
+// 자동 로그인 시도 함수 추가
+async function attemptAutoLogin() {
+ updateDebugInfo('🔄 자동 로그인 확인 중...');
+
+ try {
+ // 1. 기존 토큰 확인
+ const { access_token } = await chrome.storage.local.get("access_token");
+
+ if (access_token) {
+ // 저장된 사용자 정보가 있으면 먼저 표시 (빠른 UI 응답)
+ const savedUserInfo = await chrome.storage.local.get([
+ 'user_email', 'user_membership_level', 'user_api_limit',
+ 'user_current_api_calls', 'user_expire_date'
+ ]);
+
+ if (savedUserInfo.user_email) {
+ updateDebugInfo('⚡ 저장된 정보로 빠른 표시 중...');
+ await logger.log(LOG_LEVELS.INFO, '저장된 사용자 정보로 빠른 UI 표시');
+
+ // UI 즉시 업데이트
+ document.getElementById("login-section").style.display = "none";
+ document.getElementById("user-info-section").style.display = "block";
+ document.getElementById("user-email").textContent = savedUserInfo.user_email;
+ document.getElementById("user-level").textContent = savedUserInfo.user_membership_level || "기본";
+
+ // 사용량 표시
+ const currentCalls = savedUserInfo.user_current_api_calls || 0;
+ let usageText = currentCalls.toString();
+ if (savedUserInfo.user_api_limit) {
+ usageText = `${currentCalls}/${savedUserInfo.user_api_limit}`;
+ }
+ document.getElementById("user-usage").textContent = usageText;
+
+ // 만료일 표시
+ document.getElementById("user-expire").textContent = savedUserInfo.user_expire_date || "없음";
+
+ // 타이머 동기화
+ await handleTimerInitOrSync(false);
+ }
+
+ // 백그라운드에서 토큰 유효성 검증
+ updateDebugInfo('🔍 백그라운드에서 토큰 검증 중...');
+ await logger.log(LOG_LEVELS.INFO, '백그라운드에서 토큰 유효성 검증 시작');
+
+ const isValidToken = await validateToken(access_token);
+
+ if (isValidToken) {
+ // 토큰이 유효하면 바로 사용자 정보 로드
+ updateDebugInfo('✅ 유효한 토큰으로 자동 로그인 중...');
+ await logger.log(LOG_LEVELS.INFO, '유효한 토큰으로 자동 로그인 성공');
+ await loadUserInfo(access_token);
+
+ // 기존 토큰으로 자동 로그인이므로 타이머 동기화만 수행
+ await handleTimerInitOrSync(false);
+ return true;
+ } else {
+ // 토큰이 유효하지 않으면 제거
+ updateDebugInfo('🗑️ 만료된 토큰 제거 중...');
+ await logger.log(LOG_LEVELS.WARN, '만료된 토큰 제거');
+ await chrome.storage.local.remove("access_token");
+ }
+ }
+
+ // 2. 자동 로그인 설정 확인
+ const { autoLogin, savedEmail, savedPassword } = await chrome.storage.local.get([
+ "autoLogin", "savedEmail", "savedPassword"
+ ]);
+
+ if (autoLogin && savedEmail && savedPassword) {
+ updateDebugInfo('🔄 저장된 계정으로 자동 로그인 시도 중...');
+ await logger.log(LOG_LEVELS.INFO, '저장된 계정으로 자동 로그인 시도');
+
+ // 저장된 정보로 자동 로그인 (UI 필드는 채우지 않음)
+ try {
+ updateDebugInfo('🔐 자동 로그인 진행 중...');
+ const authResult = await supabaseAuth(savedEmail, savedPassword);
+
+ if (authResult.access_token) {
+ const token = authResult.access_token;
+ const { SUPABASE_URL, SUPABASE_ANON_KEY } = await getBackendConfig();
+
+ await chrome.storage.local.set({
+ access_token: token,
+ SUPABASE_URL,
+ SUPABASE_ANON_KEY
+ });
+
+ updateDebugInfo('✅ 자동 로그인 성공! 사용자 정보 로드 중...');
+ await loadUserInfo(token);
+ await handleTimerInitOrSync(true);
+
+ return true;
+ }
+ } catch (autoLoginError) {
+ updateDebugInfo(`❌ 자동 로그인 실패: ${autoLoginError.message}`);
+ await logger.log(LOG_LEVELS.ERROR, '자동 로그인 실패', { error: autoLoginError.message });
+
+ // 자동 로그인 실패 시 저장된 정보를 UI에 표시만 하고 사용자가 직접 로그인하도록 안내
+ document.getElementById("email").value = savedEmail;
+ document.getElementById("password").value = savedPassword;
+ document.getElementById("save-login").checked = true;
+ document.getElementById("auto-login").checked = true;
+ }
+ }
+
+ // 3. 자동 로그인이 불가능한 경우
+ updateDebugInfo('✅ 초기화 완료 - 로그인이 필요합니다');
+ await logger.log(LOG_LEVELS.DEBUG, '자동 로그인 불가 - 수동 로그인이 필요합니다');
+ return false;
+
+ } catch (error) {
+ updateDebugInfo(`❌ 자동 로그인 확인 실패: ${error.message}`);
+ await logger.log(LOG_LEVELS.ERROR, '자동 로그인 확인 중 오류', { error: error.message });
+ return false;
+ }
+}
+
+// DOM 로드 완료 후 실행
+document.addEventListener('DOMContentLoaded', async function() {
+ // 즉시 디버그 정보 표시
+ updateDebugInfo('DOM 로드 완료, 초기화 시작...');
+
+ await logger.log(LOG_LEVELS.INFO, 'DOM 로드 완료, 초기화 시작');
+
+ // 디버그 정보 표시/숨김 처리
+ const debugEl = document.getElementById("debug-info");
+ if (debugEl && DEBUG_MODE) {
+ debugEl.style.display = "block";
+
+ // 로그 보기 버튼 생성 및 추가
+ if (!debugEl.querySelector('button')) {
+ const logButton = document.createElement('button');
+ logButton.textContent = '📋 로그 보기';
+ logButton.onclick = showLogs;
+
+ // 줄바꿈 추가 후 버튼 추가
+ debugEl.appendChild(document.createElement('br'));
+ debugEl.appendChild(logButton);
+
+ console.log('로그 보기 버튼 추가됨');
+ }
+ }
+
+ updateDebugInfo('요소 존재 확인 중...');
+
+ try {
+ // 요소 존재 확인
+ const requiredElements = ['email', 'password', 'login-btn', 'password-toggle'];
+ const missingElements = [];
+
+ for (const elementId of requiredElements) {
+ if (!document.getElementById(elementId)) {
+ missingElements.push(elementId);
+ }
+ }
+
+ if (missingElements.length > 0) {
+ updateDebugInfo(`❌ 필수 요소 누락: ${missingElements.join(', ')}`);
+ await logger.log(LOG_LEVELS.ERROR, '필수 요소 누락', { missingElements });
+ return;
+ }
+
+ updateDebugInfo('✅ 모든 필수 요소 확인됨');
+ await logger.log(LOG_LEVELS.DEBUG, '모든 필수 요소 확인됨');
+
+ // 저장된 로그인 정보 로드 (UI 표시용)
+ try {
+ const saved = await chrome.storage.local.get(["savedEmail", "savedPassword", "autoLogin"]);
+ await logger.log(LOG_LEVELS.DEBUG, '저장된 설정 로드 완료', {
+ hasSavedEmail: !!saved.savedEmail,
+ autoLogin: saved.autoLogin
+ });
+
+ if (saved.savedEmail) document.getElementById("email").value = saved.savedEmail;
+ if (saved.savedPassword) document.getElementById("password").value = saved.savedPassword;
+ document.getElementById("save-login").checked = !!saved.savedEmail;
+ document.getElementById("auto-login").checked = !!saved.autoLogin;
+
+ } catch (error) {
+ updateDebugInfo(`❌ 설정 로드 실패: ${error.message}`);
+ await logger.log(LOG_LEVELS.ERROR, '저장된 설정 로드 실패', { error: error.message });
+ }
+
+ // 🔐 비밀번호 보기 (눌렀을 때만 보이기)
+ const passwordToggle = document.getElementById("password-toggle");
+ const passwordInput = document.getElementById("password");
+
+ if (passwordToggle && passwordInput) {
+ await logger.log(LOG_LEVELS.DEBUG, '비밀번호 토글 이벤트 등록');
+
+ // 마우스 이벤트
+ passwordToggle.addEventListener("mousedown", async (e) => {
+ e.preventDefault();
+ await logger.log(LOG_LEVELS.DEBUG, '비밀번호 보기 - mousedown');
+ passwordInput.type = "text";
+ });
+
+ passwordToggle.addEventListener("mouseup", async (e) => {
+ e.preventDefault();
+ await logger.log(LOG_LEVELS.DEBUG, '비밀번호 숨기기 - mouseup');
+ passwordInput.type = "password";
+ });
+
+ passwordToggle.addEventListener("mouseleave", async (e) => {
+ e.preventDefault();
+ await logger.log(LOG_LEVELS.DEBUG, '비밀번호 숨기기 - mouseleave');
+ passwordInput.type = "password";
+ });
+
+ // 터치 이벤트
+ passwordToggle.addEventListener("touchstart", async (e) => {
+ e.preventDefault();
+ await logger.log(LOG_LEVELS.DEBUG, '비밀번호 보기 - touchstart');
+ passwordInput.type = "text";
+ });
+
+ passwordToggle.addEventListener("touchend", async (e) => {
+ e.preventDefault();
+ await logger.log(LOG_LEVELS.DEBUG, '비밀번호 숨기기 - touchend');
+ passwordInput.type = "password";
+ });
+ }
+
+ // 이메일 입력 필드 이벤트
+ const emailInput = document.getElementById("email");
+ if (emailInput) {
+ await logger.log(LOG_LEVELS.DEBUG, '이메일 필드 이벤트 등록');
+
+ emailInput.addEventListener("keypress", async (e) => {
+ if (e.key === 'Enter') {
+ e.preventDefault();
+ const password = document.getElementById("password").value.trim();
+
+ if (password) {
+ // 비밀번호가 있으면 로그인 시도
+ await logger.log(LOG_LEVELS.INFO, '이메일 필드에서 Enter - 로그인 시도');
+ doLogin();
+ } else {
+ // 비밀번호가 없으면 비밀번호 필드로 포커스 이동
+ await logger.log(LOG_LEVELS.DEBUG, '이메일 필드에서 Enter - 비밀번호 필드로 이동');
+ document.getElementById("password").focus();
+ }
+ }
+ });
+ }
+
+ // 비밀번호 입력 필드 이벤트
+ if (passwordInput) {
+ await logger.log(LOG_LEVELS.DEBUG, '비밀번호 필드 이벤트 등록');
+
+ passwordInput.addEventListener("keypress", async (e) => {
+ if (e.key === 'Enter') {
+ e.preventDefault();
+ await logger.log(LOG_LEVELS.INFO, '비밀번호 필드에서 Enter - 로그인 시도');
+ doLogin();
+ }
+ });
+ }
+
+// 로그인 버튼
+ const loginBtn = document.getElementById("login-btn");
+ if (loginBtn) {
+ await logger.log(LOG_LEVELS.DEBUG, '로그인 버튼 이벤트 등록');
+
+ loginBtn.addEventListener("click", async (e) => {
+ e.preventDefault();
+ await logger.log(LOG_LEVELS.INFO, '로그인 버튼 클릭됨');
+ doLogin();
+ });
+ }
+
+// 로그아웃 버튼
+ const logoutBtn = document.getElementById("logout-btn");
+ if (logoutBtn) {
+ await logger.log(LOG_LEVELS.DEBUG, '로그아웃 버튼 이벤트 등록');
+
+ logoutBtn.addEventListener("click", async (e) => {
+ e.preventDefault();
+ await logger.log(LOG_LEVELS.INFO, '로그아웃 버튼 클릭됨');
+
+ // 토큰과 자동로그인 설정 제거
+ await chrome.storage.local.remove(["access_token", "autoLogin", "isTimerInitialized"]);
+ await logger.log(LOG_LEVELS.INFO, '로그아웃 완료 - 토큰, 자동로그인 설정 및 타이머 초기화 상태 제거');
+
+ location.reload();
+ });
+ }
+ // 금지어 관리 버튼
+ const bannedWordsBtn = document.getElementById("banned-words-btn");
+ if (bannedWordsBtn) {
+ await logger.log(LOG_LEVELS.DEBUG, '금지어 관리 버튼 이벤트 등록');
+
+ bannedWordsBtn.addEventListener("click", async (e) => {
+ e.preventDefault();
+ await logger.log(LOG_LEVELS.INFO, '금지어 관리 버튼 클릭됨');
+
+ try {
+ // 현재 로그인된 토큰 확인
+ const { access_token } = await chrome.storage.local.get("access_token");
+ if (!access_token) {
+ alert('로그인이 필요합니다.');
+ return;
+ }
+
+ // 토큰 유효성 재확인
+ const isValid = await validateToken(access_token);
+ if (!isValid) {
+ alert('세션이 만료되었습니다. 다시 로그인해주세요.');
+ await chrome.storage.local.remove("access_token");
+ location.reload();
+ return;
+ }
+
+ // 백엔드 설정 가져오기
+ const { SUPABASE_URL, SUPABASE_ANON_KEY } = await getBackendConfig();
+
+ // chrome.storage에 설정값 저장 (새 창에서 사용할 수 있도록)
+ await chrome.storage.local.set({
+ 'bannedWords_config': {
+ SUPABASE_URL: SUPABASE_URL,
+ SUPABASE_ANON_KEY: SUPABASE_ANON_KEY,
+ DEBUG_MODE: DEBUG_MODE,
+ ACCESS_TOKEN: access_token,
+ timestamp: Date.now()
+ }
+ });
+
+ await logger.log(LOG_LEVELS.INFO, '금지어 관리 창 설정 저장 완료', {
+ hasUrl: !!SUPABASE_URL,
+ hasKey: !!SUPABASE_ANON_KEY,
+ hasToken: !!access_token,
+ debugMode: DEBUG_MODE
+ });
+
+ // 크롬 익스텐션 리소스 URL로 새 창 열기
+ const url = chrome.runtime.getURL('bannedWords.html');
+ const newWindow = window.open(url, '_blank', 'width=1000,height=700');
+
+ if (!newWindow) {
+ throw new Error('새 창을 열 수 없습니다. 팝업 차단을 확인해주세요.');
+ }
+
+ await logger.log(LOG_LEVELS.INFO, '금지어 관리 창 열기 완료');
+
+ } catch (error) {
+ await logger.log(LOG_LEVELS.ERROR, '금지어 관리 창 열기 실패', { error: error.message });
+ alert('금지어 관리 창을 열 수 없습니다: ' + error.message);
+ }
+ });
+ }
+
+ // 설정 버튼
+ const settingsBtn = document.getElementById("settings-btn");
+ if (settingsBtn) {
+ await logger.log(LOG_LEVELS.DEBUG, '설정 버튼 이벤트 등록');
+
+ settingsBtn.addEventListener("click", async (e) => {
+ e.preventDefault();
+ await logger.log(LOG_LEVELS.INFO, '설정 버튼 클릭됨');
+
+ try {
+ // 현재 로그인된 토큰 확인
+ const { access_token } = await chrome.storage.local.get("access_token");
+ if (!access_token) {
+ alert('로그인이 필요합니다.');
+ return;
+ }
+
+ // 토큰 유효성 재확인
+ const isValid = await validateToken(access_token);
+ if (!isValid) {
+ alert('세션이 만료되었습니다. 다시 로그인해주세요.');
+ await chrome.storage.local.remove("access_token");
+ location.reload();
+ return;
+ }
+
+ // 백엔드 설정 가져오기
+ const { SUPABASE_URL, SUPABASE_ANON_KEY } = await getBackendConfig();
+
+ // chrome.storage에 설정값 저장 (새 창에서 사용할 수 있도록)
+ await chrome.storage.local.set({
+ 'settings_config': {
+ SUPABASE_URL: SUPABASE_URL,
+ SUPABASE_ANON_KEY: SUPABASE_ANON_KEY,
+ DEBUG_MODE: DEBUG_MODE,
+ ACCESS_TOKEN: access_token,
+ timestamp: Date.now()
+ }
+ });
+
+ await logger.log(LOG_LEVELS.INFO, '설정 창 설정 저장 완료', {
+ hasUrl: !!SUPABASE_URL,
+ hasKey: !!SUPABASE_ANON_KEY,
+ hasToken: !!access_token,
+ debugMode: DEBUG_MODE
+ });
+
+ // 새 창에서 설정 페이지 열기
+ chrome.windows.create({
+ url: chrome.runtime.getURL('settings.html'),
+ type: 'popup',
+ width: 900,
+ height: 900
+ });
+
+ await logger.log(LOG_LEVELS.INFO, '설정 창 열기 완료');
+
+ } catch (error) {
+ await logger.log(LOG_LEVELS.ERROR, '설정 창 열기 실패', { error: error.message });
+ alert('설정 창을 열 수 없습니다: ' + error.message);
+ }
+ });
+ }
+
+ // 타냐대장경보기 버튼 클릭 이벤트
+ document.getElementById('sayings-btn').addEventListener('click', async () => {
+ console.log('타냐대장경보기 버튼 클릭됨');
+
+ try {
+ // 현재 로그인된 토큰 확인
+ const { access_token } = await chrome.storage.local.get("access_token");
+ if (!access_token) {
+ alert('로그인이 필요합니다.');
+ return;
+ }
+
+ // 토큰 유효성 재확인
+ const isValid = await validateToken(access_token);
+ if (!isValid) {
+ alert('세션이 만료되었습니다. 다시 로그인해주세요.');
+ await chrome.storage.local.remove("access_token");
+ location.reload();
+ return;
+ }
+
+ // 백엔드 설정 가져오기
+ const { SUPABASE_URL, SUPABASE_ANON_KEY } = await getBackendConfig();
+
+ // chrome.storage에 설정값 저장 (금지어 관리와 동일한 설정 사용)
+ const settingsToSave = {
+ SUPABASE_URL: SUPABASE_URL,
+ SUPABASE_ANON_KEY: SUPABASE_ANON_KEY,
+ DEBUG_MODE: DEBUG_MODE,
+ ACCESS_TOKEN: access_token,
+ timestamp: Date.now()
+ };
+
+ console.log('타냐대장경보기용 설정을 chrome.storage에 저장 중...', {
+ url: !!settingsToSave.SUPABASE_URL,
+ key: !!settingsToSave.SUPABASE_ANON_KEY,
+ token: !!settingsToSave.ACCESS_TOKEN,
+ debug: settingsToSave.DEBUG_MODE
+ });
+
+ await chrome.storage.local.set({
+ 'sayings_config': settingsToSave
+ });
+
+ console.log('타냐대장경보기 설정 저장 완료, 새 창 열기');
+
+ // 새 창에서 타냐대장경보기 페이지 열기
+ chrome.windows.create({
+ url: chrome.runtime.getURL('sayings.html'),
+ type: 'popup',
+ width: 1200,
+ height: 800
+ });
+
+ } catch (error) {
+ console.error('타냐대장경보기 창 열기 실패:', error);
+ alert('타냐대장경보기 창을 열 수 없습니다: ' + error.message);
+ }
+ });
+
+ // 찜관리 버튼 클릭 이벤트
+ document.getElementById('zzim-btn').addEventListener('click', async () => {
+ console.log('찜관리 버튼 클릭됨');
+
+ try {
+ // 현재 로그인된 토큰 확인
+ const { access_token, user_id } = await chrome.storage.local.get(["access_token", "user_id"]);
+ if (!access_token) {
+ alert('로그인이 필요합니다.');
+ return;
+ }
+
+ // 토큰 유효성 재확인
+ const isValid = await validateToken(access_token);
+ if (!isValid) {
+ alert('세션이 만료되었습니다. 다시 로그인해주세요.');
+ await chrome.storage.local.remove("access_token");
+ location.reload();
+ return;
+ }
+
+ // 백엔드 설정 가져오기
+ const { SUPABASE_URL, SUPABASE_ANON_KEY } = await getBackendConfig();
+
+ // chrome.storage에 설정값 저장 (새 창에서 사용할 수 있도록)
+ await chrome.storage.local.set({
+ 'zzim_config': {
+ SUPABASE_URL: SUPABASE_URL,
+ SUPABASE_ANON_KEY: SUPABASE_ANON_KEY,
+ DEBUG_MODE: DEBUG_MODE,
+ ACCESS_TOKEN: access_token,
+ USER_ID: user_id,
+ timestamp: Date.now()
+ }
+ });
+
+ await logger.log(LOG_LEVELS.INFO, '찜관리 창 설정 저장 완료', {
+ hasUrl: !!SUPABASE_URL,
+ hasKey: !!SUPABASE_ANON_KEY,
+ hasToken: !!access_token,
+ hasUserId: !!user_id,
+ debugMode: DEBUG_MODE
+ });
+
+ // 새 창에서 찜관리 페이지 열기
+ chrome.windows.create({
+ url: chrome.runtime.getURL('zzim.html'),
+ type: 'popup',
+ width: 1200,
+ height: 800
+ });
+
+ } catch (error) {
+ console.error('찜관리 창 열기 실패:', error);
+ alert('찜관리 창을 열 수 없습니다: ' + error.message);
+ }
+ });
+
+ // 모달 초기화
+ initializeModal('banned-words-modal');
+ initializeModal('kipris-modal');
+ initializeModal('sayings-modal');
+
+ // 🚀 자동 로그인 시도 (가장 중요한 부분)
+ updateDebugInfo('🚀 자동 로그인 시도 중...');
+ const autoLoginSuccess = await attemptAutoLogin();
+
+ if (!autoLoginSuccess) {
+ updateDebugInfo('✅ 초기화 완료 - 수동 로그인이 필요합니다');
+ }
+
+ // API 키 로딩
+ await loadApiKeysFromFile();
+
+ // 설정 변경 감지 시작
+ setupStorageListener();
+ watchSettingsChanges();
+ console.log('설정 변경 감지 시스템 활성화됨');
+
+ await logger.log(LOG_LEVELS.INFO, '초기화 완료');
+
+ // 타이머 초기화 또는 동기화는 로그인 시점에서 처리됨 (중복 호출 방지)
+
+ } catch (error) {
+ updateDebugInfo(`❌ 초기화 실패: ${error.message}`);
+ await logger.log(LOG_LEVELS.ERROR, '초기화 중 치명적 오류', { error: error.message });
+ console.error('초기화 오류:', error);
+ }
+});
+
+// 로컬 파일에서 API 키 로드
+async function loadApiKeysFromFile() {
+ try {
+ await logger.log(LOG_LEVELS.INFO, 'API 키 로딩 시작');
+
+ // 로컬 파일에서 API 키 읽기
+ const response = await fetch(chrome.runtime.getURL('api-keys.json'));
+
+ if (!response.ok) {
+ throw new Error(`API 키 파일 로드 실패: ${response.status}`);
+ }
+
+ const apiKeys = await response.json();
+ await logger.log(LOG_LEVELS.DEBUG, 'API 키 파일 읽기 완료', { keys: Object.keys(apiKeys) });
+
+ // Chrome storage에 API 키 저장 (background.js에서 사용할 수 있도록)
+ // 각 서비스별로 정확한 구조로 저장
+ const storageData = {};
+
+ if (apiKeys.papago && apiKeys.papago.clientId && apiKeys.papago.clientSecret) {
+ storageData.papago_api_key = {
+ clientId: apiKeys.papago.clientId,
+ clientSecret: apiKeys.papago.clientSecret
+ };
+ await logger.log(LOG_LEVELS.DEBUG, 'Papago API 키 준비 완료');
+ } else {
+ await logger.log(LOG_LEVELS.WARN, 'Papago API 키가 누락되었습니다');
+ }
+
+ if (apiKeys.deepl && apiKeys.deepl.authKey) {
+ storageData.deepl_api_key = {
+ authKey: apiKeys.deepl.authKey
+ };
+ await logger.log(LOG_LEVELS.DEBUG, 'DeepL API 키 준비 완료');
+ } else {
+ await logger.log(LOG_LEVELS.WARN, 'DeepL API 키가 누락되었습니다');
+ }
+
+ if (apiKeys.openai && apiKeys.openai.apiKey) {
+ storageData.openai_api_key = {
+ apiKey: apiKeys.openai.apiKey
+ };
+ await logger.log(LOG_LEVELS.DEBUG, 'OpenAI API 키 준비 완료');
+ } else {
+ await logger.log(LOG_LEVELS.WARN, 'OpenAI API 키가 누락되었습니다');
+ }
+
+ if (apiKeys.gemini && apiKeys.gemini.apiKey) {
+ storageData.gemini_api_key = {
+ apiKey: apiKeys.gemini.apiKey
+ };
+ await logger.log(LOG_LEVELS.DEBUG, 'Gemini API 키 준비 완료');
+ } else {
+ await logger.log(LOG_LEVELS.WARN, 'Gemini API 키가 누락되었습니다');
+ }
+
+ // Chrome storage에 저장
+ await chrome.storage.local.set(storageData);
+
+ // 저장 확인
+ const saved = await chrome.storage.local.get(Object.keys(storageData));
+ await logger.log(LOG_LEVELS.INFO, 'API 키 Chrome storage 저장 완료', {
+ savedKeys: Object.keys(saved),
+ totalKeys: Object.keys(storageData).length
+ });
+
+ console.log('✅ API 키 로드 및 저장 완료:', Object.keys(storageData));
+
+ } catch (error) {
+ console.error('❌ API 키 파일 로드 오류:', error);
+ await logger.log(LOG_LEVELS.ERROR, 'API 키 파일 로드 실패', {
+ error: error.message,
+ stack: error.stack
+ });
+
+ // 사용자에게 알림
+ if (DEBUG_MODE) {
+ updateDebugInfo(`❌ API 키 로드 실패: ${error.message}`);
+ }
+ }
+}
+
+// 로그인 함수
+async function doLogin() {
+ updateDebugInfo('🔄 로그인 프로세스 시작...');
+ await logger.log(LOG_LEVELS.INFO, '로그인 프로세스 시작');
+
+ try {
+ const email = document.getElementById("email").value.trim();
+ const password = document.getElementById("password").value.trim();
+
+ await logger.log(LOG_LEVELS.DEBUG, '로그인 입력값 검증 시작', { email });
+
+ // 오류 메시지 초기화
+ document.getElementById("email-error").textContent = "";
+ document.getElementById("password-error").textContent = "";
+ document.getElementById("status").textContent = "";
+ document.getElementById("membership-level").textContent = "";
+
+ // 유효성 검사
+ let hasError = false;
+
+ // 이메일 형식 검증 강화
+ if (!email) {
+ document.getElementById("email-error").textContent = "이메일을 입력하세요.";
+ hasError = true;
+ await logger.log(LOG_LEVELS.WARN, '이메일 입력 누락');
+ } else if (!isValidEmail(email)) {
+ document.getElementById("email-error").textContent = "올바른 이메일 형식을 입력하세요. (예: user@example.com)";
+ hasError = true;
+ await logger.log(LOG_LEVELS.WARN, '잘못된 이메일 형식', { email });
+ }
+
+ // 비밀번호 검증
+ if (!password) {
+ document.getElementById("password-error").textContent = "비밀번호를 입력하세요.";
+ hasError = true;
+ await logger.log(LOG_LEVELS.WARN, '비밀번호 입력 누락');
+ } else if (password.length < 6) {
+ document.getElementById("password-error").textContent = "비밀번호는 6자 이상이어야 합니다.";
+ hasError = true;
+ await logger.log(LOG_LEVELS.WARN, '비밀번호 길이 부족', { length: password.length });
+ }
+
+ if (hasError) {
+ updateDebugInfo('❌ 입력 유효성 검사 실패');
+ await logger.log(LOG_LEVELS.WARN, '입력 유효성 검사 실패');
+ return;
+ }
+
+ // UI 상태 변경 - 로딩 표시
+ document.getElementById("loading").style.display = "block";
+ document.getElementById("login-btn").disabled = true;
+ document.getElementById("login-btn").textContent = "로그인 중...";
+ document.getElementById("status").textContent = "🔄 로그인 중입니다...";
+ updateDebugInfo('🔄 로그인 API 호출 중...');
+ await logger.log(LOG_LEVELS.INFO, '로그인 요청 전송 중...');
+
+ try {
+ // 직접 fetch를 사용한 로그인
+ const authResult = await supabaseAuth(email, password);
+
+ if (authResult.access_token) {
+ updateDebugInfo('✅ 로그인 성공! 사용자 정보 로드 중...');
+ await logger.log(LOG_LEVELS.INFO, '로그인 성공, 토큰 저장');
+
+ const token = authResult.access_token;
+ // 백엔드 설정 가져오기
+ const { SUPABASE_URL, SUPABASE_ANON_KEY } = await getBackendConfig();
+
+ await chrome.storage.local.set({
+ access_token: token,
+ SUPABASE_URL,
+ SUPABASE_ANON_KEY
+ });
+
+ // 로그인 정보 저장 처리
+ if (document.getElementById("save-login").checked) {
+ await chrome.storage.local.set({
+ savedEmail: email,
+ savedPassword: password
+ });
+ await logger.log(LOG_LEVELS.INFO, '로그인 정보 저장됨');
+ } else {
+ await chrome.storage.local.remove(["savedEmail", "savedPassword"]);
+ }
+
+ // 자동 로그인 설정 처리
+ if (document.getElementById("auto-login").checked) {
+ await chrome.storage.local.set({ autoLogin: true });
+ await logger.log(LOG_LEVELS.INFO, '자동 로그인 설정됨');
+ } else {
+ await chrome.storage.local.remove("autoLogin");
+ }
+
+ document.getElementById("status").textContent = "✅ 로그인 성공!";
+ await logger.log(LOG_LEVELS.INFO, '사용자 정보 로드 시작');
+ await loadUserInfo(token);
+
+ // 새로운 로그인이므로 타이머 초기화
+ await handleTimerInitOrSync(true);
+ } else {
+ throw new Error('토큰을 받지 못했습니다');
+ }
+ } catch (authError) {
+ updateDebugInfo(`❌ 로그인 실패: ${authError.message}`);
+ await logger.log(LOG_LEVELS.ERROR, '로그인 실패', { error: authError.message });
+ document.getElementById("status").textContent = "❌ 로그인 실패: " + authError.message;
+
+ // 입력 필드에 포커스
+ if (authError.message.includes('email') || authError.message.includes('이메일')) {
+ document.getElementById("email").focus();
+ } else {
+ document.getElementById("password").focus();
+ }
+ }
+ } catch (err) {
+ updateDebugInfo(`❌ 로그인 오류: ${err.message}`);
+ await logger.log(LOG_LEVELS.ERROR, '로그인 중 예외', { error: err.message });
+ document.getElementById("status").textContent = "❌ 알 수 없는 오류: " + err.message;
+ console.error('로그인 오류:', err);
+ } finally {
+ // UI 상태 복원
+ document.getElementById("loading").style.display = "none";
+ document.getElementById("login-btn").disabled = false;
+ document.getElementById("login-btn").textContent = "로그인";
+ await logger.log(LOG_LEVELS.DEBUG, '로그인 프로세스 종료');
+ }
+}
+
+// 사용자 정보 로드 함수
+async function loadUserInfo(token) {
+ updateDebugInfo('🔄 사용자 정보 로드 중...');
+ await logger.log(LOG_LEVELS.INFO, '사용자 정보 요청 중...');
+
+ try {
+ // 백엔드 설정 가져오기
+ const { SUPABASE_URL, SUPABASE_ANON_KEY } = await getBackendConfig();
+
+ // 먼저 Auth API로 사용자 기본 정보 가져오기
+ const authUrl = `${SUPABASE_URL}/auth/v1/user`;
+ await logger.log(LOG_LEVELS.DEBUG, '사용자 Auth 정보 API 호출', { authUrl });
+
+ const authRes = await fetch(authUrl, {
+ headers: {
+ Authorization: `Bearer ${token}`,
+ apikey: SUPABASE_ANON_KEY,
+ 'Content-Type': 'application/json'
+ }
+ });
+
+ if (!authRes.ok) {
+ // Auth API 응답 오류 처리
+ let authErrorDetails;
+ try {
+ authErrorDetails = await authRes.json();
+ } catch {
+ authErrorDetails = await authRes.text();
+ }
+
+ await logger.log(LOG_LEVELS.ERROR, 'Auth API 응답 오류', {
+ status: authRes.status,
+ statusText: authRes.statusText,
+ authErrorDetails
+ });
+
+ throw new Error(`Auth API 오류 - HTTP ${authRes.status}: ${authRes.statusText}`);
+ }
+
+ const authUser = await authRes.json();
+ await logger.log(LOG_LEVELS.DEBUG, 'Auth API 응답 데이터', { authUser });
+
+ // 사용자 상세 정보와 membership_levels 조인해서 가져오기
+ let userDetails = null;
+ try {
+ // membership_levels 테이블과 조인하여 api_call_limit도 함께 가져오기
+ const detailsUrl = `${SUPABASE_URL}/rest/v1/users?select=*,membership_levels(level,api_call_limit)&email=eq.${encodeURIComponent(authUser.email)}&limit=1`;
+ await logger.log(LOG_LEVELS.DEBUG, '사용자 상세 정보 API 호출 (조인)', { detailsUrl });
+
+ const detailsRes = await fetch(detailsUrl, {
+ headers: {
+ Authorization: `Bearer ${token}`,
+ apikey: SUPABASE_ANON_KEY,
+ 'Content-Type': 'application/json'
+ }
+ });
+
+ if (detailsRes.ok) {
+ const detailsData = await detailsRes.json();
+ await logger.log(LOG_LEVELS.DEBUG, '사용자 상세 정보 응답 (조인)', { detailsData });
+ userDetails = detailsData[0];
+ } else {
+ // 조인이 실패하면 기본 users 테이블만 조회
+ await logger.log(LOG_LEVELS.WARN, '조인 쿼리 실패, 기본 사용자 정보만 조회', {
+ status: detailsRes.status
+ });
+
+ const fallbackUrl = `${SUPABASE_URL}/rest/v1/users?select=*&email=eq.${encodeURIComponent(authUser.email)}&limit=1`;
+ const fallbackRes = await fetch(fallbackUrl, {
+ headers: {
+ Authorization: `Bearer ${token}`,
+ apikey: SUPABASE_ANON_KEY,
+ 'Content-Type': 'application/json'
+ }
+ });
+
+ if (fallbackRes.ok) {
+ const fallbackData = await fallbackRes.json();
+ await logger.log(LOG_LEVELS.DEBUG, '기본 사용자 정보 응답', { fallbackData });
+ userDetails = fallbackData[0];
+ }
+ }
+ } catch (detailsError) {
+ await logger.log(LOG_LEVELS.WARN, '사용자 상세 정보 조회 중 오류', {
+ error: detailsError.message
+ });
+ }
+
+ // UI 업데이트
+ updateDebugInfo('✅ 사용자 정보 로드 완료');
+ await logger.log(LOG_LEVELS.INFO, '사용자 정보 로드 성공', {
+ email: authUser.email,
+ hasDetails: !!userDetails,
+ membershipLevel: userDetails?.membership_level,
+ membershipLevels: userDetails?.membership_levels
+ });
+
+ // 사용자 ID를 storage에 저장 (금지어 추가 시 사용)
+ if (userDetails && userDetails.id) {
+ // API 한도 정보도 함께 저장
+ let apiLimit = null;
+ if (userDetails.membership_levels) {
+ apiLimit = userDetails.membership_levels.api_call_limit;
+ }
+
+ await chrome.storage.local.set({
+ user_id: userDetails.id,
+ user_email: authUser.email,
+ user_membership_level: userDetails.membership_level,
+ user_api_limit: apiLimit,
+ user_current_api_calls: userDetails.current_api_calls || 0,
+ // 백엔드 설정도 저장 (다른 페이지에서 사용할 수 있도록)
+ SUPABASE_URL,
+ SUPABASE_ANON_KEY
+ });
+
+ await logger.log(LOG_LEVELS.INFO, '사용자 정보 저장 완료', {
+ user_id: userDetails.id,
+ email: authUser.email,
+ membership_level: userDetails.membership_level,
+ api_limit: apiLimit,
+ current_api_calls: userDetails.current_api_calls || 0
+ });
+ }
+
+ document.getElementById("login-section").style.display = "none";
+ document.getElementById("user-info-section").style.display = "block";
+ document.getElementById("user-email").textContent = authUser.email;
+
+ // 상세 정보 표시
+ if (userDetails) {
+ // 회원등급 표시 (membership_levels 조인 데이터 또는 membership_level 필드)
+ let levelText = "기본";
+ let apiLimit = null;
+
+ if (userDetails.membership_levels) {
+ // 조인된 데이터가 있는 경우
+ levelText = userDetails.membership_levels.level || "기본";
+ apiLimit = userDetails.membership_levels.api_call_limit;
+ } else if (userDetails.membership_level) {
+ // 직접 필드가 있는 경우
+ levelText = userDetails.membership_level;
+ }
+
+ document.getElementById("user-level").textContent = levelText;
+
+ // Chrome Storage에서 최신 호출량 정보 가져오기 (실시간 반영)
+ const { user_current_api_calls } = await chrome.storage.local.get(['user_current_api_calls']);
+ const currentCalls = user_current_api_calls || userDetails.current_api_calls || 0;
+
+ // 오늘 호출량 표시 (current_api_calls/api_call_limit 형태)
+ let usageText = currentCalls.toString();
+
+ if (apiLimit !== null && apiLimit !== undefined) {
+ usageText = `${currentCalls}/${apiLimit}`;
+ }
+
+ document.getElementById("user-usage").textContent = usageText;
+
+ // 만료일 표시
+ document.getElementById("user-expire").textContent = userDetails.payment_period_end
+ ? new Date(userDetails.payment_period_end).toLocaleDateString()
+ : "없음";
+
+ await logger.log(LOG_LEVELS.INFO, '사용자 정보 UI 업데이트 완료', {
+ level: levelText,
+ usage: usageText,
+ apiLimit: apiLimit,
+ currentCallsFromStorage: user_current_api_calls,
+ currentCallsFromDB: userDetails.current_api_calls
+ });
+ } else {
+ // 상세 정보가 없는 경우 기본값
+ document.getElementById("user-level").textContent = "기본";
+ document.getElementById("user-usage").textContent = "0";
+ document.getElementById("user-expire").textContent = "없음";
+
+ await logger.log(LOG_LEVELS.WARN, '사용자 상세 정보 없음, 기본값 사용');
+ }
+
+ // 타이머 초기화는 호출하는 쪽에서 별도로 처리됨
+
+ } catch (error) {
+ updateDebugInfo(`❌ 사용자 정보 로드 실패: ${error.message}`);
+ await logger.log(LOG_LEVELS.ERROR, '사용자 정보 로드 실패', { error: error.message });
+ document.getElementById("status").textContent = "⚠️ 사용자 정보 로드 실패: " + error.message;
+ console.error('사용자 정보 로드 오류:', error);
+ }
+}
+
+// 카운트다운 타이머 관련 변수
+let countdownInterval = null;
+let settingsWatcher = null; // 설정 변경 감지용
+let isCountdownInitializing = false; // 중복 초기화 방지
+
+// 타이머 초기화 상태를 Chrome Storage에서 관리하는 함수들
+async function getTimerInitializedStatus() {
+ try {
+ const result = await chrome.storage.local.get('isTimerInitialized');
+ return result.isTimerInitialized || false;
+ } catch (error) {
+ console.error('타이머 초기화 상태 확인 실패:', error);
+ return false;
+ }
+}
+
+async function setTimerInitializedStatus(status) {
+ try {
+ await chrome.storage.local.set({ isTimerInitialized: status });
+ console.log('타이머 초기화 상태 저장:', status);
+ } catch (error) {
+ console.error('타이머 초기화 상태 저장 실패:', error);
+ }
+}
+
+// 타이머 초기화 또는 동기화 함수 (loadUserInfo에서 분리)
+async function handleTimerInitOrSync(isFirstLogin = false) {
+ try {
+ const isTimerInitialized = await getTimerInitializedStatus();
+
+ if (!isTimerInitialized || isFirstLogin) {
+ console.log('타이머 초기화 수행:', { isFirstLogin, isTimerInitialized });
+ await setTimerInitializedStatus(true);
+
+ // 잠시 대기 후 초기화
+ setTimeout(() => {
+ if (!isCountdownInitializing) {
+ initBreakCountdown();
+ }
+ }, 500);
+
+ // Background 타이머 시작 요청
+ try {
+ await logger.log(LOG_LEVELS.INFO, 'Background 타이머 시작 요청');
+ const timerStartResponse = await chrome.runtime.sendMessage({
+ action: 'startTimerAfterLogin'
+ });
+
+ if (timerStartResponse && timerStartResponse.success) {
+ await logger.log(LOG_LEVELS.INFO, 'Background 타이머 시작 성공');
+ } else {
+ await logger.log(LOG_LEVELS.WARN, 'Background 타이머 시작 실패', {
+ response: timerStartResponse
+ });
+ }
+ } catch (timerError) {
+ await logger.log(LOG_LEVELS.ERROR, 'Background 타이머 시작 요청 중 오류', {
+ error: timerError.message
+ });
+ }
+
+ } else {
+ console.log('이미 초기화됨 - 타이머 동기화만 수행');
+ // 동기화만 수행 (리셋하지 않음)
+ if (!isCountdownInitializing) {
+ // Background 타이머 상태만 확인하고 UI 업데이트
+ try {
+ const response = await chrome.runtime.sendMessage({
+ action: 'getTimerStatus'
+ });
+
+ if (response && response.success && response.isRunning) {
+ const remainingMs = response.remainingTime;
+ console.log('Background 타이머 동기화 (UI만 업데이트):', {
+ 남은시간_분: Math.floor(remainingMs / (1000 * 60)),
+ 남은시간_초: Math.floor((remainingMs % (1000 * 60)) / 1000)
+ });
+
+ // 기존 카운트다운이 있으면 정리하고 새로 시작
+ if (countdownInterval) {
+ clearInterval(countdownInterval);
+ }
+
+ const nextBreakTime = new Date(Date.now() + remainingMs);
+ startCountdown(nextBreakTime);
+
+ const countdownEl = document.getElementById('break-countdown');
+ if (countdownEl) {
+ countdownEl.style.color = '#1e7e1e';
+ }
+ }
+ } catch (error) {
+ console.error('타이머 동기화 실패:', error);
+ }
+ }
+ }
+ } catch (error) {
+ console.error('타이머 초기화/동기화 처리 실패:', error);
+ }
+}
+
+// 카운트다운 타이머 초기화 함수
+async function initBreakCountdown() {
+ // 중복 실행 방지
+ if (isCountdownInitializing) {
+ console.log('카운트다운 초기화가 이미 진행 중입니다.');
+ return;
+ }
+
+ isCountdownInitializing = true;
+
+ try {
+ // 설정에서 시간 알림 설정 가져오기
+ const settings = await chrome.storage.local.get(['time_alarm_settings']);
+ let timeAlarmSettings = settings.time_alarm_settings;
+
+ // 시간 알림 설정이 없으면 기본값으로 활성화
+ if (!timeAlarmSettings) {
+ timeAlarmSettings = {
+ enabled: true, // 기본값을 true로 변경
+ workTime: 60,
+ restTime: 5
+ };
+
+ // 기본 설정 저장
+ await chrome.storage.local.set({ time_alarm_settings: timeAlarmSettings });
+ console.log('시간 알림 설정이 없어서 기본값으로 활성화:', timeAlarmSettings);
+ }
+
+ // 디버깅을 위한 로그 추가
+ console.log('카운트다운 타이머 설정:', timeAlarmSettings);
+
+ // 타이머 섹션 항상 표시 (로그인 시에는)
+ const timerSection = document.getElementById('break-timer-section');
+ if (timerSection) {
+ timerSection.style.display = 'block';
+ }
+
+ // 시간 알림이 비활성화된 경우에만 메시지 표시
+ if (!timeAlarmSettings.enabled) {
+ console.log('시간 알림이 비활성화됨 - 설정에서 활성화 필요');
+ const countdownEl = document.getElementById('break-countdown');
+ if (countdownEl) {
+ countdownEl.textContent = '⚙️ 설정에서 시간 알림을 활성화해주세요';
+ countdownEl.style.color = '#f39c12';
+ }
+
+ // 기존 타이머 정리
+ if (countdownInterval) {
+ clearInterval(countdownInterval);
+ countdownInterval = null;
+ }
+ return;
+ }
+
+ // Background에서 현재 타이머 상태 가져오기 (리셋하지 않고 동기화만)
+ try {
+ const response = await chrome.runtime.sendMessage({
+ action: 'getTimerStatus'
+ });
+
+ if (response && response.success && response.isRunning) {
+ // Background 타이머가 실행 중인 경우 - 남은 시간으로 동기화
+ const remainingMs = response.remainingTime;
+
+ console.log('Background 타이머와 동기화 (리셋 없음):', {
+ 남은시간_분: Math.floor(remainingMs / (1000 * 60)),
+ 남은시간_초: Math.floor((remainingMs % (1000 * 60)) / 1000)
+ });
+
+ // 기존 카운트다운이 있으면 정리하고 새로 시작
+ if (countdownInterval) {
+ clearInterval(countdownInterval);
+ }
+
+ const nextBreakTime = new Date(Date.now() + remainingMs);
+ startCountdown(nextBreakTime);
+
+ const countdownEl = document.getElementById('break-countdown');
+ if (countdownEl) {
+ countdownEl.style.color = '#1e7e1e'; // 정상 색상
+ }
+
+ } else {
+ // Background 타이머가 실행 중이지 않은 경우
+ console.log('Background 타이머가 실행 중이 아님');
+
+ const countdownEl = document.getElementById('break-countdown');
+ if (countdownEl) {
+ countdownEl.textContent = '타이머가 시작되지 않았습니다';
+ countdownEl.style.color = '#e74c3c';
+ }
+
+ // 기존 카운트다운 정리
+ if (countdownInterval) {
+ clearInterval(countdownInterval);
+ countdownInterval = null;
+ }
+ }
+ } catch (error) {
+ console.error('Background 타이머 상태 확인 실패:', error);
+
+ const countdownEl = document.getElementById('break-countdown');
+ if (countdownEl) {
+ countdownEl.textContent = '타이머 상태 확인 중...';
+ countdownEl.style.color = '#3498db';
+ }
+ }
+
+ } catch (error) {
+ console.error('카운트다운 타이머 초기화 오류:', error);
+ const countdownEl = document.getElementById('break-countdown');
+ if (countdownEl) {
+ countdownEl.textContent = '설정 오류';
+ countdownEl.style.color = '#e74c3c';
+ }
+ } finally {
+ isCountdownInitializing = false;
+ }
+}
+
+// 설정 변경 감지 및 타이머 리셋 함수
+function watchSettingsChanges() {
+ // 기존 감시자가 있으면 정리
+ if (settingsWatcher) {
+ clearInterval(settingsWatcher);
+ }
+
+ let lastSettings = null;
+
+ // 5초마다 설정 변경 확인
+ settingsWatcher = setInterval(async () => {
+ try {
+ const settings = await chrome.storage.local.get(['time_alarm_settings']);
+ const currentSettings = settings.time_alarm_settings;
+
+ // 설정이 변경되었는지 확인
+ if (lastSettings && JSON.stringify(lastSettings) !== JSON.stringify(currentSettings)) {
+ console.log('시간 알림 설정 변경 감지:', {
+ 이전: lastSettings,
+ 현재: currentSettings
+ });
+
+ // 타이머 리셋 및 재시작
+ console.log('타이머 리셋 및 재시작');
+ await initBreakCountdown();
+
+ // 사용자에게 알림
+ const countdownEl = document.getElementById('break-countdown');
+ if (countdownEl && currentSettings && currentSettings.enabled) {
+ // 잠시 리셋 메시지 표시
+ const originalText = countdownEl.textContent;
+ countdownEl.textContent = '⚙️ 설정 변경됨 - 타이머 리셋';
+ countdownEl.style.color = '#2196F3';
+
+ setTimeout(() => {
+ countdownEl.style.color = '';
+ }, 2000);
+ }
+ }
+
+ lastSettings = currentSettings ? JSON.parse(JSON.stringify(currentSettings)) : null;
+
+ } catch (error) {
+ console.error('설정 변경 감지 오류:', error);
+ }
+ }, 5000); // 5초마다 확인
+}
+
+// Chrome storage 변경 이벤트 리스너 (더 즉각적인 반응)
+function setupStorageListener() {
+ if (chrome.storage && chrome.storage.onChanged) {
+ chrome.storage.onChanged.addListener((changes, namespace) => {
+ if (namespace === 'local' && changes.time_alarm_settings) {
+ console.log('Chrome storage 변경 감지 - time_alarm_settings:', {
+ 이전값: changes.time_alarm_settings.oldValue,
+ 새값: changes.time_alarm_settings.newValue
+ });
+
+ // 즉시 타이머 리셋
+ setTimeout(() => {
+ initBreakCountdown();
+
+ // 사용자에게 즉시 피드백
+ const countdownEl = document.getElementById('break-countdown');
+ if (countdownEl) {
+ const newSettings = changes.time_alarm_settings.newValue;
+ if (newSettings && newSettings.enabled) {
+ countdownEl.textContent = '⚙️ 설정 적용됨';
+ countdownEl.style.color = '#4CAF50';
+
+ setTimeout(() => {
+ countdownEl.style.color = '';
+ }, 1500);
+ }
+ }
+ }, 100);
+ }
+
+ // API 호출량 변경 감지 및 UI 업데이트
+ if (namespace === 'local' && changes.user_current_api_calls) {
+ console.log('Chrome storage 변경 감지 - user_current_api_calls:', {
+ 이전값: changes.user_current_api_calls.oldValue,
+ 새값: changes.user_current_api_calls.newValue
+ });
+
+ // 즉시 사용자 호출량 UI 업데이트
+ updateUserUsageDisplay();
+ }
+ });
+
+ console.log('Chrome storage 변경 리스너 설정 완료');
+ }
+}
+
+// 사용자 호출량 표시 업데이트 함수
+async function updateUserUsageDisplay() {
+ try {
+ const { user_current_api_calls, user_api_limit } = await chrome.storage.local.get([
+ 'user_current_api_calls',
+ 'user_api_limit'
+ ]);
+
+ const userUsageEl = document.getElementById('user-usage');
+ if (userUsageEl) {
+ const currentCalls = user_current_api_calls || 0;
+ let usageText = currentCalls.toString();
+
+ if (user_api_limit !== null && user_api_limit !== undefined) {
+ usageText = `${currentCalls}/${user_api_limit}`;
+ }
+
+ userUsageEl.textContent = usageText;
+
+ // 시각적 피드백 제공
+ userUsageEl.style.color = '#4CAF50';
+ userUsageEl.style.fontWeight = 'bold';
+
+ setTimeout(() => {
+ userUsageEl.style.color = '';
+ userUsageEl.style.fontWeight = '';
+ }, 2000);
+
+ console.log('사용자 호출량 UI 업데이트 완료:', {
+ currentCalls,
+ apiLimit: user_api_limit,
+ displayText: usageText
+ });
+ }
+ } catch (error) {
+ console.error('사용자 호출량 UI 업데이트 실패:', error);
+ }
+}
+
+// 카운트다운 시작 함수
+function startCountdown(targetTime) {
+ // 기존 타이머가 있으면 정리
+ if (countdownInterval) {
+ clearInterval(countdownInterval);
+ }
+
+ const countdownEl = document.getElementById('break-countdown');
+ if (!countdownEl) return;
+
+ countdownInterval = setInterval(() => {
+ const now = new Date();
+ const timeLeft = targetTime.getTime() - now.getTime();
+
+ if (timeLeft <= 0) {
+ // 시간이 다 되었을 때
+ countdownEl.textContent = '휴식 시간입니다! 🎉';
+ clearInterval(countdownInterval);
+
+ // 새로운 카운트다운 시작 (휴식 시간 후 다시 작업 시간)
+ setTimeout(() => {
+ initBreakCountdown();
+ }, 1000);
+
+ return;
+ }
+
+ // 남은 시간을 시:분:초 형태로 표시
+ const hours = Math.floor(timeLeft / (1000 * 60 * 60));
+ const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
+ const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
+
+ let timeString = '';
+ if (hours > 0) {
+ timeString = `${hours}시간 ${minutes}분 ${seconds}초`;
+ } else if (minutes > 0) {
+ timeString = `${minutes}분 ${seconds}초`;
+ } else {
+ timeString = `${seconds}초`;
+ }
+
+ countdownEl.textContent = timeString;
+ }, 1000);
+}
+
+// 페이지 언로드 시 타이머 정리
+window.addEventListener('beforeunload', () => {
+ // 카운트다운 타이머 정리
+ if (countdownInterval) {
+ clearInterval(countdownInterval);
+ countdownInterval = null;
+ }
+
+ // 설정 감시 타이머 정리
+ if (settingsWatcher) {
+ clearInterval(settingsWatcher);
+ settingsWatcher = null;
+ }
+
+ console.log('모든 타이머 정리 완료');
+});
+
+// 팝업 포커스 시 사용자 호출량 업데이트
+window.addEventListener('focus', () => {
+ console.log('팝업 포커스 - 사용자 호출량 업데이트');
+ updateUserUsageDisplay();
+});
+
+// 팝업 가시성 변경 시 사용자 호출량 업데이트
+document.addEventListener('visibilitychange', () => {
+ if (!document.hidden) {
+ console.log('팝업 가시성 변경 - 사용자 호출량 업데이트');
+ updateUserUsageDisplay();
+ }
+});
+
+// 매뉴얼 버튼 이벤트 리스너
+document.getElementById('manual-btn').addEventListener('click', function() {
+ chrome.tabs.create({ url: chrome.runtime.getURL('manual.html') });
+});
\ No newline at end of file
diff --git a/wrmc_ext/rest-modal.html b/wrmc_ext/rest-modal.html
new file mode 100644
index 0000000..528675f
--- /dev/null
+++ b/wrmc_ext/rest-modal.html
@@ -0,0 +1,296 @@
+
+
+
+
+
+
휴식 시간
+
+
+
+
+
+
+
+
🧘♀️
+
휴식 시간입니다!
+
열심히 일한 당신, 잠시 휴식을 취하세요
+
+
05:00
+
+
+
+
+
+ ✨
+ 타냐의 한마디
+ ✨
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/wrmc_ext/rest-modal.js b/wrmc_ext/rest-modal.js
new file mode 100644
index 0000000..85a5638
--- /dev/null
+++ b/wrmc_ext/rest-modal.js
@@ -0,0 +1,304 @@
+class RestModal {
+ constructor() {
+ this.restTime = 5; // 기본 5분
+ this.currentTime = this.restTime * 60; // 초 단위
+ this.timer = null;
+ this.config = null;
+ this.currentSaying = null;
+ this.autoZzim = false;
+
+ // 기본 추천 활동 목록 (백엔드 연결 실패 시 사용)
+ this.defaultActivities = [
+ "🚶♀️ 가벼운 산책을 해보세요",
+ "💧 물 한 잔을 마시며 수분을 보충하세요",
+ "🧘♀️ 심호흡을 하며 명상을 해보세요",
+ "🤸♀️ 간단한 스트레칭으로 몸을 풀어보세요",
+ "👀 눈 운동을 하며 눈의 피로를 풀어보세요",
+ "🚽 화장실을 다녀오세요",
+ "🌱 창밖을 보며 자연을 감상해보세요",
+ "📱 잠시 휴대폰을 내려놓고 마음을 비워보세요",
+ "☕ 따뜻한 차 한 잔을 마셔보세요",
+ "🎵 좋아하는 음악을 들으며 휴식하세요",
+ "📚 짧은 글이나 명언을 읽어보세요",
+ "🤝 동료나 가족과 간단한 대화를 나누세요",
+ "🧴 손 마사지나 목 마사지를 해보세요",
+ "🏃♀️ 제자리에서 가볍게 몸을 움직여보세요",
+ "🍎 건강한 간식을 드세요"
+ ];
+
+ this.activities = []; // 백엔드에서 가져온 활동 목록
+ }
+
+ async init() {
+ try {
+ await this.loadSettings();
+ await this.loadConfig();
+ this.setupEventListeners();
+ await this.loadRestActivities();
+ this.showRandomActivity();
+ await this.loadRandomSaying();
+ this.startTimer();
+ } catch (error) {
+ console.error('[RestModal] 초기화 실패:', error);
+ }
+ }
+
+ async loadSettings() {
+ try {
+ const result = await chrome.storage.local.get('time_alarm_settings');
+ const settings = result.time_alarm_settings || {};
+
+ this.restTime = settings.restTime || 5;
+ this.autoZzim = settings.autoZzim || false;
+ this.currentTime = this.restTime * 60;
+
+ console.log('[RestModal] 설정 로드:', { restTime: this.restTime, autoZzim: this.autoZzim });
+ } catch (error) {
+ console.error('[RestModal] 설정 로드 실패:', error);
+ }
+ }
+
+ async loadConfig() {
+ try {
+ const result = await chrome.storage.local.get('settings_config');
+ this.config = result.settings_config || {};
+ console.log('[RestModal] 설정 정보 로드:', this.config);
+ } catch (error) {
+ console.error('[RestModal] 설정 정보 로드 실패:', error);
+ }
+ }
+
+ setupEventListeners() {
+ // 닫기 버튼
+ document.getElementById('closeBtn').addEventListener('click', () => {
+ this.closeModal();
+ });
+
+ // 건너뛰기 버튼
+ document.getElementById('skipBtn').addEventListener('click', () => {
+ this.closeModal();
+ });
+
+ // ESC 키로 닫기
+ document.addEventListener('keydown', (e) => {
+ if (e.key === 'Escape') {
+ this.closeModal();
+ }
+ });
+ }
+
+ async loadRestActivities() {
+ try {
+ if (!this.config.ACCESS_TOKEN) {
+ throw new Error('Access token not found');
+ }
+
+ const SUPABASE_URL = this.config.SUPABASE_URL || "http://146.56.101.199:8000";
+ const SUPABASE_ANON_KEY = this.config.SUPABASE_ANON_KEY || "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyAgCiAgICAicm9sZSI6ICJhbm9uIiwKICAgICJpc3MiOiAic3VwYWJhc2UtZGVtbyIsCiAgICAiaWF0IjogMTY0MTc2OTIwMCwKICAgICJleHAiOiAxNzk5NTM1NjAwCn0.dc_X5iR_VP_qT0zsiyj_I_OZ2T9FtRU2BBNWN8Bu4GE";
+
+ // public.events 테이블에서 event_type이 'rest_time'인 데이터 가져오기
+ const apiUrl = `${SUPABASE_URL}/rest/v1/events?select=message&event_type=eq.rest_time&order=created_at.desc&limit=50`;
+
+ console.log('[RestModal] 추천활동 API 호출:', apiUrl);
+
+ const response = await fetch(apiUrl, {
+ method: 'GET',
+ headers: {
+ 'apikey': SUPABASE_ANON_KEY,
+ 'Authorization': `Bearer ${this.config.ACCESS_TOKEN}`,
+ 'Content-Type': 'application/json'
+ }
+ });
+
+ if (!response.ok) {
+ throw new Error(`API 호출 실패: ${response.status}`);
+ }
+
+ const events = await response.json();
+
+ if (events && events.length > 0) {
+ // message 필드에서 JSON 파싱하여 활동 목록 생성
+ this.activities = [];
+
+ events.forEach(event => {
+ try {
+ // message 필드가 JSON 형식인 경우 파싱
+ const messageData = JSON.parse(event.message);
+
+ // 활동 텍스트 추출 (다양한 형식 지원)
+ if (messageData.activity) {
+ this.activities.push(messageData.activity);
+ } else if (messageData.text) {
+ this.activities.push(messageData.text);
+ } else if (typeof messageData === 'string') {
+ this.activities.push(messageData);
+ }
+ } catch (parseError) {
+ // JSON 파싱 실패 시 문자열 그대로 사용
+ if (typeof event.message === 'string' && event.message.trim()) {
+ this.activities.push(event.message);
+ }
+ }
+ });
+
+ console.log('[RestModal] 백엔드에서 추천활동 로드 완료:', this.activities.length + '개');
+ } else {
+ throw new Error('추천활동 데이터가 없습니다');
+ }
+
+ } catch (error) {
+ console.error('[RestModal] 추천활동 로드 실패:', error);
+
+ // 기본 활동 목록 사용
+ this.activities = [...this.defaultActivities];
+ console.log('[RestModal] 기본 추천활동 사용:', this.activities.length + '개');
+ }
+ }
+
+ showRandomActivity() {
+ if (this.activities.length === 0) {
+ this.activities = [...this.defaultActivities];
+ }
+
+ const randomActivity = this.activities[Math.floor(Math.random() * this.activities.length)];
+ document.getElementById('activitySuggestion').innerHTML = randomActivity;
+ }
+
+ async loadRandomSaying() {
+ try {
+ if (!this.config.ACCESS_TOKEN) {
+ throw new Error('Access token not found');
+ }
+
+ const SUPABASE_URL = this.config.SUPABASE_URL || "http://146.56.101.199:8000";
+ const SUPABASE_ANON_KEY = this.config.SUPABASE_ANON_KEY || "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyAgCiAgICAicm9sZSI6ICJhbm9uIiwKICAgICJpc3MiOiAic3VwYWJhc2UtZGVtbyIsCiAgICAiaWF0IjogMTY0MTc2OTIwMCwKICAgICJleHAiOiAxNzk5NTM1NjAwCn0.dc_X5iR_VP_qT0zsiyj_I_OZ2T9FtRU2BBNWN8Bu4GE";
+
+ // 최근 1달 이내의 승인된 어록 가져오기
+ const oneMonthAgo = new Date();
+ oneMonthAgo.setMonth(oneMonthAgo.getMonth() - 1);
+
+ const apiUrl = `${SUPABASE_URL}/rest/v1/tanya_sayings?select=*,sayings_cat(saying_cat),sayings_target(target)&created_at=gte.${oneMonthAgo.toISOString()}&admin_approval=eq.true&order=created_at.desc&limit=50`;
+
+ console.log('[RestModal] 어록 API 호출:', apiUrl);
+
+ const response = await fetch(apiUrl, {
+ method: 'GET',
+ headers: {
+ 'apikey': SUPABASE_ANON_KEY,
+ 'Authorization': `Bearer ${this.config.ACCESS_TOKEN}`,
+ 'Content-Type': 'application/json'
+ }
+ });
+
+ if (!response.ok) {
+ throw new Error(`API 호출 실패: ${response.status}`);
+ }
+
+ const sayings = await response.json();
+
+ if (sayings && sayings.length > 0) {
+ // 랜덤하게 하나 선택
+ const randomSaying = sayings[Math.floor(Math.random() * sayings.length)];
+ this.currentSaying = randomSaying;
+
+ // 어록 표시
+ const sayingContent = document.getElementById('sayingContent');
+ const sayingAuthor = document.getElementById('sayingAuthor');
+
+ sayingContent.innerHTML = `"${randomSaying.saying}"`;
+
+ // 카테고리와 대상 정보 표시
+ const category = randomSaying.sayings_cat?.saying_cat || '';
+ const target = randomSaying.sayings_target?.target || '';
+ const dateStr = new Date(randomSaying.created_at).toLocaleDateString('ko-KR');
+
+ sayingAuthor.innerHTML = `${category} ${target ? `• ${target}` : ''} • ${dateStr}`;
+
+ console.log('[RestModal] 어록 로드 완료:', randomSaying);
+ } else {
+ throw new Error('어록이 없습니다');
+ }
+
+ } catch (error) {
+ console.error('[RestModal] 어록 로드 실패:', error);
+
+ // 기본 메시지 표시
+ document.getElementById('sayingContent').innerHTML = '"열심히 일한 당신, 잠시 휴식을 취하며 에너지를 충전하세요!"';
+ document.getElementById('sayingAuthor').innerHTML = '타냐 • 휴식 메시지';
+ }
+ }
+
+ startTimer() {
+ this.updateTimerDisplay();
+ this.updateProgressBar();
+
+ this.timer = setInterval(() => {
+ this.currentTime--;
+
+ this.updateTimerDisplay();
+ this.updateProgressBar();
+
+ if (this.currentTime <= 0) {
+ this.onTimerComplete();
+ }
+ }, 1000);
+ }
+
+ updateTimerDisplay() {
+ const minutes = Math.floor(this.currentTime / 60);
+ const seconds = this.currentTime % 60;
+ const display = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+
+ document.getElementById('timerDisplay').textContent = display;
+ }
+
+ updateProgressBar() {
+ const totalTime = this.restTime * 60;
+ const elapsed = totalTime - this.currentTime;
+ const percentage = (elapsed / totalTime) * 100;
+
+ document.getElementById('progressFill').style.width = `${percentage}%`;
+ }
+
+ async onTimerComplete() {
+ clearInterval(this.timer);
+
+ // 완료 메시지 표시
+ this.showCompletionMessage();
+
+ // 3초 후 자동 닫기
+ setTimeout(() => {
+ this.closeModal();
+ }, 3000);
+ }
+
+ showCompletionMessage() {
+ const modalContainer = document.querySelector('.modal-container');
+ modalContainer.innerHTML = `
+
🚀
+
휴식 완료!
+
이제 다시 열심히 월매출 1억을 향해 달려가세요!
+
+ 💪 화이팅! 성공은 바로 앞에 있습니다!
+
+
+
+
+ `;
+ }
+
+ closeModal() {
+ if (this.timer) {
+ clearInterval(this.timer);
+ }
+
+ // 창 닫기
+ window.close();
+ }
+}
+
+// 페이지 로드 시 휴식 모달 초기화
+document.addEventListener('DOMContentLoaded', () => {
+ const restModal = new RestModal();
+ restModal.init();
+});
\ No newline at end of file
diff --git a/wrmc_ext/sayings.html b/wrmc_ext/sayings.html
new file mode 100644
index 0000000..6d9b1d3
--- /dev/null
+++ b/wrmc_ext/sayings.html
@@ -0,0 +1,1195 @@
+
+
+
+
+
어록 관리
+
+
+
+
+
+
+
+ 초기화 중...
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 🔄 타냐대장경을 불러오는 중...
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/wrmc_ext/sayings.js b/wrmc_ext/sayings.js
new file mode 100644
index 0000000..63f3ae5
--- /dev/null
+++ b/wrmc_ext/sayings.js
@@ -0,0 +1,2845 @@
+// 타냐대장경 관리 모듈
+class SayingsManager {
+ constructor() {
+ // 기본 설정
+ this.config = null;
+ this.allSayings = [];
+ this.filteredSayings = [];
+ this.currentUser = null;
+ this.currentEditingSaying = null; // 현재 편집 중인 타냐대장경
+ this.searchTimeout = null;
+ this.newSayingsCheckInterval = null;
+ this.debugLogs = [];
+
+ // 디버그 모드 설정
+ this.debugMode = false;
+
+ // 백그라운드 연동 설정
+ this.isBackgroundConnected = false;
+ this.lastSayingsCount = 0;
+
+ this.debugLog('SayingsManager 생성자 호출');
+ }
+
+ // 설정 로드 함수
+ async loadConfig() {
+ try {
+ this.debugLog('chrome.storage에서 설정 로드 시작');
+
+ // 1. sayings_config 우선 확인
+ const configData = await chrome.storage.local.get('sayings_config');
+
+ if (configData.sayings_config) {
+ const config = configData.sayings_config;
+ this.debugLog('sayings_config에서 설정 로드', {
+ hasUrl: !!config.SUPABASE_URL,
+ hasKey: !!config.SUPABASE_ANON_KEY,
+ hasToken: !!config.ACCESS_TOKEN,
+ debugMode: config.DEBUG_MODE,
+ timestamp: config.timestamp,
+ age: Date.now() - config.timestamp
+ });
+
+ // 설정이 너무 오래된 경우 (5분 이상) 경고
+ if (Date.now() - config.timestamp > 5 * 60 * 1000) {
+ this.debugLog('⚠️ 설정이 오래되었습니다', { age: Date.now() - config.timestamp });
+ }
+
+ this.SUPABASE_URL = config.SUPABASE_URL;
+ this.SUPABASE_ANON_KEY = config.SUPABASE_ANON_KEY;
+ this.DEBUG_MODE = config.DEBUG_MODE !== undefined ? config.DEBUG_MODE : true;
+ this.ACCESS_TOKEN = config.ACCESS_TOKEN;
+
+ } else {
+ // 2. 개별 설정 확인 (fallback)
+ this.debugLog('sayings_config가 없음, 개별 설정 확인 중');
+
+ const storageData = await chrome.storage.local.get([
+ 'access_token',
+ 'SUPABASE_URL',
+ 'SUPABASE_ANON_KEY'
+ ]);
+
+ this.debugLog('개별 설정 조회 결과', {
+ hasToken: !!storageData.access_token,
+ hasUrl: !!storageData.SUPABASE_URL,
+ hasKey: !!storageData.SUPABASE_ANON_KEY
+ });
+
+ // 기본값 설정
+ this.SUPABASE_URL = storageData.SUPABASE_URL || 'http://146.56.101.199:8000';
+ this.SUPABASE_ANON_KEY = storageData.SUPABASE_ANON_KEY || 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyAgCiAgICAicm9sZSI6ICJhbm9uIiwKICAgICJpc3MiOiAic3VwYWJhc2UtZGVtbyIsCiAgICAiaWF0IjogMTY0MTc2OTIwMCwKICAgICJleHAiOiAxNzk5NTM1NjAwCn0.dc_X5iR_VP_qT0zsiyj_I_OZ2T9FtRU2BBNWN8Bu4GE';
+ this.ACCESS_TOKEN = storageData.access_token;
+ }
+
+ this.isConfigLoaded = true;
+
+ this.debugLog('설정 로드 완료', {
+ SUPABASE_URL: this.SUPABASE_URL,
+ hasToken: !!this.ACCESS_TOKEN,
+ tokenLength: this.ACCESS_TOKEN ? this.ACCESS_TOKEN.length : 0,
+ DEBUG_MODE: this.DEBUG_MODE,
+ isConfigLoaded: this.isConfigLoaded
+ });
+
+ // 설정 검증
+ if (!this.SUPABASE_URL) {
+ throw new Error('SUPABASE_URL이 설정되지 않았습니다');
+ }
+ if (!this.SUPABASE_ANON_KEY) {
+ throw new Error('SUPABASE_ANON_KEY가 설정되지 않았습니다');
+ }
+ if (!this.ACCESS_TOKEN) {
+ throw new Error('ACCESS_TOKEN이 없습니다. 로그인이 필요합니다');
+ }
+
+ return true;
+
+ } catch (error) {
+ this.debugLog('설정 로드 실패', { error: error.message });
+ throw error;
+ }
+ }
+
+ // 디버그 로깅 함수
+ debugLog(message, data = null) {
+ if (this.DEBUG_MODE) {
+ console.log(`[Sayings] ${message}`, data || '');
+ this.updateDebugUI(`[${new Date().toLocaleTimeString()}] ${message}`);
+ }
+ }
+
+ // 디버그 UI 업데이트
+ updateDebugUI(message) {
+ const debugElement = document.getElementById('debug-info');
+ if (debugElement) {
+ if (this.DEBUG_MODE) {
+ // 디버그 모드일 때만 표시
+ const existingButton = debugElement.querySelector('button');
+ const buttonHtml = existingButton ? existingButton.outerHTML : '';
+
+ debugElement.innerHTML = `${message}
${buttonHtml}`;
+ debugElement.style.display = "block";
+
+ // 버튼 이벤트 다시 등록
+ if (existingButton) {
+ const newButton = debugElement.querySelector('button');
+ if (newButton && !newButton.onclick) {
+ newButton.addEventListener('click', this.showDebugLogs.bind(this));
+ }
+ }
+ } else {
+ // 디버그 모드가 아닐 때는 숨김
+ debugElement.style.display = "none";
+ debugElement.innerHTML = "";
+ }
+ }
+ }
+
+ // 초기화 및 데이터 로드
+ async initialize() {
+ try {
+ this.debugLog('SayingsManager 초기화 시작');
+
+ // 1) 설정 로드 (chrome.storage에서)
+ this.debugLog('설정 로드 중...');
+ await this.loadConfig();
+
+ // 2) 토큰 유효성 검증
+ this.debugLog('토큰 유효성 검증 중...');
+ await this.validateToken();
+
+ // 3) 현재 사용자 정보 로드
+ this.debugLog('현재 사용자 정보 로드 중...');
+ await this.loadCurrentUser();
+
+ // 4) 타냐대장경 등록 모달 이벤트 등록
+ this.debugLog('타냐대장경 등록 모달 이벤트 등록 중...');
+ this.attachAddSayingEvents();
+
+ // 5) 카테고리와 타겟 옵션 로드
+ this.debugLog('카테고리와 타겟 옵션 로드 중...');
+ await this.loadCategoryAndTargetOptions();
+
+ // 6) 타냐대장경 목록 로드
+ this.debugLog('타냐대장경 목록 로드 시작');
+ await this.loadSayings();
+
+ // 7) 새 타냐대장경 감지 시작
+ this.debugLog('새 타냐대장경 감지 기능 시작');
+ this.startNewSayingsMonitoring();
+
+ this.debugLog('SayingsManager 초기화 완료');
+
+ } catch (error) {
+ this.debugLog('초기화 실패', { error: error.message });
+ this.renderError(error.message);
+ }
+ }
+
+ // 토큰 유효성 검증
+ async validateToken() {
+ try {
+ this.debugLog('토큰 검증 API 호출 준비', {
+ url: `${this.SUPABASE_URL}/auth/v1/user`,
+ hasToken: !!this.ACCESS_TOKEN,
+ tokenLength: this.ACCESS_TOKEN ? this.ACCESS_TOKEN.length : 0
+ });
+
+ const authRes = await fetch(`${this.SUPABASE_URL}/auth/v1/user`, {
+ method: 'GET',
+ headers: {
+ 'Authorization': `Bearer ${this.ACCESS_TOKEN}`,
+ 'apikey': this.SUPABASE_ANON_KEY,
+ 'Content-Type': 'application/json',
+ 'Accept': 'application/json'
+ },
+ mode: 'cors',
+ credentials: 'omit'
+ });
+
+ this.debugLog('토큰 검증 API 응답', {
+ status: authRes.status,
+ statusText: authRes.statusText,
+ ok: authRes.ok
+ });
+
+ if (!authRes.ok) {
+ const errorText = await authRes.text();
+ this.debugLog('토큰 검증 실패', {
+ status: authRes.status,
+ error: errorText
+ });
+ throw new Error(`토큰이 유효하지 않습니다 (${authRes.status}: ${authRes.statusText})`);
+ }
+
+ const userData = await authRes.json();
+ this.debugLog('토큰 검증 성공', {
+ email: userData.email,
+ id: userData.id
+ });
+
+ return userData;
+
+ } catch (error) {
+ this.debugLog('토큰 검증 중 오류', {
+ errorName: error.name,
+ errorMessage: error.message
+ });
+
+ if (error.name === 'TypeError' && error.message.includes('fetch')) {
+ throw new Error(`네트워크 연결 오류: 서버에 연결할 수 없습니다.`);
+ }
+
+ throw error;
+ }
+ }
+
+ // 타냐대장경 목록 로드
+ async loadSayings() {
+ this.debugLog('타냐대장경 로딩 시작');
+
+ try {
+ // 로딩 표시
+ document.getElementById('sayings-container').innerHTML = '
📚 타냐대장경을 불러오는 중...
';
+
+ // API 호출을 위한 헤더 설정
+ const headers = {
+ 'Authorization': `Bearer ${this.ACCESS_TOKEN}`,
+ 'apikey': this.SUPABASE_ANON_KEY,
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json'
+ };
+
+ // 승인된 타냐대장경만 가져오는 쿼리
+ const query = `${this.SUPABASE_URL}/rest/v1/tanya_sayings?admin_approval=eq.true&order=created_at.desc`;
+
+ this.debugLog('타냐대장경 API 호출', {
+ url: query,
+ headers: Object.keys(headers)
+ });
+
+ const response = await fetch(query, {
+ method: 'GET',
+ headers: headers
+ });
+
+ if (!response.ok) {
+ const errorText = await response.text();
+ this.debugLog('타냐대장경 로딩 실패', {
+ status: response.status,
+ statusText: response.statusText,
+ error: errorText
+ });
+ throw new Error(`타냐대장경 로딩 실패: ${response.status} ${response.statusText}\n${errorText}`);
+ }
+
+ const sayings = await response.json();
+
+ this.debugLog('타냐대장경 로딩 성공', {
+ count: sayings.length,
+ firstSaying: sayings.length > 0 ? sayings[0].saying_title : 'N/A'
+ });
+
+ // 데이터 저장
+ this.allSayings = sayings;
+ this.filteredSayings = [...sayings];
+
+ // 필터 이벤트 연결
+ this.attachFilterEvents();
+
+ // 타냐대장경 표시
+ await this.displaySayings();
+
+ } catch (error) {
+ this.debugLog('타냐대장경 로딩 에러', { error: error.message });
+ this.renderError('타냐대장경을 불러오는데 실패했습니다', error.message);
+ }
+ }
+
+ // 타냐대장경 표시
+ async displaySayings() {
+ this.debugLog('타냐대장경 표시 시작');
+
+ const container = document.getElementById('sayings-container');
+ const stats = this.calculateStats();
+
+ // 통계 업데이트
+ const statsText = `총 ${stats.total}개의 타냐대장경 (${Object.entries(stats.byCategory).map(([cat, count]) => `${cat}: ${count}개`).join(', ')})`;
+ document.getElementById('sayings-stats').textContent = statsText;
+
+ this.debugLog('타냐대장경 통계 계산 완료', stats);
+
+ if (this.filteredSayings.length === 0) {
+ container.innerHTML = '
📝 표시할 타냐대장경이 없습니다.
';
+ this.debugLog('표시할 타냐대장경 없음');
+ return;
+ }
+
+ // 타냐대장경 카드 생성 (비동기 처리)
+ const sayingCards = await Promise.all(this.filteredSayings.map(async saying => {
+ // 콘텐츠 렌더링 (블록 데이터 우선)
+ let contentHtml = '';
+
+ if (saying.content_blocks && Array.isArray(saying.content_blocks) && saying.content_blocks.length > 0) {
+ // 블록 데이터가 있는 경우
+ contentHtml = this.renderContentBlocks(saying.content_blocks);
+ } else {
+ // 기존 마크다운 방식
+ contentHtml = await this.convertMarkdownToHtml(saying.saying);
+ }
+
+ // 날짜 포맷팅
+ const date = new Date(saying.created_at);
+ const formattedDate = date.toLocaleDateString('ko-KR', {
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit'
+ });
+
+ // 등록자 정보 (register 필드 사용)
+ const authorName = saying.register || saying.user_name || '알 수 없음';
+
+ return `
+
+
+
+ ${contentHtml}
+
+
+
+ `;
+ }));
+
+ container.innerHTML = sayingCards.join('');
+
+ // 카드 클릭 이벤트 추가
+ const cardElements = container.querySelectorAll('.saying-card');
+ cardElements.forEach((cardElement, index) => {
+ cardElement.addEventListener('click', (e) => {
+ // 삭제 버튼이나 다른 버튼 클릭 시 모달이 열리지 않도록 함
+ if (e.target.closest('.delete-btn') || e.target.closest('button')) {
+ return;
+ }
+ this.openDetailModal(this.filteredSayings[index]);
+ });
+ });
+
+ this.debugLog('타냐대장경 표시 완료', {
+ filteredCount: this.filteredSayings.length,
+ cardsGenerated: sayingCards.length
+ });
+ }
+
+ // 블록 데이터 렌더링 함수
+ renderContentBlocks(blocks) {
+ if (!blocks || !Array.isArray(blocks) || blocks.length === 0) {
+ return '';
+ }
+
+ return blocks.map(block => {
+ if (block.type === 'text') {
+ return `
${this.escapeHtml(block.content || '').replace(/\n/g, '
')}
`;
+ } else if (block.type === 'image') {
+ if (block.content) {
+ return `
+
+
+ ${block.alt ? `
${this.escapeHtml(block.alt)}
` : ''}
+
+ `;
+ }
+ }
+ return '';
+ }).join('');
+ }
+
+ // 전체 화면 이미지 표시 함수
+ showFullImage(imageSrc) {
+ let modal = document.querySelector('.full-image-modal');
+ if (!modal) {
+ modal = document.createElement('div');
+ modal.className = 'full-image-modal';
+ modal.style.cssText = `
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0,0,0,0.95);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 10000;
+ opacity: 0;
+ visibility: hidden;
+ transition: all 0.3s ease;
+ cursor: zoom-out;
+ `;
+ modal.innerHTML = `
+
+
×
+
![전체 화면 이미지]()
+
+
+
+
+
+
+ `;
+ document.body.appendChild(modal);
+
+ const img = modal.querySelector('img');
+ const closeBtn = modal.querySelector('.close-btn');
+ const zoomBtns = modal.querySelectorAll('.zoom-btn');
+
+ let currentZoom = 1;
+ let isDragging = false;
+ let startX, startY, translateX = 0, translateY = 0;
+
+ // 닫기 버튼 이벤트
+ closeBtn.addEventListener('click', (e) => {
+ e.stopPropagation();
+ modal.style.opacity = '0';
+ modal.style.visibility = 'hidden';
+ currentZoom = 1;
+ translateX = 0;
+ translateY = 0;
+ img.style.transform = 'scale(1) translate(0, 0)';
+ });
+
+ // 배경 클릭으로 닫기
+ modal.addEventListener('click', (e) => {
+ if (e.target === modal) {
+ modal.style.opacity = '0';
+ modal.style.visibility = 'hidden';
+ currentZoom = 1;
+ translateX = 0;
+ translateY = 0;
+ img.style.transform = 'scale(1) translate(0, 0)';
+ }
+ });
+
+ // 확대/축소 버튼 이벤트
+ zoomBtns.forEach(btn => {
+ btn.addEventListener('click', (e) => {
+ e.stopPropagation();
+ const action = btn.dataset.action;
+
+ if (action === 'zoom-in') {
+ currentZoom = Math.min(currentZoom * 1.5, 5);
+ } else if (action === 'zoom-out') {
+ currentZoom = Math.max(currentZoom / 1.5, 0.5);
+ } else if (action === 'zoom-reset') {
+ currentZoom = 1;
+ translateX = 0;
+ translateY = 0;
+ }
+
+ img.style.transform = `scale(${currentZoom}) translate(${translateX}px, ${translateY}px)`;
+ img.style.cursor = currentZoom > 1 ? 'move' : 'zoom-in';
+ });
+
+ // 버튼 호버 효과
+ btn.addEventListener('mouseenter', () => {
+ btn.style.background = 'rgba(255,255,255,0.4)';
+ });
+
+ btn.addEventListener('mouseleave', () => {
+ btn.style.background = 'rgba(255,255,255,0.2)';
+ });
+ });
+
+ // 이미지 드래그 기능
+ img.addEventListener('mousedown', (e) => {
+ if (currentZoom > 1) {
+ isDragging = true;
+ startX = e.clientX - translateX;
+ startY = e.clientY - translateY;
+ img.style.cursor = 'grabbing';
+ e.preventDefault();
+ }
+ });
+
+ document.addEventListener('mousemove', (e) => {
+ if (isDragging && currentZoom > 1) {
+ translateX = e.clientX - startX;
+ translateY = e.clientY - startY;
+ img.style.transform = `scale(${currentZoom}) translate(${translateX}px, ${translateY}px)`;
+ }
+ });
+
+ document.addEventListener('mouseup', () => {
+ if (isDragging) {
+ isDragging = false;
+ img.style.cursor = currentZoom > 1 ? 'move' : 'zoom-in';
+ }
+ });
+
+ // 휠 확대/축소
+ modal.addEventListener('wheel', (e) => {
+ e.preventDefault();
+ if (e.deltaY < 0) {
+ currentZoom = Math.min(currentZoom * 1.2, 5);
+ } else {
+ currentZoom = Math.max(currentZoom / 1.2, 0.5);
+ }
+ img.style.transform = `scale(${currentZoom}) translate(${translateX}px, ${translateY}px)`;
+ img.style.cursor = currentZoom > 1 ? 'move' : 'zoom-in';
+ });
+
+ // ESC 키로 닫기
+ document.addEventListener('keydown', (e) => {
+ if (e.key === 'Escape' && modal.style.visibility === 'visible') {
+ modal.style.opacity = '0';
+ modal.style.visibility = 'hidden';
+ currentZoom = 1;
+ translateX = 0;
+ translateY = 0;
+ img.style.transform = 'scale(1) translate(0, 0)';
+ }
+ });
+ }
+
+ const img = modal.querySelector('img');
+ img.src = imageSrc;
+ modal.style.opacity = '1';
+ modal.style.visibility = 'visible';
+
+ // 이미지 로드 완료 시 최적화 적용
+ img.onload = () => {
+ // 고해상도 이미지에 대한 렌더링 최적화
+ img.style.imageRendering = 'auto';
+ img.style.imageRendering = '-webkit-optimize-contrast';
+
+ // 이미지 크기에 따른 초기 스케일 조정
+ const containerWidth = modal.offsetWidth * 0.9;
+ const containerHeight = modal.offsetHeight * 0.9;
+ const imgAspectRatio = img.naturalWidth / img.naturalHeight;
+ const containerAspectRatio = containerWidth / containerHeight;
+
+ if (img.naturalWidth > containerWidth || img.naturalHeight > containerHeight) {
+ // 이미지가 컨테이너보다 큰 경우 적절한 크기로 조정
+ if (imgAspectRatio > containerAspectRatio) {
+ img.style.maxWidth = '90%';
+ img.style.maxHeight = 'auto';
+ } else {
+ img.style.maxWidth = 'auto';
+ img.style.maxHeight = '90%';
+ }
+ }
+ };
+ }
+
+ // 마크다운을 HTML로 변환하는 함수 (비동기)
+ async convertMarkdownToHtml(content) {
+ // 빈 내용 체크
+ if (!content || typeof content !== 'string') {
+ console.warn('⚠️ 변환할 마크다운 내용이 없습니다');
+ return '';
+ }
+
+ try {
+ // 마크다운 라이브러리가 로드되었는지 확인
+ if (typeof marked !== 'undefined' && typeof DOMPurify !== 'undefined') {
+ console.log('✅ 마크다운 라이브러리 사용 가능');
+
+ // marked로 마크다운을 HTML로 변환
+ const rawHtml = marked.parse(content);
+
+ // DOMPurify로 HTML 정화
+ const cleanHtml = DOMPurify.sanitize(rawHtml);
+
+ console.log('🎯 마크다운 변환 완료');
+ return cleanHtml;
+ } else {
+ console.warn('⚠️ 마크다운 라이브러리가 로드되지 않음, 기본 처리 사용');
+ return this.basicMarkdownToHtml(content);
+ }
+ } catch (error) {
+ console.error('❌ 마크다운 변환 중 오류:', error);
+ // 오류 발생 시 기본 마크다운 처리로 폴백
+ return this.basicMarkdownToHtml(content);
+ }
+ }
+
+ // 기본 마크다운 처리 (라이브러리 없이) - 개선된 버전
+ basicMarkdownToHtml(markdown) {
+ let html = this.escapeHtml(markdown);
+
+ // 기본적인 마크다운 문법 처리 (순서 중요)
+ html = html
+ // 코드 블록 (```)
+ .replace(/```([\s\S]*?)```/g, '
$1
')
+ // 인라인 코드 (`)
+ .replace(/`([^`]+)`/g, '
$1')
+ // 볼드 텍스트 (**)
+ .replace(/\*\*([^*]+)\*\*/g, '
$1')
+ // 이탤릭 텍스트 (*)
+ .replace(/\*([^*]+)\*/g, '
$1')
+ // 헤더 (###, ##, #)
+ .replace(/^### (.+)$/gm, '
$1
')
+ .replace(/^## (.+)$/gm, '
$1
')
+ .replace(/^# (.+)$/gm, '
$1
')
+ // 인용문 (>)
+ .replace(/^> (.+)$/gm, '
$1
')
+ // 링크 [텍스트](URL)
+ .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '
$1')
+ // 리스트 (- 또는 *)
+ .replace(/^[*-] (.+)$/gm, '
$1')
+ // 줄바꿈 처리
+ .replace(/\n\n/g, '
')
+ .replace(/\n/g, '
');
+
+ // 리스트 태그로 감싸기
+ html = html.replace(/(
.*<\/li>)/gs, '');
+
+ // 단락 태그로 감싸기 (이미 p 태그가 있는 경우 제외)
+ if (!html.includes('') && !html.includes('
') && !html.includes('') && !html.includes('')) {
+ html = '
' + html + '
';
+ }
+
+ this.debugLog('기본 마크다운 변환 완료', {
+ 원본길이: markdown.length,
+ 변환길이: html.length
+ });
+
+ return html;
+ }
+
+ // HTML 이스케이프
+ escapeHtml(text) {
+ const div = document.createElement('div');
+ div.textContent = text;
+ return div.innerHTML;
+ }
+
+ // 에러 렌더링
+ renderError(message) {
+ const container = document.getElementById("sayings-container");
+ const statsDiv = document.getElementById("sayings-stats");
+
+ if (container) {
+ container.innerHTML = `
+
+
❌
+
오류가 발생했습니다
+
${message}
+
오류: ${message}
`;
+ }
+
+ this.debugLog('에러 렌더링 완료', { message });
+ }
+
+ // 로그 확인 함수
+ showDebugLogs() {
+ const debugElement = document.getElementById('debug-info');
+ if (!debugElement) return;
+
+ // 현재 상태 수집
+ const stats = this.calculateStats();
+ const currentUser = this.currentUser;
+
+ // 디버그 정보 생성
+ const debugInfo = `
+
+
🔧 디버그 정보
+
+
📊 타냐대장경 통계:
+
+ • 전체 타냐대장경: ${stats.total}개
+ • 필터링된 타냐대장경: ${this.filteredSayings.length}개
+ • 카테고리별: ${Object.entries(stats.byCategory).map(([cat, count]) => `${cat}(${count})`).join(', ')}
+
+
+
👤 사용자 정보:
+
+ ${currentUser ? `• 이메일: ${currentUser.email}
• 닉네임: ${currentUser.nickname}
• 회원등급: ${currentUser.membership_level || '기본'}` : '• 로그인 필요'}
+
+
+
🔔 백그라운드 새 타냐대장경 감지:
+
+ • 상태: 활성화 (1분 간격)
+ • 방식: 백그라운드 스크립트 연동
+ • 마지막 확인: 백그라운드에서 관리
+ • 브라우저 알림: 지원됨
+ • 로컬 스토리지: 사용 중
+
+
+
⚙️ 시스템 상태:
+
+ • 설정 로드: ${this.isConfigLoaded ? '완료' : '실패'}
+ • API 연결: ${this.SUPABASE_URL ? '설정됨' : '미설정'}
+ • 토큰 상태: ${this.ACCESS_TOKEN ? '있음' : '없음'}
+ • 디버그 모드: ${this.DEBUG_MODE ? '활성화' : '비활성화'}
+
+
+
+
+
+
+
미리보기할 내용을 입력해주세요
';
+ return;
+ }
+
+ // 로딩 상태 표시
+ previewDiv.innerHTML = '미리보기 생성 중...
';
+
+ try {
+ // 마크다운을 HTML로 변환
+ const htmlContent = await this.convertMarkdownToHtml(content);
+
+ // 변환된 HTML을 미리보기에 표시
+ previewDiv.innerHTML = htmlContent || '내용을 변환할 수 없습니다
';
+
+ console.log('✅ 마크다운 미리보기 렌더링 완료');
+ } catch (error) {
+ console.error('❌ 마크다운 미리보기 렌더링 실패:', error);
+ previewDiv.innerHTML = '미리보기 생성 중 오류가 발생했습니다
';
+ }
+ }
+
+ // 타냐대장경 제출 처리
+ async handleSayingSubmit() {
+ this.debugLog('타냐대장경 제출 처리 시작');
+
+ const title = document.getElementById('saying-title').value.trim();
+ const category = document.getElementById('saying-category').value;
+ const target = document.getElementById('saying-target').value;
+ const submitBtn = document.getElementById('submit-btn');
+
+ // 블록 에디터 데이터 가져오기
+ let content = '';
+ let contentBlocks = null;
+
+ if (window.blockEditor && window.blockEditor.blocks.length > 0) {
+ // 블록 에디터 사용 시
+ const blockData = window.blockEditor.getContentForSave();
+ content = blockData.legacy_text; // 기존 텍스트 필드용 (하위 호환성)
+ contentBlocks = blockData.blocks; // JSONB 필드용
+
+ // 블록이 비어있는지 확인
+ const hasContent = contentBlocks.some(block => {
+ if (block.type === 'text') {
+ return block.content && block.content.trim() !== '';
+ } else if (block.type === 'image') {
+ return block.content !== null;
+ }
+ return false;
+ });
+
+ if (!hasContent) {
+ alert('❌ 타냐대장경 내용을 입력해주세요.');
+ return;
+ }
+ } else {
+ // 기존 텍스트 에디터 사용 시 (하위 호환성)
+ content = document.getElementById('saying-content').value.trim();
+ if (!content) {
+ alert('❌ 타냐대장경 내용을 입력해주세요.');
+ document.getElementById('saying-content').focus();
+ return;
+ }
+ }
+
+ // 유효성 검사
+ if (!title) {
+ alert('❌ 타냐대장경 제목을 입력해주세요.');
+ document.getElementById('saying-title').focus();
+ return;
+ }
+
+ if (!category) {
+ alert('❌ 카테고리를 선택해주세요.');
+ document.getElementById('saying-category').focus();
+ return;
+ }
+
+ if (!target) {
+ alert('❌ 타겟을 선택해주세요.');
+ document.getElementById('saying-target').focus();
+ return;
+ }
+
+ if (!this.currentUser) {
+ alert('❌ 사용자 정보를 불러올 수 없습니다. 페이지를 새로고침해주세요.');
+ return;
+ }
+
+ try {
+ // 버튼 상태 변경
+ const originalText = submitBtn.textContent;
+ submitBtn.textContent = '🔄 등록 중...';
+ submitBtn.disabled = true;
+
+ this.debugLog('타냐대장경 등록 API 호출', {
+ title,
+ contentLength: content.length,
+ hasBlocks: contentBlocks !== null,
+ blocksCount: contentBlocks ? contentBlocks.length : 0,
+ category,
+ target,
+ userId: this.currentUser.id,
+ userNickname: this.currentUser.nickname
+ });
+
+ // 타냐대장경 데이터 생성 (register 필드 사용)
+ const sayingData = {
+ saying_title: title,
+ saying: content, // 기존 텍스트 필드 (하위 호환성)
+ cat: category,
+ target: target,
+ register: this.currentUser.nickname, // 등록자 필드명 변경
+ user_id: this.currentUser.id, // RLS 정책을 위한 사용자 ID 추가
+ admin_approval: false, // 기본적으로 승인 대기 상태
+ created_at: new Date().toISOString()
+ };
+
+ // 블록 데이터가 있으면 추가
+ if (contentBlocks) {
+ sayingData.content_blocks = contentBlocks;
+ }
+
+ // API 호출
+ const response = await fetch(`${this.SUPABASE_URL}/rest/v1/tanya_sayings`, {
+ method: 'POST',
+ headers: {
+ 'Authorization': `Bearer ${this.ACCESS_TOKEN}`,
+ 'apikey': this.SUPABASE_ANON_KEY,
+ 'Content-Type': 'application/json',
+ 'Accept': 'application/json'
+ },
+ body: JSON.stringify(sayingData)
+ });
+
+ this.debugLog('타냐대장경 등록 API 응답', {
+ status: response.status,
+ statusText: response.statusText,
+ ok: response.ok
+ });
+
+ if (!response.ok) {
+ const errorDetail = await response.text();
+ this.debugLog('타냐대장경 등록 실패', {
+ status: response.status,
+ error: errorDetail
+ });
+ throw new Error(`타냐대장경 등록 실패 (${response.status}: ${response.statusText})\n응답: ${errorDetail}`);
+ }
+
+ this.debugLog('타냐대장경 등록 성공');
+
+ // 성공 팝업 표시
+ this.showSuccessPopup(title, category, target);
+
+ // 모달 닫기
+ document.getElementById('add-saying-modal').style.display = 'none';
+ document.getElementById('saying-form').reset();
+ this.resetPreviewTabs();
+
+ // 블록 에디터 초기화
+ if (window.blockEditor) {
+ window.blockEditor.loadFromData([]);
+ }
+
+ // 타냐대장경 목록 새로고침 (승인된 타냐대장경만 표시되므로 새로 등록한 타냐대장경은 보이지 않음)
+ await this.loadSayings();
+
+ } catch (error) {
+ this.debugLog('타냐대장경 등록 실패', { error: error.message });
+ alert(`❌ 타냐대장경 등록 중 오류가 발생했습니다:\n${error.message}`);
+ } finally {
+ // 버튼 상태 복원
+ submitBtn.textContent = '📝 등록하기';
+ submitBtn.disabled = false;
+ }
+ }
+
+ // 성공 팝업 표시
+ showSuccessPopup(title, category, target) {
+ const popup = document.createElement('div');
+ popup.style.cssText = `
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background: white;
+ padding: 30px;
+ border-radius: 8px;
+ box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+ z-index: 2000;
+ text-align: center;
+ min-width: 400px;
+ border: 3px solid #28a745;
+ `;
+
+ popup.innerHTML = `
+ 🎉
+ 타냐대장경 등록 완료!
+
+
제목: ${title}
+
카테고리: ${category}
+
타겟: ${target}
+
등록자: ${this.currentUser.nickname}
+
+ 📋 안내사항
+ 등록된 타냐대장경은 관리자 승인 후 목록에 표시됩니다.
+
+
+ `;
+
+ // 팝업을 body에 추가
+ document.body.appendChild(popup);
+
+ // 확인 버튼 이벤트
+ const closeBtn = popup.querySelector('#close-popup');
+ closeBtn.addEventListener('click', () => {
+ document.body.removeChild(popup);
+ });
+
+ // 3초 후 자동으로 닫기
+ setTimeout(() => {
+ if (document.body.contains(popup)) {
+ document.body.removeChild(popup);
+ }
+ }, 5000);
+
+ this.debugLog('성공 팝업 표시 완료', { title, category, target });
+ }
+
+ // 카테고리와 타겟 옵션을 백엔드에서 로드
+ async loadCategoryAndTargetOptions() {
+ this.debugLog('카테고리와 타겟 옵션 로드 시작');
+
+ try {
+ // 카테고리 데이터 가져오기
+ this.debugLog('카테고리 데이터 요청 중...');
+ const categoryResponse = await fetch(`${this.SUPABASE_URL}/rest/v1/sayings_cat?select=saying_cat&order=saying_cat.asc`, {
+ headers: {
+ 'apikey': this.SUPABASE_ANON_KEY,
+ 'Authorization': `Bearer ${this.SUPABASE_ANON_KEY}`,
+ 'Content-Type': 'application/json'
+ }
+ });
+
+ // 타겟 데이터 가져오기
+ this.debugLog('타겟 데이터 요청 중...');
+ const targetResponse = await fetch(`${this.SUPABASE_URL}/rest/v1/sayings_target?select=target&order=target.asc`, {
+ headers: {
+ 'apikey': this.SUPABASE_ANON_KEY,
+ 'Authorization': `Bearer ${this.SUPABASE_ANON_KEY}`,
+ 'Content-Type': 'application/json'
+ }
+ });
+
+ // 카테고리 응답 처리
+ if (categoryResponse.ok) {
+ const categoryData = await categoryResponse.json();
+ this.debugLog('카테고리 데이터 로드 성공', { count: categoryData.length });
+
+ if (categoryData.length === 0) {
+ throw new Error('카테고리 데이터가 비어있습니다. sayings_cat 테이블을 확인해주세요.');
+ }
+
+ // 카테고리 드롭다운 업데이트
+ this.updateCategoryDropdowns(categoryData);
+ } else {
+ const errorText = await categoryResponse.text();
+ this.debugLog('카테고리 데이터 로드 실패', {
+ status: categoryResponse.status,
+ statusText: categoryResponse.statusText,
+ error: errorText
+ });
+ throw new Error(`카테고리 데이터 로드 실패: ${categoryResponse.status} ${categoryResponse.statusText}`);
+ }
+
+ // 타겟 응답 처리
+ if (targetResponse.ok) {
+ const targetData = await targetResponse.json();
+ this.debugLog('타겟 데이터 로드 성공', { count: targetData.length });
+
+ if (targetData.length === 0) {
+ throw new Error('타겟 데이터가 비어있습니다. sayings_target 테이블을 확인해주세요.');
+ }
+
+ // 타겟 드롭다운 업데이트
+ this.updateTargetDropdowns(targetData);
+ } else {
+ const errorText = await targetResponse.text();
+ this.debugLog('타겟 데이터 로드 실패', {
+ status: targetResponse.status,
+ statusText: targetResponse.statusText,
+ error: errorText
+ });
+ throw new Error(`타겟 데이터 로드 실패: ${targetResponse.status} ${targetResponse.statusText}`);
+ }
+
+ this.debugLog('카테고리와 타겟 옵션 로드 완료');
+
+ } catch (error) {
+ this.debugLog('카테고리/타겟 옵션 로드 중 오류 발생', { error: error.message });
+
+ // 에러를 다시 던져서 앱 초기화를 중단
+ throw new Error(`백엔드에서 드롭다운 데이터를 가져올 수 없습니다: ${error.message}`);
+ }
+ }
+
+ // 카테고리 드롭다운 업데이트
+ updateCategoryDropdowns(categoryData) {
+ const categorySelect = document.getElementById('saying-category');
+ if (!categorySelect) return;
+
+ // 기존 옵션 제거 (첫 번째 "선택하세요" 옵션 제외)
+ while (categorySelect.children.length > 1) {
+ categorySelect.removeChild(categorySelect.lastChild);
+ }
+
+ // 새 카테고리 옵션 추가
+ categoryData.forEach(item => {
+ const option = document.createElement('option');
+ option.value = item.saying_cat;
+ option.textContent = item.saying_cat;
+ categorySelect.appendChild(option);
+ });
+
+ // "아무거나" 기본값 설정
+ const defaultCategory = categoryData.find(item => item.saying_cat === '아무거나');
+ if (defaultCategory) {
+ categorySelect.value = defaultCategory.saying_cat;
+ this.debugLog('카테고리 기본값 설정', { 기본값: defaultCategory.saying_cat });
+ }
+
+ // 필터 드롭다운도 업데이트
+ this.updateFilterCategoryOptions(categoryData);
+
+ this.debugLog('카테고리 드롭다운 업데이트 완료', {
+ 옵션개수: categorySelect.children.length - 1,
+ 기본값: categorySelect.value || '없음'
+ });
+ }
+
+ // 타겟 드롭다운 업데이트
+ updateTargetDropdowns(targetData) {
+ const targetSelect = document.getElementById('saying-target');
+ if (!targetSelect) return;
+
+ // 기존 옵션 제거 (첫 번째 "선택하세요" 옵션 제외)
+ while (targetSelect.children.length > 1) {
+ targetSelect.removeChild(targetSelect.lastChild);
+ }
+
+ // 새 타겟 옵션 추가
+ targetData.forEach(item => {
+ const option = document.createElement('option');
+ option.value = item.target;
+ option.textContent = item.target;
+ targetSelect.appendChild(option);
+ });
+
+ // "누구나" 기본값 설정
+ const defaultTarget = targetData.find(item => item.target === '누구나');
+ if (defaultTarget) {
+ targetSelect.value = defaultTarget.target;
+ this.debugLog('타겟 기본값 설정', { 기본값: defaultTarget.target });
+ }
+
+ // 필터 드롭다운도 업데이트
+ this.updateFilterTargetOptions(targetData);
+
+ this.debugLog('타겟 드롭다운 업데이트 완료', {
+ 옵션개수: targetSelect.children.length - 1,
+ 기본값: targetSelect.value || '없음'
+ });
+ }
+
+ // 필터용 카테고리 옵션 업데이트
+ updateFilterCategoryOptions(categoryData) {
+ const categoryFilter = document.getElementById('category-filter');
+ if (!categoryFilter) return;
+
+ // 기존 옵션 제거 (첫 번째 "모든 카테고리" 옵션 제외)
+ while (categoryFilter.children.length > 1) {
+ categoryFilter.removeChild(categoryFilter.lastChild);
+ }
+
+ // 새 카테고리 옵션 추가
+ categoryData.forEach(item => {
+ const option = document.createElement('option');
+ option.value = item.saying_cat;
+ option.textContent = item.saying_cat;
+ categoryFilter.appendChild(option);
+ });
+
+ this.debugLog('필터용 카테고리 옵션 업데이트 완료', {
+ 옵션개수: categoryFilter.children.length - 1
+ });
+ }
+
+ // 필터용 타겟 옵션 업데이트
+ updateFilterTargetOptions(targetData) {
+ const targetFilter = document.getElementById('target-filter');
+ if (!targetFilter) return;
+
+ // 기존 옵션 제거 (첫 번째 "모든 타겟" 옵션 제외)
+ while (targetFilter.children.length > 1) {
+ targetFilter.removeChild(targetFilter.lastChild);
+ }
+
+ // 새 타겟 옵션 추가
+ targetData.forEach(item => {
+ const option = document.createElement('option');
+ option.value = item.target;
+ option.textContent = item.target;
+ targetFilter.appendChild(option);
+ });
+
+ this.debugLog('필터용 타겟 옵션 업데이트 완료', {
+ 옵션개수: targetFilter.children.length - 1
+ });
+ }
+
+ // 통계 계산
+ calculateStats() {
+ const stats = {
+ total: this.filteredSayings.length,
+ byCategory: {},
+ byTarget: {}
+ };
+
+ this.filteredSayings.forEach(saying => {
+ // 카테고리별 통계
+ const category = saying.cat || '기타';
+ stats.byCategory[category] = (stats.byCategory[category] || 0) + 1;
+
+ // 타겟별 통계
+ const target = saying.target || '기타';
+ stats.byTarget[target] = (stats.byTarget[target] || 0) + 1;
+ });
+
+ return stats;
+ }
+
+ // 필터 적용
+ async applyFilters() {
+ this.debugLog('필터 적용 시작');
+
+ const categoryFilter = document.getElementById('category-filter').value;
+ const targetFilter = document.getElementById('target-filter').value;
+ const dateFilter = document.getElementById('date-filter').value;
+ const searchText = document.getElementById('search-input').value.toLowerCase().trim();
+
+ this.debugLog('필터 조건', {
+ category: categoryFilter,
+ target: targetFilter,
+ date: dateFilter,
+ search: searchText
+ });
+
+ this.filteredSayings = this.allSayings.filter(saying => {
+ // 카테고리 필터
+ if (categoryFilter && categoryFilter !== 'all') {
+ if (saying.cat !== categoryFilter) return false;
+ }
+
+ // 타겟 필터
+ if (targetFilter && targetFilter !== 'all') {
+ if (saying.target !== targetFilter) return false;
+ }
+
+ // 날짜 필터
+ if (dateFilter && dateFilter !== 'all') {
+ const sayingDate = new Date(saying.created_at);
+ const now = new Date();
+
+ switch (dateFilter) {
+ case 'today':
+ if (sayingDate.toDateString() !== now.toDateString()) return false;
+ break;
+ case 'week':
+ const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
+ if (sayingDate < weekAgo) return false;
+ break;
+ case 'month':
+ const monthAgo = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
+ if (sayingDate < monthAgo) return false;
+ break;
+ }
+ }
+
+ // 검색 텍스트 필터
+ if (searchText) {
+ const searchableText = [
+ saying.saying_title || '',
+ saying.saying || '',
+ saying.register || saying.user_name || '',
+ saying.cat || '',
+ saying.target || ''
+ ].join(' ').toLowerCase();
+
+ if (!searchableText.includes(searchText)) return false;
+ }
+
+ return true;
+ });
+
+ this.debugLog('필터 적용 완료', {
+ 원본개수: this.allSayings.length,
+ 필터링된개수: this.filteredSayings.length
+ });
+
+ await this.displaySayings();
+ }
+
+ // 필터 이벤트 연결
+ attachFilterEvents() {
+ this.debugLog('필터 이벤트 연결 시작');
+
+ // 카테고리 필터
+ const categoryFilter = document.getElementById('category-filter');
+ if (categoryFilter) {
+ categoryFilter.addEventListener('change', async () => await this.applyFilters());
+ }
+
+ // 타겟 필터
+ const targetFilter = document.getElementById('target-filter');
+ if (targetFilter) {
+ targetFilter.addEventListener('change', async () => await this.applyFilters());
+ }
+
+ // 날짜 필터
+ const dateFilter = document.getElementById('date-filter');
+ if (dateFilter) {
+ dateFilter.addEventListener('change', async () => await this.applyFilters());
+ }
+
+ // 검색 입력
+ const searchInput = document.getElementById('search-input');
+ if (searchInput) {
+ searchInput.addEventListener('input', () => {
+ clearTimeout(this.searchTimeout);
+ this.searchTimeout = setTimeout(async () => await this.applyFilters(), 300);
+ });
+ }
+
+ // 필터 초기화 버튼
+ const resetButton = document.getElementById('reset-filters');
+ if (resetButton) {
+ resetButton.addEventListener('click', async () => await this.resetFilters());
+ }
+
+ this.debugLog('필터 이벤트 연결 완료');
+ }
+
+ // 필터 초기화
+ async resetFilters() {
+ this.debugLog('필터 초기화 시작');
+
+ // 모든 필터 초기화
+ const categoryFilter = document.getElementById('category-filter');
+ const targetFilter = document.getElementById('target-filter');
+ const dateFilter = document.getElementById('date-filter');
+ const searchInput = document.getElementById('search-input');
+
+ if (categoryFilter) categoryFilter.value = 'all';
+ if (targetFilter) targetFilter.value = 'all';
+ if (dateFilter) dateFilter.value = 'all';
+ if (searchInput) searchInput.value = '';
+
+ // 필터 적용
+ await this.applyFilters();
+
+ this.debugLog('필터 초기화 완료');
+ }
+
+ // 미리보기 탭 초기화
+ resetPreviewTabs() {
+ const previewTabs = document.querySelectorAll('.preview-tab');
+ const contentTextarea = document.getElementById('saying-content');
+ const previewDiv = document.getElementById('markdown-preview');
+
+ // 모든 탭에서 active 클래스 제거
+ previewTabs.forEach(tab => tab.classList.remove('active'));
+
+ // 편집 탭을 활성화
+ const editTab = document.querySelector('.preview-tab[data-tab="edit"]');
+ if (editTab) {
+ editTab.classList.add('active');
+ }
+
+ // 편집 모드로 전환
+ if (contentTextarea) {
+ contentTextarea.style.display = 'block';
+ }
+ if (previewDiv) {
+ previewDiv.style.display = 'none';
+ previewDiv.innerHTML = '';
+ }
+
+ this.debugLog('미리보기 탭 초기화 완료');
+ }
+
+ // 새 타냐대장경 감지 시작 (기존 코드 제거하고 백그라운드 연동 방식으로 교체)
+ startNewSayingsMonitoring() {
+ this.debugLog('새 타냐대장경 감지 시작');
+
+ // 기존 인터벌이 있으면 정리
+ if (this.newSayingsCheckInterval) {
+ clearInterval(this.newSayingsCheckInterval);
+ }
+
+ // 새 타냐대장경 감지 시작 (백그라운드 연동)
+ this.startNewSayingsDetection();
+ }
+
+ // 새 타냐대장경 감지 체크 (제거됨 - 백그라운드에서 처리)
+ // async checkForNewSayings() { ... } - 이 함수는 제거됨
+
+ // 새 타냐대장경 모달 표시 (카운트다운 포함)
+ showNewSayingsModal(newSayings) {
+ console.log(`[SayingsManager] 새 타냐대장경 모달 표시: ${newSayings.length}개`);
+
+ // 기존 모달이 있으면 제거
+ const existingModal = document.getElementById('newSayingsModal');
+ if (existingModal) {
+ existingModal.remove();
+ }
+
+ // 모달 HTML 생성
+ const modalHtml = `
+
+
+
+
🎉 새 타냐대장경 알림
+
10초 후 자동 닫힘
+
+
+
+ ${newSayings.length}개의 새로운 타냐대장경이 등록되었습니다!
+
+
+
+ ${newSayings.map(saying => `
+
+
+ "${saying.title || saying.saying_title}"
+
+
+ 👤 ${saying.author || saying.register || '알 수 없음'} | 📂 ${saying.sayings_cat?.name || saying.cat || '미분류'} | 🎯 ${saying.sayings_target?.name || saying.target || '전체'}
+
+
+ 📅 ${new Date(saying.created_at).toLocaleString('ko-KR')}
+
+
+ `).join('')}
+
+
+
+
+
+
+
+
+
${authorName.charAt(0).toUpperCase()}
+
+
${this.escapeHtml(authorName)}
+
${createdAt}
+
+
+ ❌ 초기화 실패
+ ${error.message}
+ 로그인 후 다시 시도해주세요.
+
+ `;
+ }
+
+ const container = document.getElementById("sayings-container");
+ if (container) {
+ container.innerHTML = `
+
+
❌
+
초기화 실패
+
${error.message}
+
`;
+ debugElement.style.display = "block";
+
+ // 버튼 이벤트 다시 등록
+ const newBtn = document.getElementById('log-check-btn');
+ if (newBtn) {
+ newBtn.addEventListener('click', async (e) => {
+ e.preventDefault();
+
+ // 간단한 로그 정보 표시
+ const logInfo = `❌ 초기화 실패 상태\n\n오류: ${error.message}\n\n시간: ${new Date().toLocaleString()}`;
+ alert(logInfo);
+ });
+ }
+ }
+ }
+ }
+
+ console.log('=== DOMContentLoaded 이벤트 처리 완료 ===');
+
+ // 블록 에디터 초기화
+ initializeBlockEditor();
+});
+
+// 페이지 언로드 시 정리
+window.addEventListener('beforeunload', () => {
+ console.log('페이지 언로드 - 새 타냐대장경 감지 기능 정리');
+ if (window.sayingsManager) {
+ window.sayingsManager.cleanup();
+ }
+});
+
+// 전역 함수로 등록
+window.sayingsManager = null;
+
+// 블록 에디터 클래스
+class BlockEditor {
+ constructor() {
+ this.blocks = [];
+ this.draggedBlock = null;
+ this.init();
+ }
+
+ init() {
+ this.bindEvents();
+ this.addInitialTextBlock();
+ }
+
+ bindEvents() {
+ // 툴바 버튼 이벤트
+ document.getElementById('add-text-block')?.addEventListener('click', () => {
+ this.addTextBlock();
+ });
+
+ document.getElementById('add-image-block')?.addEventListener('click', () => {
+ this.addImageBlock();
+ });
+ }
+
+ addInitialTextBlock() {
+ this.addTextBlock('');
+ }
+
+ addTextBlock(content = '') {
+ const blockId = 'block_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
+ const block = {
+ id: blockId,
+ type: 'text',
+ content: content
+ };
+
+ this.blocks.push(block);
+ this.renderBlock(block);
+ this.updateContentBlocksData();
+ }
+
+ addImageBlock() {
+ const blockId = 'block_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
+ const block = {
+ id: blockId,
+ type: 'image',
+ content: null,
+ alt: '',
+ thumbnail: null
+ };
+
+ this.blocks.push(block);
+ this.renderBlock(block);
+ this.updateContentBlocksData();
+ }
+
+ renderBlock(block) {
+ const container = document.getElementById('content-blocks');
+ if (!container) return;
+
+ const blockElement = document.createElement('div');
+ blockElement.className = 'content-block';
+ blockElement.setAttribute('data-block-id', block.id);
+ blockElement.draggable = true;
+
+ if (block.type === 'text') {
+ blockElement.innerHTML = this.getTextBlockHTML(block);
+ this.bindTextBlockEvents(blockElement, block);
+ } else if (block.type === 'image') {
+ blockElement.innerHTML = this.getImageBlockHTML(block);
+ this.bindImageBlockEvents(blockElement, block);
+ }
+
+ container.appendChild(blockElement);
+ }
+
+ getTextBlockHTML(block) {
+ return `
+
+
+
+
+
+
+
+ `;
+ }
+
+ getImageBlockHTML(block) {
+ if (block.content) {
+ return `
+
+
+
+
+
+
+
+ 크기: ${this.getImageSize(block.content)}
+
+
+
+
+
+
+
+
+
+
📷
+
이미지를 드래그하거나 클릭하여 업로드
+
지원 형식: JPG, PNG, GIF (최대 2MB)
+
+
+
![전체 화면 이미지]()
+ `;
+ document.body.appendChild(modal);
+
+ modal.querySelector('.image-modal-close').addEventListener('click', () => {
+ modal.classList.remove('active');
+ });
+
+ modal.addEventListener('click', (e) => {
+ if (e.target === modal) {
+ modal.classList.remove('active');
+ }
+ });
+ }
+
+ modal.querySelector('img').src = imageSrc;
+ modal.classList.add('active');
+ }
+
+ deleteBlock(blockId) {
+ this.blocks = this.blocks.filter(block => block.id !== blockId);
+ const blockElement = document.querySelector(`[data-block-id="${blockId}"]`);
+ if (blockElement) {
+ blockElement.remove();
+ }
+ this.updateContentBlocksData();
+ }
+
+ updateContentBlocksData() {
+ // 전역 변수에 저장
+ window.currentContentBlocks = this.blocks;
+ }
+
+ getContentForSave() {
+ return {
+ blocks: this.blocks,
+ legacy_text: this.blocks
+ .filter(block => block.type === 'text')
+ .map(block => block.content)
+ .join('\n\n')
+ };
+ }
+
+ loadFromData(contentBlocks) {
+ this.blocks = contentBlocks || [];
+ const container = document.getElementById('content-blocks');
+ if (container) {
+ container.innerHTML = '';
+ }
+
+ if (this.blocks.length === 0) {
+ this.addInitialTextBlock();
+ } else {
+ this.blocks.forEach(block => this.renderBlock(block));
+ }
+ }
+}
+
+// 블록 에디터 초기화 함수
+function initializeBlockEditor() {
+ if (document.getElementById('content-blocks-editor')) {
+ window.blockEditor = new BlockEditor();
+ }
+}
\ No newline at end of file
diff --git a/wrmc_ext/settings.html b/wrmc_ext/settings.html
new file mode 100644
index 0000000..f801582
--- /dev/null
+++ b/wrmc_ext/settings.html
@@ -0,0 +1,582 @@
+
+
+
+
+
+ 설정 - 내차는언제타냐 통합확장기
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
현재 회원등급: 로딩 중...
+
회원 정보를 불러오는 중입니다...
+
+
+
+
+
+ 📋
+ 노출할 번역 엔진 선택
+
+
+ 체크된 엔진만 멀티번역 결과에 표시됩니다. 회원등급에 따라 일부 엔진은 사용할 수 없습니다.
+
+
+
+
+
+
+ 🌐
+ Google 번역
+ 무료
+
+
+ 빠른 속도와 다양한 언어 지원을 제공하는 구글의 무료 번역 서비스
+
+
+ ✓ 100개 이상 언어 지원 ✓ 실시간 번역 ✓ 무료 사용
+
+
+
+
+
+
+
+
+ 💾
+ MyMemory 번역
+ 무료
+
+
+ 번역 메모리 기반으로 높은 품질의 번역을 제공하는 무료 서비스
+
+
+ ✓ 번역 메모리 활용 ✓ 높은 번역 품질 ✓ 무료 사용
+
+
+
+
+
+
+
+
+ 🎯
+ DeepL 번역
+ 프리미엄
+
+
+ 높은 번역 품질로 유명한 AI 번역 서비스
+
+
+ ✓ 최고 품질 번역 ✓ 문맥 이해 ✓ 프리미엄 이상 사용 가능
+
+
+
+
+
+
+
+
+ 🤖
+ OpenAI ChatGPT
+ VIP
+
+
+ 문맥을 이해하는 고품질 AI 번역, 의역 및 설명 포함
+
+
+ ✓ AI 기반 번역 ✓ 문맥 이해 ✓ 의역 제공 ✓ VIP 전용
+
+
+
+
+
+
+
+
+ 💎
+ Google Gemini
+ 비활성화
+
+
+ 현재 사용할 수 없습니다 (서비스 점검 중)
+
+
+ ✗ 현재 사용 불가 ✗ 서비스 점검 중
+
+
+
+
+
+
+
+
+
+
+
+
+ ⏰
+ 시간 알람 설정
+
+
+ 작업 시간과 휴식 시간을 설정하여 건강한 작업 패턴을 유지하세요.
+
+
+
+
+
+
+
+
⏳ 설정을 저장하는 중...
+
+
+
+
+
+
+
+
+
+ ${engineNames.join(', ')}
+ 등급별 혜택:
+ • 기본: Google, MyMemory (무료 엔진)
+ • 프리미엄: + DeepL (고품질 엔진)
+ • VIP: + ChatGPT
+ `;
+
+ console.log('회원등급 UI 업데이트 완료:', level);
+ } else {
+ console.error('회원등급 표시 요소를 찾을 수 없습니다.');
+ }
+ }
+
+ // 시간 알람 UI 초기화
+ initializeTimeAlarmUI() {
+ this.updateTimeAlarmUI();
+ }
+
+ setupEventListeners() {
+ // 토글 스위치 이벤트
+ const toggleSwitches = document.querySelectorAll('.toggle-switch');
+ toggleSwitches.forEach(toggle => {
+ toggle.addEventListener('click', (e) => {
+ const engine = e.target.dataset.engine;
+ if (engine && !e.target.classList.contains('disabled')) {
+ this.toggleEngine(engine);
+ } else if (e.target.id === 'timeAlarmToggle') {
+ // 시간 알람 토글
+ this.timeAlarmSettings.enabled = !this.timeAlarmSettings.enabled;
+ this.updateTimeAlarmUI();
+ console.log('시간 알람 토글:', this.timeAlarmSettings.enabled);
+ }
+ });
+ });
+
+ // 저장 버튼
+ const saveButton = document.getElementById('save-settings');
+ if (saveButton) {
+ saveButton.addEventListener('click', () => this.saveSettings());
+ }
+
+ // 기본값 복원 버튼
+ const resetButton = document.getElementById('reset-settings');
+ if (resetButton) {
+ resetButton.addEventListener('click', () => this.resetToDefaults());
+ }
+
+ // 시간 입력 필드 이벤트
+ const workTimeInput = document.getElementById('workTimeInput');
+ const restTimeInput = document.getElementById('restTimeInput');
+ const autoZzimCheckbox = document.getElementById('autoZzimCheckbox');
+
+ if (workTimeInput) {
+ workTimeInput.addEventListener('change', (e) => {
+ this.timeAlarmSettings.workTime = parseInt(e.target.value) || 60;
+ });
+ }
+
+ if (restTimeInput) {
+ restTimeInput.addEventListener('change', (e) => {
+ this.timeAlarmSettings.restTime = parseInt(e.target.value) || 5;
+ });
+ }
+
+ if (autoZzimCheckbox) {
+ autoZzimCheckbox.addEventListener('change', (e) => {
+ this.timeAlarmSettings.autoZzim = e.target.checked;
+ });
+ }
+ }
+
+ updateUI() {
+ const userLevel = (this.userInfo?.membership_level || 'basic').toLowerCase();
+ const availableEngines = this.availableEngines[userLevel] || this.availableEngines.basic;
+
+ // 각 엔진 아이템 업데이트
+ const engineItems = document.querySelectorAll('.engine-item');
+ engineItems.forEach(item => {
+ const engine = item.dataset.engine;
+ const toggle = item.querySelector('.toggle-switch');
+
+ if (availableEngines.includes(engine)) {
+ // 사용 가능한 엔진
+ item.classList.remove('disabled');
+ toggle.classList.remove('disabled');
+
+ // 현재 설정에 따라 토글 상태 설정
+ if (this.currentSettings[engine]) {
+ toggle.classList.add('active');
+ } else {
+ toggle.classList.remove('active');
+ }
+ } else {
+ // 사용 불가능한 엔진
+ item.classList.add('disabled');
+ toggle.classList.add('disabled');
+ toggle.classList.remove('active');
+ }
+ });
+
+ // 시간 알람 UI 업데이트
+ this.updateTimeAlarmUI();
+ }
+
+ updateTimeAlarmUI() {
+ const timeAlarmToggle = document.getElementById('timeAlarmToggle');
+ const workTimeInput = document.getElementById('workTimeInput');
+ const restTimeInput = document.getElementById('restTimeInput');
+ const autoZzimCheckbox = document.getElementById('autoZzimCheckbox');
+
+ if (timeAlarmToggle) {
+ if (this.timeAlarmSettings.enabled) {
+ timeAlarmToggle.classList.add('active');
+ } else {
+ timeAlarmToggle.classList.remove('active');
+ }
+ }
+
+ if (workTimeInput) {
+ workTimeInput.value = this.timeAlarmSettings.workTime;
+ }
+
+ if (restTimeInput) {
+ restTimeInput.value = this.timeAlarmSettings.restTime;
+ }
+
+ if (autoZzimCheckbox) {
+ autoZzimCheckbox.checked = this.timeAlarmSettings.autoZzim;
+ }
+ }
+
+ toggleEngine(engine) {
+ this.currentSettings[engine] = !this.currentSettings[engine];
+ this.updateUI();
+ console.log(`${engine} 엔진 토글:`, this.currentSettings[engine]);
+ }
+
+ async saveSettings() {
+ try {
+ this.showLoading(true);
+
+ // 시간 알람 설정 업데이트
+ const workTimeInput = document.getElementById('workTimeInput');
+ const restTimeInput = document.getElementById('restTimeInput');
+ const autoZzimCheckbox = document.getElementById('autoZzimCheckbox');
+
+ if (workTimeInput) {
+ this.timeAlarmSettings.workTime = parseInt(workTimeInput.value) || 60;
+ }
+ if (restTimeInput) {
+ this.timeAlarmSettings.restTime = parseInt(restTimeInput.value) || 5;
+ }
+ if (autoZzimCheckbox) {
+ this.timeAlarmSettings.autoZzim = autoZzimCheckbox.checked;
+ }
+
+ // 번역 엔진 설정 저장
+ await chrome.storage.local.set({
+ 'translation_engine_settings': this.currentSettings
+ });
+
+ // 시간 알람 설정 저장
+ await chrome.storage.local.set({
+ 'time_alarm_settings': this.timeAlarmSettings
+ });
+
+ // Background script에 시간 알람 설정 변경 알림
+ chrome.runtime.sendMessage({
+ action: 'updateTimeAlarmSettings',
+ settings: this.timeAlarmSettings
+ });
+
+ console.log('설정 저장 완료:', {
+ translation: this.currentSettings,
+ timeAlarm: this.timeAlarmSettings
+ });
+
+ this.showMessage('설정이 성공적으로 저장되었습니다.', 'success');
+
+ } catch (error) {
+ console.error('설정 저장 실패:', error);
+ this.showMessage('설정 저장 중 오류가 발생했습니다.', 'error');
+ } finally {
+ this.showLoading(false);
+ }
+ }
+
+ async resetToDefaults() {
+ if (!confirm('모든 설정을 기본값으로 복원하시겠습니까?')) {
+ return;
+ }
+
+ try {
+ this.showLoading(true);
+
+ // 기본값으로 재설정 (구글만 활성화)
+ this.currentSettings = {
+ google: true,
+ mymemory: false,
+ deepl: false,
+ openai: false,
+ gemini: false
+ };
+
+ // 저장
+ await chrome.storage.local.set({
+ 'translation_engine_settings': this.currentSettings
+ });
+
+ // UI 업데이트
+ this.updateUI();
+
+ // 시간 알람 설정 초기화
+ this.timeAlarmSettings = {
+ enabled: false,
+ workTime: 60,
+ restTime: 5,
+ autoZzim: false
+ };
+
+ // 저장소에서 시간 알람 설정 제거
+ await chrome.storage.local.remove('time_alarm_settings');
+
+ // Background script에 알림
+ chrome.runtime.sendMessage({
+ action: 'updateTimeAlarmSettings',
+ settings: this.timeAlarmSettings
+ });
+
+ console.log('기본값 복원 완료');
+ this.showMessage('설정이 기본값으로 복원되었습니다.', 'success');
+
+ } catch (error) {
+ console.error('기본값 복원 실패:', error);
+ this.showMessage('기본값 복원 중 오류가 발생했습니다.', 'error');
+ } finally {
+ this.showLoading(false);
+ }
+ }
+
+ showMessage(text, type = 'info') {
+ const messageElement = document.getElementById('message');
+ if (messageElement) {
+ messageElement.textContent = text;
+ messageElement.className = `message ${type}`;
+ messageElement.style.display = 'block';
+
+ // 3초 후 자동 숨김
+ setTimeout(() => {
+ messageElement.style.display = 'none';
+ }, 3000);
+ }
+ }
+
+ showLoading(show) {
+ const loadingElement = document.getElementById('loading');
+ if (loadingElement) {
+ loadingElement.style.display = show ? 'block' : 'none';
+ }
+ }
+}
+
+// 페이지 로드 시 초기화
+document.addEventListener('DOMContentLoaded', () => {
+ console.log('설정 페이지 DOM 로드 완료');
+ new SettingsManager();
+});
+
+// 창 닫기 전 확인
+window.addEventListener('beforeunload', (e) => {
+ // 설정이 변경되었는지 확인하는 로직을 추가할 수 있음
+ // 현재는 단순히 로그만 출력
+ console.log('설정 페이지 종료');
+});
\ No newline at end of file
diff --git a/wrmc_ext/zzim.html b/wrmc_ext/zzim.html
new file mode 100644
index 0000000..e9d39ae
--- /dev/null
+++ b/wrmc_ext/zzim.html
@@ -0,0 +1,288 @@
+
+
+
+
+
+ 찜관리
+
+
+
+
+
+
+
+ 🏪 내 마켓 등록
+
+
+ https://smartstore.naver.com/
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 🎯 찜하기 작업
+
+
+
+
+
+
+
+
+
등록된 마켓이 없습니다.
';
+ return;
+ }
+
+ marketsList.innerHTML = markets.map(market => `
+
+
+
+ `).join('');
+ }
+
+ async addMarket() {
+ const marketUrl = document.getElementById('market-url').value.trim();
+ const marketName = document.getElementById('market-name').value.trim();
+ const marketNickname = document.getElementById('market-nickname').value.trim();
+
+ if (!marketUrl || !marketName || !marketNickname) {
+ this.showError('모든 필드를 입력해주세요.');
+ return;
+ }
+
+ if (!marketUrl.startsWith('https://smartstore.naver.com/')) {
+ this.showError('올바른 네이버 스마트스토어 URL을 입력해주세요.');
+ return;
+ }
+
+ try {
+ const response = await fetch(`${this.SUPABASE_URL}/rest/v1/my_markets`, {
+ method: 'POST',
+ headers: {
+ 'Authorization': `Bearer ${this.access_token}`,
+ 'apikey': this.SUPABASE_ANON_KEY,
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ user_id: this.user_id,
+ market_url: marketUrl,
+ market_name: marketName,
+ market_nickname: marketNickname
+ })
+ });
+
+ if (!response.ok) {
+ const error = await response.json();
+ throw new Error(error.message || '마켓 추가 실패');
+ }
+
+ // 입력 필드 초기화
+ document.getElementById('market-url').value = '';
+ document.getElementById('market-name').value = '';
+ document.getElementById('market-nickname').value = '';
+
+ // 마켓 목록 다시 로드
+ await this.loadMyMarkets();
+ this.showSuccess('마켓이 추가되었습니다.');
+
+ } catch (error) {
+ console.error('마켓 추가 오류:', error);
+ this.showError('마켓 추가 중 오류가 발생했습니다: ' + error.message);
+ }
+ }
+
+ async editMarket(marketId) {
+ // 편집 모달을 표시하거나 인라인 편집 구현
+ const newName = prompt('새로운 마켓 이름을 입력하세요:');
+ if (!newName) return;
+
+ const newNickname = prompt('새로운 마켓 별명을 입력하세요:');
+ if (!newNickname) return;
+
+ try {
+ const response = await fetch(`${this.SUPABASE_URL}/rest/v1/my_markets?id=eq.${marketId}`, {
+ method: 'PATCH',
+ headers: {
+ 'Authorization': `Bearer ${this.access_token}`,
+ 'apikey': this.SUPABASE_ANON_KEY,
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ market_name: newName,
+ market_nickname: newNickname
+ })
+ });
+
+ if (!response.ok) {
+ throw new Error('마켓 수정 실패');
+ }
+
+ await this.loadMyMarkets();
+ this.showSuccess('마켓이 수정되었습니다.');
+
+ } catch (error) {
+ console.error('마켓 수정 오류:', error);
+ this.showError('마켓 수정 중 오류가 발생했습니다.');
+ }
+ }
+
+ async deleteMarket(marketId) {
+ if (!confirm('정말로 이 마켓을 삭제하시겠습니까?')) {
+ return;
+ }
+
+ try {
+ const response = await fetch(`${this.SUPABASE_URL}/rest/v1/my_markets?id=eq.${marketId}`, {
+ method: 'PATCH',
+ headers: {
+ 'Authorization': `Bearer ${this.access_token}`,
+ 'apikey': this.SUPABASE_ANON_KEY,
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ is_active: false
+ })
+ });
+
+ if (!response.ok) {
+ throw new Error('마켓 삭제 실패');
+ }
+
+ await this.loadMyMarkets();
+ this.showSuccess('마켓이 삭제되었습니다.');
+
+ } catch (error) {
+ console.error('마켓 삭제 오류:', error);
+ this.showError('마켓 삭제 중 오류가 발생했습니다.');
+ }
+ }
+
+ async startMyMarketZzim() {
+ if (this.zzimInProgress) {
+ this.showError('찜하기가 이미 진행 중입니다.');
+ return;
+ }
+
+ try {
+ // 내 마켓 목록 가져오기
+ const response = await fetch(`${this.SUPABASE_URL}/rest/v1/my_markets?user_id=eq.${this.user_id}&is_active=eq.true`, {
+ headers: {
+ 'Authorization': `Bearer ${this.access_token}`,
+ 'apikey': this.SUPABASE_ANON_KEY,
+ 'Content-Type': 'application/json'
+ }
+ });
+
+ if (!response.ok) {
+ throw new Error('마켓 목록을 가져올 수 없습니다.');
+ }
+
+ const markets = await response.json();
+ if (markets.length === 0) {
+ this.showError('등록된 마켓이 없습니다.');
+ return;
+ }
+
+ // 랜덤 마켓 선택
+ const randomMarket = markets[Math.floor(Math.random() * markets.length)];
+ this.showStatus(`"${randomMarket.market_nickname}" 마켓에서 찜하기를 시작합니다...`);
+
+ await this.executeZzim(randomMarket, 'my_market', false); // 포그라운드에서 실행
+
+ } catch (error) {
+ console.error('내 마켓 찜하기 오류:', error);
+ this.showError('내 마켓 찜하기 중 오류가 발생했습니다.');
+ }
+ }
+
+ async startMutualZzim() {
+ if (this.zzimInProgress) {
+ this.showError('찜하기가 이미 진행 중입니다.');
+ return;
+ }
+
+ try {
+ // 다른 사용자의 마켓 목록 가져오기 (품앗이용)
+ const response = await fetch(`${this.SUPABASE_URL}/rest/v1/my_markets?user_id=neq.${this.user_id}&is_active=eq.true`, {
+ headers: {
+ 'Authorization': `Bearer ${this.access_token}`,
+ 'apikey': this.SUPABASE_ANON_KEY,
+ 'Content-Type': 'application/json'
+ }
+ });
+
+ if (!response.ok) {
+ throw new Error('품앗이 마켓 목록을 가져올 수 없습니다.');
+ }
+
+ const markets = await response.json();
+ if (markets.length === 0) {
+ this.showError('품앗이할 마켓이 없습니다.');
+ return;
+ }
+
+ // 랜덤 마켓 선택
+ const randomMarket = markets[Math.floor(Math.random() * markets.length)];
+ this.showStatus(`품앗이 마켓 "${randomMarket.market_nickname}"에서 찜하기를 시작합니다...`);
+
+ await this.executeZzim(randomMarket, 'mutual', true); // 백그라운드에서 실행
+
+ } catch (error) {
+ console.error('품앗이 찜하기 오류:', error);
+ this.showError('품앗이 찜하기 중 오류가 발생했습니다.');
+ }
+ }
+
+ async executeZzim(market, zzimType, inBackground = false) {
+ this.zzimInProgress = true;
+
+ try {
+ // 찜하기 스크립트
+ const zzimScript = `
+ (function() {
+ let zzimCount = 0;
+ const maxZzim = 50; // 최대 찜할 개수
+
+ function clickZzimButtons() {
+ const zzimButtons = document.querySelectorAll('.zzim_button:not(.active)');
+ console.log('찾은 찜 버튼 개수:', zzimButtons.length);
+
+ if (zzimButtons.length === 0) {
+ console.log('더 이상 찜할 상품이 없습니다.');
+ return false;
+ }
+
+ // 최대 10개씩 찜하기
+ const buttonsToClick = Array.from(zzimButtons).slice(0, Math.min(10, maxZzim - zzimCount));
+
+ buttonsToClick.forEach((btn, index) => {
+ setTimeout(() => {
+ try {
+ btn.click();
+ zzimCount++;
+ console.log(\`찜 버튼 클릭: \${zzimCount}개\`);
+ } catch (e) {
+ console.error('찜 버튼 클릭 오류:', e);
+ }
+ }, index * 500); // 0.5초 간격
+ });
+
+ return buttonsToClick.length > 0 && zzimCount < maxZzim;
+ }
+
+ // 페이지 스크롤 및 찜하기 반복
+ function scrollAndZzim() {
+ if (zzimCount >= maxZzim) {
+ console.log('최대 찜하기 완료:', zzimCount);
+ return;
+ }
+
+ // 페이지 하단으로 스크롤
+ window.scrollTo(0, document.body.scrollHeight);
+
+ setTimeout(() => {
+ if (clickZzimButtons()) {
+ setTimeout(scrollAndZzim, 3000); // 3초 후 다시 시도
+ }
+ }, 1000);
+ }
+
+ // 시작
+ scrollAndZzim();
+
+ return zzimCount;
+ })();
+ `;
+
+ if (inBackground) {
+ // 백그라운드에서 실행 (새 탭에서 백그라운드로)
+ const tab = await chrome.tabs.create({
+ url: market.market_url,
+ active: false
+ });
+
+ // 페이지 로드 완료 후 스크립트 실행
+ chrome.tabs.onUpdated.addListener(function listener(tabId, info) {
+ if (tabId === tab.id && info.status === 'complete') {
+ chrome.tabs.onUpdated.removeListener(listener);
+
+ chrome.scripting.executeScript({
+ target: { tabId: tab.id },
+ func: eval(`(${zzimScript})`)
+ }).then(() => {
+ // 일정 시간 후 탭 닫기
+ setTimeout(() => {
+ chrome.tabs.remove(tab.id);
+ }, 30000); // 30초 후
+ });
+ }
+ });
+ } else {
+ // 포그라운드에서 실행 (현재 창에서)
+ window.open(market.market_url, '_blank');
+ }
+
+ // 찜 기록 저장
+ await this.recordZzim(market, zzimType);
+
+ this.showSuccess(`찜하기가 시작되었습니다. (${market.market_nickname})`);
+
+ } catch (error) {
+ console.error('찜하기 실행 오류:', error);
+ this.showError('찜하기 실행 중 오류가 발생했습니다.');
+ } finally {
+ this.zzimInProgress = false;
+ }
+ }
+
+ async recordZzim(market, zzimType) {
+ try {
+ // 찜 기록 저장
+ await fetch(`${this.SUPABASE_URL}/rest/v1/jjim`, {
+ method: 'POST',
+ headers: {
+ 'Authorization': `Bearer ${this.access_token}`,
+ 'apikey': this.SUPABASE_ANON_KEY,
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ user_id: this.user_id,
+ market_url: market.market_url,
+ market_name: market.market_name,
+ market_nickname: market.market_nickname,
+ zzim_type: zzimType,
+ product_count: 50 // 예상 찜 개수 (실제로는 스크립트 결과를 받아야 함)
+ })
+ });
+
+ // 통계 업데이트
+ await this.updateZzimStats(50, zzimType);
+
+ // UI 새로고침
+ await this.loadZzimStats();
+
+ } catch (error) {
+ console.error('찜 기록 저장 오류:', error);
+ }
+ }
+
+ async updateZzimStats(count, zzimType) {
+ try {
+ const mileageIncrease = zzimType === 'mutual' ? count * 2 : count; // 품앗이는 마일리지 2배
+
+ await fetch(`${this.SUPABASE_URL}/rest/v1/zzim_settings?user_id=eq.${this.user_id}`, {
+ method: 'PATCH',
+ headers: {
+ 'Authorization': `Bearer ${this.access_token}`,
+ 'apikey': this.SUPABASE_ANON_KEY,
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ current_daily_count: `current_daily_count + ${count}`,
+ current_mileage: `current_mileage + ${mileageIncrease}`
+ })
+ });
+ } catch (error) {
+ console.error('찜 통계 업데이트 오류:', error);
+ }
+ }
+
+ showStatus(message) {
+ const statusEl = document.getElementById('zzim-status');
+ const errorEl = document.getElementById('zzim-error');
+ const successEl = document.getElementById('zzim-success');
+
+ // 모든 상태 메시지 숨기기
+ if (statusEl) statusEl.style.display = 'none';
+ if (errorEl) errorEl.style.display = 'none';
+ if (successEl) successEl.style.display = 'none';
+
+ // 상태 메시지 표시
+ if (statusEl) {
+ statusEl.textContent = message;
+ statusEl.style.display = 'block';
+ }
+ }
+
+ showError(message) {
+ const statusEl = document.getElementById('zzim-status');
+ const errorEl = document.getElementById('zzim-error');
+ const successEl = document.getElementById('zzim-success');
+
+ // 모든 상태 메시지 숨기기
+ if (statusEl) statusEl.style.display = 'none';
+ if (errorEl) errorEl.style.display = 'none';
+ if (successEl) successEl.style.display = 'none';
+
+ // 오류 메시지 표시
+ if (errorEl) {
+ errorEl.textContent = message;
+ errorEl.style.display = 'block';
+ }
+ }
+
+ showSuccess(message) {
+ const statusEl = document.getElementById('zzim-status');
+ const errorEl = document.getElementById('zzim-error');
+ const successEl = document.getElementById('zzim-success');
+
+ // 모든 상태 메시지 숨기기
+ if (statusEl) statusEl.style.display = 'none';
+ if (errorEl) errorEl.style.display = 'none';
+ if (successEl) successEl.style.display = 'none';
+
+ // 성공 메시지 표시
+ if (successEl) {
+ successEl.textContent = message;
+ successEl.style.display = 'block';
+ }
+ }
+}
+
+// 전역 인스턴스 생성
+let zzimManager;
+
+// DOM 로드 완료 후 초기화
+document.addEventListener('DOMContentLoaded', async () => {
+ zzimManager = new ZzimManager();
+ await zzimManager.init();
+});
\ No newline at end of file
diff --git a/확장프로그램설치도구.spec b/확장프로그램설치도구.spec
new file mode 100644
index 0000000..b2e96c9
--- /dev/null
+++ b/확장프로그램설치도구.spec
@@ -0,0 +1,38 @@
+# -*- mode: python ; coding: utf-8 -*-
+
+
+a = Analysis(
+ ['main.py'],
+ pathex=[],
+ binaries=[],
+ datas=[('wrmc_ext', 'wrmc_ext')],
+ hiddenimports=[],
+ hookspath=[],
+ hooksconfig={},
+ runtime_hooks=[],
+ excludes=[],
+ noarchive=False,
+ optimize=0,
+)
+pyz = PYZ(a.pure)
+
+exe = EXE(
+ pyz,
+ a.scripts,
+ a.binaries,
+ a.datas,
+ [],
+ name='확장프로그램설치도구',
+ debug=False,
+ bootloader_ignore_signals=False,
+ strip=False,
+ upx=True,
+ upx_exclude=[],
+ runtime_tmpdir=None,
+ console=False,
+ disable_windowed_traceback=False,
+ argv_emulation=False,
+ target_arch=None,
+ codesign_identity=None,
+ entitlements_file=None,
+)