Implement transaction history page

README.md

@@ -120,17 +120,17 @@
 
 #### 2.2 Payment Management (PF)
 
-| No.  | Requirement Name                | Requirement Details                            | Priority |
-| ---- | ------------------------------- | ---------------------------------------------- | -------- |
-| PF01 | Prepare Payment                 | Prepare payment using PortOne API              | Required |
-| PF02 | Verify Payment & Grant Currency | Verify payment and grant in-game currency      | Required |
-| PF03 | Receive PortOne Webhook         | Receive re-verification webhook from PortOne   | Required |
-| PF04 | View Purchase History           | View user's own purchase history               | Required |
-| PF05 | View Purchase Details           | View detailed purchase information             | Required |
-| PF06 | Request Refund                  | Request refund for purchased currency          | Required |
-| PF07 | View Refund History             | View user's refund history                     | Required |
-| PF08 | Check Refund Eligibility        | Check if purchase is eligible for refund       | Required |
-| PF09 | Payment Failure Notification    | Alert users of payment failures (errors, etc.) | Required |
+| No.  | Requirement Name               | Requirement Details                            | Priority |
+| ---- | ------------------------------ | ---------------------------------------------- | -------- |
+| PF01 | Prepare Payment                | Prepare payment using PortOne API              | Required |
+| PF02 | Verify Payment & lang Currency | Verify payment and lang in-game currency       | Required |
+| PF03 | Receive PortOne Webhook        | Receive re-verification webhook from PortOne   | Required |
+| PF04 | View Purchase History          | View user's own purchase history               | Required |
+| PF05 | View Purchase Details          | View detailed purchase information             | Required |
+| PF06 | Request Refund                 | Request refund for purchased currency          | Required |
+| PF07 | View Refund History            | View user's refund history                     | Required |
+| PF08 | Check Refund Eligibility       | Check if purchase is eligible for refund       | Required |
+| PF09 | Payment Failure Notification   | Alert users of payment failures (errors, etc.) | Required |
 
 **Key Features**:
 

src/App.tsx

@@ -22,6 +22,7 @@ import StorePurchaseSuccessPage from "./pages/store/StorePurchaseSuccessPage";
 import StorePurchaseFailurePage from "./pages/store/StorePurchaseFailurePage";
 import FollowerPage from "./pages/follower/FollowerPage";
 import FollowingPage from "./pages/following/FollowingPage";
