[Feat] 북마크 페이지 구현

src/app/routes/paths.ts

@@ -16,4 +16,5 @@ export const ROUTES = {
   EXPERIENCE_EDIT: (id = ":id") => `/experience/${id}/edit`, // 경험 수정
 
   MYPAGE: "/mypage",
+  BOOKMARK: "/bookmark",
 };

src/app/routes/public-routes.tsx

@@ -32,11 +32,18 @@ const CompanyDetailPage = lazy(() =>
   }))
 );
 
+const BookmarkPage = lazy(() =>
+  import("@/pages/bookmark/bookmark-page").then((module) => ({
+    default: module.BookmarkPage,
+  }))
+);
+
 export const guestRoutes = [{ path: ROUTES.LOGIN, element: <LoginPage /> }];
 
 export const publicRoutes = [
   { path: ROUTES.LOGIN_AUTH, element: <KakaoLoginPage /> },
   { path: ROUTES.LANDING, element: <LandingPage /> },
   { path: ROUTES.HOME, element: <HomePage /> },
   { path: ROUTES.COMPANY(), element: <CompanyDetailPage /> },
+  { path: ROUTES.BOOKMARK, element: <BookmarkPage /> },
 ];

src/pages/bookmark/bookmark-page.css.ts

@@ -0,0 +1,104 @@
+import { globalStyle, style } from "@vanilla-extract/css";
+
+import { themeVars } from "@/app/styles";
+
+export const page = style({
+  width: "100%",
+  maxWidth: "106rem",
+  margin: "0 auto",
+  paddingTop: `calc(${themeVars.height.header} + 8rem)`,
+  paddingBottom: "8rem",
+});
+
+export const topRow = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: "2rem",
+});
+
+export const headerSection = style({
+  display: "flex",
+  alignItems: "center",
+  gap: "1.6rem",
+});
+
+export const titleIcon = style({
+  width: "6.4rem",
+  height: "6.4rem",
+  flexShrink: 0,
+});
+
+export const titleWrap = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.4rem",
+});
+
+export const title = style({
+  color: themeVars.color.black,
+  ...themeVars.fontStyles.title_b_24,
+});
+
+export const subtitle = style({
+  color: themeVars.color.gray500,
+  ...themeVars.fontStyles.body_m_16,
+});
+
+export const actionSection = style({
+  display: "flex",
+  alignItems: "center",
+  gap: "1.2rem",
+});
+
+export const searchWrap = style({
+  display: "flex",
+  alignItems: "center",
+});
+
+export const deleteButtonWrap = style({
+  display: "inline-flex",
+});
+
+export const trashIcon = style({
+  width: "2.4rem",
+  height: "2.4rem",
+  flexShrink: 0,
+});
+
+globalStyle(`${deleteButtonWrap} > button`, {
+  width: "4.8rem",
+  minWidth: "4.8rem",
+  height: "4.8rem",
+  padding: 0,
+  borderRadius: "1.2rem",
+  backgroundColor: themeVars.color.blue600,
+  borderColor: themeVars.color.blue600,
+  color: themeVars.color.white,
+});
+
+globalStyle(`${deleteButtonWrap} > button:hover:not(:disabled)`, {
+  backgroundColor: themeVars.color.blue600,
+  borderColor: themeVars.color.blue600,
+});
+
+globalStyle(`${deleteButtonWrap} > button:active:not(:disabled)`, {
+  backgroundColor: themeVars.color.blue600,
+  borderColor: themeVars.color.blue600,
+});
+
+globalStyle(`${deleteButtonWrap} > button:disabled`, {
+  backgroundColor: themeVars.color.blue600,
+  borderColor: themeVars.color.blue600,
+  color: themeVars.color.white,
+});
+
+export const tableSection = style({
+  marginTop: "5rem",
+});
+
+export const paginationSection = style({
+  marginTop: "4.8rem",
+  display: "flex",
+  justifyContent: "center",
+});

src/pages/bookmark/bookmark-page.tsx

