Update media outlet pages to match home screen UI and add search
Revise UI of media outlet pages to align with the home screen's design, incorporating a search feature and updating styling and internationalization. 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/gVirbWH
This commit is contained in:
kimjaehyeon0101
@ -54,18 +54,16 @@ export default function Home() {
|
||||
<img
|
||||
src="/attached_assets/logo_black_1759162717640.png"
|
||||
alt="SAPIENS"
|
||||
className="h-6 w-auto"
|
||||
className="h-6 w-auto cursor-pointer"
|
||||
data-testid="logo-sapiens"
|
||||
onClick={() => window.location.href = "/"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
<div
|
||||
className="relative cursor-pointer"
|
||||
onClick={() => {
|
||||
console.log("Search div clicked, opening modal...");
|
||||
setIsSearchModalOpen(true);
|
||||
}}
|
||||
onClick={() => setIsSearchModalOpen(true)}
|
||||
data-testid="search-container"
|
||||
>
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 pointer-events-none" />
|
||||
@ -75,10 +73,7 @@ export default function Home() {
|
||||
className="w-80 pl-10 bg-gray-50 border-gray-200 cursor-pointer"
|
||||
data-testid="input-search"
|
||||
readOnly
|
||||
onClick={() => {
|
||||
console.log("Search input clicked, opening modal...");
|
||||
setIsSearchModalOpen(true);
|
||||
}}
|
||||
onClick={() => setIsSearchModalOpen(true)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@ -2,16 +2,27 @@ import { useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useRoute, useLocation } from "wouter";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Gavel, Clock, TrendingUp } from "lucide-react";
|
||||
import { Gavel, Clock, TrendingUp, Search, Settings, User, LogOut, Grid, List } from "lucide-react";
|
||||
import { useAuth } from "@/hooks/useAuth";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { queryClient } from "@/lib/queryClient";
|
||||
import ArticleCard from "@/components/ArticleCard";
|
||||
import Footer from "@/components/Footer";
|
||||
import LoginModal from "@/components/LoginModal";
|
||||
import SearchModal from "@/components/SearchModal";
|
||||
import type { MediaOutlet, Article, Auction } from "@shared/schema";
|
||||
|
||||
export default function MediaOutlet() {
|
||||
const [, params] = useRoute("/media/:slug");
|
||||
const [, setLocation] = useLocation();
|
||||
const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
|
||||
const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
|
||||
const [isSearchModalOpen, setIsSearchModalOpen] = useState(false);
|
||||
const { user, isAuthenticated } = useAuth();
|
||||
const { toast } = useToast();
|
||||
|
||||
const { data: outlet, isLoading: outletLoading } = useQuery<MediaOutlet>({
|
||||
queryKey: ["/api/media-outlets", params?.slug],
|
||||
@ -28,11 +39,39 @@ export default function MediaOutlet() {
|
||||
enabled: !!params?.slug
|
||||
});
|
||||
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
const response = await fetch("/api/logout", {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
toast({
|
||||
title: "Logout Successful",
|
||||
description: "You have been successfully logged out.",
|
||||
});
|
||||
|
||||
queryClient.invalidateQueries({ queryKey: ["/api/auth/user"] });
|
||||
}
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "Logout Error",
|
||||
description: "An error occurred during logout.",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleAdminPage = () => {
|
||||
window.location.href = "/admin";
|
||||
};
|
||||
|
||||
const formatCurrency = (amount: string | null) => {
|
||||
if (!amount) return "₩0";
|
||||
return new Intl.NumberFormat('ko-KR', {
|
||||
if (!amount) return "$0";
|
||||
return new Intl.NumberFormat('en-US', {
|
||||
style: 'currency',
|
||||
currency: 'KRW'
|
||||
currency: 'USD'
|
||||
}).format(parseFloat(amount));
|
||||
};
|
||||
|
||||
@ -41,65 +80,203 @@ export default function MediaOutlet() {
|
||||
const now = new Date();
|
||||
const diff = end.getTime() - now.getTime();
|
||||
|
||||
if (diff <= 0) return "경매 종료";
|
||||
if (diff <= 0) return "Auction Ended";
|
||||
|
||||
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
||||
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||
|
||||
if (days > 0) return `${days}일 ${hours}시간 남음`;
|
||||
if (hours > 0) return `${hours}시간 남음`;
|
||||
return "1시간 미만 남음";
|
||||
if (days > 0) return `${days}d ${hours}h remaining`;
|
||||
if (hours > 0) return `${hours}h remaining`;
|
||||
return "Less than 1h remaining";
|
||||
};
|
||||
|
||||
if (outletLoading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Header - Same as Home */}
|
||||
<header className="bg-white border-b border-gray-200 sticky top-0 z-50">
|
||||
<div className="max-w-7xl mx-auto px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
src="/attached_assets/logo_black_1759162717640.png"
|
||||
alt="SAPIENS"
|
||||
className="h-6 w-auto"
|
||||
data-testid="logo-sapiens"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
<div
|
||||
className="relative cursor-pointer"
|
||||
onClick={() => setIsSearchModalOpen(true)}
|
||||
data-testid="search-container"
|
||||
>
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 pointer-events-none" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search the website"
|
||||
className="w-80 pl-10 bg-gray-50 border-gray-200 cursor-pointer"
|
||||
data-testid="input-search"
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
|
||||
{isAuthenticated && user ? (
|
||||
<>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleAdminPage}
|
||||
data-testid="button-admin-dashboard"
|
||||
>
|
||||
Admin Dashboard
|
||||
</Button>
|
||||
|
||||
<div className="flex items-center space-x-2 px-3 py-1 bg-gray-100 rounded-md">
|
||||
<User className="h-4 w-4 text-gray-600" />
|
||||
<span className="text-sm font-medium text-gray-700" data-testid="user-name">
|
||||
{user.firstName} {user.lastName}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleLogout}
|
||||
data-testid="button-logout"
|
||||
>
|
||||
<LogOut className="h-4 w-4" />
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setIsLoginModalOpen(true)}
|
||||
data-testid="button-login"
|
||||
>
|
||||
Login
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
data-testid="button-settings"
|
||||
>
|
||||
<Settings className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-6 py-8">
|
||||
<div className="animate-pulse">
|
||||
<div className="h-8 bg-muted rounded w-1/3 mb-4"></div>
|
||||
<div className="h-4 bg-muted rounded w-2/3 mb-8"></div>
|
||||
<div className="h-8 bg-gray-200 rounded w-1/3 mb-4"></div>
|
||||
<div className="h-4 bg-gray-200 rounded w-2/3 mb-8"></div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<div key={i} className="h-64 bg-muted rounded-xl"></div>
|
||||
<div key={i} className="h-64 bg-gray-200 rounded-xl"></div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!outlet) {
|
||||
return (
|
||||
<div className="min-h-screen bg-background flex items-center justify-center">
|
||||
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<h1 className="text-2xl font-bold mb-2">Media Outlet Not Found</h1>
|
||||
<p className="text-muted-foreground mb-4">The media outlet you're looking for doesn't exist.</p>
|
||||
<Button onClick={() => window.history.back()}>Go Back</Button>
|
||||
<p className="text-gray-600 mb-4">The media outlet you're looking for doesn't exist.</p>
|
||||
<Button onClick={() => window.location.href = "/"}>Go to Homepage</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
{/* Header */}
|
||||
<header className="bg-card border-b border-border sticky top-0 z-50">
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Header - Same as Home */}
|
||||
<header className="bg-white border-b border-gray-200 sticky top-0 z-50">
|
||||
<div className="max-w-7xl mx-auto px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center text-primary-foreground font-bold text-lg">
|
||||
S
|
||||
</div>
|
||||
<span className="text-2xl font-bold tracking-tight">SAPIENS</span>
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
src="/attached_assets/logo_black_1759162717640.png"
|
||||
alt="SAPIENS"
|
||||
className="h-6 w-auto cursor-pointer"
|
||||
data-testid="logo-sapiens"
|
||||
onClick={() => window.location.href = "/"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button variant="ghost" onClick={() => window.history.back()}>
|
||||
← Back
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => window.location.href = "/"}>
|
||||
Home
|
||||
<div
|
||||
className="relative cursor-pointer"
|
||||
onClick={() => setIsSearchModalOpen(true)}
|
||||
data-testid="search-container"
|
||||
>
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 pointer-events-none" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search the website"
|
||||
className="w-80 pl-10 bg-gray-50 border-gray-200 cursor-pointer"
|
||||
data-testid="input-search"
|
||||
readOnly
|
||||
onClick={() => setIsSearchModalOpen(true)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{isAuthenticated && user ? (
|
||||
<>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleAdminPage}
|
||||
data-testid="button-admin-dashboard"
|
||||
>
|
||||
Admin Dashboard
|
||||
</Button>
|
||||
|
||||
<div className="flex items-center space-x-2 px-3 py-1 bg-gray-100 rounded-md">
|
||||
<User className="h-4 w-4 text-gray-600" />
|
||||
<span className="text-sm font-medium text-gray-700" data-testid="user-name">
|
||||
{user.firstName} {user.lastName}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleLogout}
|
||||
data-testid="button-logout"
|
||||
>
|
||||
<LogOut className="h-4 w-4" />
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setIsLoginModalOpen(true)}
|
||||
data-testid="button-login"
|
||||
>
|
||||
Login
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
data-testid="button-settings"
|
||||
>
|
||||
<Settings className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@ -117,8 +294,8 @@ export default function MediaOutlet() {
|
||||
className="w-20 h-20 rounded-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-20 h-20 bg-primary/20 rounded-full flex items-center justify-center">
|
||||
<span className="text-primary font-bold text-2xl">
|
||||
<div className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-gray-600 font-bold text-2xl">
|
||||
{outlet.name.charAt(0)}
|
||||
</span>
|
||||
</div>
|
||||
@ -126,7 +303,7 @@ export default function MediaOutlet() {
|
||||
|
||||
<div className="flex-1">
|
||||
<h1 className="text-3xl font-bold mb-2">{outlet.name}</h1>
|
||||
<p className="text-lg text-muted-foreground mb-4">{outlet.description}</p>
|
||||
<p className="text-lg text-gray-600 mb-4">{outlet.description}</p>
|
||||
<div className="flex items-center space-x-2 mb-4">
|
||||
<Badge variant="secondary" className="capitalize">
|
||||
{outlet.category}
|
||||
@ -146,11 +323,11 @@ export default function MediaOutlet() {
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Gavel className="h-5 w-5 text-orange-600" />
|
||||
<span className="font-semibold text-orange-900">관리자 권한 경매</span>
|
||||
<span className="font-semibold text-orange-900">Management Rights Auction</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2 text-sm text-orange-700">
|
||||
<TrendingUp className="h-4 w-4" />
|
||||
<span>현재 최고가: {formatCurrency(auction.currentBid)}</span>
|
||||
<span>Current Highest Bid: {formatCurrency(auction.currentBid)}</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2 text-sm text-orange-700">
|
||||
<Clock className="h-4 w-4" />
|
||||
@ -163,7 +340,7 @@ export default function MediaOutlet() {
|
||||
className="bg-orange-600 hover:bg-orange-700"
|
||||
data-testid="button-auction"
|
||||
>
|
||||
입찰하기
|
||||
Place Bid
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
@ -174,7 +351,7 @@ export default function MediaOutlet() {
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Gavel className="h-5 w-5 text-gray-500" />
|
||||
<span className="text-gray-700">현재 진행 중인 경매가 없습니다</span>
|
||||
<span className="text-gray-700">No active auction currently</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
@ -182,7 +359,7 @@ export default function MediaOutlet() {
|
||||
disabled
|
||||
data-testid="button-no-auction"
|
||||
>
|
||||
경매 대기 중
|
||||
Auction Pending
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
@ -214,7 +391,7 @@ export default function MediaOutlet() {
|
||||
onClick={() => setViewMode("grid")}
|
||||
data-testid="button-grid-view"
|
||||
>
|
||||
<i className="fas fa-th mr-2"></i>
|
||||
<Grid className="h-4 w-4 mr-2" />
|
||||
Grid
|
||||
</Button>
|
||||
<Button
|
||||
@ -223,7 +400,7 @@ export default function MediaOutlet() {
|
||||
onClick={() => setViewMode("list")}
|
||||
data-testid="button-list-view"
|
||||
>
|
||||
<i className="fas fa-list mr-2"></i>
|
||||
<List className="h-4 w-4 mr-2" />
|
||||
List
|
||||
</Button>
|
||||
</div>
|
||||
@ -232,10 +409,10 @@ export default function MediaOutlet() {
|
||||
{articlesLoading ? (
|
||||
<div className={`grid gap-6 ${viewMode === "grid" ? "grid-cols-1 md:grid-cols-2 lg:grid-cols-3" : "grid-cols-1"}`}>
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<div key={i} className="bg-card border border-border rounded-xl p-6 animate-pulse">
|
||||
<div className="h-40 bg-muted rounded mb-4"></div>
|
||||
<div className="h-6 bg-muted rounded mb-2"></div>
|
||||
<div className="h-4 bg-muted rounded w-2/3"></div>
|
||||
<div key={i} className="bg-white border border-gray-200 rounded-xl p-6 animate-pulse">
|
||||
<div className="h-40 bg-gray-200 rounded mb-4"></div>
|
||||
<div className="h-6 bg-gray-200 rounded mb-2"></div>
|
||||
<div className="h-4 bg-gray-200 rounded w-2/3"></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@ -253,9 +430,9 @@ export default function MediaOutlet() {
|
||||
) : (
|
||||
<Card>
|
||||
<CardContent className="p-12 text-center">
|
||||
<i className="fas fa-newspaper text-4xl text-muted-foreground mb-4"></i>
|
||||
<div className="text-4xl text-gray-400 mb-4">📰</div>
|
||||
<h3 className="text-xl font-semibold mb-2">No Articles Yet</h3>
|
||||
<p className="text-muted-foreground">
|
||||
<p className="text-gray-600">
|
||||
This media outlet doesn't have any published articles yet. Check back later!
|
||||
</p>
|
||||
</CardContent>
|
||||
@ -263,6 +440,20 @@ export default function MediaOutlet() {
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
|
||||
{/* Login Modal */}
|
||||
<LoginModal
|
||||
isOpen={isLoginModalOpen}
|
||||
onClose={() => setIsLoginModalOpen(false)}
|
||||
/>
|
||||
|
||||
{/* Search Modal */}
|
||||
<SearchModal
|
||||
isOpen={isSearchModalOpen}
|
||||
onClose={() => setIsSearchModalOpen(false)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user