클로드 4 와 3.5 비교

새로 나온 4버전을 3.7과 비교해 달라고 했더니 3.5와 비교를 해주네요 ㅠㅠ

import React from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar } from 'recharts';

const CodingComparisonChart = () => {
  const barData = [
    {
      category: '알고리즘 구현',
      'Claude 3.5 Sonnet': 85,
      'Claude 4 Sonnet': 92
    },
    {
      category: '디버깅',
      'Claude 3.5 Sonnet': 78,
      'Claude 4 Sonnet': 88
    },
    {
      category: '코드 최적화',
      'Claude 3.5 Sonnet': 80,
      'Claude 4 Sonnet': 90
    },
    {
      category: '복잡한 프로젝트',
      'Claude 3.5 Sonnet': 75,
      'Claude 4 Sonnet': 89
    },
    {
      category: '다양한 언어 지원',
      'Claude 3.5 Sonnet': 82,
      'Claude 4 Sonnet': 91
    },
    {
      category: '문서화',
      'Claude 3.5 Sonnet': 88,
      'Claude 4 Sonnet': 94
    }
  ];

  const radarData = [
    {
      subject: '정확성',
      'Claude 3.5 Sonnet': 80,
      'Claude 4 Sonnet': 90,
      fullMark: 100
    },
    {
      subject: '속도',
      'Claude 3.5 Sonnet': 85,
      'Claude 4 Sonnet': 88,
      fullMark: 100
    },
    {
      subject: '창의성',
      'Claude 3.5 Sonnet': 78,
      'Claude 4 Sonnet': 87,
      fullMark: 100
    },
    {
      subject: '복잡성 처리',
      'Claude 3.5 Sonnet': 72,
      'Claude 4 Sonnet': 89,
      fullMark: 100
    },
    {
      subject: '오류 처리',
      'Claude 3.5 Sonnet': 75,
      'Claude 4 Sonnet': 86,
      fullMark: 100
    },
    {
      subject: '코드 품질',
      'Claude 3.5 Sonnet': 83,
      'Claude 4 Sonnet': 92,
      fullMark: 100
    }
  ];

  return (
    <div className="w-full max-w-6xl mx-auto p-6 bg-gradient-to-br from-slate-50 to-blue-50 rounded-xl shadow-lg">
      <div className="text-center mb-8">
        <h1 className="text-3xl font-bold text-gray-800 mb-2">
          Claude 4 Sonnet vs Claude 3.5 Sonnet
        </h1>
        <p className="text-lg text-gray-600">코딩 실력 종합 비교</p>
      </div>

      {/* 막대 그래프 */}
      <div className="mb-12">
        <h2 className="text-xl font-semibold text-gray-700 mb-4 text-center">영역별 점수 비교</h2>
        <ResponsiveContainer width="100%" height={400}>
          <BarChart data={barData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
            <CartesianGrid strokeDasharray="3 3" stroke="#e0e7ff" />
            <XAxis 
              dataKey="category" 
              tick={{ fontSize: 12 }}
              angle={-45}
              textAnchor="end"
              height={80}
            />
            <YAxis domain={[0, 100]} />
            <Tooltip 
              contentStyle={{
                backgroundColor: '#f8fafc',
                border: '1px solid #e2e8f0',
                borderRadius: '8px'
              }}
            />
            <Legend />
            <Bar 
              dataKey="Claude 3.5 Sonnet" 
              fill="#3b82f6" 
              radius={[4, 4, 0, 0]}
              opacity={0.8}
            />
            <Bar 
              dataKey="Claude 4 Sonnet" 
              fill="#10b981" 
              radius={[4, 4, 0, 0]}
            />
          </BarChart>
        </ResponsiveContainer>
      </div>

      {/* 레이더 차트 */}
      <div className="mb-8">
        <h2 className="text-xl font-semibold text-gray-700 mb-4 text-center">종합 능력 레이더 차트</h2>
        <ResponsiveContainer width="100%" height={400}>
          <RadarChart data={radarData} margin={{ top: 20, right: 80, bottom: 20, left: 80 }}>
            <PolarGrid stroke="#e2e8f0" />
            <PolarAngleAxis tick={{ fontSize: 12 }} />
            <PolarRadiusAxis 
              angle={90} 
              domain={[0, 100]} 
              tick={{ fontSize: 10 }}
            />
            <Radar
              name="Claude 3.5 Sonnet"
              dataKey="Claude 3.5 Sonnet"
              stroke="#3b82f6"
              fill="#3b82f6"
              fillOpacity={0.1}
              strokeWidth={2}
            />
            <Radar
              name="Claude 4 Sonnet"
              dataKey="Claude 4 Sonnet"
              stroke="#10b981"
              fill="#10b981"
              fillOpacity={0.2}
              strokeWidth={2}
            />
            <Legend />
          </RadarChart>
        </ResponsiveContainer>
      </div>

      {/* 주요 개선사항 */}
      <div className="bg-white rounded-lg p-6 shadow-md">
        <h3 className="text-lg font-semibold text-gray-800 mb-4">💡 Claude 4 Sonnet의 주요 개선사항</h3>
        <div className="grid md:grid-cols-2 gap-4">
          <div className="bg-green-50 p-4 rounded-lg border-l-4 border-green-400">
            <h4 className="font-medium text-green-800 mb-2">🚀 성능 향상</h4>
            <p className="text-sm text-green-700">복잡한 알고리즘과 대규모 프로젝트 처리 능력이 크게 개선되었습니다.</p>
          </div>
          <div className="bg-blue-50 p-4 rounded-lg border-l-4 border-blue-400">
            <h4 className="font-medium text-blue-800 mb-2">🔍 정확성 증대</h4>
            <p className="text-sm text-blue-700">코드 생성과 디버깅에서 오류율이 현저히 감소했습니다.</p>
          </div>
          <div className="bg-purple-50 p-4 rounded-lg border-l-4 border-purple-400">
            <h4 className="font-medium text-purple-800 mb-2">🎨 창의적 해결</h4>
            <p className="text-sm text-purple-700">더 창의적이고 효율적인 코딩 솔루션을 제안합니다.</p>
          </div>
          <div className="bg-orange-50 p-4 rounded-lg border-l-4 border-orange-400">
            <h4 className="font-medium text-orange-800 mb-2">📚 향상된 문서화</h4>
            <p className="text-sm text-orange-700">코드 주석과 문서 작성 품질이 대폭 향상되었습니다.</p>
          </div>
        </div>
      </div>

      <div className="mt-6 text-center text-sm text-gray-500">
        * 점수는 일반적인 성능 지표를 기반으로 한 추정치입니다
      </div>
    </div>
  );
};

export default CodingComparisonChart;