feat: add ErrorBoundary, 404 page, Lesson Only badges, and API error toasts

- Add React ErrorBoundary component wrapping RootLayout for graceful crash recovery
- Add 404 NotFoundPage with catch-all route for unknown paths
- Add "Lesson Only" badge on ChapterCard for chapters without Playground support
- Wire axios response interceptor to handleAPIError for automatic error toasts
- Update Ralph prompt and fix_plan for English translation automation

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: jammy0903

.ralph/PROMPT.md

@@ -39,29 +39,29 @@ Remaining: 233
 - [x] js-4-4.en.json
 
 ### Chapter 5: Memory & Immutability (js-5)
-- [ ] js-5-1.en.json
-- [ ] js-5-2.en.json
-- [ ] js-5-3.en.json
+- [x] js-5-1.en.json ✅
+- [x] js-5-2.en.json ✅
+- [x] js-5-3.en.json ✅
 
 ### Chapter 6: Prototypes & Classes (js-6)
-- [ ] js-6-1.en.json
-- [ ] js-6-2.en.json
-- [ ] js-6-3.en.json
+- [x] js-6-1.en.json ✅
+- [x] js-6-2.en.json ✅
+- [x] js-6-3.en.json ✅
 
 ### Chapter 7: V8 Internals (js-7)
-- [ ] js-7-1.en.json
-- [ ] js-7-2.en.json
-- [ ] js-7-3.en.json
+- [x] js-7-1.en.json ✅
+- [x] js-7-2.en.json ✅
+- [x] js-7-3.en.json ✅
 
 ### Chapter 8: Rendering Performance (js-8)
-- [ ] js-8-1.en.json
-- [ ] js-8-2.en.json
-- [ ] js-8-3.en.json
+- [x] js-8-1.en.json ✅
+- [x] js-8-2.en.json ✅
+- [x] js-8-3.en.json ✅
 
 ### Chapter 9: Metaprogramming (js-9)
-- [ ] js-9-1.en.json
-- [ ] js-9-2.en.json
-- [ ] js-9-3.en.json
+- [x] js-9-1.en.json ✅
+- [x] js-9-2.en.json ✅
+- [x] js-9-3.en.json ✅
 
 ---
 

.ralph/fix_plan.md

@@ -0,0 +1,76 @@
+import { Component } from 'react';
+import type { ReactNode, ErrorInfo } from 'react';
+import { logger } from '@/utils/logger';
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    logger.error('ErrorBoundary caught:', error, errorInfo);
+  }
+
+  handleReset = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  handleGoHome = () => {
+    window.location.href = '/';
+  };
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="min-h-screen flex items-center justify-center bg-[var(--theme-layout-bg,#f9fafb)] px-4">
+          <div className="text-center max-w-md">
+            <div className="text-6xl mb-6">
+              <span role="img" aria-label="warning">&#x26A0;&#xFE0F;</span>
+            </div>
+            <h1 className="text-2xl font-bold text-[var(--theme-dashboard-title,#111)] mb-3">
+              Something went wrong
+            </h1>
+            <p className="text-[var(--theme-dashboard-text-muted,#666)] mb-6">
+              An unexpected error occurred. Please try again.
+            </p>
+            {import.meta.env.DEV && this.state.error && (
+              <pre className="text-left text-xs bg-red-50 text-red-700 p-3 rounded-lg mb-6 overflow-auto max-h-32 border border-red-200">
+                {this.state.error.message}
+              </pre>
+            )}
+            <div className="flex gap-3 justify-center">
+              <button
+                onClick={this.handleReset}
+                className="px-5 py-2.5 rounded-lg bg-[var(--theme-dashboard-accent,#3b82f6)] text-white font-medium hover:opacity-90 transition-opacity"
+              >
+                Try Again
+              </button>
+              <button
+                onClick={this.handleGoHome}
+                className="px-5 py-2.5 rounded-lg border border-[var(--theme-dashboard-card-border,#e5e7eb)] text-[var(--theme-dashboard-text-muted,#666)] font-medium hover:bg-[var(--theme-dashboard-section-header-bg,#f3f4f6)] transition-colors"
+              >
+                Go Home
+              </button>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

packages/frontend/src/components/ErrorBoundary.tsx

@@ -6,7 +6,18 @@
 
 import { useNavigate } from 'react-router-dom';
 import type { Chapter } from '@/types';