+import WalletHistoryPage from "./pages/wallet/WalletHistoryPage";
 
 function App() {
   const userType = useAuthStore((state: any) => state.user?.userType);
@@ -71,6 +72,7 @@ function App() {
         <Route path="/store/success" element={<StorePurchaseSuccessPage />} />
         <Route path="/store/failure" element={<StorePurchaseFailurePage />} />
         <Route path="/language" element={<LanguageStorePage />} />
+        <Route path="/wallet/history" element={<WalletHistoryPage />} />
 
         {/* 공개 라우트로 전환: 메인 페이지는 인증 없이 접근 가능 */}
         <Route path="/main/*" element={<MainPage />} />

src/features/products/graphql/queries.ts

@@ -0,0 +1,37 @@
+import { gql } from "@apollo/client";
+
+export const GET_PRODUCTS = gql`
+  query GetProducts($page: Int, $limit: Int) {
+    products(page: $page, limit: $limit) {
+      items {
+        id
+        name
+        description
+        price
+        bonus
+        amount
+        currency
+      }
+      pageInfo {
+        page
+        limit
+        total
+        totalPages
+      }
+    }
+  }
+`;
+
+export const GET_PRODUCT = gql`
+  query GetProduct($id: ID!) {
+    product(id: $id) {
+      id
+      name
+      description
+      price
+      bonus
+      amount
+      currency
+    }
+  }
+`;

src/features/ranking/graphql/queries.ts

@@ -0,0 +1,20 @@
+import { gql } from "@apollo/client";
+
+export const GET_RANKINGS = gql`
+  query GetRankings($game: String!, $period: String!, $limit: Int) {
+    rankings(game: $game, period: $period, limit: $limit) {
+      items {
+        userId
+        nickname
+        score
+        typingSpeed
+        rank
+      }
+      myRank {
+        rank
+        score
+        typingSpeed
+      }
+    }
+  }
+`;

src/features/wallet/graphql/queries.ts

@@ -0,0 +1,35 @@
+import { gql } from "@apollo/client";
+
+export const GET_WALLET_TRANSACTIONS = gql`
+  query GetWalletTransactions(
+    $page: Int
+    $limit: Int
+    $type: String
+    $from: String
+    $to: String
+  ) {
+    walletTransactions(
+      page: $page
+      limit: $limit
+      type: $type
+      from: $from
+      to: $to
+    ) {
+      items {
+        id
+        type
+        amount
+        balanceAfter
+        createdAt
+        description
+      }
+      pageInfo {
+        page
+        limit
+        total
+        totalPages
+        hasNextPage
+      }
+    }
+  }
+`;

src/pages/follower/FollowerPage.test.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
 import { MockedProvider } from "@apollo/client/testing/react";
 import { BrowserRouter } from "react-router-dom";
-import { describe, it, expect, vi } from "vitest";
+import { describe, it, expect, vi, beforeEach } from "vitest";
 import FollowerPage from "./FollowerPage";
-import { GET_FOLLOWERS } from "@/features/user/graphql/follow-operations";
+import { GET_FOLLOWERS } from "../../features/user/graphql/follow-operations";
 
 // Mock the Header component
 vi.mock("@/components/common/Header", () => ({
@@ -78,6 +79,32 @@ const mocks = [
       data: mockFollowersData,
     },
   },
+  // Search query: "Esthera"
+  {
+    request: {
+      query: GET_FOLLOWERS,
+      variables: {
+        page: 1,
+        limit: 20,
+        search: "Esthera",
+      },
+    },
+    result: {
+      data: {
+        followers: {
+          items: [mockFollowersData.followers.items[0]],
+          pageInfo: {
+            page: 1,
+            limit: 20,
+            total: 1,
+            totalPages: 1,
+            hasNextPage: false,
+            hasPreviousPage: false,
+          },
+        },
+      },
+    },
+  },
 ];
 
 describe("FollowerPage", () => {
@@ -87,6 +114,7 @@ describe("FollowerPage", () => {
 
   it("renders follower page with modal", async () => {
     render(
+      // @ts-expect-error addTypename is supported at runtime in our Apollo version
       <MockedProvider mocks={mocks} addTypename={false}>
         <BrowserRouter>
           <FollowerPage />
@@ -106,12 +134,13 @@ describe("FollowerPage", () => {
     expect(screen.getByPlaceholderText("Search")).toBeInTheDocument();
 
     // Check if follower names are displayed
-    expect(screen.getByText("Esthera Jackson")).toBeInTheDocument();
-    expect(screen.getByText("Alexa Liras")).toBeInTheDocument();
+    await screen.findByText("Esthera Jackson");
+    await screen.findByText("Alexa Liras");
   });
 
   it("handles search functionality", async () => {
     render(
+      // @ts-expect-error addTypename is supported at runtime in our Apollo version
       <MockedProvider mocks={mocks} addTypename={false}>
         <BrowserRouter>
           <FollowerPage />
@@ -134,6 +163,7 @@ describe("FollowerPage", () => {
 
   it("handles close button click", async () => {
     render(
+      // @ts-expect-error addTypename is supported at runtime in our Apollo version
       <MockedProvider mocks={mocks} addTypename={false}>
         <BrowserRouter>
           <FollowerPage />
@@ -156,6 +186,7 @@ describe("FollowerPage", () => {
 
   it("navigates back to mypage when close button is clicked", async () => {
     render(
+      // @ts-expect-error addTypename is supported at runtime in our Apollo version
       <MockedProvider mocks={mocks} addTypename={false}>
         <BrowserRouter>
           <FollowerPage />

src/pages/follower/FollowerPage.tsx

@@ -1,21 +1,21 @@
 import React, { useState, useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 import { Box } from "../../../styled-system/jsx";
-import board1bg from "@/assets/images/board1.jpg";
 import Header from "@/components/common/Header";
 import FollowerModal from "./components/FollowerModal";
-import { mockFollowers } from "@/features/user/mock-data";
 import multibg from "@/assets/images/multi_background.png";
+import { useFollowers } from "./hooks/useFollowers";
 
 const FollowerPage: React.FC = () => {
   const navigate = useNavigate();
   const [searchQuery, setSearchQuery] = useState<string>("");
 
-  // Filter followers based on search query
-  const filteredFollowers = mockFollowers.filter(
-    (follower) =>
-      follower.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      follower.email.toLowerCase().includes(searchQuery.toLowerCase())
+  const { data, loading, error, hasNextPage, loadMore, refetch } = useFollowers(
+    {
+      page: 1,
+      search: searchQuery,
+      limit: 20,
+    }
   );
 
   const handleSearch = useCallback((query: string) => {
@@ -80,15 +80,15 @@ const FollowerPage: React.FC = () => {
         >
           {/* Modal Container */}
           <FollowerModal
-            followers={filteredFollowers}
-            loading={false}
-            error={null}
+            followers={data?.items || []}
+            loading={loading}
+            error={error}
             searchQuery={searchQuery}
             onSearch={handleSearch}
-            onLoadMore={() => {}}
-            hasNextPage={false}
+            onLoadMore={loadMore}
+            hasNextPage={hasNextPage}
             onClose={handleClose}
-            onRefetch={() => {}}
+            onRefetch={refetch}
           />
         </div>
       </Box>

src/pages/follower/components/UserItem.tsx

@@ -1,6 +1,11 @@
 import React, { useState, useCallback } from "react";
 import { css } from "../../../../styled-system/css";
 import { FollowerUser } from "@/features/user/types/follow-types";
+import { useMutation } from "@apollo/client/react";
+import {
+  FOLLOW_USER,
+  UNFOLLOW_USER,
+} from "@/features/user/graphql/follow-operations";
 
 interface UserItemProps {
   user: FollowerUser;
@@ -9,18 +14,26 @@ interface UserItemProps {
 const UserItem: React.FC<UserItemProps> = ({ user }) => {
   const [isFollowing, setIsFollowing] = useState(user.isFollowing);
   const [isLoading, setIsLoading] = useState(false);
+  const [followUser] = useMutation(FOLLOW_USER);
+  const [unfollowUser] = useMutation(UNFOLLOW_USER);
 
   const handleFollowToggle = useCallback(async () => {
     if (isLoading) return;
-
     setIsLoading(true);
-
-    // Simulate API call delay
-    setTimeout(() => {
-      setIsFollowing(!isFollowing);
+    try {
+      if (isFollowing) {
+        await unfollowUser({ variables: { userId: user.id } });
+        setIsFollowing(false);
+      } else {
+        await followUser({ variables: { userId: user.id } });
+        setIsFollowing(true);
+      }
+    } catch {
+      // keep previous state on error
+    } finally {
       setIsLoading(false);
-    }, 500);
-  }, [isFollowing, isLoading]);
+    }
+  }, [isFollowing, isLoading, followUser, unfollowUser, user.id]);
 
   return (
     <div