Add ability to search and manage individual media outlets

Implement admin dashboard with media outlet search, selection, and a dedicated management page for each outlet.

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/jvFIdY3

.replit

@@ -22,6 +22,10 @@ externalPort = 3001
 localPort = 43349
 externalPort = 3000
 
+[[ports]]
+localPort = 44197
+externalPort = 3002
+
 [env]
 PORT = "5000"
 

client/src/components/MediaOutletManagement.tsx

@@ -0,0 +1,293 @@
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { ArrowLeft, Edit, Plus, BarChart3, Gavel, MessageSquare } from "lucide-react";
+import type { MediaOutlet } from "@shared/schema";
+
+interface MediaOutletManagementProps {
+  outlet: MediaOutlet;
+  onBack: () => void;
+}
+
+export default function MediaOutletManagement({ outlet, onBack }: MediaOutletManagementProps) {
+  const [activeTab, setActiveTab] = useState("overview");
+
+  // TODO: Add queries for articles, predictions, auctions, comments related to this outlet
+  const { data: articles = [] } = useQuery({
+    queryKey: ["/api/articles", outlet.id],
+    enabled: false, // Disabled for now as articles API is not implemented
+  });
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Header */}
+      <div 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-4">
+              <Button 
+                variant="ghost" 
+                size="sm"
+                onClick={onBack}
+                data-testid="button-back"
+              >
+                <ArrowLeft className="h-4 w-4 mr-2" />
+                뒤로가기
+              </Button>
+              
+              <div className="flex items-center space-x-3">
+                {outlet.imageUrl ? (
+                  <img 
+                    src={outlet.imageUrl} 
+                    alt={outlet.name}
+                    className="w-10 h-10 rounded-full object-cover"
+                  />
+                ) : (
+                  <div className="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center">
+                    <span className="text-gray-600 font-medium">
+                      {outlet.name.charAt(0)}
+                    </span>
+                  </div>
+                )}
+                <div>
+                  <h1 className="text-xl font-bold text-gray-900">{outlet.name}</h1>
+                  <p className="text-sm text-gray-500">{outlet.description || "Media Outlet"}</p>
+                </div>
+              </div>
+            </div>
+            
+            <div className="flex items-center space-x-2">
+              <span className="inline-block px-3 py-1 text-sm font-medium bg-blue-100 text-blue-800 rounded-full">
+                {outlet.category}
+              </span>
+              <Button 
+                variant="outline" 
+                size="sm"
+                data-testid="button-edit-outlet"
+              >
+                <Edit className="h-4 w-4 mr-2" />
+                편집
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="max-w-7xl mx-auto px-6 py-6">
+        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+          <TabsList className="grid w-full grid-cols-5">
+            <TabsTrigger value="overview" data-testid="tab-overview">개요</TabsTrigger>
+            <TabsTrigger value="articles" data-testid="tab-articles">기사 관리</TabsTrigger>
+            <TabsTrigger value="predictions" data-testid="tab-predictions">예측시장</TabsTrigger>
+            <TabsTrigger value="auctions" data-testid="tab-auctions">경매</TabsTrigger>
+            <TabsTrigger value="comments" data-testid="tab-comments">댓글</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="overview" className="mt-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+              <Card>
+                <CardContent className="p-6">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <h3 className="text-sm font-medium text-gray-500">총 기사 수</h3>
+                      <p className="text-2xl font-bold">0</p>
+                    </div>
+                    <div className="text-blue-600">
+                      <BarChart3 className="h-6 w-6" />
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+              
+              <Card>
+                <CardContent className="p-6">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <h3 className="text-sm font-medium text-gray-500">활성 예측시장</h3>
+                      <p className="text-2xl font-bold">0</p>
+                    </div>
+                    <div className="text-green-600">
+                      <BarChart3 className="h-6 w-6" />
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+              
+              <Card>
+                <CardContent className="p-6">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <h3 className="text-sm font-medium text-gray-500">진행중인 경매</h3>
+                      <p className="text-2xl font-bold">0</p>
+                    </div>
+                    <div className="text-orange-600">
+                      <Gavel className="h-6 w-6" />
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+              
+              <Card>
+                <CardContent className="p-6">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <h3 className="text-sm font-medium text-gray-500">총 댓글 수</h3>
+                      <p className="text-2xl font-bold">0</p>
+                    </div>
+                    <div className="text-purple-600">
+                      <MessageSquare className="h-6 w-6" />
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+              <Card>
+                <CardHeader>
+                  <CardTitle>언론매체 정보</CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div>
+                    <label className="text-sm font-medium text-gray-700">이름</label>
+                    <Input value={outlet.name} readOnly className="mt-1" />
+                  </div>
+                  <div>
+                    <label className="text-sm font-medium text-gray-700">설명</label>
+                    <Input value={outlet.description || ""} readOnly className="mt-1" />
+                  </div>
+                  <div>
+                    <label className="text-sm font-medium text-gray-700">카테고리</label>
+                    <Input value={outlet.category} readOnly className="mt-1" />
+                  </div>
+                  <div>
+                    <label className="text-sm font-medium text-gray-700">슬러그</label>
+                    <Input value={outlet.slug} readOnly className="mt-1" />
+                  </div>
+                </CardContent>
+              </Card>
+
+              <Card>
+                <CardHeader>
+                  <CardTitle>빠른 작업</CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-3">
+                  <Button 
+                    className="w-full justify-start" 
+                    variant="outline"
+                    data-testid="button-create-article"
+                  >
+                    <Plus className="h-4 w-4 mr-2" />
+                    새 기사 작성
+                  </Button>
+                  <Button 
+                    className="w-full justify-start" 
+                    variant="outline"
+                    data-testid="button-create-prediction"
+                  >
+                    <BarChart3 className="h-4 w-4 mr-2" />
+                    예측시장 생성
+                  </Button>
+                  <Button 
+                    className="w-full justify-start" 
+                    variant="outline"
+                    data-testid="button-start-auction"
+                  >
+                    <Gavel className="h-4 w-4 mr-2" />
+                    경매 시작
+                  </Button>
+                  <Button 
+                    className="w-full justify-start" 
+                    variant="outline"
+                    data-testid="button-moderate-comments"
+                  >
+                    <MessageSquare className="h-4 w-4 mr-2" />
+                    댓글 관리
+                  </Button>
+                </CardContent>
+              </Card>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="articles" className="mt-6">
+            <Card>
+              <CardHeader>
+                <div className="flex items-center justify-between">
+                  <CardTitle>기사 관리</CardTitle>
+                  <Button data-testid="button-new-article">
+                    <Plus className="h-4 w-4 mr-2" />
+                    새 기사 작성
+                  </Button>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="text-center py-12">
+                  <div className="text-gray-400 text-lg mb-2">아직 기사가 없습니다</div>
+                  <div className="text-gray-500 text-sm">첫 번째 기사를 작성해보세요</div>
+                </div>
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          <TabsContent value="predictions" className="mt-6">
+            <Card>
+              <CardHeader>
+                <div className="flex items-center justify-between">
+                  <CardTitle>예측시장 관리</CardTitle>
+                  <Button data-testid="button-new-prediction">
+                    <Plus className="h-4 w-4 mr-2" />
+                    새 예측시장 생성
+                  </Button>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="text-center py-12">
+                  <div className="text-gray-400 text-lg mb-2">활성 예측시장이 없습니다</div>
+                  <div className="text-gray-500 text-sm">새로운 예측시장을 생성해보세요</div>
+                </div>
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          <TabsContent value="auctions" className="mt-6">
+            <Card>
+              <CardHeader>
+                <div className="flex items-center justify-between">
+                  <CardTitle>경매 관리</CardTitle>
+                  <Button data-testid="button-new-auction">
+                    <Plus className="h-4 w-4 mr-2" />
+                    새 경매 시작
+                  </Button>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="text-center py-12">
+                  <div className="text-gray-400 text-lg mb-2">진행중인 경매가 없습니다</div>
+                  <div className="text-gray-500 text-sm">새로운 경매를 시작해보세요</div>
+                </div>
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          <TabsContent value="comments" className="mt-6">
+            <Card>
+              <CardHeader>
+                <CardTitle>댓글 관리</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="text-center py-12">
+                  <div className="text-gray-400 text-lg mb-2">관리할 댓글이 없습니다</div>
+                  <div className="text-gray-500 text-sm">댓글이 등록되면 여기서 관리할 수 있습니다</div>
+                </div>
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </Tabs>
+      </div>
+    </div>
+  );
+}

