fix:AI 분석 504 타임아웃 에러 처리 개선

- Controller: analyzeScreenshots()를 try-catch로 감싸 JSON 에러 응답 보장
- Frontend: api() 함수에서 HTML 응답(504/502 등) 감지 → 친절한 한글 에러 메시지 표시

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

app/Http/Controllers/Video/TutorialVideoController.php

@@ -84,7 +84,18 @@ public function analyze(Request $request): JsonResponse
             }
         }
 
-        $analysisData = $this->screenAnalysisService->analyzeScreenshots($paths);
+        try {
+            $analysisData = $this->screenAnalysisService->analyzeScreenshots($paths);
+        } catch (\Exception $e) {
+            \Illuminate\Support\Facades\Log::error('TutorialVideoController: 분석 예외', [
+                'error' => $e->getMessage(),
+            ]);
+
+            return response()->json([
+                'success' => false,
+                'message' => 'AI 분석 중 오류가 발생했습니다: ' . $e->getMessage(),
+            ], 500);
+        }
 
         if (empty($analysisData)) {
             return response()->json([

resources/views/video/tutorial/index.blade.php

@@ -107,7 +107,16 @@
         headers['Content-Type'] = 'application/json';
     }
     return fetch(url, { headers, ...options }).then(async (res) => {
-        const data = await res.json();
+        const text = await res.text();
+        let data;
+        try {
+            data = JSON.parse(text);
+        } catch {
+            // HTML 에러 페이지 반환 시 (504 Gateway Timeout 등)
+            if (res.status === 504) throw new Error('서버 응답 시간 초과 (504). AI 분석에 시간이 오래 걸리고 있습니다. 잠시 후 다시 시도해주세요.');
+            if (res.status === 502) throw new Error('서버 연결 오류 (502). 잠시 후 다시 시도해주세요.');
+            throw new Error(`서버 오류 (HTTP ${res.status}). 잠시 후 다시 시도해주세요.`);
+        }
         if (!res.ok) throw new Error(data.message || `HTTP ${res.status}`);
         return data;
     });