From aa2ea96c1f3984bc01feb61dcb4a59fb893f5a4e Mon Sep 17 00:00:00 2001
From: dasosann <goodtony0403@gmail.com>
Date: Mon, 16 Mar 2026 15:50:37 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EB=A9=94=EC=9D=B8=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20api=EC=97=B0=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/main/_components/MyCoinSection.tsx  |  33 ++++++-
 app/main/_components/ScreenMainPage.tsx | 125 +++++-------------------
 app/main/page.tsx                       |  39 +++++++-
 hooks/useItems.ts                       |  42 ++++++++
 hooks/useMatchingHistory.ts             |  66 +++++++++++++
 5 files changed, 202 insertions(+), 103 deletions(-)
 create mode 100644 hooks/useItems.ts
 create mode 100644 hooks/useMatchingHistory.ts

diff --git a/app/main/_components/MyCoinSection.tsx b/app/main/_components/MyCoinSection.tsx
index ff2db8c..89a5e19 100644
--- a/app/main/_components/MyCoinSection.tsx
+++ b/app/main/_components/MyCoinSection.tsx
@@ -1,7 +1,32 @@
+import { useItems } from "@/hooks/useItems";
 import Image from "next/image";
 import React from "react";
 
 const MyCoinSection = () => {
+  const { data, isLoading, isError } = useItems();
+
+  if (isLoading) {
+    return (
+      <section className="flex h-[38px] w-full animate-pulse items-center justify-between rounded-full border border-white/30 bg-white/20 pr-2 pl-4 backdrop-blur-[50px]">
+        <div className="flex items-center">
+          <div className="h-4 w-12 rounded bg-white/30" />
+          <div className="mr-2 ml-4 h-5 w-5 rounded-full bg-white/30" />
+          <div className="h-4 w-8 rounded bg-white/30" />
+          <div className="mx-4 h-4 w-px bg-black/10" />
+          <div className="mr-2 h-5 w-5 rounded-full bg-white/30" />
+          <div className="h-4 w-8 rounded bg-white/30" />
+        </div>
+        <div className="h-[26px] w-[58px] rounded-full bg-white/30" />
+      </section>
+    );
+  }
+
+  if (isError || !data) {
+    return null;
+  }
+
+  const { matchingTicketCount, optionTicketCount } = data.data;
+
   return (
     <section className="flex h-[38px] w-full items-center justify-between rounded-full border border-white/30 bg-white/50 pr-2 pl-4 backdrop-blur-[50px]">
       <div className="flex items-center">
@@ -13,7 +38,9 @@ const MyCoinSection = () => {
           height={20}
           className="mr-2 ml-4"
         />
-        <span className="typo-14-600 text-color-text-caption1">1개</span>
+        <span className="typo-14-600 text-color-text-caption1">
+          {matchingTicketCount}개
+        </span>
         <div className="mx-4 h-4 w-px bg-black/30" />
         <Image
           src="/main/elec-bulb.png"
@@ -22,7 +49,9 @@ const MyCoinSection = () => {
           width={20}
           height={20}
         />
-        <span className="typo-14-600 text-color-text-caption1">1개</span>
+        <span className="typo-14-600 text-color-text-caption1">
+          {optionTicketCount}개
+        </span>
       </div>
       <button className="bg-milky-pink typo-11-700 h-[26px] w-[58px] rounded-full text-white">
         구매하기
diff --git a/app/main/_components/ScreenMainPage.tsx b/app/main/_components/ScreenMainPage.tsx
index eb531d7..84448c3 100644
--- a/app/main/_components/ScreenMainPage.tsx
+++ b/app/main/_components/ScreenMainPage.tsx
@@ -11,9 +11,11 @@ import {
 import BusinessInfo from "@/components/common/BusinessInfo";
 import NoticeSection from "./NoticeSection";
 import ProfileSlider from "./ProfileSlider";
-import { ProfileData } from "@/lib/types/profile";
+import { ProfileData, ContactFrequency } from "@/lib/types/profile";
 import ChargeRequestWaiting from "./ChargeRequestWaiting";
 
+import { useMatchingHistory } from "@/hooks/useMatchingHistory";
+
 const ScreenMainPage = () => {
   // 실제 서비스 시에는 서버에서 받아온 데이터(notice)가 있는지 여부에 따라 렌더링을 결정할 수 있습니다.
   const noticeData = {
@@ -24,6 +26,7 @@ const ScreenMainPage = () => {
   };
 
   const [isNoticeVisible, setIsNoticeVisible] = useState(false);
+  const { data: historyData, isLoading } = useMatchingHistory();
 
   useEffect(() => {
     // 로컬스토리지에 해당 공지 ID가 저장되어 있는지 확인
@@ -42,6 +45,7 @@ const ScreenMainPage = () => {
   };
 
   // 실제 서비스 시에는 서버에서 받아온 데이터(profiles)를 넘겨줍니다.
+  /*
   const mockProfileData: ProfileData[] = [
     {
       memberId: 1,
@@ -58,104 +62,27 @@ const ScreenMainPage = () => {
       profileImageUrl: "/main/cat.png",
       socialAccountId: "winterizcoming_",
     },
-    {
-      memberId: 2,
-      nickname: "코매칭짱",
-      birthDate: "2002-05-15",
-      major: "컴퓨터정보공학부",
-      mbti: "INFJ",
-      contactFrequency: "FREQUENT",
-      hobbies: [
-        { name: "🎬 영화감상", category: "문화" },
-        { name: "📖 독서", category: "문화" },
-        { name: "🏊 수영", category: "스포츠" },
-      ],
-      advantages: ["긍정적인 에너지", "솔직함", "유머러스함"],
-      profileImageUrl: "/main/dog.png",
-      socialType: "INSTAGRAM",
-      socialAccountId: "comatching_king",
-    },
-    {
-      memberId: 3,
-      nickname: "카카오톡유저",
-      birthDate: "2001-10-20",
-      major: "경영학과",
-      mbti: "ENFP",
-      contactFrequency: "NORMAL",
-      hobbies: [
-        { name: "☕ 카페투어", category: "일상" },
-        { name: "🍳 요리", category: "문화" },
-        { name: "🍰 베이킹", category: "문화" },
-      ],
-      advantages: ["공감 능력이 좋음"],
-      profileImageUrl: "/main/cat.png",
-      socialType: "KAKAO",
-      socialAccountId: "kakao_kim",
-    },
-    {
-      memberId: 4,
-      nickname: "봄날의햇살",
-      birthDate: "2003-03-21",
-      major: "산업디자인학과",
-      mbti: "ISFP",
-      contactFrequency: "RARE",
-      hobbies: [
-        { name: "🎨 그림그리기", category: "예술" },
-        { name: "🧶 뜨개질", category: "예술" },
-      ],
-      advantages: ["꼼꼼함", "배려심", "예술적 감각", "성실함"],
-      profileImageUrl: "/main/cat.png",
-      socialAccountId: "",
-    },
-    {
-      memberId: 5,
-      nickname: "밤하늘별",
-      birthDate: "2000-08-12",
-      major: "천문학과",
-      mbti: "INTP",
-      contactFrequency: "NORMAL",
-      hobbies: [
-        { name: "🔭 별보기", category: "자연" },
-        { name: "🧩 퍼즐", category: "문화" },
-        { name: "♟️ 보드게임", category: "놀이" },
-      ],
-      advantages: ["지적인 대화", "차분함"],
-      profileImageUrl: "/main/dog.png",
-      socialType: "INSTAGRAM",
-      socialAccountId: "nightsky_star",
-    },
-    {
-      memberId: 6,
-      nickname: "운동좋아",
-      birthDate: "2001-06-05",
-      major: "체육교육과",
-      mbti: "ESTP",
-      contactFrequency: "FREQUENT",
-      hobbies: [
-        { name: "⚽ 축구", category: "스포츠" },
-        { name: "🧗 클라이밍", category: "스포츠" },
-      ],
-      advantages: ["건강한 정신", "추진력", "밝은 웃음"],
-      profileImageUrl: "/main/cat.png",
-      socialAccountId: "",
-    },
-    {
-      memberId: 7,
-      nickname: "책벌레",
-      birthDate: "2002-11-30",
-      major: "국어국문학과",
-      mbti: "ISTJ",
-      contactFrequency: "RARE",
-      hobbies: [
-        { name: "📚 독서", category: "문화" },
-        { name: "✍️ 글쓰기", category: "문화" },
-      ],
-      advantages: ["진중함", "학구열"],
-      profileImageUrl: "/main/dog.png",
-      socialType: "INSTAGRAM",
-      socialAccountId: "bookworm_kr",
-    },
+    ... (중략)
   ];
+  */
+
+  // 매칭 히스토리 데이터에서 파트너 정보를 추출하여 프로필 목록 생성
+  const profileList: ProfileData[] =
+    historyData?.data.content.map((item) => ({
+      ...item.partner,
+      // API 응답의 partner 정보를 ProfileData 형식에 맞춤
+      nickname: item.partner.nickname,
+      birthDate: item.partner.birthDate ?? undefined,
+      intro: item.partner.intro ?? undefined,
+      profileImageUrl: item.partner.profileImageUrl ?? undefined,
+      socialType: item.partner.socialType ?? undefined,
+      socialAccountId: item.partner.socialAccountId ?? "",
+      contactFrequency: (item.partner.contactFrequency === "자주"
+        ? "FREQUENT"
+        : item.partner.contactFrequency === "보통"
+          ? "NORMAL"
+          : "RARE") as ContactFrequency,
+    })) || [];
 
   return (
     <section className="flex min-h-dvh flex-col items-center gap-4 px-4 pb-4">
@@ -170,7 +97,7 @@ const ScreenMainPage = () => {
         />
       )}
       {/* <NoContactSection /> */}
-      <ProfileSlider profiles={mockProfileData} />
+      {!isLoading && <ProfileSlider profiles={profileList} />}
       <MatchingButton />
       <div className="flex w-full gap-2">
         <SearchMyListButton />
diff --git a/app/main/page.tsx b/app/main/page.tsx
index 8e7aa80..fdf9b3d 100644
--- a/app/main/page.tsx
+++ b/app/main/page.tsx
@@ -1,6 +1,41 @@
+import { serverApi } from "@/lib/server-api";
+import {
+  dehydrate,
+  HydrationBoundary,
+  QueryClient,
+} from "@tanstack/react-query";
 import React from "react";
 import ScreenMainPage from "./_components/ScreenMainPage";
 
-export default function MainPage() {
-  return <ScreenMainPage />;
+import { ItemsResponse } from "@/hooks/useItems";
+import { MatchingHistoryResponse } from "@/hooks/useMatchingHistory";
+
+export default async function MainPage() {
+  const queryClient = new QueryClient();
+
+  // 서버사이드에서 데이터를 미리 가져와서 캐시에 채워줍니다.
+  await Promise.all([
+    queryClient.prefetchQuery({
+      queryKey: ["items"],
+      queryFn: async () => {
+        const res = await serverApi.get<ItemsResponse>({ path: "/api/items" });
+        return res.data;
+      },
+    }),
+    queryClient.prefetchQuery({
+      queryKey: ["matchingHistory"],
+      queryFn: async () => {
+        const res = await serverApi.get<MatchingHistoryResponse>({
+          path: "/api/matching/history",
+        });
+        return res.data;
+      },
+    }),
+  ]);
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <ScreenMainPage />
+    </HydrationBoundary>
+  );
 }
diff --git a/hooks/useItems.ts b/hooks/useItems.ts
new file mode 100644
index 0000000..760efbb
--- /dev/null
+++ b/hooks/useItems.ts
@@ -0,0 +1,42 @@
+import { api } from "@/lib/axios";
+import { useQuery } from "@tanstack/react-query";
+
+interface Item {
+  itemId: number;
+  itemType: string;
+  quantity: number;
+  expiredAt: string;
+}
+
+export interface ItemsResponse {
+  code: string;
+  status: number;
+  message: string;
+  data: {
+    items: {
+      content: Item[];
+      currentPage: number;
+      size: number;
+      totalElements: number;
+      totalPages: number;
+      hasNext: boolean;
+      hasPrevious: boolean;
+    };
+    matchingTicketCount: number;
+    optionTicketCount: number;
+  };
+}
+
+export const fetchItems = async (): Promise<ItemsResponse> => {
+  const { data } = await api.get<ItemsResponse>("/api/items");
+  return data;
+};
+
+export const useItems = () => {
+  return useQuery({
+    queryKey: ["items"],
+    queryFn: fetchItems,
+    staleTime: Infinity, // 충전/소모 전까지는 데이터가 변하지 않으므로 무한정 캐싱
+    gcTime: 1000 * 60 * 60, // 메모리에서 1시간 동안 유지
+  });
+};
diff --git a/hooks/useMatchingHistory.ts b/hooks/useMatchingHistory.ts
new file mode 100644
index 0000000..c7b3546
--- /dev/null
+++ b/hooks/useMatchingHistory.ts
@@ -0,0 +1,66 @@
+import { api } from "@/lib/axios";
+import {
+  Gender,
+  MBTI,
+  SocialType,
+  Hobby,
+  IntroItem,
+} from "@/lib/types/profile";
+import { useQuery } from "@tanstack/react-query";
+
+export interface MatchingPartner {
+  memberId: number;
+  email: string;
+  nickname: string;
+  gender: Gender;
+  birthDate: string | null;
+  mbti: MBTI;
+  intro: string | null;
+  profileImageUrl: string | null;
+  socialType: SocialType | null;
+  socialAccountId: string | null;
+  university: string;
+  major: string;
+  contactFrequency: string; // "적음", "보통", "자주" 등 한글이 올 수 있음
+  hobbies: Hobby[];
+  intros: IntroItem[];
+}
+
+export interface MatchingHistoryItem {
+  historyId: number;
+  partner: MatchingPartner;
+  favorite: boolean;
+  matchedAt: string;
+}
+
+export interface MatchingHistoryResponse {
+  code: string;
+  status: number;
+  message: string;
+  data: {
+    content: MatchingHistoryItem[];
+    currentPage: number;
+    size: number;
+    totalElements: number;
+    totalPages: number;
+    hasNext: boolean;
+    hasPrevious: boolean;
+  };
+}
+
+export const fetchMatchingHistory =
+  async (): Promise<MatchingHistoryResponse> => {
+    const { data } = await api.get<MatchingHistoryResponse>(
+      "/api/matching/history",
+    );
+    return data;
+  };
+
+export const useMatchingHistory = () => {
+  return useQuery({
+    queryKey: ["matchingHistory"],
+    queryFn: fetchMatchingHistory,
+    staleTime: Infinity, // 새로운 매칭이나 즐겨찾기 변경 전까지는 캐시 유지
+    gcTime: 1000 * 60 * 60, // 메모리에서 1시간 동안 유지
+  });
+};

From 9294ab9b28a54f5d04503d46ee91975ccae7e5c4 Mon Sep 17 00:00:00 2001
From: dasosann <goodtony0403@gmail.com>
Date: Mon, 16 Mar 2026 16:06:29 +0900
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=EC=BD=94=EB=93=9C=EB=A6=AC?=
 =?UTF-8?q?=EB=B7=B0=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/main/_components/ScreenMainPage.tsx | 44 +++++--------------------
 hooks/useMatchingHistory.ts             |  9 +++--
 2 files changed, 14 insertions(+), 39 deletions(-)

diff --git a/app/main/_components/ScreenMainPage.tsx b/app/main/_components/ScreenMainPage.tsx
index 84448c3..baacb47 100644
--- a/app/main/_components/ScreenMainPage.tsx
+++ b/app/main/_components/ScreenMainPage.tsx
@@ -44,44 +44,16 @@ const ScreenMainPage = () => {
     setIsNoticeVisible(false);
   };
 
-  // 실제 서비스 시에는 서버에서 받아온 데이터(profiles)를 넘겨줍니다.
-  /*
-  const mockProfileData: ProfileData[] = [
-    {
-      memberId: 1,
-      nickname: "겨울이오길",
-      birthDate: "2004-01-01",
-      major: "정보통신전자공학부",
-      mbti: "ENTP",
-      contactFrequency: "NORMAL",
-      hobbies: [
-        { name: "🎸 인디음악", category: "음악" },
-        { name: "📸 사진찍기", category: "문화" },
-      ],
-      advantages: ["친절함", "경청하는 태도"],
-      profileImageUrl: "/main/cat.png",
-      socialAccountId: "winterizcoming_",
-    },
-    ... (중략)
-  ];
-  */
-
   // 매칭 히스토리 데이터에서 파트너 정보를 추출하여 프로필 목록 생성
   const profileList: ProfileData[] =
-    historyData?.data.content.map((item) => ({
-      ...item.partner,
-      // API 응답의 partner 정보를 ProfileData 형식에 맞춤
-      nickname: item.partner.nickname,
-      birthDate: item.partner.birthDate ?? undefined,
-      intro: item.partner.intro ?? undefined,
-      profileImageUrl: item.partner.profileImageUrl ?? undefined,
-      socialType: item.partner.socialType ?? undefined,
-      socialAccountId: item.partner.socialAccountId ?? "",
-      contactFrequency: (item.partner.contactFrequency === "자주"
-        ? "FREQUENT"
-        : item.partner.contactFrequency === "보통"
-          ? "NORMAL"
-          : "RARE") as ContactFrequency,
+    historyData?.data.content.map(({ partner }) => ({
+      ...partner,
+      // API에서 null로 올 수 있는 필드들만 안전하게 변환
+      intro: partner.intro ?? undefined,
+      socialType: partner.socialType ?? undefined,
+      socialAccountId: partner.socialAccountId ?? "",
+      advantages: partner.advantages ?? undefined,
+      favoriteSong: partner.favoriteSong ?? undefined,
     })) || [];
 
   return (
diff --git a/hooks/useMatchingHistory.ts b/hooks/useMatchingHistory.ts
index c7b3546..6184838 100644
--- a/hooks/useMatchingHistory.ts
+++ b/hooks/useMatchingHistory.ts
@@ -5,6 +5,7 @@ import {
   SocialType,
   Hobby,
   IntroItem,
+  ContactFrequency,
 } from "@/lib/types/profile";
 import { useQuery } from "@tanstack/react-query";
 
@@ -13,17 +14,19 @@ export interface MatchingPartner {
   email: string;
   nickname: string;
   gender: Gender;
-  birthDate: string | null;
+  birthDate: string;
   mbti: MBTI;
   intro: string | null;
-  profileImageUrl: string | null;
+  profileImageUrl: string;
   socialType: SocialType | null;
   socialAccountId: string | null;
   university: string;
   major: string;
-  contactFrequency: string; // "적음", "보통", "자주" 등 한글이 올 수 있음
+  contactFrequency: ContactFrequency;
   hobbies: Hobby[];
   intros: IntroItem[];
+  advantages: string[] | null;
+  favoriteSong: string | null;
 }
 
 export interface MatchingHistoryItem {