Add animated auction guide overlay to media platform
Integrates a new `Sheet` component for displaying auction guidance with smooth opening and closing animations. 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/yHCvWBg
This commit is contained in:
kimjaehyeon0101
@ -6,6 +6,13 @@ import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetDescription,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
} from "@/components/ui/sheet";
|
||||
import { useAuth } from "@/hooks/useAuth";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { apiRequest } from "@/lib/queryClient";
|
||||
@ -35,6 +42,7 @@ export default function Auctions() {
|
||||
qualityScore: ""
|
||||
});
|
||||
const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
|
||||
const [isGuideOpen, setIsGuideOpen] = useState(false);
|
||||
|
||||
const [theme, setTheme] = useState(() => localStorage.getItem('theme') || 'light');
|
||||
const [language, setLanguage] = useState(() => localStorage.getItem('language') || 'en');
|
||||
@ -249,11 +257,14 @@ export default function Auctions() {
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-3">
|
||||
<Link href="/auction-guide">
|
||||
<Button variant="ghost" size="sm" data-testid="button-auction-guide">
|
||||
<BookOpen className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setIsGuideOpen(!isGuideOpen)}
|
||||
data-testid="button-auction-guide"
|
||||
>
|
||||
<BookOpen className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
{isAuthenticated && user ? (
|
||||
<>
|
||||
@ -601,6 +612,162 @@ export default function Auctions() {
|
||||
onClose={() => setIsLoginModalOpen(false)}
|
||||
/>
|
||||
|
||||
{/* Auction Guide Sheet */}
|
||||
<Sheet open={isGuideOpen} onOpenChange={setIsGuideOpen}>
|
||||
<SheetContent side="right" className="w-full sm:max-w-2xl overflow-y-auto">
|
||||
<SheetHeader>
|
||||
<SheetTitle className="text-xl font-bold">Media Outlet Auction System Guide</SheetTitle>
|
||||
<SheetDescription className="text-sm">
|
||||
Advertising Bidding Method Based
|
||||
</SheetDescription>
|
||||
</SheetHeader>
|
||||
|
||||
<div className="mt-6 space-y-4">
|
||||
{/* 1. System Overview */}
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<h3 className="font-semibold text-base mb-2 flex items-center gap-2">
|
||||
<Badge variant="default" className="bg-blue-600">1</Badge>
|
||||
System Overview
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 mb-3">
|
||||
This platform applies the <strong>advertising bidding method</strong> to media management rights auctions.
|
||||
</p>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex gap-2">
|
||||
<span className="font-medium min-w-[140px]">Vickrey Auction:</span>
|
||||
<span className="text-gray-600">Highest total score wins</span>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<span className="font-medium min-w-[140px]">Second-Price:</span>
|
||||
<span className="text-gray-600">Winner pays 2nd place bid</span>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<span className="font-medium min-w-[140px]">Hybrid Scoring:</span>
|
||||
<span className="text-gray-600">Bid × Quality Score</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 2. Core Mechanism */}
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<h3 className="font-semibold text-base mb-2 flex items-center gap-2">
|
||||
<Badge variant="default" className="bg-green-600">2</Badge>
|
||||
Ranking Calculation
|
||||
</h3>
|
||||
<div className="bg-gradient-to-r from-blue-50 to-green-50 rounded p-3 text-center mb-3">
|
||||
<div className="text-base font-bold text-blue-600">
|
||||
Ranking Score = Bid Amount × (Quality Score ÷ 100)
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div>
|
||||
<span className="font-medium">Bid Range:</span>
|
||||
<span className="text-gray-600 ml-2">$100 - $100,000</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-medium">Management Period:</span>
|
||||
<span className="text-gray-600 ml-2">30 days (default)</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-medium">Quality Score:</span>
|
||||
<span className="text-gray-600 ml-2">1-100 points</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 3. Quality Score Guide */}
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<h3 className="font-semibold text-base mb-2 flex items-center gap-2">
|
||||
<Badge variant="default" className="bg-purple-600">3</Badge>
|
||||
Quality Score Levels
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
<div className="p-2 bg-green-50 rounded">
|
||||
<div className="font-medium text-sm text-green-700">71-100 pts: High Quality</div>
|
||||
<div className="text-xs text-gray-600">Higher rank with lower bids, increased exposure</div>
|
||||
</div>
|
||||
<div className="p-2 bg-gray-50 rounded">
|
||||
<div className="font-medium text-sm text-gray-700">41-70 pts: Average Quality</div>
|
||||
<div className="text-xs text-gray-600">Meets standard criteria, stable content</div>
|
||||
</div>
|
||||
<div className="p-2 bg-red-50 rounded">
|
||||
<div className="font-medium text-sm text-red-700">1-40 pts: Low Quality</div>
|
||||
<div className="text-xs text-gray-600">Below standards, low engagement</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 4. Auction Types */}
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<h3 className="font-semibold text-base mb-2 flex items-center gap-2">
|
||||
<Badge variant="default" className="bg-orange-600">4</Badge>
|
||||
Media Outlet Types
|
||||
</h3>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between p-2 bg-blue-50 rounded">
|
||||
<div>
|
||||
<span className="font-medium text-blue-700">People</span>
|
||||
<span className="text-gray-600 text-xs ml-2">(24 outlets)</span>
|
||||
</div>
|
||||
<span className="font-semibold">Min $500</span>
|
||||
</div>
|
||||
<div className="flex justify-between p-2 bg-green-50 rounded">
|
||||
<div>
|
||||
<span className="font-medium text-green-700">Topics</span>
|
||||
<span className="text-gray-600 text-xs ml-2">(20 outlets)</span>
|
||||
</div>
|
||||
<span className="font-semibold">Min $300</span>
|
||||
</div>
|
||||
<div className="flex justify-between p-2 bg-purple-50 rounded">
|
||||
<div>
|
||||
<span className="font-medium text-purple-700">Companies</span>
|
||||
<span className="text-gray-600 text-xs ml-2">(27 outlets)</span>
|
||||
</div>
|
||||
<span className="font-semibold">Min $1,000</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 5. Bidding Tips */}
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<h3 className="font-semibold text-base mb-2 flex items-center gap-2">
|
||||
<Badge variant="default" className="bg-indigo-600">5</Badge>
|
||||
Bidding Strategy
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<h4 className="font-medium text-sm text-blue-600 mb-1">💡 Effective Tips</h4>
|
||||
<ul className="text-xs space-y-1 text-gray-600">
|
||||
<li>• Prioritize quality score improvement</li>
|
||||
<li>• Analyze competition patterns</li>
|
||||
<li>• Bid gradually, not in large jumps</li>
|
||||
<li>• Consider auction closing timing</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-sm text-red-600 mb-1">⚠️ Avoid These Mistakes</h4>
|
||||
<ul className="text-xs space-y-1 text-gray-600">
|
||||
<li>• Don't ignore quality score</li>
|
||||
<li>• Avoid emotional bidding</li>
|
||||
<li>• Don't neglect profitability analysis</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user