Loading...
- }
- if (error) {
- return
-
-
- {
- setSearchInput(e.target.value);
- setPage(1);
- }}
- />
-
-
- {paginatedTags?.map(tag => (
-
-
- {toPrettyTagname(tag.name)}({tag.occurs})
-
-
- {tag.description}
-
-
- ))}
-
-
-
-
-
- {page} / {totalPages}
-
-
- setPage(Number(e.target.value))} />
-
-
-
-
+
+
+
+ νκ·Έ μ 보λ₯Ό λΆλ¬μ€λ μ€μ
λλ€β¦
+
- )
+ );
}
-export default TagsPage;
\ No newline at end of file
+interface ErrorStateProps {
+ message: string;
+ onRetry: () => void;
+}
+
+function ErrorState({ message, onRetry }: ErrorStateProps) {
+ return (
+
+
+
+
+ μ€λ₯κ° λ°μνμ΅λλ€
+
+ {message}
+
+
+
+
+
+
+ );
+}
+
+
+
+export default function TagsPage() {
+ const { data, error, isLoading, mutate } = useTags();
+ const tags = useMemo
(() => data ?? [], [data]);
+ const [filters, setFilters] = useState({
+ orderBy: DEFAULT_ORDER,
+ searchTerm: "",
+ });
+ const hasActiveFilters = useMemo(() => {
+ return (
+ Boolean(filters.searchTerm?.trim()) ||
+ filters.selectedKind ||
+ filters.orderBy !== DEFAULT_ORDER
+ );
+ }, [filters]);
+ const resetFilters = useCallback(() => {
+ setFilters({
+ orderBy: DEFAULT_ORDER,
+ searchTerm: "",
+ selectedKind: undefined,
+ });
+ }, []);
+
+ const [page, setPage] = useState(1);
+ const [pageSize, setPageSize] = useState(24);
+
+ const setFilterOf = useCallback(
+ (key: K, value: TagFilters[K]) => {
+ setFilters((prev) => ({
+ ...prev,
+ [key]: value,
+ }));
+ setPage(1);
+ },
+ [],
+ );
+ const [viewMode, setViewMode] = useState("grid");
+
+ const kindCounts = useMemo(() => {
+ const kindCounts = new Map();
+ for (const tag of tags) {
+ const kind = getTagKind(tag.name);
+ kindCounts.set(kind, (kindCounts.get(kind) ?? 0) + 1);
+ }
+ return kindCounts;
+ }, [tags])
+
+ const handleRetry = useCallback(() => {
+ void mutate();
+ }, [mutate]);
+
+ const filteredTags = useFilterAndSortTags(tags, filters);
+ const { paginatedTags, totalPages, totalResults } = usePaginateTags(filteredTags, page, pageSize);
+
+ if (error) {
+ const message = error instanceof Error ? error.message : "μ μ μλ μ€λ₯κ° λ°μνμ΅λλ€.";
+ return ;
+ }
+
+ if (isLoading && !data) {
+ return ;
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ νν°
+
+
+
+
+
+
+
+
+ setFilterOf("searchTerm", event.target.value)}
+ placeholder="νκ·Έ μ΄λ¦μ΄λ μ€λͺ
μ μ
λ ₯νμΈμ"
+ className="pl-9"
+ />
+
+
setFilterOf("orderBy", value)}
+ />
+ setPageSize(value)}
+ />
+
+
+
+
+
+
+
+
+ );
+}
+
+const ORDER_OPTIONS: { value: TagOrderKey; label: string }[] = [
+ { value: "occurs-desc", label: "μ¬μ© λ§μ μ" },
+ { value: "occurs-asc", label: "μ¬μ© μ μ μ" },
+ { value: "name-asc", label: "μ΄λ¦ A-Z" },
+ { value: "name-desc", label: "μ΄λ¦ Z-A" },
+];
+
+function TagOrderSelector({
+ orderBy,
+ onOrderChange,
+ className,
+ disabled,
+}: {
+ orderBy?: TagOrderKey;
+ onOrderChange?: (orderBy: TagOrderKey) => void;
+ className?: string;
+ disabled?: boolean;
+}) {
+ return (
+
+ );
+}
+
+const PAGE_SIZE_OPTIONS = [12, 24, 48, 96];
+
+function TagPageSizeSelector({
+ pageSize,
+ onPageSizeChange,
+}: {
+ pageSize: number;
+ onPageSizeChange?: (pageSize: number) => void;
+}) {
+ return (
+
+ );
+}
+
+function TagKindSelectButtonList({
+ kindCounts,
+ selectedKind,
+ handleKindChange
+}: {
+ kindCounts: Map;
+ selectedKind?: TagKindType;
+ handleKindChange: (kind?: TagKindType) => void;
+}) {
+ return
+ {[undefined, ...ALL_TAG_KIND].map((kind) => {
+ const count = kind ? kindCounts.get(kind) : undefined;
+ return (
+
+ );
+ })}
+
+}
\ No newline at end of file