From bafd3787a8ab5e6cf24bf84f500ae50d0b8e126a Mon Sep 17 00:00:00 2001
From: ysCha <yscha@interplug.co.kr>
Date: Mon, 9 Mar 2026 15:32:30 +0900
Subject: [PATCH] =?UTF-8?q?error=20=EB=A9=94=EC=8B=9C=EC=A7=80=20=EC=B2=98?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/ErrorBoundary.jsx | 59 +++++++++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 src/components/common/ErrorBoundary.jsx

diff --git a/src/components/common/ErrorBoundary.jsx b/src/components/common/ErrorBoundary.jsx
new file mode 100644
index 00000000..677a67fa
--- /dev/null
+++ b/src/components/common/ErrorBoundary.jsx
@@ -0,0 +1,59 @@
+'use client'
+
+import React from 'react'
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = { hasError: false, error: null, errorInfo: null }
+  }
+
+  static getDerivedStateFromError(error) {
+    // Update state so the next render will show the fallback UI
+    return { hasError: true }
+  }
+
+  componentDidCatch(error, errorInfo) {
+    // Log detailed error information
+    console.error('🚨 React Error Boundary caught an error:', {
+      error,
+      errorInfo,
+      timestamp: new Date().toISOString(),
+      componentStack: errorInfo.componentStack,
+      errorStack: error.stack
+    })
+
+    this.setState({
+      error: error,
+      errorInfo: errorInfo
+    })
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return (
+        <div style={{ padding: '20px', border: '1px solid red', margin: '20px' }}>
+          <h2>🚨 Something went wrong!</h2>
+          <details style={{ whiteSpace: 'pre-wrap' }}>
+            <summary>Error details</summary>
+            <p><strong>Timestamp:</strong> {new Date().toISOString()}</p>
+            <p><strong>Error:</strong> {this.state.error && this.state.error.toString()}</p>
+            <p><strong>Stack Trace:</strong></p>
+            <pre>{this.state.errorInfo.componentStack}</pre>
+          </details>
+          <button 
+            onClick={() => this.setState({ hasError: false, error: null, errorInfo: null })}
+            style={{ marginTop: '10px', padding: '10px 20px' }}
+          >
+            Try again
+          </button>
+        </div>
+      )
+    }
+
+    return this.props.children
+  }
+}
+
+export default ErrorBoundary