36 lines
1.3 KiB
TypeScript
36 lines
1.3 KiB
TypeScript
|
|
import React from 'react';
|
|
import { AlertCircle } from "lucide-react";
|
|
import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
|
|
|
|
interface ProxyRecommendationAlertProps {
|
|
errors: string[];
|
|
}
|
|
|
|
const ProxyRecommendationAlert: React.FC<ProxyRecommendationAlertProps> = ({ errors }) => {
|
|
const hasCorsError = errors.some(err =>
|
|
err.includes('CORS') ||
|
|
err.includes('Failed to fetch') ||
|
|
err.includes('프록시 사용시 정상 작동') ||
|
|
err.includes('프록시를 활성화')
|
|
);
|
|
|
|
if (!hasCorsError || errors.length === 0) return null;
|
|
|
|
return (
|
|
<Alert className="bg-amber-50 border-amber-200 mt-3">
|
|
<AlertCircle className="h-4 w-4 text-amber-600" />
|
|
<AlertTitle className="text-amber-800 text-xs font-medium">CORS 오류 감지됨</AlertTitle>
|
|
<AlertDescription className="text-amber-700 text-xs">
|
|
<p>HTTP URL에 대한 브라우저 보안 제한으로 인해 연결에 실패했습니다.</p>
|
|
<ul className="list-disc pl-4 mt-1">
|
|
<li className="mt-1">CORS 프록시를 활성화하고 프록시 유형을 변경해보세요.</li>
|
|
<li className="mt-1">또는 HTTPS URL로 변경하는 것을 고려하세요.</li>
|
|
</ul>
|
|
</AlertDescription>
|
|
</Alert>
|
|
);
|
|
};
|
|
|
|
export default ProxyRecommendationAlert;
|