client/src/pages/AdminDashboard.tsx

@@ -1,14 +1,21 @@
 import { useQuery } from "@tanstack/react-query";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import { Card, CardContent } from "@/components/ui/card";
 import { useAuth } from "@/hooks/useAuth";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useToast } from "@/hooks/use-toast";
 import { isUnauthorizedError } from "@/lib/authUtils";
+import { Search, Settings } from "lucide-react";
+import type { MediaOutlet } from "@shared/schema";
+import MediaOutletManagement from "@/components/MediaOutletManagement";
 
 export default function AdminDashboard() {
   const { user, isLoading } = useAuth();
   const { toast } = useToast();
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedOutlet, setSelectedOutlet] = useState<MediaOutlet | null>(null);
+  const [managingOutlet, setManagingOutlet] = useState<MediaOutlet | null>(null);
 
   // Redirect if not authenticated or not admin/superadmin
   useEffect(() => {
@@ -24,24 +31,24 @@ export default function AdminDashboard() {
     }
   }, [isLoading, user, toast]);
 
-  const { data: analytics, isLoading: analyticsLoading, error: analyticsError } = useQuery({
-    queryKey: ["/api/analytics"],
-    retry: false,
+  const { data: mediaOutlets = [], isLoading: outletsLoading } = 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();
+    },
   });
 
