Feat: 기사 기바 퀴즈 제공 기능 추가

Author: psb3707

app/articles/[id]/page.tsx

@@ -16,6 +16,7 @@ import {
   Share2,
   BookOpen,
   FileText,
+  Target,
 } from "lucide-react"
 import { ArticleDetail, ArticleDetailResponse, SummaryLevel } from "@/types/article"
 import { useAuth } from "@/contexts/AuthContext"
@@ -278,32 +279,58 @@ export default function ArticleDetailPage() {
               </Card>
             )}
 
-            {/* View Original Article Button */}
-            <Card className="bg-gradient-to-r from-emerald-50 to-teal-50 border-emerald-200">
-              <CardContent className="p-6">
-                <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
-                  <div className="flex items-center space-x-3">
-                    <div className="w-12 h-12 bg-emerald-600 rounded-full flex items-center justify-center flex-shrink-0">
-                      <FileText className="w-6 h-6 text-white" />
+            {/* Action Cards */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {/* View Original Article Button */}
+              <Card className="bg-gradient-to-r from-emerald-50 to-teal-50 border-emerald-200">
+                <CardContent className="p-6">
+                  <div className="flex flex-col items-center justify-between gap-4 h-full">
+                    <div className="flex items-center space-x-3 w-full">
+                      <div className="w-12 h-12 bg-emerald-600 rounded-full flex items-center justify-center flex-shrink-0">
+                        <FileText className="w-6 h-6 text-white" />
+                      </div>
+                      <div>
+                        <h4 className="font-semibold text-emerald-900">원문 기사</h4>
+                        <p className="text-sm text-emerald-700">전체 내용 읽기</p>
+                      </div>
                     </div>
-                    <div>
-                      <h4 className="font-semibold text-emerald-900">원문 기사가 궁금하신가요?</h4>
-                      <p className="text-sm text-emerald-700">
-                        요약된 내용 외에 전체 기사를 읽어보세요
-                      </p>
+                    <Button
+                      onClick={() => router.push(`/articles/${articleId}/original`)}
+                      size="lg"
+                      className="bg-emerald-600 hover:bg-emerald-700 text-white w-full"
+                    >
+                      <FileText className="w-4 h-4 mr-2" />
+                      원문 기사 보기
+                    </Button>
+                  </div>
+                </CardContent>
+              </Card>
+
+              {/* Article Quiz Button */}
+              <Card className="bg-gradient-to-r from-purple-50 to-pink-50 border-purple-200">
+                <CardContent className="p-6">
+                  <div className="flex flex-col items-center justify-between gap-4 h-full">
+                    <div className="flex items-center space-x-3 w-full">
+                      <div className="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center flex-shrink-0">
+                        <Target className="w-6 h-6 text-white" />
+                      </div>
+                      <div>
+                        <h4 className="font-semibold text-purple-900">AI 퀴즈</h4>
+                        <p className="text-sm text-purple-700">내용 이해도 확인</p>
+                      </div>
                     </div>
+                    <Button
+                      onClick={() => router.push(`/articles/${articleId}/quiz`)}
+                      size="lg"
+                      className="bg-purple-600 hover:bg-purple-700 text-white w-full"
+                    >
+                      <Target className="w-4 h-4 mr-2" />
+                      퀴즈 풀기
+                    </Button>
                   </div>
-                  <Button
-                    onClick={() => router.push(`/articles/${articleId}/original`)}
-                    size="lg"
-                    className="bg-emerald-600 hover:bg-emerald-700 text-white whitespace-nowrap"
-                  >
-                    <FileText className="w-4 h-4 mr-2" />
-                    원문 기사 보기
-                  </Button>
-                </div>
-              </CardContent>
-            </Card>
+                </CardContent>
+              </Card>
+            </div>
 
             {/* Info Card */}
             <Card className="bg-blue-50 border-blue-200">