feat: [FN-347] 카드셋 리스트 정렬, 필터, 검색 기능 추가

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: bebusl

src/domain/cardsets/hooks/use-card-sets.ts

@@ -1,5 +1,6 @@
 import { useSuspenseInfiniteQuery } from "@tanstack/react-query";
 import { cardSetApi } from "@/shared/apis/card-set";
+import type { CardSetSortBy, SortOrder } from "@/shared/apis/card-set";
 import type { CardSetCategory } from "@/domain/cardsets/types";
 
 const CARDSETS_QUERY_KEY = ["cardsets"];
@@ -8,9 +9,8 @@ interface UseCardSetsParams {
   keyword?: string;
   category?: CardSetCategory;
   size?: number;
-  sortBy?: string;
-  order?: string;
-  suspense?: boolean;
+  sortBy?: CardSetSortBy;
+  order?: SortOrder;
 }
 
 export const useCardSets = (params?: UseCardSetsParams) => {

src/pages/cardset-list.tsx

@@ -3,28 +3,44 @@ import { Button } from "@/shared/components/button";
 import { Input } from "@/shared/components/input";
 import { ThumbnailCard } from "@/shared/components/thumbnail-card";
 import { CardGridSkeleton } from "@/shared/components/skeletons";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/components/select";
 
 import BaseLayout from "@/shared/layouts/base-layout";
 import { Link } from "@tanstack/react-router";
-import { Search, SearchX } from "lucide-react";
+import { ArrowDownUp, Search, SearchX } from "lucide-react";
 import { useCardSets } from "@/domain/cardsets/hooks/use-card-sets";
 import { CardSetFilterSection } from "@/domain/cardsets/components/card-set-filter-section";
 import type { CardSetCategory } from "@/domain/cardsets/types";
+import type { CardSetSortBy, SortOrder } from "@/shared/apis/card-set";
 import { EmptyState } from "@/shared/components/empty-state";
 import { ErrorBoundary } from "@/shared/components/error-boundary";
 
+const SORT_BY_OPTIONS: { value: CardSetSortBy; label: string }[] = [
+  { value: "id", label: "최신순" },
+  { value: "like", label: "좋아요순" },
+  { value: "book", label: "북마크순" },
+];
+
 interface CardSetGridProps {
   keyword?: string;
   category?: CardSetCategory;
+  sortBy?: CardSetSortBy;
+  order?: SortOrder;
 }
 
-const CardSetGrid = ({ keyword, category }: CardSetGridProps) => {
+const CardSetGrid = ({ keyword, category, sortBy, order }: CardSetGridProps) => {
   const {
     data: cardsetsData,
     fetchNextPage,
     hasNextPage,
     isFetchingNextPage,
-  } = useCardSets({ keyword, category, size: 20 });
+  } = useCardSets({ keyword, category, size: 20, sortBy, order });
 
   return (
     <>
@@ -77,6 +93,8 @@ const CardSetList = () => {
   const [selectedCategory, setSelectedCategory] = useState<
     CardSetCategory | undefined
   >(undefined);
+  const [sortBy, setSortBy] = useState<CardSetSortBy>("id");
+  const [order, setOrder] = useState<SortOrder>("desc");
 
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -93,6 +111,10 @@ const CardSetList = () => {
     setSelectedCategory(checked ? category : undefined);
   };
 
+  const toggleOrder = () => {
+    setOrder((prev) => (prev === "desc" ? "asc" : "desc"));
+  };
+
   return (
     <BaseLayout>
       <div className="space-y-6">
@@ -115,21 +137,50 @@ const CardSetList = () => {
           </div>
         </div>
 
-        {/* 필터 영역 */}
+        {/* 필터 및 정렬 영역 */}
         <div className="flex items-center justify-between gap-4">
           <div className="flex-1">
             <CardSetFilterSection
               selectedCategories={selectedCategory ? [selectedCategory] : []}
               onCategoryChange={handleCategoryChange}
             />
           </div>
+          <div className="flex items-center gap-2 shrink-0">
+            <Select
+              value={sortBy}
+              onValueChange={(v) => setSortBy(v as CardSetSortBy)}
+            >
+              <SelectTrigger size="sm">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {SORT_BY_OPTIONS.map((opt) => (
+                  <SelectItem key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={toggleOrder}
+              className="flex items-center gap-1"
+            >
+              <ArrowDownUp className="w-3.5 h-3.5" />
+              {order === "desc" ? "내림차순" : "오름차순"}
+            </Button>
+          </div>
         </div>
+
         <ErrorBoundary>
           {/* 카드셋 리스트 - 로딩 중에는 그리드 영역만 스켈레톤으로 대체 */}
           <Suspense fallback={<CardGridSkeleton />}>
             <CardSetGrid
               keyword={searchKeyword || undefined}
               category={selectedCategory}
+              sortBy={sortBy}
+              order={order}
             />
           </Suspense>
         </ErrorBoundary>

src/shared/apis/card-set.ts

@@ -90,7 +90,14 @@ export interface CardSetUpdateRequest {
   // managers?: number[];
 }
 
-export interface CardSetSearchRequest extends PaginationRequest {
+export type CardSetSortBy = "id" | "like" | "book";
+export type SortOrder = "asc" | "desc";
+
+export interface CardSetSearchRequest {
+  page?: number;
+  size?: number;
+  sortBy?: CardSetSortBy;
+  order?: SortOrder;
   keyword?: string;
   category?: string;
 }