Implement error handling and loading states for Appwrite integration

src/main.tsx

@@ -1,9 +1,10 @@
-
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import App from './App.tsx';
 import './index.css';
 
+console.log('main.tsx loaded');
+
 // iOS 안전 영역 메타 태그 추가
 const setViewportMetaTag = () => {
   // 기존 viewport 메타 태그 찾기
@@ -23,9 +24,108 @@ const setViewportMetaTag = () => {
 // 메타 태그 설정 적용
 setViewportMetaTag();
 
-// 앱 렌더링 - BrowserRouter로 감싸기
-createRoot(document.getElementById("root")!).render(
-  <BrowserRouter>
-    <App />
-  </BrowserRouter>
-);
+// 전역 오류 핸들러 추가
+window.onerror = function(message, source, lineno, colno, error) {
+  console.error('전역 오류 발생:', { message, source, lineno, colno, error });
+  
+  // 오류 발생 시 기본 오류 화면 표시
+  const rootElement = document.getElementById('root');
+  if (rootElement) {
+    rootElement.innerHTML = `
+      <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; font-family: Arial, sans-serif;">
+        <div style="color: red; font-size: 48px; margin-bottom: 20px;">⚠️</div>
+        <h1 style="margin-bottom: 20px;">Zellyy Finance 오류</h1>
+        <p style="margin-bottom: 20px; text-align: center;">애플리케이션 로딩 중 오류가 발생했습니다.</p>
+        <pre style="max-width: 80%; overflow: auto; background: #f5f5f5; padding: 10px; border-radius: 4px; margin-bottom: 20px;">${message}</pre>
+        <button 
+          onclick="window.location.reload()" 
+          style="padding: 10px 20px; background-color: #3b82f6; color: white; border: none; border-radius: 4px; cursor: pointer;"
+        >
+          새로고침
+        </button>
+      </div>
+    `;
+  }
+  
+  return false;
+};
+
+// 처리되지 않은 Promise 오류 핸들러 추가
+window.addEventListener('unhandledrejection', function(event) {
+  console.error('처리되지 않은 Promise 오류:', event.reason);
+  
+  // 오류 발생 시 기본 오류 화면 표시
+  const rootElement = document.getElementById('root');
+  if (rootElement) {
+    rootElement.innerHTML = `
+      <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; font-family: Arial, sans-serif;">
+        <div style="color: red; font-size: 48px; margin-bottom: 20px;">⚠️</div>
+        <h1 style="margin-bottom: 20px;">Zellyy Finance 오류</h1>
+        <p style="margin-bottom: 20px; text-align: center;">비동기 작업 중 오류가 발생했습니다.</p>
+        <pre style="max-width: 80%; overflow: auto; background: #f5f5f5; padding: 10px; border-radius: 4px; margin-bottom: 20px;">${event.reason}</pre>
+        <button 
+          onclick="window.location.reload()" 
+          style="padding: 10px 20px; background-color: #3b82f6; color: white; border: none; border-radius: 4px; cursor: pointer;"
+        >
+          새로고침
+        </button>
+      </div>
+    `;
+  }
+});
+
+// 디버깅 정보 출력
+console.log('환경 변수:', {
+  NODE_ENV: import.meta.env.MODE,
+  BASE_URL: import.meta.env.BASE_URL,
+  APPWRITE_ENDPOINT: import.meta.env.VITE_APPWRITE_ENDPOINT,
+  APPWRITE_PROJECT_ID: import.meta.env.VITE_APPWRITE_PROJECT_ID,
+});
+
+// 상태 확인
+// TypeScript에서 window 객체에 사용자 정의 속성 추가
+declare global {
+  interface Window {
+    appwriteEnabled: boolean;
+  }
+}
+
+// 기본적으로 Appwrite 비활성화
+window.appwriteEnabled = false;
+
+try {
+  const rootElement = document.getElementById('root');
+  if (!rootElement) {
+    throw new Error('Root element not found');
+  }
+  
+  const root = createRoot(rootElement);
+  
+  root.render(
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  );
+  
+  console.log('애플리케이션 렌더링 성공');
+} catch (error) {
+  console.error('애플리케이션 렌더링 오류:', error);
+  
+  // 오류 발생 시 기본 오류 화면 표시
+  const rootElement = document.getElementById('root');
+  if (rootElement) {
+    rootElement.innerHTML = `
+      <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; font-family: Arial, sans-serif;">
+        <div style="color: red; font-size: 48px; margin-bottom: 20px;">⚠️</div>
+        <h1 style="margin-bottom: 20px;">Zellyy Finance 오류</h1>
+        <p style="margin-bottom: 20px; text-align: center;">애플리케이션 로딩 중 오류가 발생했습니다.</p>
+        <button 
+          onclick="window.location.reload()" 
+          style="padding: 10px 20px; background-color: #3b82f6; color: white; border: none; border-radius: 4px; cursor: pointer;"
+        >
+          새로고침
+        </button>
+      </div>
+    `;
+  }
+};