From ca2bbd098b49497efcc12b9e6e68324c2bb733ad Mon Sep 17 00:00:00 2001
From: kimjaehyeon0101 <47347352-kimjaehyeon0101@users.noreply.replit.com>
Date: Mon, 29 Sep 2025 19:43:02 +0000
Subject: [PATCH] Unify media page UI with homepage and preserve header and
 footer

Update Header component to include login/logout functionality, search input, and user display, ensuring consistent UI across media pages.

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/YptCfK0
---
 client/src/components/Header.tsx | 133 +++++++++++++++++++++++++++++++
 1 file changed, 133 insertions(+)
 create mode 100644 client/src/components/Header.tsx

diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx
new file mode 100644
index 0000000..8abc6c2
--- /dev/null
+++ b/client/src/components/Header.tsx
@@ -0,0 +1,133 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Search, Settings, User, LogOut } from "lucide-react";
+import { useAuth } from "@/hooks/useAuth";
+import { useToast } from "@/hooks/use-toast";
+import { queryClient } from "@/lib/queryClient";
+import LoginModal from "@/components/LoginModal";
+
+export default function Header() {
+  const { user, isAuthenticated } = useAuth();
+  const { toast } = useToast();
+  const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
+
+  const handleAdminPage = () => {
+    window.location.href = "/admin";
+  };
+
+  const handleLogout = async () => {
+    try {
+      const response = await fetch("/api/logout", {
+        method: "POST",
+        credentials: "include",
+      });
+
+      if (response.ok) {
+        toast({
+          title: "로그아웃 성공",
+          description: "안전하게 로그아웃되었습니다.",
+        });
+
+        // Invalidate all auth-related queries
+        queryClient.invalidateQueries({ queryKey: ["/api/auth/user"] });
+        
+        // Redirect to home
+        window.location.href = "/";
+      } else {
+        throw new Error("로그아웃 실패");
+      }
+    } catch (error) {
+      toast({
+        title: "로그아웃 오류",
+        description: "로그아웃 중 오류가 발생했습니다.",
+        variant: "destructive",
+      });
+    }
+  };
+
+  return (
+    <>
+      <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">
+              <a href="/" data-testid="logo-link">
+                <img 
+                  src="/attached_assets/logo_black_1759162717640.png" 
+                  alt="SAPIENS" 
+                  className="h-6 w-auto"
+                  data-testid="logo-sapiens"
+                />
+              </a>
+            </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 the website" 
+                  className="w-80 pl-10 bg-gray-50 border-gray-200"
+                  data-testid="input-search"
+                />
+              </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>
+      
+      {/* Login Modal */}
+      <LoginModal 
+        isOpen={isLoginModalOpen} 
+        onClose={() => setIsLoginModalOpen(false)} 
+      />
+    </>
+  );
+}
\ No newline at end of file