From 1add3d5a05b24d4b57de14a0cc7b2705cd753d05 Mon Sep 17 00:00:00 2001
From: kimjaehyeon0101 <47347352-kimjaehyeon0101@users.noreply.replit.com>
Date: Mon, 29 Sep 2025 20:22:57 +0000
Subject: [PATCH] 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
---
 client/src/components/SearchModal.tsx |   2 -
 client/src/pages/Home.tsx             |  13 +-
 client/src/pages/MediaOutlet.tsx      | 279 ++++++++++++++++++++++----
 3 files changed, 239 insertions(+), 55 deletions(-)

diff --git a/client/src/components/SearchModal.tsx b/client/src/components/SearchModal.tsx
index f37ab59..b89c076 100644
--- a/client/src/components/SearchModal.tsx
+++ b/client/src/components/SearchModal.tsx
@@ -21,8 +21,6 @@ export default function SearchModal({ isOpen, onClose }: SearchModalProps) {
   const [searchQuery, setSearchQuery] = useState("");
   const [debouncedQuery, setDebouncedQuery] = useState("");
 
-  console.log("SearchModal rendered with isOpen:", isOpen);
-
   // Debounce search query
   useEffect(() => {
     const timer = setTimeout(() => {
diff --git a/client/src/pages/Home.tsx b/client/src/pages/Home.tsx
index 1022a83..7e44bb1 100644
--- a/client/src/pages/Home.tsx
+++ b/client/src/pages/Home.tsx
@@ -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>
               
diff --git a/client/src/pages/MediaOutlet.tsx b/client/src/pages/MediaOutlet.tsx
index 201ad90..ad3d731 100644
--- a/client/src/pages/MediaOutlet.tsx
+++ b/client/src/pages/MediaOutlet.tsx
@@ -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>
   );
 }