-  // Handle analytics errors
-  useEffect(() => {
-    if (analyticsError && isUnauthorizedError(analyticsError as Error)) {
-      toast({
-        title: "Unauthorized",
-        description: "You are logged out. Logging in again...",
-        variant: "destructive",
-      });
-      setTimeout(() => {
-        window.location.href = "/api/login";
-      }, 500);
-    }
-  }, [analyticsError, toast]);
+  // Filter outlets based on search term
+  const filteredOutlets = mediaOutlets.filter(outlet =>
+    outlet.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    (outlet.description && outlet.description.toLowerCase().includes(searchTerm.toLowerCase()))
+  );
 
   const handleLogout = () => {
     window.location.href = "/api/logout";
@@ -55,25 +62,67 @@ export default function AdminDashboard() {
     );
   }
 
+  // If managing an outlet, show MediaOutletManagement
+  if (managingOutlet) {
+    return (
+      <MediaOutletManagement 
+        outlet={managingOutlet}
+        onBack={() => setManagingOutlet(null)}
+      />
+    );
+  }
+
   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="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>
-              <span className="text-sm text-muted-foreground">• Admin Dashboard</span>
+            <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">
-              <Button variant="ghost" onClick={() => window.location.href = "/"}>
-                Home
+              <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..." 
+                  className="w-80 pl-10 bg-gray-50 border-gray-200"
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  data-testid="input-admin-search"
+                />
+              </div>
+              
+              <Button 
+                variant="ghost" 
+                size="sm"
+                onClick={() => window.location.href = "/"}
+                data-testid="button-home"
+              >
+                홈페이지
               </Button>
