[DP-420] 마이페이지 스크랩/퀴즈 히스토리 mock → 실제 API 연동

app/(main)/home/[id]/quiz/result/page.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import { Suspense, useEffect, useState } from "react";
+import { Suspense } from "react";
 import { useParams, useSearchParams, useRouter } from "next/navigation";
 import Link from "next/link";
 import { ArrowLeft, Loader2, AlertCircle } from "lucide-react";
+import { useQuery } from "@tanstack/react-query";
 import { QuizResult } from "@/components/features/home/quiz/QuizResult";
-import { fetchMyQuizHistoryDetail } from "@/lib/mock/my-page-wrong-quizzes";
-import type { QuizHistoryDetail } from "@/types/myPage";
+import { getQuizHistoryDetail } from "@/lib/api/endpoints/quizzes";
 
 function QuizResultContent() {
   const params = useParams<{ id: string }>();
@@ -16,17 +16,11 @@ function QuizResultContent() {
   const contentId = params.id;
   const attemptId = searchParams.get("attemptId");
 
-  const [detail, setDetail] = useState<QuizHistoryDetail | null>(null);
-  const [isLoading, setIsLoading] = useState(!!attemptId);
-  const [isError, setIsError] = useState(!attemptId);
-
-  useEffect(() => {
-    if (!attemptId) return;
-    fetchMyQuizHistoryDetail(attemptId)
-      .then(setDetail)
-      .catch(() => setIsError(true))
-      .finally(() => setIsLoading(false));
-  }, [attemptId]);
+  const { data: detail, isLoading, isError } = useQuery({
+    queryKey: ["quizHistoryDetail", attemptId],
+    queryFn: () => getQuizHistoryDetail(attemptId!),
+    enabled: !!attemptId,
+  });
 
   if (isLoading) {
     return (

components/features/my-page/quizzes/WrongQuizListWrapper.tsx

@@ -1,60 +1,37 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
 import { WrongQuizList } from "./WrongQuizList";
 import { WrongQuizListItemSkeleton } from "./WrongQuizListItemSkeleton";
-import { fetchMyQuizHistory } from "@/lib/mock/my-page-wrong-quizzes";
-import type { MyPageQuizHistoryResponse } from "@/types/myPage";
+import { getMyQuizHistory } from "@/lib/api/endpoints/users";
 
 type SortOrder = "newest" | "oldest";
 
 export function WrongQuizListWrapper() {
-  const [data, setData] = useState<MyPageQuizHistoryResponse | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [isError, setIsError] = useState(false);
   const [sort, setSort] = useState<SortOrder>("newest");
   const [page, setPage] = useState(0);
 
-  useEffect(() => {
-    let cancelled = false;
-
-    fetchMyQuizHistory({ sort, page, size: 10, wrongOnly: true })
-      .then((res) => {
-        if (!cancelled) setData(res);
-      })
-      .catch(() => {
-        if (!cancelled) setIsError(true);
-      })
-      .finally(() => {
-        if (!cancelled) setIsLoading(false);
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [sort, page]);
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ["myQuizHistory", sort, page],
+    queryFn: () =>
+      getMyQuizHistory({
+        passed: false,
+        sort,
+        page,
+        size: 10,
+      }),
+  });
 
   const handleSortChange = (value: SortOrder) => {
     setSort(value);
     setPage(0);
-    setIsLoading(true);
-    setIsError(false);
   };
 
   const handlePageChange = (nextPage: number) => {
     setPage(nextPage - 1);
-    setIsLoading(true);
-    setIsError(false);
   };
 
-  if (isError) {
-    return (
-      <p className="text-sm text-muted-foreground">
-        불러오는 중 오류가 발생했습니다.
-      </p>
-    );
-  }
-
   if (isLoading) {
     return (
       <div className="divide-y divide-border">
@@ -65,6 +42,14 @@ export function WrongQuizListWrapper() {
     );
   }
 
+  if (isError) {
+    return (
+      <p className="py-10 text-center text-sm text-muted-foreground">
+        불러오는 중 오류가 발생했습니다.
+      </p>
+    );
+  }
+
   return (
     <WrongQuizList
       quizzes={data?.content ?? []}

components/features/my-page/quizzes/WrongQuizSection.tsx

@@ -1,30 +1,25 @@
 "use client";
 
-import { useEffect, useState } from "react";
 import Link from "next/link";
 import { ArrowRight } from "lucide-react";
 import { Skeleton } from "@/components/ui/skeleton";
+import { useQuery } from "@tanstack/react-query";
 import { WrongQuizCard } from "./WrongQuizCard";
-import { fetchMyWrongQuizzesPreview } from "@/lib/mock/my-page-wrong-quizzes";
-import type { MyPageQuizHistory } from "@/types/myPage";
+import { getMyQuizHistory } from "@/lib/api/endpoints/users";
 
 export function WrongQuizSection() {
-  const [quizzes, setQuizzes] = useState<MyPageQuizHistory[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [isError, setIsError] = useState(false);
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ["myQuizHistoryPreview"],
+    queryFn: () =>
+      getMyQuizHistory({
+        passed: false,
+        page: 0,
+        size: 4,
+        sort: "newest",
+      }),
+  });
 
-  useEffect(() => {
-    fetchMyWrongQuizzesPreview(4)
-      .then((data) => {
-        setQuizzes(data);
-      })
-      .catch(() => {
-        setIsError(true);
-      })
-      .finally(() => {
-        setIsLoading(false);
-      });
-  }, []);
+  const quizzes = data?.content ?? [];
 
   return (
     <section>
@@ -39,11 +34,7 @@ export function WrongQuizSection() {
         </Link>
       </div>
 
-      {isError ? (
-        <p className="text-sm text-muted-foreground">
-          불러오는 중 오류가 발생했습니다.
-        </p>
-      ) : isLoading ? (
+      {isLoading ? (
         <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
           {Array.from({ length: 4 }).map((_, i) => (
             <div
@@ -59,6 +50,10 @@ export function WrongQuizSection() {
             </div>
           ))}
         </div>
+      ) : isError ? (
+        <p className="text-sm text-muted-foreground">
+          불러오는 중 오류가 발생했습니다.
+        </p>
       ) : quizzes.length === 0 ? (
         <p className="text-sm text-muted-foreground">틀린 퀴즈가 없습니다.</p>
       ) : (

components/features/my-page/scraps/ScrappedPostsList.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { ChevronDown, Search } from "lucide-react";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
@@ -10,10 +10,10 @@ import {
   DropdownMenuRadioItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { useQuery } from "@tanstack/react-query";
 import { ScrappedPostListItem } from "./ScrappedPostListItem";
 import { MyPagePagination } from "../MyPagePagination";
-import { fetchMyScraps } from "@/lib/mock/my-page-scraps";
-import type { MyPageScrapResponse } from "@/types/myPage";
+import { getMyScraps } from "@/lib/api/endpoints/users";
 
 type SortOrder = "newest" | "oldest";
 
@@ -32,50 +32,33 @@ function ListItemSkeleton() {
 }
 
 export function ScrappedPostsList() {
-  const [data, setData] = useState<MyPageScrapResponse | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [isError, setIsError] = useState(false);
   const [query, setQuery] = useState("");
   const [sort, setSort] = useState<SortOrder>("newest");
   const [page, setPage] = useState(0);
 
-  useEffect(() => {
-    let cancelled = false;
-
-    fetchMyScraps({ q: query || undefined, sort, page, size: 10 })
-      .then((res) => {
-        if (!cancelled) setData(res);
-      })
-      .catch(() => {
-        if (!cancelled) setIsError(true);
-      })
-      .finally(() => {
-        if (!cancelled) setIsLoading(false);
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [query, sort, page]);
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ["myScraps", query.trim(), sort, page],
+    queryFn: () =>
+      getMyScraps({
+        q: query.trim() || undefined,
+        sort,
+        page,
+        size: 10,
+      }),
+  });
 
   const handleQueryChange = (value: string) => {
     setQuery(value);
     setPage(0);
-    setIsLoading(true);
-    setIsError(false);
   };
 
   const handleSortChange = (value: string) => {
     setSort(value as SortOrder);
     setPage(0);
-    setIsLoading(true);
-    setIsError(false);
   };
 
   const handlePageChange = (nextPage: number) => {
     setPage(nextPage - 1);
-    setIsLoading(true);
-    setIsError(false);
   };
 
   if (isLoading) {

components/features/my-page/scraps/ScrappedPostsSection.tsx

@@ -1,23 +1,24 @@
 "use client";
 
-import { useEffect, useState } from "react";
 import Link from "next/link";
 import { ArrowRight } from "lucide-react";
 import { Skeleton } from "@/components/ui/skeleton";
+import { useQuery } from "@tanstack/react-query";
 import { ScrappedPostCard } from "./ScrappedPostCard";
-import { fetchMyScrapsPreview } from "@/lib/mock/my-page-scraps";
-import type { MyPageScrap } from "@/types/myPage";
+import { getMyScraps } from "@/lib/api/endpoints/users";
 
 export function ScrappedPostsSection() {
-  const [scraps, setScraps] = useState<MyPageScrap[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ["myScrapsPreview"],
+    queryFn: () =>
+      getMyScraps({
+        page: 0,
+        size: 4,
+        sort: "newest",
+      }),
+  });
 
-  useEffect(() => {
-    fetchMyScrapsPreview(4).then((res) => {
-      setScraps(res.content);
-      setIsLoading(false);
-    });
-  }, []);
+  const scraps = data?.content ?? [];
 
   return (
     <section>
@@ -51,6 +52,8 @@ export function ScrappedPostsSection() {
             </div>
           ))}
         </div>
+      ) : isError ? (
+        <p className="text-sm text-muted-foreground">불러오는 중 오류가 발생했습니다.</p>
       ) : scraps.length === 0 ? (
         <p className="text-sm text-muted-foreground">스크랩한 글이 없습니다.</p>
       ) : (

lib/api/endpoints/quizzes.ts

@@ -7,6 +7,7 @@ import type {
   QuizSubmitResponse,
   QuizLevel,
 } from "@/types/quiz";
+import type { QuizHistoryDetail } from "@/types/myPage";
 
 export const quizzesEndpoints = {
   /**
@@ -49,3 +50,10 @@ export const quizzesEndpoints = {
       .then((r) => r.data);
   },
 };
+
+export async function getQuizHistoryDetail(
+  attemptId: string,
+): Promise<QuizHistoryDetail> {
+  const res = await apiClient.get(`/quiz-history/${attemptId}`);
+  return res.data.data;
+}

lib/api/endpoints/users.ts

@@ -1,6 +1,7 @@
 import { apiClient } from "../client";
 import type { ApiResponse } from "@/types/api";
 import type { UserProfileResponse } from "@/types/userProfile";
+import type { MyPageScrapResponse, MyPageQuizHistoryResponse } from "@/types/myPage";
 
 export interface UpdateMeRequest {
   nickname?: string;
@@ -47,3 +48,23 @@ export const usersEndpoints = {
       .then((r) => r.data);
   },
 };
+
+export async function getMyQuizHistory(params?: {
+  sort?: "newest" | "oldest";
+  page?: number;
+  size?: number;
+  passed?: boolean;
+}): Promise<MyPageQuizHistoryResponse> {
+  const res = await apiClient.get("/users/me/quiz-history", { params });
+  return res.data.data;
+}
+
+export async function getMyScraps(params?: {
+  q?: string;
+  sort?: "newest" | "oldest";
+  page?: number;
+  size?: number;
+}): Promise<MyPageScrapResponse> {
+  const res = await apiClient.get("/users/me/scraps", { params });
+  return res.data.data;
+}