시급 페이지 각 테이블에 즐겨찾기 기능 추가

Author: kubrickcode

src/frontend/src/core/table/data-table.tsx

@@ -15,6 +15,7 @@ import {
   PaginationRoot,
 } from "~/core/chakra-components/pagination";
 
+import { FavoriteValue } from "./favorite-control";
 import { SortControl } from "./sort-control";
 
 export type DataTableProps<T> = TableHTMLAttributes<HTMLTableElement> & {
@@ -28,6 +29,8 @@ export type DataTableProps<T> = TableHTMLAttributes<HTMLTableElement> & {
     data: T;
   }[];
   pagination?: boolean;
+  favoriteKeyPath?: string;
+  favorites?: FavoriteValue[];
 };
 
 export type Column<T> = {
@@ -48,6 +51,9 @@ export const DataTable = <T,>({
   getRowProps,
   rows,
   pagination = false,
+  favoriteKeyPath,
+  favorites = [],
+  ...rest
 }: DataTableProps<T>) => {
   const [sortOrder, setSortOrder] = useState<"asc" | "desc" | null>(
     defaultSorting?.value || null
@@ -57,9 +63,42 @@ export const DataTable = <T,>({
   );
 
   const displayRows = useMemo(() => {
-    if (currentSortKey && sortOrder) {
+    if (!rows.length) return [];
+
+    const hasFavoriteFeature = !!favoriteKeyPath && favorites.length > 0;
+
+    let favoriteRows: typeof rows = [];
+    let normalRows: typeof rows = [];
+
+    if (hasFavoriteFeature) {
+      favoriteRows = rows.filter((row) => {
+        const value = favoriteKeyPath
+          .split(".")
+          .reduce(
+            (obj, key) => obj && obj[key as keyof typeof obj],
+            row.data as any
+          );
+        return value !== undefined && favorites.includes(value);
+      });
+
+      normalRows = rows.filter((row) => {
+        const value = favoriteKeyPath
+          .split(".")
+          .reduce(
+            (obj, key) => obj && obj[key as keyof typeof obj],
+            row.data as any
+          );
+        return value === undefined || !favorites.includes(value);
+      });
+    } else {
+      normalRows = [...rows];
+    }
+
+    const sortRows = (rowsToSort: typeof rows) => {
+      if (!currentSortKey || !sortOrder) return rowsToSort;
+
       return _.orderBy(
-        rows,
+        rowsToSort,
         [
           (row) => {
             const column = columns.find(
@@ -73,9 +112,16 @@ export const DataTable = <T,>({
         ],
         [sortOrder]
       );
+    };
+
+    if (hasFavoriteFeature) {
+      const sortedFavoriteRows = sortRows(favoriteRows);
+      const sortedNormalRows = sortRows(normalRows);
+      return [...sortedFavoriteRows, ...sortedNormalRows];
     }
-    return rows;
-  }, [rows, currentSortKey, sortOrder, columns]);
+
+    return sortRows(rows);
+  }, [rows, currentSortKey, sortOrder, columns, favoriteKeyPath, favorites]);
 
   const handleSort = (column: Column<T>) => {
     if (!column.sortKey) return;
@@ -148,11 +194,11 @@ export const DataTable = <T,>({
         </Table.Row>
       );
     },
-    [columns, renderColumn]
+    [columns, renderColumn, getRowProps, isInteractive]
   );
 
   return (
-    <Table.ScrollArea maxHeight="4xl">
+    <Table.ScrollArea maxHeight="4xl" {...rest}>
       <Table.Root interactive={isInteractive} showColumnBorder stickyHeader>
         <Table.Header>
           <Table.Row>

src/frontend/src/core/table/favorite-control.tsx

@@ -0,0 +1,123 @@
+import { IconButton } from "@chakra-ui/react";
+import React, { useCallback, useEffect, useState } from "react";
+import { IoIosStarOutline } from "react-icons/io";
+import { IoStar } from "react-icons/io5";
+
+export type FavoriteValue = string | number;
+
+export const getFavoritesFromStorage = <T extends FavoriteValue>(
+  key: string
+): T[] => {
+  try {
+    const storedItems = localStorage.getItem(key);
+    return storedItems ? JSON.parse(storedItems) : [];
+  } catch (error) {
+    console.error(`Error retrieving favorites from storage (${key}):`, error);
+    return [];
+  }
+};
+
+export const saveFavoritesToStorage = <T extends FavoriteValue>(
+  key: string,
+  favorites: T[]
+): void => {
+  try {
+    localStorage.setItem(key, JSON.stringify(favorites));
+  } catch (error) {
+    console.error(`Error saving favorites to storage (${key}):`, error);
+  }
+};
+
+export const toggleFavorite = <T extends FavoriteValue>(
+  value: T,
+  currentFavorites: T[],
+  storageKey?: string
+): T[] => {
+  const newFavorites = currentFavorites.includes(value)
+    ? currentFavorites.filter((item) => item !== value)
+    : [...currentFavorites, value];
+
+  if (storageKey) {
+    saveFavoritesToStorage(storageKey, newFavorites);
+  }
+
+  return newFavorites;
+};
+
+type FavoriteIconProps = {
+  id: FavoriteValue;
+  storageKey: string;
+  onChange?: (favorites: FavoriteValue[]) => void;
+  externalFavorites?: FavoriteValue[];
+};
+
+export const FavoriteIcon: React.FC<FavoriteIconProps> = ({
+  id,
+  storageKey,
+  onChange,
+  externalFavorites,
+}) => {
+  const [internalFavorites, setInternalFavorites] = useState<FavoriteValue[]>(
+    () => getFavoritesFromStorage(storageKey)
+  );
+
+  const favorites =
+    externalFavorites !== undefined ? externalFavorites : internalFavorites;
+
+  useEffect(() => {
+    if (onChange && externalFavorites === undefined) {
+      onChange(internalFavorites);
+    }
+  }, [internalFavorites, onChange, externalFavorites]);
+
+  const handleToggle = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+
+      const newFavorites = toggleFavorite(id, favorites, storageKey);
+
+      if (externalFavorites === undefined) {
+        setInternalFavorites(newFavorites);
+      }
+
+      if (onChange) {
+        onChange(newFavorites);
+      }
+    },
+    [id, favorites, storageKey, onChange, externalFavorites]
+  );
+
+  const isFavorite = favorites.includes(id);
+
+  return (
+    <IconButton
+      aria-label={isFavorite ? "즐겨찾기 해제" : "즐겨찾기 추가"}
+      onClick={handleToggle}
+      size="sm"
+      variant="ghost"
+    >
+      {isFavorite ? (
+        <IoStar color="#FFD700" />
+      ) : (
+        <IoIosStarOutline color="gray" />
+      )}
+    </IconButton>
+  );
+};
+
+export const sortWithFavoritesAtTop = <T,>(
+  items: T[],
+  getFavoriteId: (item: T) => FavoriteValue,
+  favorites: FavoriteValue[]
+): T[] => {
+  if (!items.length || !favorites.length) return items;
+
+  const favoriteItems = items.filter((item) =>
+    favorites.includes(getFavoriteId(item))
+  );
+  const regularItems = items.filter(
+    (item) => !favorites.includes(getFavoriteId(item))
+  );
+
+  return [...favoriteItems, ...regularItems];
+};

src/frontend/src/pages/content-wage-list/tabs/content-wage-table-tab/components/content-group-wage-list-table.tsx

@@ -1,4 +1,5 @@
 import { Flex, FormatNumber, IconButton, Text } from "@chakra-ui/react";
+import { useState } from "react";
 import { IoIosSettings } from "react-icons/io";
 
 import { useAuth } from "~/core/auth";
@@ -7,6 +8,11 @@ import { FormatGold } from "~/core/format";
 import { useSafeQuery } from "~/core/graphql";
 import { ContentGroupWageListTableDocument } from "~/core/graphql/generated";
 import { DataTable } from "~/core/table";
+import {
+  FavoriteIcon,
+  FavoriteValue,
+  getFavoritesFromStorage,
+} from "~/core/table/favorite-control";
 import { LoginTooltip } from "~/core/tooltip";
 import { useContentWageListPage } from "~/pages/content-wage-list/content-wage-list-page-context";
 import {
@@ -15,6 +21,8 @@ import {
 } from "~/shared/content";
 import { ItemNameWithImage } from "~/shared/item";
 
+const FAVORITE_STORAGE_KEY = "content-group-wage-list-favorites";
+
 export const ContentGroupWageListTable = () => {
   const { isAuthenticated } = useAuth();
   const {
@@ -26,7 +34,13 @@ export const ContentGroupWageListTable = () => {
     shouldMergeGate,
   } = useContentWageListPage();
 
-  if (!shouldMergeGate) return null;
+  const [favorites, setFavorites] = useState<FavoriteValue[]>(
+    getFavoritesFromStorage(FAVORITE_STORAGE_KEY)
+  );
+
+  const handleFavoriteChange = (newFavorites: FavoriteValue[]) => {
+    setFavorites(newFavorites);
+  };
 
   const { data, refetch } = useSafeQuery(ContentGroupWageListTableDocument, {
     variables: {
@@ -44,10 +58,27 @@ export const ContentGroupWageListTable = () => {
     dialog: ContentGroupDetailsDialog,
   });
 
+  if (!shouldMergeGate || !data) return null;
+
   return (
     <>
       <DataTable
         columns={[
+          {
+            align: "center",
+            header: "즐겨찾기",
+            render({ data }) {
+              return (
+                <FavoriteIcon
+                  externalFavorites={favorites}
+                  id={data.contentGroup.name}
+                  onChange={handleFavoriteChange}
+                  storageKey={FAVORITE_STORAGE_KEY}
+                />
+              );
+            },
+            width: 12,
+          },
           {
             header: "종류",
             render({ data }) {
@@ -132,12 +163,17 @@ export const ContentGroupWageListTable = () => {
             sortKey: "goldAmountPerClear",
           },
         ]}
+        favoriteKeyPath="contentGroup.name"
+        favorites={favorites}
         getRowProps={({ data }) => ({
           onClick: () =>
             onOpen({
               contentIds: data.contentGroup.contentIds,
               onComplete: refetch,
             }),
+          style: favorites.includes(data.contentGroup.name)
+            ? { backgroundColor: "rgba(255, 215, 0, 0.075)" }
+            : undefined,
         })}
         rows={data.contentGroupWageList.map((data) => ({
           data,