Improve generation error handling and loading UX (#16)

- friendlyError(): map backend codes (no_matching_scenario, ...) and network
  errors to clear Korean messages
- error banner gets a '다시 시도' retry button (re-runs last query)
- loading shows an animated spinner
Frontend build verified.

Closes #7

Co-authored-by: ReokyoungKim <zmffhem1207@gmail.com>
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: 3 people

frontend/src/App.jsx

@@ -6,11 +6,25 @@ import MiniMap from './components/MiniMap'
 import SimPlayback from './components/SimPlayback'
 import JsonView from './components/JsonView'
 
+// Map backend error codes / raw messages to friendly Korean text.
+function friendlyError(err) {
+  const map = {
+    no_matching_scenario: '비슷한 시나리오를 찾지 못했어요. 프롬프트를 조금 더 구체적으로 적어보세요.',
+    failed_to_load_scenario: '시나리오 데이터를 불러오지 못했어요. 잠시 후 다시 시도해주세요.',
+  }
+  if (map[err]) return map[err]
+  if (typeof err === 'string' && /failed to fetch|networkerror|load failed/i.test(err)) {
+    return '백엔드에 연결하지 못했어요. 서버가 실행 중인지 확인해주세요 (localhost:8000).'
+  }
+  return `생성에 실패했어요: ${err}`
+}
+
 export default function App() {
   const [catalog, setCatalog] = useState({ scenarios: [], maps: [] })
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState(null)
   const [result, setResult] = useState(null)
+  const [lastQuery, setLastQuery] = useState('')
 
   useEffect(() => {
     getCatalog()
@@ -19,18 +33,19 @@ export default function App() {
   }, [])
 
   async function handleGenerate(query) {
+    setLastQuery(query)
     setLoading(true)
     setError(null)
     setResult(null)
     try {
       const res = await generate(query)
       if (res.error || !res.config) {
-        setError(res.error || 'No config was generated for this prompt.')
+        setError(friendlyError(res.error || 'no_matching_scenario'))
       } else {
         setResult(res)
       }
     } catch (e) {
-      setError(e.message)
+      setError(friendlyError(e.message))
     } finally {
       setLoading(false)
     }
@@ -56,9 +71,23 @@ export default function App() {
         onGenerate={handleGenerate}
       />
 
-      {error && <div className="error">⚠️ {error}</div>}
+      {error && !loading && (
+        <div className="error">
+          <span>⚠️ {error}</span>
+          {lastQuery && (
+            <button className="btn retry" onClick={() => handleGenerate(lastQuery)}>
+              다시 시도
+            </button>
+          )}
+        </div>
+      )}
 
-      {loading && <div className="loading">생성 중… (DB 매칭 → 스크립트 작성)</div>}
+      {loading && (
+        <div className="loading">
+          <span className="spinner" aria-hidden="true" />
+          생성 중… (DB 매칭 → 스크립트 작성)
+        </div>
+      )}
 
       {result && config && (
         <div className="result">

frontend/src/styles.css

@@ -88,11 +88,23 @@ body {
   margin-top: 18px; padding: 14px 16px;
   background: #3b1414; border: 1px solid #7f1d1d; color: #fecaca;
   border-radius: 10px;
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
 }
+.error .retry {
+  background: #7f1d1d; border-color: #b91c1c; color: #fee2e2; white-space: nowrap;
+}
+.error .retry:hover { background: #991b1b; }
 .loading {
   margin-top: 18px; padding: 14px 16px; color: var(--muted);
   background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
+  display: flex; align-items: center; gap: 10px;
+}
+.spinner {
+  width: 16px; height: 16px; border-radius: 50%;
+  border: 2px solid var(--border); border-top-color: var(--accent);
+  display: inline-block; animation: spin 0.7s linear infinite;
 }
+@keyframes spin { to { transform: rotate(360deg); } }
 
 /* result */
 .result { margin-top: 24px; display: flex; flex-direction: column; gap: 20px; }