aimond/sapiens-web2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add sorting options for media outlets by name or traffic

Browse Source 
Introduce alphabetical and traffic score sorting for media outlets in both the main content and admin dashboard views, updating the schema to include a trafficScore field.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/jvFIdY3
This commit is contained in:
kimjaehyeon0101
2025-09-29 18:42:29 +00:00
parent 44b00ea7ea
commit 6d81e0281a
5 changed files with 67 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
client/src/components/MainContent.tsx
View File

@ -1,8 +1,11 @@
import { useQuery } from "@tanstack/react-query";
import { Card, CardContent } from "@/components/ui/card";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import type { MediaOutlet } from "@shared/schema";
import { useAuth } from "@/hooks/useAuth";
import Footer from "@/components/Footer";
import { useState } from "react";
import { ArrowUpDown } from "lucide-react";
const categories = [
{ id: "people", name: "People", key: "People" },
@ -12,6 +15,7 @@ const categories = [
export default function MainContent() {
const { user } = useAuth();
const [sortBy, setSortBy] = useState<"alphabetical" | "traffic">("alphabetical");
const { data: allOutlets = [], isLoading } = useQuery<MediaOutlet[]>({
queryKey: ["/api/media-outlets"],
@ -26,11 +30,20 @@ export default function MainContent() {
},
});
// Group outlets by category
// Group outlets by category and sort
const getOutletsByCategory = (category: string) => {
return allOutlets.filter(outlet =>
const filtered = allOutlets.filter(outlet =>
outlet.category.toLowerCase() === category.toLowerCase()
);
return filtered.sort((a, b) => {
if (sortBy === "alphabetical") {
return a.name.localeCompare(b.name);
} else {
// Sort by traffic score (descending - highest traffic first)
return (b.trafficScore || 0) - (a.trafficScore || 0);
}
});
};
const renderOutletCard = (outlet: MediaOutlet) => (
@ -72,6 +85,23 @@ export default function MainContent() {
return (
<div className="min-h-screen bg-gray-50">
<div className="max-w-7xl mx-auto px-4 py-4">
{/* Sorting Controls */}
<div className="flex items-center justify-between mb-6">
<h1 className="text-2xl font-bold text-gray-900">언론매체</h1>
<div className="flex items-center space-x-2">
<ArrowUpDown className="h-4 w-4 text-gray-500" />
<Select value={sortBy} onValueChange={(value: "alphabetical" | "traffic") => setSortBy(value)}>
<SelectTrigger className="w-[180px]" data-testid="sort-select">
<SelectValue placeholder="정렬 방식" />
</SelectTrigger>
<SelectContent>
<SelectItem value="alphabetical" data-testid="sort-alphabetical">ABC 순</SelectItem>
<SelectItem value="traffic" data-testid="sort-traffic">트래픽 순</SelectItem>
</SelectContent>
</Select>
</div>
</div>
{isLoading ? (
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{categories.map((category) => (