[Feat] 기업 상세페이지 북마크 기능 추가 및 API 연동

src/features/bookmark/api/use-delete-bookmark.mutation.ts

@@ -0,0 +1,28 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { api } from "@/shared/api/axios-instance";
+import { meQueryKey } from "@/shared/api/config/query-key";
+
+export const deleteBookmark = async (companyId: number) => {
+  await api.me.removeBookmark(companyId);
+};
+
+interface UseDeleteBookmarkOptions {
+  onSuccess?: () => void;
+  onError?: (error: unknown) => void;
+}
+
+export const useDeleteBookmark = (options?: UseDeleteBookmarkOptions) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (companyId: number) => deleteBookmark(companyId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: meQueryKey.bookmarkCompanyLists(),
+      });
+      options?.onSuccess?.();
+    },
+    onError: options?.onError,
+  });
+};

src/features/bookmark/api/use-get-bookmark-companies.query.ts

@@ -0,0 +1,86 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { api } from "@/shared/api/axios-instance";
+import { meQueryKey } from "@/shared/api/config/query-key";
+
+import type { BookmarkRow } from "../types/bookmark.type";
+
+export type BookmarkCompanySort = "NAME" | "LIKE" | "LATEST" | "OLDEST";
+
+export interface BookmarkCompaniesResponse {
+  content: BookmarkRow[];
+  currentPage: number;
+  totalPage: number;
+  totalElements: number;
+}
+
+interface BookmarkCompanyItemApiResponse {
+  id?: number;
+  companyId?: number;
+  name?: string;
+  createdAt?: string;
+  isConnected?: boolean;
+}
+
+interface BookmarkCompaniesApiResponse {
+  content?: BookmarkCompanyItemApiResponse[];
+  currentPage?: number;
+  totalPage?: number;
+  totalElements?: number;
+}
+
+const isValidBookmarkCompany = (
+  bookmarkCompany: BookmarkCompanyItemApiResponse
+): bookmarkCompany is BookmarkCompanyItemApiResponse & {
+  id: number;
+  companyId: number;
+} => {
+  const { id, companyId } = bookmarkCompany;
+
+  return (
+    typeof id === "number" &&
+    Number.isInteger(id) &&
+    id > 0 &&
+    typeof companyId === "number" &&
+    Number.isInteger(companyId) &&
+    companyId > 0
+  );
+};
+
+export const getBookmarkCompanies = async (
+  page: number,
+  sort: BookmarkCompanySort = "LATEST"
+): Promise<BookmarkCompaniesResponse> => {
+  const response = await api.me.getBookmarkCompany({ page, sort });
+  const result =
+    (response.result as BookmarkCompaniesApiResponse | undefined) ?? {};
+
+  return {
+    content: (result.content ?? [])
+      .filter(isValidBookmarkCompany)
+      .map((bookmarkCompany) => ({
+        id: bookmarkCompany.id,
+        companyId: bookmarkCompany.companyId,
+        companyName: bookmarkCompany.name ?? "",
+        scrapedAt: bookmarkCompany.createdAt ?? "",
+        isConnected: bookmarkCompany.isConnected ?? false,
+      })),
+    currentPage: result.currentPage ?? page,
+    totalPage: result.totalPage ?? 0,
+    totalElements: result.totalElements ?? 0,
+  };
+};
+
+export const useGetBookmarkCompaniesQuery = (
+  page: number,
+  sort: BookmarkCompanySort = "LATEST"
+) => {
+  return useQuery({
+    queryKey: meQueryKey.bookmarkCompanyList(page, sort),
+    queryFn: () => getBookmarkCompanies(page, sort),
+    enabled: Number.isFinite(page) && page > 0,
+    staleTime: 0,
+    refetchOnMount: "always",
+    refetchOnWindowFocus: true,
+  });
+};

src/features/bookmark/api/use-post-bookmark.mutation.ts

@@ -0,0 +1,29 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { api } from "@/shared/api/axios-instance";
+import { meQueryKey } from "@/shared/api/config/query-key";
+
+export const postBookmark = async (companyId: number) => {
+  const response = await api.me.addBookmark(companyId);
+  return response.result;
+};
+
+interface UsePostBookmarkOptions {
+  onSuccess?: (bookmarkId: number) => void;
+  onError?: (error: unknown) => void;
+}
+
+export const usePostBookmark = (options?: UsePostBookmarkOptions) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (companyId: number) => postBookmark(companyId),
+    onSuccess: (bookmarkId: number) => {
+      queryClient.invalidateQueries({
+        queryKey: meQueryKey.bookmarkCompanyLists(),
+      });
+      options?.onSuccess?.(bookmarkId);
+    },
+    onError: options?.onError,
+  });
+};

src/features/bookmark/index.ts

