From 5a6d98208d1b4b13c2e07bccadc70385494e2dcd Mon Sep 17 00:00:00 2001
From: kimjaehyeon0101 <47347352-kimjaehyeon0101@users.noreply.replit.com>
Date: Mon, 29 Sep 2025 16:40:42 +0000
Subject: [PATCH] Update home and landing pages to show consistent UI
 regardless of login status

Refactor routing and page components to ensure the main content is displayed identically for both logged-in and logged-out users, removing conditional rendering based on authentication status in the main router and consolidating content display logic into a new `MainContent` component.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/InMLMqG
---
 client/src/App.tsx                    |  22 +---
 client/src/components/MainContent.tsx | 140 ++++++++++++++++++++++++
 client/src/pages/Home.tsx             | 148 +++++++-------------------
 client/src/pages/Landing.tsx          | 100 ++++-------------
 4 files changed, 205 insertions(+), 205 deletions(-)
 create mode 100644 client/src/components/MainContent.tsx

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 569749c..09e222c 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -15,28 +15,14 @@ import AuctionGuide from "@/pages/AuctionGuide";
 import NotFound from "@/pages/not-found";
 
 function Router() {
-  const { isAuthenticated, isLoading, user } = useAuth();
-
-  if (isLoading) {
-    return (
-      <div className="min-h-screen bg-background flex items-center justify-center">
-        <div className="text-center">
-          <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-primary mx-auto mb-4"></div>
-          <p className="text-lg">Loading...</p>
-        </div>
-      </div>
-    );
-  }
-
-  // Debug logging
-  console.log('Router render - isAuthenticated:', isAuthenticated, 'user:', user);
+  const { isAuthenticated, user } = useAuth();
 
   return (
     <Switch>
       <Route path="/" component={isAuthenticated ? Home : Landing} />
-      <Route path="/media/:slug" component={isAuthenticated ? MediaOutlet : Landing} />
-      <Route path="/articles/:slug" component={isAuthenticated ? Article : Landing} />
-      <Route path="/auctions" component={isAuthenticated ? Auctions : Landing} />
+      <Route path="/media/:slug" component={MediaOutlet} />
+      <Route path="/articles/:slug" component={Article} />
+      <Route path="/auctions" component={Auctions} />
       <Route path="/auction-guide" component={AuctionGuide} />
       
       {/* Admin routes - only when authenticated */}
diff --git a/client/src/components/MainContent.tsx b/client/src/components/MainContent.tsx
new file mode 100644
index 0000000..310817f
--- /dev/null
+++ b/client/src/components/MainContent.tsx
@@ -0,0 +1,140 @@
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import type { MediaOutlet } from "@shared/schema";
+import { useAuth } from "@/hooks/useAuth";
+
+const categories = [
+  { id: "people", name: "People", key: "People" },
+  { id: "topics", name: "Topics", key: "Topics" },
+  { id: "companies", name: "Companies", key: "Companies" }
+];
+
+export default function MainContent() {
+  const [selectedCategory, setSelectedCategory] = useState("People");
+  const { user } = useAuth();
+
+  const { data: mediaOutlets = [], isLoading } = useQuery<MediaOutlet[]>({
+    queryKey: ["/api/media-outlets", selectedCategory],
+    queryFn: async () => {
+      const res = await fetch(`/api/media-outlets?category=${selectedCategory}`, {
+        credentials: "include",
+      });
+      if (!res.ok) {
+        throw new Error(`${res.status}: ${res.statusText}`);
+      }
+      return res.json();
+    },
+  });
+
+  const { data: allOutlets = [] } = useQuery<MediaOutlet[]>({
+    queryKey: ["/api/media-outlets"],
+    queryFn: async () => {
+      const res = await fetch("/api/media-outlets", {
+        credentials: "include",
+      });
+      if (!res.ok) {
+        throw new Error(`${res.status}: ${res.statusText}`);
+      }
+      return res.json();
+    },
+  });
+
+  // Count outlets by category
+  const getCategoryCount = (category: string) => {
+    return allOutlets.filter(outlet => 
+      outlet.category.toLowerCase() === category.toLowerCase()
+    ).length;
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Category Tabs */}
+      <div className="bg-white border-b">
+        <div className="max-w-7xl mx-auto px-6">
+          <div className="flex space-x-0">
+            {categories.map((category) => (
+              <button
+                key={category.id}
+                onClick={() => setSelectedCategory(category.key)}
+                className={`px-8 py-4 text-sm font-medium border-b-2 transition-colors ${
+                  selectedCategory === category.key
+                    ? "border-blue-500 text-blue-600"
+                    : "border-transparent text-gray-500 hover:text-gray-700"
+                }`}
+                data-testid={`tab-${category.id}`}
+              >
+                {category.name} 
+                <span className="ml-2 text-gray-400">
+                  {getCategoryCount(category.key)}
+                </span>
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Media Outlets Grid */}
+      <div className="max-w-7xl mx-auto px-6 py-8">
+        {isLoading ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {Array.from({ length: 12 }).map((_, i) => (
+              <Card key={i} className="animate-pulse">
+                <CardContent className="p-4">
+                  <div className="flex items-center space-x-3">
+                    <div className="w-12 h-12 bg-gray-200 rounded-full"></div>
+                    <div className="flex-1">
+                      <div className="h-4 bg-gray-200 rounded mb-2"></div>
+                      <div className="h-3 bg-gray-200 rounded w-2/3"></div>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {mediaOutlets.map((outlet) => (
+              <Card 
+                key={outlet.id} 
+                className="hover:shadow-md transition-shadow cursor-pointer bg-white"
+                data-testid={`card-outlet-${outlet.id}`}
+              >
+                <CardContent className="p-4">
+                  <div className="flex items-center space-x-3">
+                    <div className="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center overflow-hidden">
+                      {outlet.imageUrl ? (
+                        <img 
+                          src={outlet.imageUrl} 
+                          alt={outlet.name}
+                          className="w-full h-full object-cover"
+                        />
+                      ) : (
+                        <div className="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center">
+                          <span className="text-gray-600 text-sm font-medium">
+                            {outlet.name.charAt(0)}
+                          </span>
+                        </div>
+                      )}
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <h3 className="font-medium text-gray-900 truncate">
+                        {outlet.name}
+                      </h3>
+                      <p className="text-sm text-gray-500 truncate">
+                        {outlet.category === "people" && "Media Personality"}
+                        {outlet.category === "topics" && "Industry Topic"}  
+                        {outlet.category === "companies" && "Technology Company"}
+                      </p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/client/src/pages/Home.tsx b/client/src/pages/Home.tsx
index e67ad25..5126b6d 100644
--- a/client/src/pages/Home.tsx
+++ b/client/src/pages/Home.tsx
@@ -1,76 +1,57 @@
-import { useState } from "react";
-import { useQuery } from "@tanstack/react-query";
-import { Link } from "wouter";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { useAuth } from "@/hooks/useAuth";
-import CategoryTabs from "@/components/CategoryTabs";
-import MediaOutletCard from "@/components/MediaOutletCard";
-import AuctionCard from "@/components/AuctionCard";
-import type { MediaOutlet, Auction } from "@shared/schema";
-import { Search, Settings, Grid, List } from "lucide-react";
+import { Search, Settings } from "lucide-react";
+import MainContent from "@/components/MainContent";
 
 export default function Home() {
   const { user } = useAuth();
-  const [selectedCategory, setSelectedCategory] = useState("People");
-  const [viewMode, setViewMode] = useState<"grid" | "list">("list");
-
-  const { data: mediaOutlets = [], isLoading: outletsLoading } = useQuery<MediaOutlet[]>({
-    queryKey: ["/api/media-outlets", selectedCategory],
-    queryFn: async () => {
-      const res = await fetch(`/api/media-outlets?category=${selectedCategory}`, {
-        credentials: "include",
-      });
-      if (!res.ok) {
-        throw new Error(`${res.status}: ${res.statusText}`);
-      }
-      return res.json();
-    },
-  });
-
-  const { data: auctions = [], isLoading: auctionsLoading } = useQuery<Auction[]>({
-    queryKey: ["/api/auctions"],
-  });
 
   const handleLogout = () => {
     window.location.href = "/api/logout";
   };
 
   return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
-      {/* Clean Header */}
-      <header className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 sticky top-0 z-50">
-        <div className="max-w-4xl mx-auto px-4 py-3">
+    <div className="min-h-screen bg-gray-50">
+      {/* Header */}
+      <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">
-            {/* Logo and User */}
-            <div className="flex items-center space-x-3">
-              {user?.profileImageUrl ? (
-                <img 
-                  src={user.profileImageUrl} 
-                  alt={user.firstName || 'User'} 
-                  className="w-8 h-8 rounded-full object-cover"
-                />
-              ) : (
-                <div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white text-sm font-semibold">
-                  {user?.firstName?.charAt(0) || 'U'}
-                </div>
-              )}
-              <div>
-                <img 
-                  src="/attached_assets/logo_black_1759162717640.png" 
-                  alt="SAPIENS" 
-                  className="h-6 w-auto"
-                />
-                <div className="text-xs text-gray-500">{user?.firstName || 'User'}</div>
-              </div>
+            <div className="flex items-center space-x-6">
+              <img 
+                src="/attached_assets/logo_black_1759162717640.png" 
+                alt="SAPIENS" 
+                className="h-6 w-auto"
+                data-testid="logo-sapiens"
+              />
+              <span className="text-sm text-gray-600 font-medium">Nostra</span>
             </div>
             
-            {/* Actions */}
-            <div className="flex items-center space-x-2">
-              <Button variant="ghost" size="sm">
-                <Search className="h-4 w-4" />
+            <div className="flex items-center space-x-4">
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+                <Input 
+                  type="text" 
+                  placeholder="Search the website" 
+                  className="w-80 pl-10 bg-gray-50 border-gray-200"
+                  data-testid="input-search"
+                />
+              </div>
+              
+              <Button 
+                variant="ghost" 
+                size="sm"
+                onClick={handleLogout}
+                data-testid="button-admin"
+              >
+                관리자 페이지
               </Button>
-              <Button variant="ghost" size="sm">
+              
+              <Button 
+                variant="ghost" 
+                size="sm"
+                data-testid="button-settings"
+              >
                 <Settings className="h-4 w-4" />
               </Button>
             </div>
@@ -78,55 +59,8 @@ export default function Home() {
         </div>
       </header>
 
-      <main className="max-w-4xl mx-auto px-4">
-        {/* View Mode Toggle */}
-        <div className="flex items-center justify-between py-4">
-          <h1 className="text-xl font-semibold text-gray-900 dark:text-white">Latest Articles</h1>
-          <div className="flex items-center space-x-2">
-            <Button
-              variant={viewMode === "grid" ? "default" : "ghost"}
-              size="sm"
-              onClick={() => setViewMode("grid")}
-            >
-              <Grid className="h-4 w-4" />
-            </Button>
-            <Button
-              variant={viewMode === "list" ? "default" : "ghost"}
-              size="sm"
-              onClick={() => setViewMode("list")}
-            >
-              <List className="h-4 w-4" />
-            </Button>
-          </div>
-        </div>
-
-        {/* Media Outlets List */}
-        <div className="space-y-3 pb-20">
-          {outletsLoading ? (
-            Array.from({ length: 6 }).map((_, i) => (
-              <div key={i} className="bg-white dark:bg-gray-800 rounded-lg p-4 animate-pulse">
-                <div className="flex items-center space-x-3">
-                  <div className="w-12 h-12 bg-gray-200 dark:bg-gray-700 rounded-full"></div>
-                  <div className="flex-1">
-                    <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded mb-2"></div>
-                    <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-2/3"></div>
-                  </div>
-                </div>
-              </div>
-            ))
-          ) : (
-            mediaOutlets.map((outlet) => (
-              <MediaOutletCard key={outlet.id} outlet={outlet} viewMode={viewMode} />
-            ))
-          )}
-        </div>
-      </main>
-
-      {/* Bottom Navigation */}
-      <CategoryTabs 
-        selectedCategory={selectedCategory}
-        onCategoryChange={setSelectedCategory}
-      />
+      {/* Main Content */}
+      <MainContent />
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/client/src/pages/Landing.tsx b/client/src/pages/Landing.tsx
index a84e11b..27dc1aa 100644
--- a/client/src/pages/Landing.tsx
+++ b/client/src/pages/Landing.tsx
@@ -1,11 +1,12 @@
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Card, CardContent } from "@/components/ui/card";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { useToast } from "@/hooks/use-toast";
 import { apiRequest, queryClient } from "@/lib/queryClient";
 import { useMutation } from "@tanstack/react-query";
+import { Search, Settings } from "lucide-react";
+import MainContent from "@/components/MainContent";
 
 export default function Landing() {
   const [showLoginModal, setShowLoginModal] = useState(false);
@@ -79,116 +80,55 @@ export default function Landing() {
   };
 
   return (
-    <div className="min-h-screen bg-background">
+    <div className="min-h-screen bg-gray-50">
       {/* Header */}
-      <header className="bg-card border-b border-border sticky top-0 z-50">
+      <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="flex items-center space-x-6">
               <img 
                 src="/attached_assets/logo_black_1759162717640.png" 
                 alt="SAPIENS" 
-                className="h-8 w-auto"
+                className="h-6 w-auto"
+                data-testid="logo-sapiens"
               />
+              <span className="text-sm text-gray-600 font-medium">Nostra</span>
             </div>
             
             <div className="flex items-center space-x-4">
               <div className="relative">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                 <Input 
                   type="text" 
-                  placeholder="Search media outlets, topics..." 
-                  className="w-64"
+                  placeholder="Search the website" 
+                  className="w-80 pl-10 bg-gray-50 border-gray-200"
                   data-testid="input-search"
                 />
-                <i className="fas fa-search absolute right-3 top-2.5 text-muted-foreground"></i>
               </div>
               
               <Button 
-                variant="outline" 
+                variant="ghost" 
+                size="sm"
                 onClick={handleLogin}
                 data-testid="button-login"
               >
-                Login
+                관리자 페이지
               </Button>
               
               <Button 
-                onClick={() => setShowRequestModal(true)}
-                data-testid="button-request-outlet"
+                variant="ghost" 
+                size="sm"
+                data-testid="button-settings"
               >
-                Request Media Outlet
+                <Settings className="h-4 w-4" />
               </Button>
             </div>
           </div>
         </div>
       </header>
 
-      {/* Hero Section */}
-      <div className="gradient-bg rounded-2xl p-8 mb-8 text-white mx-6 mt-8">
-        <div className="max-w-3xl">
-          <h1 className="text-4xl font-bold mb-4">Media Intelligence & Prediction Markets</h1>
-          <p className="text-xl opacity-90 mb-6">Access premium media outlets across People, Topics, and Companies. Participate in prediction markets and bid for exclusive editorial rights.</p>
-          <div className="flex space-x-4">
-            <Button 
-              className="bg-white text-primary hover:bg-opacity-90"
-              onClick={handleLogin}
-              data-testid="button-explore"
-            >
-              Explore Media Outlets
-            </Button>
-            <Button 
-              variant="outline" 
-              className="border-white text-white hover:bg-white hover:text-primary"
-              onClick={handleLogin}
-              data-testid="button-auctions"
-            >
-              View Active Auctions
-            </Button>
-          </div>
-        </div>
-      </div>
-
-      {/* Features Section */}
-      <div className="max-w-7xl mx-auto px-6 py-12">
-        <div className="text-center mb-12">
-          <h2 className="text-3xl font-bold mb-4">Comprehensive Media Platform</h2>
-          <p className="text-xl text-muted-foreground">Discover insights across three key categories</p>
-        </div>
-        
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-          <Card className="card-hover">
-            <CardContent className="p-6">
-              <div className="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center mb-4">
-                <i className="fas fa-users text-primary text-xl"></i>
-              </div>
-              <h3 className="text-xl font-semibold mb-3">People</h3>
-              <p className="text-muted-foreground mb-4">Follow insights from influential leaders across technology, finance, and politics.</p>
-              <p className="text-sm text-primary font-semibold">24 Influential Figures</p>
-            </CardContent>
-          </Card>
-
-          <Card className="card-hover">
-            <CardContent className="p-6">
-              <div className="w-12 h-12 bg-chart-2/20 rounded-lg flex items-center justify-center mb-4">
-                <i className="fas fa-hashtag text-chart-2 text-xl"></i>
-              </div>
-              <h3 className="text-xl font-semibold mb-3">Topics</h3>
-              <p className="text-muted-foreground mb-4">Stay updated on trending subjects from crypto to AI, regulation to innovation.</p>
-              <p className="text-sm text-chart-2 font-semibold">20 Key Topics</p>
-            </CardContent>
-          </Card>
-
-          <Card className="card-hover">
-            <CardContent className="p-6">
-              <div className="w-12 h-12 bg-chart-1/20 rounded-lg flex items-center justify-center mb-4">
-                <i className="fas fa-building text-chart-1 text-xl"></i>
-              </div>
-              <h3 className="text-xl font-semibold mb-3">Companies</h3>
-              <p className="text-muted-foreground mb-4">Track major corporations shaping the future of technology and finance.</p>
-              <p className="text-sm text-chart-1 font-semibold">27 Leading Companies</p>
-            </CardContent>
-          </Card>
-        </div>
-      </div>
+      {/* Main Content */}
+      <MainContent />
 
       {/* Login Modal */}
       <Dialog open={showLoginModal} onOpenChange={setShowLoginModal}>