Merge pull request #5 from Final-Project-Team-Temporary/feature/quiz-solve-log-api

Feat: 대시보드 개선, 로그인 연동 및 퀴즈 결과 저장 API 연동

Author: WithFortuna

app/(auth)/login/page.tsx

@@ -9,11 +9,16 @@ import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Separator } from "@/components/ui/separator"
-import { TrendingUp, Eye, EyeOff, ArrowLeft } from "lucide-react"
+import { TrendingUp, Eye, EyeOff, ArrowLeft, Loader2 } from "lucide-react"
+import { useAuth } from "@/contexts/AuthContext"
+import { loginUser } from "@/services/auth"
 
 export default function LoginPage() {
   const router = useRouter()
+  const { login } = useAuth()
   const [showPassword, setShowPassword] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
   const [formData, setFormData] = useState({
     email: "",
     password: "",
@@ -27,11 +32,36 @@ export default function LoginPage() {
     }))
   }
 
-  const handleLogin = (e: React.FormEvent) => {
+  const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault()
-    // 로그인 로직 구현
-    console.log("로그인 시도:", formData)
-    router.push("/dashboard")
+    setIsLoading(true)
+    setError(null)
+
+    try {
+      const response = await loginUser(formData)
+
+      if (response.success) {
+        // 토큰 저장
+        localStorage.setItem("authToken", response.data.accessToken)
+        localStorage.setItem("refreshToken", response.data.refreshToken)
+
+        // AuthContext에 사용자 정보 저장
+        login(response.data.accessToken, {
+          id: "", // 백엔드에서 제공하지 않으면 빈 문자열
+          email: formData.email,
+          name: response.data.userName,
+        })
+
+        // 홈으로 이동
+        router.push("/")
+      } else {
+        setError(response.message || "로그인에 실패했습니다.")
+      }
+    } catch (err) {
+      setError("로그인 중 오류가 발생했습니다.")
+    } finally {
+      setIsLoading(false)
+    }
   }
 
   const handleKakaoLogin = () => {
@@ -91,6 +121,13 @@ export default function LoginPage() {
               </div>
             </div>
 
+            {/* 에러 메시지 */}
+            {error && (
+              <div className="p-3 bg-red-50 border border-red-200 rounded-lg">
+                <p className="text-sm text-red-600">{error}</p>
+              </div>
+            )}
+
             {/* 이메일 로그인 폼 */}
             <form onSubmit={handleLogin} className="space-y-4">
               <div className="space-y-2">
@@ -140,8 +177,19 @@ export default function LoginPage() {
                 </button>
               </div>
 
-              <Button type="submit" className="w-full bg-blue-900 hover:bg-blue-800 h-12">
-                로그인
+              <Button
+                type="submit"
+                className="w-full bg-blue-900 hover:bg-blue-800 h-12"
+                disabled={isLoading}
+              >
+                {isLoading ? (
+                  <>
+                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                    로그인 중...
+                  </>
+                ) : (
+                  "로그인"
+                )}
               </Button>
             </form>
 

app/page.tsx

@@ -24,6 +24,7 @@ import { VideoRecommendation } from "@/types/video"
 import { fetchRecommendedVideos, getYoutubeThumbnail } from "@/services/videos"
 import { RecommendedArticle } from "@/types/article"
 import { fetchRecommendedArticles } from "@/services/articles"
+import { fetchLearningStreak, LearningStats } from "@/services/learning"
 
 export default function FinancialLearningPlatform() {
   const router = useRouter()
@@ -44,27 +45,18 @@ export default function FinancialLearningPlatform() {
   const [articlesLoading, setArticlesLoading] = useState(false)
   const [articlesError, setArticlesError] = useState<string | null>(null)
 
-  // 사용자 통계
-  const userStats = {
-    articlesRead: 28,
-    badges: 8,
-    quizScore: 85,
-    streak: 15,
-  }
+  // 학습 통계 상태
+  const [learningStats, setLearningStats] = useState<LearningStats>({
+    consecutiveDays: 0,
+    quizCount: 0,
+    articleCount: 0,
+  })
 
   const userPreferences = {
     keywords: ["ETF", "배당주", "부동산", "경제지표"],
     difficultyLevel: "intermediate",
   }
 
-  const learningProgress = {
-    completedCourses: 12,
-    totalCourses: 20,
-    currentLevel: "Intermediate",
-    badges: 8,
-    streak: 15,
-  }
-
   // 유튜브 영상 추천 API 호출
   useEffect(() => {
     const loadRecommendedVideos = async () => {
@@ -117,6 +109,28 @@ export default function FinancialLearningPlatform() {
     loadRecommendedArticles()
   }, [])
 
+  // 학습 통계 API 호출
+  useEffect(() => {
+    const loadLearningStats = async () => {
+      if (!isAuthenticated) return
+
+      try {
+        const response = await fetchLearningStreak()
+        if (response.success) {
+          setLearningStats({
+            consecutiveDays: response.data.consecutiveDays,
+            quizCount: response.data.quizCount,
+            articleCount: response.data.articleCount,
+          })
+        }
+      } catch (error) {
+        console.error("Failed to load learning stats:", error)
+      }
+    }
+
+    loadLearningStats()
+  }, [isAuthenticated])
+
   const formatArticleDate = (dateString: string) => {
     const date = new Date(dateString)
     const now = new Date()
@@ -163,7 +177,7 @@ export default function FinancialLearningPlatform() {
               </div>
               <div className="text-right">
                 <div className="text-sm text-blue-200">연속 학습일</div>
-                <div className="text-3xl font-bold">{learningProgress.streak}일</div>
+                <div className="text-3xl font-bold">{learningStats.consecutiveDays}일</div>
               </div>
             </div>
           </div>
@@ -175,8 +189,14 @@ export default function FinancialLearningPlatform() {
                 <div className="flex items-center justify-between">
                   <div>
                     <p className="text-sm text-gray-600">읽은 기사</p>
-                    <p className="text-2xl font-bold">{userStats.articlesRead}</p>
-                    <p className="text-sm text-gray-500">개 완독</p>
+                    {isAuthenticated ? (
+                      <>
+                        <p className="text-2xl font-bold">{learningStats.articleCount}</p>
+                        <p className="text-sm text-gray-500">개 완독</p>
+                      </>
+                    ) : (
+                      <p className="text-sm text-gray-500 mt-2">로그인 후 EconoEasy와 함께 학습해봐요</p>
+                    )}
                   </div>
                   <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                     <Newspaper className="w-6 h-6 text-blue-600" />
@@ -189,9 +209,15 @@ export default function FinancialLearningPlatform() {
               <CardContent className="p-6">
                 <div className="flex items-center justify-between">
                   <div>
-                    <p className="text-sm text-gray-600">퀴즈 점수</p>
-                    <p className="text-2xl font-bold">{userStats.quizScore}점</p>
-                    <p className="text-sm text-gray-500">평균 점수</p>
+                    <p className="text-sm text-gray-600">푼 퀴즈</p>
+                    {isAuthenticated ? (
+                      <>
+                        <p className="text-2xl font-bold">{learningStats.quizCount}</p>
+                        <p className="text-sm text-gray-500">개 완료</p>
+                      </>
+                    ) : (
+                      <p className="text-sm text-gray-500 mt-2">로그인 후 EconoEasy와 함께 학습해봐요</p>
+                    )}
                   </div>
                   <div className="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
                     <Target className="w-6 h-6 text-orange-600" />
@@ -205,8 +231,14 @@ export default function FinancialLearningPlatform() {
                 <div className="flex items-center justify-between">
                   <div>
                     <p className="text-sm text-gray-600">연속 학습일</p>
-                    <p className="text-2xl font-bold">{learningProgress.streak}일</p>
-                    <p className="text-sm text-gray-500">학습 중</p>
+                    {isAuthenticated ? (
+                      <>
+                        <p className="text-2xl font-bold">{learningStats.consecutiveDays}일</p>
+                        <p className="text-sm text-gray-500">학습 중</p>
+                      </>
+                    ) : (
+                      <p className="text-sm text-gray-500 mt-2">로그인 후 EconoEasy와 함께 학습해봐요</p>
+                    )}
                   </div>
                   <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                     <Target className="w-6 h-6 text-purple-600" />

app/quiz/result/page.tsx

@@ -1,13 +1,14 @@
 "use client"
 
-import { useState, useEffect } from "react"
+import { useState, useEffect, useRef } from "react"
 import { useRouter } from "next/navigation"
 import { Card, CardContent } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { Progress } from "@/components/ui/progress"
 import Header from "@/components/layout/Header"
 import { Trophy, Star, RotateCcw, Home } from "lucide-react"
-import { QuizData } from "@/lib/types"
+import { QuizData, QuizResultItem } from "@/lib/types"
+import { saveQuizResult } from "@/services/quiz"
 
 interface QuizResult {
   score: number
@@ -27,6 +28,7 @@ export default function QuizResultPage() {
   const router = useRouter()
   const [result, setResult] = useState<QuizResult | null>(null)
   const [termStats, setTermStats] = useState<TermStat[]>([])
+  const hasSubmittedRef = useRef(false)
 
   useEffect(() => {
     const savedResult = sessionStorage.getItem("quizResult")
@@ -38,6 +40,12 @@ export default function QuizResultPage() {
         // 용어별 통계 계산
         if (data.quizData?.quizzes && Array.isArray(data.quizData.quizzes)) {
           calculateTermStats(data)
+
+          // 퀴즈 결과 API 저장 (한 번만 실행)
+          if (!hasSubmittedRef.current) {
+            hasSubmittedRef.current = true
+            submitQuizResult(data)
+          }
         }
       } catch (error) {
         console.error("Failed to parse quiz result:", error)
@@ -48,6 +56,23 @@ export default function QuizResultPage() {
     }
   }, [router])
 
+  const submitQuizResult = async (data: QuizResult) => {
+    try {
+      const results: QuizResultItem[] = data.quizData.quizzes.map((quiz, index) => ({
+        question: quiz.question,
+        options: quiz.options,
+        answerIndex: quiz.answerIndex,
+        userAnswerIndex: data.userAnswers[index],
+        explanation: quiz.explanation,
+        term: quiz.term || "기타",
+      }))
+
+      await saveQuizResult({ results })
+    } catch (error) {
+      console.error("Failed to save quiz result:", error)
+    }
+  }
+
   const calculateTermStats = (data: QuizResult) => {
     const statsMap = new Map<string, { correct: number; total: number }>()
 

lib/types.ts

@@ -127,6 +127,20 @@ export interface LoginCredentials {
   password: string
 }
 
+// 백엔드 로그인 응답 타입
+export interface LoginResponse {
+  code: string
+  message: string
+  success: boolean
+  data: {
+    accessToken: string
+    refreshToken: string
+    userStatus: "ACTIVE" | "INACTIVE" | "SUSPENDED"
+    loginStatus: "EXISTING_USER" | "NEW_USER"
+    userName: string
+  }
+}
+
 export interface SignupData {
   email: string
   password: string
@@ -264,10 +278,17 @@ export interface ChallengeSubmitRequest {
   answers: number[]
 }
 
-export interface QuizResultRequest {
+export interface QuizResultItem {
+  question: string
+  options: string[]
+  answerIndex: number
+  userAnswerIndex: number
+  explanation?: string
   term: string
-  score: number
-  totalQuestions: number
+}
+
+export interface QuizResultRequest {
+  results: QuizResultItem[]
 }
 
 export interface LearningStats {

services/auth.ts

@@ -1,40 +1,27 @@
-import { LoginCredentials, SignupData, User, ApiResponse } from "@/lib/types"
+import { LoginCredentials, SignupData, User, ApiResponse, LoginResponse } from "@/lib/types"
+import apiClient from "@/lib/axios"
 
 // 로그인 API 호출
-export async function loginUser(credentials: LoginCredentials): Promise<ApiResponse<{ user: User; token: string }>> {
+export async function loginUser(credentials: LoginCredentials): Promise<LoginResponse> {
   try {
-    // 실제 API 호출 대신 모의 응답
-    await new Promise(resolve => setTimeout(resolve, 1000)) // 네트워크 지연 시뮬레이션
-    
-    if (credentials.email === "[email protected]" && credentials.password === "password") {
-      return {
-        success: true,
-        data: {
-          user: {
-            id: "1",
-            email: credentials.email,
-            name: "김투자",
-            age: "30s",
-            investmentExperience: "intermediate",
-            riskTolerance: "moderate",
-            investmentGoals: ["장기 자산 증식", "은퇴 자금 마련"],
-            interests: ["ETF", "주식", "부동산"],
-            createdAt: new Date(),
-            updatedAt: new Date(),
-          },
-          token: "mock-jwt-token"
-        }
-      }
-    } else {
-      return {
-        success: false,
-        error: "이메일 또는 비밀번호가 올바르지 않습니다."
-      }
+    const response = await apiClient.post<LoginResponse>("/api/auth/login", credentials)
+    return response.data
+  } catch (error: any) {
+    // axios 에러 처리
+    if (error.response?.data) {
+      return error.response.data as LoginResponse
     }
-  } catch (error) {
     return {
+      code: "E001",
+      message: "로그인 중 오류가 발생했습니다.",
       success: false,
-      error: "로그인 중 오류가 발생했습니다."
+      data: {
+        accessToken: "",
+        refreshToken: "",
+        userStatus: "INACTIVE",
+        loginStatus: "EXISTING_USER",
+        userName: "",
+      },
     }
   }
 }