@@ -0,0 +1,196 @@
+import { useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { ROUTES } from "@/app/routes/paths";
+import IconBookmarkBefore from "@/shared/assets/icons/icon_bookmark_before.svg?react";
+import IconTrashOff from "@/shared/assets/icons/icon_trash_off.svg?react";
+import { Button, Modal, Pagination, Search } from "@/shared/ui";
+
+import * as styles from "./bookmark-page.css";
+import {
+  BOOKMARK_MOCK_ROWS,
+  BOOKMARK_PAGE_SIZE,
+} from "./config/bookmark-page.constant";
+import { BookmarkEmptyState } from "./ui/bookmark-empty-state";
+import { BookmarkTable } from "./ui/bookmark-table";
+
+const BookmarkPage = () => {
+  const navigate = useNavigate();
+
+  const [rows, setRows] = useState(BOOKMARK_MOCK_ROWS);
+  const [searchInput, setSearchInput] = useState("");
+  const [keyword, setKeyword] = useState("");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [selectedIds, setSelectedIds] = useState<number[]>([]);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+
+  const filteredRows = useMemo(() => {
+    if (!keyword) return rows;
+
+    const normalizedKeyword = keyword.toLowerCase();
+    return rows.filter((row) =>
+      row.companyName.toLowerCase().includes(normalizedKeyword)
+    );
+  }, [keyword, rows]);
+
+  const totalPage = Math.ceil(filteredRows.length / BOOKMARK_PAGE_SIZE);
+  const paginationTotalPage = Math.max(totalPage, 1);
+  const resolvedCurrentPage = Math.min(currentPage, paginationTotalPage);
+
+  const currentPageRows = useMemo(() => {
+    const startIndex = (resolvedCurrentPage - 1) * BOOKMARK_PAGE_SIZE;
+    return filteredRows.slice(startIndex, startIndex + BOOKMARK_PAGE_SIZE);
+  }, [filteredRows, resolvedCurrentPage]);
+
+  const visibleIds = useMemo(
+    () => currentPageRows.map((row) => row.id),
+    [currentPageRows]
+  );
+
+  const isAllSelected =
+    visibleIds.length > 0 && visibleIds.every((id) => selectedIds.includes(id));
+
+  const isDeleteDisabled = selectedIds.length === 0;
+  const isBookmarkEmpty = rows.length === 0;
+  const isSearchResultEmpty = rows.length > 0 && filteredRows.length === 0;
+
+  const handleSearch = (value: string) => {
+    const trimmedValue = value.trim();
+
+    if (value.length > 0 && trimmedValue.length === 0) {
+      return;
+    }
+
+    setKeyword(trimmedValue);
+    setCurrentPage(1);
+    setSelectedIds([]);
+  };
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  const toggleAll = (checked: boolean) => {
+    if (checked) {
+      setSelectedIds((prev) => Array.from(new Set([...prev, ...visibleIds])));
+      return;
+    }
+
+    setSelectedIds((prev) => prev.filter((id) => !visibleIds.includes(id)));
+  };
+
+  const toggleRow = (rowId: number, checked: boolean) => {
+    setSelectedIds((prev) =>
+      checked
+        ? Array.from(new Set([...prev, rowId]))
+        : prev.filter((id) => id !== rowId)
+    );
+  };
+
+  const openDeleteModal = () => {
+    if (isDeleteDisabled) return;
+    setIsDeleteModalOpen(true);
+  };
+
+  const closeDeleteModal = () => {
+    setIsDeleteModalOpen(false);
+  };
+
+  const handleDeleteConfirm = () => {
+    setRows((prev) => prev.filter((row) => !selectedIds.includes(row.id)));
+    setSelectedIds([]);
+    setIsDeleteModalOpen(false);
+  };
+
+  const handleClickCompany = (companyId: number) => {
+    navigate(ROUTES.COMPANY(String(companyId)));
+  };
+
+  return (
+    <main className={styles.page}>
+      <section className={styles.topRow}>
+        <div className={styles.headerSection}>
+          <IconBookmarkBefore className={styles.titleIcon} aria-hidden="true" />
+          <div className={styles.titleWrap}>
+            <h1 className={styles.title}>기업 북마크</h1>
+            <p className={styles.subtitle}>
+              최근 6개월 이내에 스크랩한 기업정보 입니다
+            </p>
+          </div>
+        </div>
+
+        <div className={styles.actionSection}>
+          <div className={styles.searchWrap}>
+            <Search
+              size="small"
+              value={searchInput}
+              onChange={setSearchInput}
+              onSearch={handleSearch}
+              placeholder="기업명 검색"
+              inputAriaLabel="기업명 검색"
+            />
+          </div>
+
+          <div className={styles.deleteButtonWrap}>
+            <Button
+              variant="secondary"
+              size="medium"
+              disabled={isDeleteDisabled}
+              onClick={openDeleteModal}
+              aria-label="북마크 삭제"
+            >
+              <IconTrashOff className={styles.trashIcon} aria-hidden="true" />
+            </Button>
+          </div>
+        </div>
+      </section>
+
+      <section className={styles.tableSection}>
+        {isBookmarkEmpty ? (
+          <BookmarkEmptyState type="bookmark" />
+        ) : isSearchResultEmpty ? (
+          <BookmarkEmptyState type="search" />
+        ) : (
+          <BookmarkTable
+            rows={currentPageRows}
+            pageSize={BOOKMARK_PAGE_SIZE}
+            selectedIds={selectedIds}
+            isAllSelected={isAllSelected}
+            onToggleAll={toggleAll}
+            onToggleRow={toggleRow}
+            onClickCompany={handleClickCompany}
+          />
+        )}
+      </section>
+
+      <section className={styles.paginationSection}>
+        <Pagination
+          currentPage={resolvedCurrentPage}
+          totalPage={paginationTotalPage}
+          onPageChange={handlePageChange}
+        />
+      </section>
+
+      <Modal isOpen={isDeleteModalOpen} onClose={closeDeleteModal}>
+        <Modal.XButton />
+        <Modal.Content>
+          <Modal.Title>선택한 북마크를 삭제할까요?</Modal.Title>
+        </Modal.Content>
+        <Modal.Buttons>
+          <Button
+            variant="secondary"
+            size="large"
+            onClick={handleDeleteConfirm}
+          >
+            삭제하기
+          </Button>
+          <Button variant="primary" size="large" onClick={closeDeleteModal}>
+            취소하기
+          </Button>
+        </Modal.Buttons>
+      </Modal>
+    </main>
+  );
+};
+
+export { BookmarkPage };