@@ -1,8 +1,9 @@
-export {
-  BOOKMARK_MOCK_ROWS,
-  BOOKMARK_PAGE_SIZE,
-} from "./config/bookmark-page.constants";
-export type { BookmarkRow } from "./config/bookmark-page.constants";
+export type { BookmarkRow } from "./types/bookmark.type";
+export { useDeleteBookmark } from "./api/use-delete-bookmark.mutation";
+export { useGetBookmarkCompaniesQuery } from "./api/use-get-bookmark-companies.query";
+export { usePostBookmark } from "./api/use-post-bookmark.mutation";
+export { useCompanyBookmark } from "./model/use-company-bookmark";
+export { useBookmarkStore } from "./store/bookmark.store";
 
 export { BookmarkCheckbox } from "./ui/bookmark-checkbox";
 export { BookmarkEmptyState } from "./ui/bookmark-empty-state";

src/features/bookmark/model/use-company-bookmark.ts

@@ -0,0 +1,136 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { useCallback, useEffect, useState } from "react";
+
+import { companyQueryKey } from "@/shared/api/config/query-key";
+import { isValidCustomError } from "@/shared/api/error-handler";
+
+import { useDeleteBookmark } from "../api/use-delete-bookmark.mutation";
+import { usePostBookmark } from "../api/use-post-bookmark.mutation";
+import { useBookmarkStore } from "../store/bookmark.store";
+
+import type { GetCompanyResponseDto } from "@/shared/api/generate/http-client";
+
+interface UseCompanyBookmarkParams {
+  companyId: number;
+  initialIsBookmarked: boolean;
+}
+
+const isDuplicateBookmarkError = (error: unknown) =>
+  isValidCustomError(error) &&
+  error.response.status === 400 &&
+  error.response.data.prefix.startsWith("BOOKMARK_");
+
+const updateCompanyBookmarkCache = (
+  previousData: GetCompanyResponseDto | undefined,
+  isBookmarked: boolean
+) => {
+  if (!previousData) {
+    return previousData;
+  }
+
+  return {
+    ...previousData,
+    isLiked: isBookmarked,
+  };
+};
+
+export const useCompanyBookmark = ({
+  companyId,
+  initialIsBookmarked,
+}: UseCompanyBookmarkParams) => {
+  const queryClient = useQueryClient();
+  const [isBookmarkErrorOpen, setIsBookmarkErrorOpen] = useState(false);
+  const bookmarkOverride = useBookmarkStore(
+    (state) => state.bookmarkOverrides[companyId]
+  );
+  const setBookmarkOverride = useBookmarkStore(
+    (state) => state.setBookmarkOverride
+  );
+
+  const isBookmarked = bookmarkOverride ?? initialIsBookmarked;
+
+  useEffect(() => {
+    if (bookmarkOverride === undefined && initialIsBookmarked) {
+      setBookmarkOverride(companyId, true);
+    }
+  }, [bookmarkOverride, companyId, initialIsBookmarked, setBookmarkOverride]);
+
+  const updateDetailQuery = useCallback(
+    (nextIsBookmarked: boolean) => {
+      queryClient.setQueryData<GetCompanyResponseDto | undefined>(
+        companyQueryKey.detail(companyId),
+        (previousData) =>
+          updateCompanyBookmarkCache(previousData, nextIsBookmarked)
+      );
+    },
+    [companyId, queryClient]
+  );
+
+  const { mutate: addBookmark, isPending: isAddingBookmark } = usePostBookmark({
+    onSuccess: () => {
+      setBookmarkOverride(companyId, true);
+      updateDetailQuery(true);
+    },
+    onError: (error) => {
+      if (isDuplicateBookmarkError(error)) {
+        setBookmarkOverride(companyId, true);
+        updateDetailQuery(true);
+        return;
+      }
+
+      setBookmarkOverride(companyId, false);
+      setIsBookmarkErrorOpen(true);
+    },
+  });
+
+  const { mutate: removeBookmark, isPending: isRemovingBookmark } =
+    useDeleteBookmark({
+      onSuccess: () => {
+        setBookmarkOverride(companyId, false);
+        updateDetailQuery(false);
+        queryClient.invalidateQueries({
+          queryKey: companyQueryKey.detail(companyId),
+        });
+      },
+      onError: () => {
+        setBookmarkOverride(companyId, true);
+        setIsBookmarkErrorOpen(true);
+      },
+    });
+
+  const isBookmarkPending = isAddingBookmark || isRemovingBookmark;
+
+  const handleBookmarkClick = useCallback(() => {
+    if (isBookmarkPending) {
+      return;
+    }
+
+    if (isBookmarked) {
+      setBookmarkOverride(companyId, false);
+      removeBookmark(companyId);
+      return;
+    }
+
+    setBookmarkOverride(companyId, true);
+    addBookmark(companyId);
+  }, [
+    addBookmark,
+    companyId,
+    isBookmarked,
+    isBookmarkPending,
+    removeBookmark,
+    setBookmarkOverride,
+  ]);
+
+  const closeBookmarkError = useCallback(() => {
+    setIsBookmarkErrorOpen(false);
+  }, []);
+
+  return {
+    isBookmarked,
+    isBookmarkPending,
+    isBookmarkErrorOpen,
+    handleBookmarkClick,
+    closeBookmarkError,
+  };
+};