-import { Star, Target, Lock, ChevronRight, BookOpen } from 'lucide-react';
+import { Star, Target, Lock, ChevronRight, BookOpen, BookMarked } from 'lucide-react';
+
+/**
+ * Chapters where Playground simulator cannot fully support the topic.
+ * These chapters work perfectly in Lesson mode (pre-scripted JSON),
+ * but user code in Playground will produce incomplete/incorrect visualization.
+ */
+const LESSON_ONLY_CHAPTERS: Record<string, Set<string>> = {
+  javascript: new Set(['js-7', 'js-8', 'js-9']),
+  python: new Set(['py-8', 'py-9', 'py-10']),
+  java: new Set(['java-7', 'java-8', 'java-9', 'java-10']),
+};
 
 // 언어별 색상 테마 (밝은 파스텔 톤)
 const LANGUAGE_THEMES: Record<string, {
@@ -89,6 +100,7 @@ export function ChapterCard({
 }: ChapterCardProps) {
   const navigate = useNavigate();
   const theme = LANGUAGE_THEMES[languageId] || DEFAULT_THEME;
+  const isLessonOnly = LESSON_ONLY_CHAPTERS[languageId]?.has(chapter.id) ?? false;
 
   const progressPercent = lessonCount > 0 ? Math.round((completedCount / lessonCount) * 100) : 0;
   const isComplete = completedCount === lessonCount && lessonCount > 0;
@@ -199,6 +211,12 @@ export function ChapterCard({
             Login
           </span>
         )}
+        {isLessonOnly && (
+          <span className="inline-flex items-center gap-1 px-1.5 md:px-2 py-0.5 rounded text-[9px] md:text-[10px] font-bold uppercase tracking-wider bg-amber-50 text-amber-600 border border-amber-200">
+            <BookMarked className="w-2.5 h-2.5 md:w-3 md:h-3" />
+            Lesson Only
+          </span>
+        )}
       </div>
 
       {/* 챕터 제목 */}

packages/frontend/src/features/courses/components/ChapterCard.tsx

@@ -2,6 +2,7 @@ import type { ReactNode } from 'react';
 import { useEffect } from 'react';
 import { Outlet } from 'react-router-dom';
 import { MainLayout } from './MainLayout';
+import { ErrorBoundary } from '@/components/ErrorBoundary';
 import { initializeAuthListener } from '@/services/firebase';
 import { useTheme } from '@/hooks/useTheme';
 
@@ -19,10 +20,12 @@ function AuthProvider({ children }: { children: ReactNode }) {
 
 export function RootLayout() {
   return (
-    <AuthProvider>
-      <MainLayout>
-        <Outlet />
-      </MainLayout>
-    </AuthProvider>
+    <ErrorBoundary>
+      <AuthProvider>
+        <MainLayout>
+          <Outlet />
+        </MainLayout>
+      </AuthProvider>
+    </ErrorBoundary>
   );
 }

packages/frontend/src/layouts/RootLayout.tsx

@@ -0,0 +1,40 @@
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Home, ArrowLeft } from 'lucide-react';
+
+export function NotFoundPage() {
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+
+  return (
+    <div className="min-h-[60vh] flex items-center justify-center px-4">
+      <div className="text-center max-w-md">
+        <div className="text-8xl font-bold text-[var(--theme-dashboard-accent,#3b82f6)] opacity-20 mb-4">
+          404
+        </div>
+        <h1 className="text-2xl font-bold text-[var(--theme-dashboard-title,#111)] mb-3">
+          {t('errors.not_found')}
+        </h1>
+        <p className="text-[var(--theme-dashboard-text-muted,#666)] mb-8">
+          The page you're looking for doesn't exist or has been moved.
+        </p>
+        <div className="flex gap-3 justify-center">
+          <button
+            onClick={() => navigate(-1)}
+            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg border border-[var(--theme-dashboard-card-border,#e5e7eb)] text-[var(--theme-dashboard-text-muted,#666)] font-medium hover:bg-[var(--theme-dashboard-section-header-bg,#f3f4f6)] transition-colors"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            Go Back
+          </button>
+          <button
+            onClick={() => navigate('/')}
+            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-[var(--theme-dashboard-accent,#3b82f6)] text-white font-medium hover:opacity-90 transition-opacity"
+          >
+            <Home className="w-4 h-4" />
+            Home
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

packages/frontend/src/pages/NotFoundPage.tsx

@@ -16,6 +16,7 @@ import { DashboardPage } from './features/dashboard';
 import { ReportPage } from './features/report';
 import { ProtectedRoute } from './components/ProtectedRoute';
 import { CoursesPage } from './features/courses/CoursesPage';
+import { NotFoundPage } from './pages/NotFoundPage';
 
 /**
  * 라우터 설정
@@ -77,6 +78,7 @@ export const router = createBrowserRouter([
           return { Component: TermsPage };
         }
       },
+      { path: '*', element: <NotFoundPage /> },
     ],
   },
 ]);

packages/frontend/src/router.tsx

@@ -13,6 +13,7 @@ import axios from 'axios';
 import { config } from '../../config';
 import { logger } from '@/utils/logger';
 import { getAuthToken } from './tokenManager';
+import { handleAPIError } from '@/components/common/Toast/notifications';
 
 // API 기본 URL (버전 포함)
 const BASE_URL = config.api.baseUrl;
@@ -42,11 +43,15 @@ api.interceptors.request.use(
   }
 );
 
-// Response Interceptor: 에러 처리는 errors.ts에서
+// Response Interceptor: 에러 시 toast 표시 + errors.ts로 위임
 api.interceptors.response.use(
   (response) => response,
   (error) => {
-    // errors.ts의 handleError로 위임
+    if (axios.isAxiosError(error)) {
+      const status = error.response?.status ?? 0;
+      const message = error.response?.data?.message;
+      handleAPIError(status, message);
+    }
     return Promise.reject(error);
   }
 );