feat: ErrorBoundary 개선 + admin CSS 모듈화

- ErrorBoundary에 에러 유형/메시지 표시 + 다시 시도/새로고침 버튼 추가 - admin 컴포넌트 CSS Modules 전환 (클래스명 충돌 방지) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-18 16:59:11 +09:00
parent eaa3319c5d
commit 2cea340163
8 changed files with 282 additions and 144 deletions
--- a/src/components/ErrorBoundary.css
+++ b/src/components/ErrorBoundary.css
@@ -0,0 +1,99 @@
+.error-boundary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 2rem;
+  background-color: #2E2C2F;
+}
+
+.error-boundary-card {
+  text-align: center;
+  max-width: 440px;
+  padding: 40px 32px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 16px;
+}
+
+.error-boundary-icon {
+  width: 56px;
+  height: 56px;
+  margin: 0 auto 20px;
+  border-radius: 50%;
+  background: rgba(229, 115, 115, 0.12);
+  color: rgba(229, 115, 115, 0.9);
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 56px;
+}
+
+.error-boundary-title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: rgba(255, 255, 255, 0.9);
+  margin: 0 0 8px 0;
+}
+
+.error-boundary-desc {
+  font-size: 0.9rem;
+  color: rgba(255, 255, 255, 0.45);
+  margin: 0 0 20px 0;
+}
+
+.error-boundary-detail {
+  padding: 12px 16px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 8px;
+  margin-bottom: 24px;
+  text-align: left;
+}
+
+.error-boundary-type {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: rgba(229, 115, 115, 0.8);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.error-boundary-message {
+  font-size: 0.85rem;
+  color: rgba(255, 255, 255, 0.6);
+  margin: 6px 0 0 0;
+  word-break: break-word;
+  font-family: monospace;
+}
+
+.error-boundary-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+}
+
+.error-boundary-btn {
+  padding: 10px 24px;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  border: none;
+  transition: opacity 0.2s;
+}
+
+.error-boundary-btn:hover {
+  opacity: 0.85;
+}
+
+.error-boundary-btn-primary {
+  background: #BACDB0;
+  color: #2E2C2F;
+  font-weight: 600;
+}
+
+.error-boundary-btn-secondary {
+  background: transparent;
+  color: rgba(255, 255, 255, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+}