feat: 절약 팁 조회와 북마크를 연동한다 (#249)

* feat: 절약 팁 조회와 북마크를 연동한다

* fix: 절약 팁 전체 목록을 조회한다

Author: jongse7

apps/web/app/(tabs)/benefits/_components/benefits-explorer.test.tsx

@@ -3,6 +3,7 @@ import type { PolicyDetail, PolicySummary } from "@repo/schema/policy";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { fetchSavedPolicies } from "@/api/bookmark";
 import { bookmarkPolicy, fetchPolicies, fetchPolicyDetail, unbookmarkPolicy } from "@/api/policy";
+import { fetchAllSavingTips } from "@/api/tip";
 import { POLICY_PAGE_SIZE } from "@/lib/queries/policy";
 import { act, fireEvent, render, screen, waitFor } from "@/lib/test/react";
 import { BenefitsExplorer } from "./benefits-explorer";
@@ -15,6 +16,12 @@ vi.mock("@/api/policy", () => ({
 }));
 
 vi.mock("@/api/bookmark", () => ({ fetchSavedPolicies: vi.fn() }));
+vi.mock("@/api/tip", () => ({
+  bookmarkSavingTip: vi.fn(),
+  fetchAllSavingTips: vi.fn(),
+  fetchSavingTips: vi.fn(),
+  unbookmarkSavingTip: vi.fn(),
+}));
 
 vi.mock("next/navigation", () => ({
   useSearchParams: () => new URLSearchParams(window.location.search),
@@ -69,6 +76,26 @@ beforeEach(() => {
   vi.mocked(fetchSavedPolicies).mockResolvedValue(SAVED);
   vi.mocked(bookmarkPolicy).mockResolvedValue(undefined);
   vi.mocked(unbookmarkPolicy).mockResolvedValue(undefined);
+  vi.mocked(fetchAllSavingTips).mockResolvedValue([
+    {
+      bookmarked: false,
+      category: "식비",
+      description: "배달 메뉴 대신 집에서 직접 만드는 레시피 찾아보기",
+      id: 1,
+      sourceUrl: "https://www.youtube.com/watch?v=nZw2A76aZaw",
+      subcategory: "배달음식",
+      title: "집밥 레시피 활용팁",
+    },
+    {
+      bookmarked: false,
+      category: "생활",
+      description: "중고구매 팁",
+      id: 2,
+      sourceUrl: "https://example.com/tip",
+      subcategory: "의류",
+      title: "당근마켓 중고활용팁",
+    },
+  ]);
   window.history.replaceState(null, "", "/benefits");
 });
 
@@ -407,14 +434,14 @@ describe("BenefitsExplorer", () => {
     expect(housingFilter).toHaveClass("text-gray-300", "focus-visible:ring-2");
   });
 
-  it("절약 팁 탭은 정적 목록을 보이고 정책 목록을 조회하지 않는다", async () => {
+  it("절약 팁 탭은 API 목록을 보이고 정책 목록을 다시 조회하지 않는다", async () => {
     render(<BenefitsExplorer />);
     await screen.findByText("혜택 1");
     vi.mocked(fetchPolicies).mockClear();
 
     fireEvent.click(screen.getByRole("tab", { name: "절약 팁" }));
 
-    expect(screen.getByText("집밥 레시피 활용팁")).toBeInTheDocument();
+    expect(await screen.findByText("집밥 레시피 활용팁")).toBeInTheDocument();
     expect(
       screen.getByText("배달 메뉴 대신 집에서 직접 만드는 레시피 찾아보기"),
     ).toBeInTheDocument();
@@ -424,17 +451,17 @@ describe("BenefitsExplorer", () => {
     );
     expect(screen.queryByText("혜택 1")).not.toBeInTheDocument();
     expect(fetchPolicies).not.toHaveBeenCalled();
+    expect(fetchAllSavingTips).toHaveBeenCalledWith(null, 100);
   });
 
-  it("절약 팁은 미션과 같은 대분류로 목록을 좁힌다", async () => {
+  it("절약 팁은 미션과 같은 대분류로 API 목록을 좁힌다", async () => {
     render(<BenefitsExplorer />);
     await screen.findByText("혜택 1");
 
     fireEvent.click(screen.getByRole("tab", { name: "절약 팁" }));
     fireEvent.click(screen.getByRole("button", { name: "생활" }));
 
-    expect(screen.getByText("당근마켓 중고활용팁")).toBeInTheDocument();
-    expect(screen.queryByText("집밥 레시피 활용팁")).not.toBeInTheDocument();
+    await waitFor(() => expect(fetchAllSavingTips).toHaveBeenCalledWith("생활", 100));
     expect(screen.getByRole("button", { name: "생활" })).toHaveAttribute("aria-pressed", "true");
   });
 

apps/web/app/(tabs)/benefits/_components/saving-tip-list.test.tsx

@@ -1,71 +1,78 @@
+import type { SavingTipSummary } from "@repo/schema/tip";
 import { beforeEach, describe, expect, it, vi } from "vitest";
+import { bookmarkSavingTip, fetchAllSavingTips, unbookmarkSavingTip } from "@/api/tip";
 import { fireEvent, render, screen, waitFor } from "@/lib/test/react";
+import { SavingTipList } from "./saving-tip-list";
 
-const bookmarkTip = vi.fn();
-const fetchTips = vi.fn();
-const unbookmarkTip = vi.fn();
-
-vi.mock("@repo/bridge", () => ({ isNativeApp: () => false }));
-vi.mock("@/lib/open-external", () => ({ openExternalLink: vi.fn() }));
 vi.mock("@/api/tip", () => ({
-  bookmarkTip: (id: number) => bookmarkTip(id),
-  fetchTips: () => fetchTips(),
-  unbookmarkTip: (id: number) => unbookmarkTip(id),
+  bookmarkSavingTip: vi.fn(),
+  fetchAllSavingTips: vi.fn(),
+  fetchSavingTips: vi.fn(),
+  unbookmarkSavingTip: vi.fn(),
 }));
 
-import { SavingTipList } from "./saving-tip-list";
+const TIPS: SavingTipSummary[] = [
+  {
+    bookmarked: false,
+    category: "식비",
+    description: "배달 메뉴 대신 집에서 직접 만드는 레시피 찾아보기",
+    id: 1,
+    sourceUrl: "https://www.youtube.com/watch?v=nZw2A76aZaw",
+    subcategory: "배달음식",
+    title: "집밥 레시피 활용팁",
+  },
+  {
+    bookmarked: true,
+    category: "생활",
+    description: "당근마켓서 중고구매하고 안 쓰는 옷은 판매하기",
+    id: 2,
+    sourceUrl: "https://example.com/tip",
+    subcategory: "의류",
+    title: "당근마켓 중고활용팁",
+  },
+];
 
 describe("SavingTipList", () => {
   beforeEach(() => {
     vi.clearAllMocks();
-    fetchTips.mockResolvedValue([
-      { id: 101, title: "집밥 레시피 활용팁", category: "식비", bookmarked: false },
-      { id: 102, title: "밀프렙 식단관리팁", category: "식비", bookmarked: false },
-    ]);
-    bookmarkTip.mockResolvedValue(undefined);
-    unbookmarkTip.mockResolvedValue(undefined);
+    vi.mocked(fetchAllSavingTips).mockResolvedValue(TIPS);
+    vi.mocked(bookmarkSavingTip).mockResolvedValue(undefined);
+    vi.mocked(unbookmarkSavingTip).mockResolvedValue(undefined);
   });
 
-  it("팁 북마크 API로 별 저장을 요청한다", async () => {
+  it("서버에서 받은 팁과 원문 링크를 그린다", async () => {
     render(<SavingTipList />);
 
-    const star = await screen.findByRole("button", { name: "집밥 레시피 활용팁 저장" });
-    await waitFor(() => expect(star).toHaveAttribute("aria-busy", "false"));
-    fireEvent.click(star);
-
-    expect(star).toHaveAttribute("aria-pressed", "true");
-    await waitFor(() => expect(bookmarkTip).toHaveBeenCalledWith(101));
+    expect(await screen.findByText("집밥 레시피 활용팁")).toBeInTheDocument();
+    expect(fetchAllSavingTips).toHaveBeenCalledWith(null, 100);
+    expect(screen.getByRole("link", { name: /집밥 레시피 활용팁/ })).toHaveAttribute(
+      "href",
+      "https://www.youtube.com/watch?v=nZw2A76aZaw",
+    );
   });
 
-  it("저장됨 화면에서는 API가 저장됨으로 준 팁만 보여준다", async () => {
-    fetchTips.mockResolvedValue([
-      { id: 101, title: "집밥 레시피 활용팁", category: "식비", bookmarked: false },
-      { id: 102, title: "밀프렙 식단관리팁", category: "식비", bookmarked: true },
-    ]);
+  it("카테고리를 누르면 해당 카테고리 API를 다시 조회한다", async () => {
+    render(<SavingTipList />);
+    await screen.findByText("집밥 레시피 활용팁");
+
+    fireEvent.click(screen.getByRole("button", { name: "생활" }));
 
+    await waitFor(() => expect(fetchAllSavingTips).toHaveBeenCalledWith("생활", 100));
+  });
+
+  it("저장한 팁만 저장 목록에 남긴다", async () => {
     render(<SavingTipList savedOnly />);
 
-    expect(await screen.findByText("밀프렙 식단관리팁")).toBeInTheDocument();
+    expect(await screen.findByText("당근마켓 중고활용팁")).toBeInTheDocument();
     expect(screen.queryByText("집밥 레시피 활용팁")).not.toBeInTheDocument();
   });
 
-  it("북마크 요청이 끝날 때까지 같은 팁을 다시 토글하지 않는다", async () => {
-    let completeSave: (() => void) | undefined;
-    bookmarkTip.mockImplementation(
-      () =>
-        new Promise<void>((resolve) => {
-          completeSave = resolve;
-        }),
-    );
+  it("별을 누르면 서버 북마크 API를 호출한다", async () => {
     render(<SavingTipList />);
+    await screen.findByText("집밥 레시피 활용팁");
 
-    const star = await screen.findByRole("button", { name: "집밥 레시피 활용팁 저장" });
-    await waitFor(() => expect(star).toHaveAttribute("aria-busy", "false"));
-    fireEvent.click(star);
-    fireEvent.click(star);
+    fireEvent.click(screen.getByRole("button", { name: "집밥 레시피 활용팁 저장" }));
 
-    await waitFor(() => expect(bookmarkTip).toHaveBeenCalledTimes(1));
-    completeSave?.();
-    await waitFor(() => expect(star).toHaveAttribute("aria-busy", "false"));
+    await waitFor(() => expect(bookmarkSavingTip).toHaveBeenCalledWith(1));
   });
 });