-              <Button variant="outline" onClick={handleLogout}>
+              
+              <Button 
+                variant="ghost" 
+                size="sm"
+                data-testid="button-settings"
+              >
+                <Settings className="h-4 w-4" />
+              </Button>
+              
+              <Button 
+                variant="outline" 
+                size="sm"
+                onClick={handleLogout}
+                data-testid="button-logout"
+              >
                 Logout
               </Button>
             </div>
@@ -81,137 +130,135 @@ export default function AdminDashboard() {
         </div>
       </header>
 
-      <main className="max-w-7xl mx-auto px-6 py-8">
-        <div className="flex items-center justify-between mb-8">
-          <div>
-            <h1 className="text-3xl font-bold">Admin Dashboard</h1>
-            <p className="text-muted-foreground">Manage media outlets and content</p>
+      <main className="max-w-7xl mx-auto px-4 py-4">
+        <div className="mb-6">
+          <h1 className="text-2xl font-bold text-gray-900 mb-2">관리자 대시보드</h1>
+          <p className="text-gray-600">관리할 언론매체를 검색하고 선택하세요</p>
+        </div>
+
+        {outletsLoading ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 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>
-        
-        {/* Analytics Cards */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-          {analyticsLoading ? (
-            Array.from({ length: 4 }).map((_, i) => (
-              <Card key={i}>
-                <CardContent className="p-6 animate-pulse">
-                  <div className="h-16 bg-muted rounded"></div>
-                </CardContent>
-              </Card>
-            ))
-          ) : (
-            <>
-              <Card data-testid="card-total-articles">
-                <CardContent className="p-6">
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <h3 className="text-sm font-medium text-muted-foreground">Total Articles</h3>
-                      <p className="text-2xl font-bold">{(analytics as any)?.totalArticles || 0}</p>
-                    </div>
-                    <i className="fas fa-newspaper text-primary text-xl"></i>
-                  </div>
-                </CardContent>
-              </Card>
-              
-              <Card data-testid="card-active-predictions">
-                <CardContent className="p-6">
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <h3 className="text-sm font-medium text-muted-foreground">Active Predictions</h3>
-                      <p className="text-2xl font-bold">{(analytics as any)?.activePredictions || 0}</p>
-                    </div>
-                    <i className="fas fa-chart-line text-chart-2 text-xl"></i>
-                  </div>
-                </CardContent>
-              </Card>
-              
-              <Card data-testid="card-live-auctions">
-                <CardContent className="p-6">
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <h3 className="text-sm font-medium text-muted-foreground">Live Auctions</h3>
-                      <p className="text-2xl font-bold">{(analytics as any)?.liveAuctions || 0}</p>
-                    </div>
-                    <i className="fas fa-gavel text-chart-1 text-xl"></i>
-                  </div>
-                </CardContent>
-              </Card>
-              
-              <Card data-testid="card-revenue">
-                <CardContent className="p-6">
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <h3 className="text-sm font-medium text-muted-foreground">Revenue</h3>
-                      <p className="text-2xl font-bold">${((analytics as any)?.totalRevenue || 0).toLocaleString()}</p>
-                    </div>
-                    <i className="fas fa-dollar-sign text-chart-4 text-xl"></i>
-                  </div>
-                </CardContent>
-              </Card>
-            </>
-          )}
-        </div>
-        
-        {/* Admin Actions */}
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-          <Card>
-            <CardContent className="p-6">
-              <h3 className="text-lg font-semibold mb-4">Content Management</h3>
-              <div className="space-y-3">
-                <Button 
-                  className="w-full justify-start" 
-                  variant="outline"
-                  data-testid="button-create-editorial"
+        ) : (
+          <>
+            <div className="mb-4 text-sm text-gray-500">
+              {filteredOutlets.length}개의 언론매체 {searchTerm && `(${searchTerm} 검색 결과)`}
+            </div>
+            
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+              {filteredOutlets.map((outlet) => (
+                <Card 
+                  key={outlet.id} 
+                  className="hover:shadow-md transition-shadow cursor-pointer bg-white"
+                  onClick={() => setSelectedOutlet(outlet)}
+                  data-testid={`admin-card-outlet-${outlet.id}`}
                 >
-                  <i className="fas fa-plus mr-3 text-primary"></i>
-                  Create Featured Editorial
-                </Button>
-                <Button 
-                  className="w-full justify-start" 
-                  variant="outline"
-                  data-testid="button-pin-comments"
-                >
-                  <i className="fas fa-thumbtack mr-3 text-chart-2"></i>
-                  Pin Comments
-                </Button>
-                <Button 
-                  className="w-full justify-start" 
-                  variant="outline"
-                  data-testid="button-manage-predictions"
-                >
-                  <i className="fas fa-chart-bar mr-3 text-chart-1"></i>
-                  Manage Prediction Markets
-                </Button>
+                  <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.description || "Media Outlet"}
+                        </p>
+                        <div className="flex items-center mt-1">
+                          <span className="inline-block px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">
+                            {outlet.category}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+
+            {filteredOutlets.length === 0 && searchTerm && (
+              <div className="text-center py-12">
+                <div className="text-gray-400 text-lg mb-2">검색 결과가 없습니다</div>
+                <div className="text-gray-500 text-sm">다른 검색어를 시도해보세요</div>
               </div>
-            </CardContent>
-          </Card>
-          
-          <Card>
-            <CardContent className="p-6">
-              <h3 className="text-lg font-semibold mb-4">Quick Actions</h3>
-              <div className="space-y-3">
-                <div className="flex items-center justify-between p-3 border border-border rounded-lg">
-                  <div>
-                    <p className="font-medium">Featured Article Priority</p>
-                    <p className="text-sm text-muted-foreground">Manage article visibility</p>
+            )}
+          </>
+        )}
+
+        {/* Selected Outlet Modal/Preview */}
+        {selectedOutlet && (
+          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+            <div className="bg-white rounded-lg p-6 max-w-md w-full mx-4">
+              <div className="flex items-center space-x-4 mb-4">
+                {selectedOutlet.imageUrl ? (
+                  <img 
+                    src={selectedOutlet.imageUrl} 
+                    alt={selectedOutlet.name}
+                    className="w-16 h-16 rounded-full object-cover"
+                  />
+                ) : (
+                  <div className="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center">
+                    <span className="text-gray-600 text-lg font-medium">
+                      {selectedOutlet.name.charAt(0)}
+                    </span>
                   </div>
-                  <Button size="sm" data-testid="button-manage-featured">
-                    Manage
-                  </Button>
-                </div>
-                <div className="flex items-center justify-between p-3 border border-border rounded-lg">
-                  <div>
-                    <p className="font-medium">Auction Controls</p>
-                    <p className="text-sm text-muted-foreground">Monitor active auctions</p>
-                  </div>
-                  <Button size="sm" data-testid="button-view-auctions">
-                    <a href="/auctions">View</a>
-                  </Button>
+                )}
+                <div>
+                  <h2 className="text-xl font-bold text-gray-900">{selectedOutlet.name}</h2>
+                  <p className="text-sm text-gray-500">{selectedOutlet.description}</p>
+                  <span className="inline-block px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full mt-1">
+                    {selectedOutlet.category}
+                  </span>
                 </div>
               </div>
-            </CardContent>
-          </Card>
-        </div>
+              <div className="flex space-x-3">
+                <Button 
+                  className="flex-1"
+                  onClick={() => {
+                    setManagingOutlet(selectedOutlet);
+                    setSelectedOutlet(null);
+                  }}
+                  data-testid="button-manage-outlet"
+                >
+                  관리하기
+                </Button>
+                <Button 
+                  variant="outline" 
+                  onClick={() => setSelectedOutlet(null)}
+                  data-testid="button-cancel"
+                >
+                  취소
+                </Button>
+              </div>
+            </div>
+          </div>
+        )}
       </main>
     </div>
   );