aimond/sapiens-web2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update the auction guide page with a cleaner and more modern design

Browse Source 
Adjusted UI elements, spacing, and text sizes on the AuctionGuide page to improve visual appeal and readability.

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/bLfICpO
This commit is contained in:
kimjaehyeon0101
2025-09-29 21:31:26 +00:00
parent c008d5fb4c
commit 24e9162936
1 changed files with 248 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

494
client/src/pages/AuctionGuide.tsx
View File

@ -27,65 +27,65 @@ export default function AuctionGuide() {
<div className="min-h-screen bg-background"> <div className="min-h-screen bg-background">
{/* Header */} {/* Header */}
<header className="bg-card border-b border-border sticky top-0 z-50"> <header className="bg-card border-b border-border sticky top-0 z-50">
<div className="max-w-7xl mx-auto px-6 py-4"> <div className="max-w-7xl mx-auto px-4 py-2">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-2">
<div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center text-primary-foreground font-bold text-lg"> <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center text-primary-foreground font-bold">
S S
</div> </div>
<span className="text-2xl font-bold tracking-tight">SAPIENS</span> <span className="text-xl font-bold tracking-tight">SAPIENS</span>
</div> </div>
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-3">
<nav className="hidden md:flex space-x-6"> <nav className="hidden md:flex space-x-4">
<Link href="/" className="text-muted-foreground hover:text-foreground transition-colors" data-testid="link-home">Home</Link> <Link href="/" className="text-muted-foreground hover:text-foreground transition-colors text-sm" data-testid="link-home">Home</Link>
<Link href="/auctions" className="text-muted-foreground hover:text-foreground transition-colors" data-testid="link-auctions">Auctions</Link> <Link href="/auctions" className="text-muted-foreground hover:text-foreground transition-colors text-sm" data-testid="link-auctions">Auctions</Link>
<Link href="/auction-guide" className="text-foreground font-medium" data-testid="link-auction-guide">Auction Guide</Link> <Link href="/auction-guide" className="text-foreground font-medium text-sm" data-testid="link-auction-guide">Auction Guide</Link>
</nav> </nav>
<a href="/api/login"> <a href="/api/login">
<Button data-testid="button-login">Login</Button> <Button size="sm" data-testid="button-login">Login</Button>
</a> </a>
</div> </div>
</div> </div>
</div> </div>
</header> </header>
<main className="max-w-6xl mx-auto px-6 py-8"> <main className="max-w-6xl mx-auto px-4 py-4">
{/* Header Section */} {/* Header Section */}
<div className="mb-8"> <div className="mb-4">
<h1 className="text-4xl font-bold mb-4" data-testid="text-guide-title">SAPIENS 언론매체 경매 시스템 완전 가이드</h1> <h1 className="text-3xl font-bold mb-2" data-testid="text-guide-title">SAPIENS Media Outlet Auction System Complete Guide</h1>
<p className="text-xl text-muted-foreground"> <p className="text-lg text-muted-foreground">
네이버 광고 경매 방식을 적용한 혁신적인 미디어 관리 권한 경매 플랫폼 Innovative media management rights auction platform based on advertising bidding methods
</p> </p>
</div> </div>
{/* Overview Card */} {/* Overview Card */}
<Card className="mb-8" data-testid="section-overview"> <Card className="mb-4" data-testid="section-overview">
<CardHeader> <CardHeader className="pb-2">
<CardTitle className="flex items-center space-x-2"> <CardTitle className="flex items-center space-x-2 text-lg">
<Lightbulb className="h-5 w-5 text-primary" /> <Lightbulb className="h-4 w-4 text-primary" />
<span>경매 시스템 개요</span> <span>Auction System Overview</span>
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="pt-0">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div> <div>
<h3 className="font-semibold text-lg mb-3">🎯 핵심 원리</h3> <h3 className="font-semibold mb-2">🎯 Core Principles</h3>
<ul className="space-y-2 text-sm"> <ul className="space-y-1 text-sm">
<li>• <strong>비크리 경매 방식</strong>: 노벨경제학상 수상 이론 적용</li> <li>• <strong>Vickrey Auction Method</strong>: Nobel Prize-winning theory applied</li>
<li>• <strong>하이브리드 스코어링</strong>: 입찰가 × 품질점수 조합</li> <li>• <strong>Hybrid Scoring</strong>: Bid amount × quality score combination</li>
<li>• <strong>공정한 가격 결정</strong>: 2순위 입찰가 기반 과금</li> <li>• <strong>Fair Pricing</strong>: Second-price bid-based charging</li>
<li>• <strong>품질 중심 평가</strong>: 단순 가격 경쟁 방지</li> <li>• <strong>Quality-Centered Evaluation</strong>: Prevents simple price competition</li>
</ul> </ul>
</div> </div>
<div> <div>
<h3 className="font-semibold text-lg mb-3">📊 경매 대상</h3> <h3 className="font-semibold mb-2">📊 Auction Targets</h3>
<ul className="space-y-2 text-sm"> <ul className="space-y-1 text-sm">
<li>• <strong>People (24명)</strong>: 주요 인물 언론매체 관리권</li> <li>• <strong>People (24)</strong>: Management rights for key figures' media outlets</li>
<li>• <strong>Topics (20개)</strong>: 핵심 주제 콘텐츠 관리권</li> <li>• <strong>Topics (20)</strong>: Core topic content management rights</li>
<li>• <strong>Companies (27개)</strong>: 기업 미디어 관리권</li> <li>• <strong>Companies (27)</strong>: Corporate media management rights</li>
<li>• <strong>독점적 편집권</strong>: 콘텐츠 우선순위 결정권</li> <li>• <strong>Exclusive Editorial Rights</strong>: Content priority decision rights</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -93,47 +93,47 @@ export default function AuctionGuide() {
</Card> </Card>
{/* Core Mechanism */} {/* Core Mechanism */}
<Card className="mb-8" data-testid="section-mechanism"> <Card className="mb-4" data-testid="section-mechanism">
<CardHeader> <CardHeader className="pb-2">
<CardTitle className="flex items-center space-x-2"> <CardTitle className="flex items-center space-x-2 text-lg">
<Settings className="h-5 w-5 text-chart-1" /> <Settings className="h-4 w-4 text-chart-1" />
<span>1. 기본 경매 메커니즘</span> <span>1. Basic Auction Mechanism</span>
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="pt-0">
<div className="space-y-6"> <div className="space-y-4">
<div className="bg-primary/5 rounded-lg p-6"> <div className="bg-primary/5 rounded-lg p-4">
<h3 className="font-semibold text-lg mb-4 flex items-center"> <h3 className="font-semibold mb-3 flex items-center">
<Award className="h-5 w-5 text-primary mr-2" /> <Award className="h-4 w-4 text-primary mr-2" />
비크리 경매 방식 (Vickrey Auction) Vickrey Auction Method
</h3> </h3>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
<div className="text-center"> <div className="text-center">
<div className="w-12 h-12 bg-primary rounded-full flex items-center justify-center text-primary-foreground font-bold text-lg mx-auto mb-2">1</div> <div className="w-10 h-10 bg-primary rounded-full flex items-center justify-center text-primary-foreground font-bold mx-auto mb-2">1</div>
<h4 className="font-medium mb-2">최고 입찰자 낙찰</h4> <h4 className="font-medium mb-1 text-sm">Highest Bidder Wins</h4>
<p className="text-sm text-muted-foreground">가장 높은 종합 점수를 받은 입찰자가 낙찰</p> <p className="text-xs text-muted-foreground">Bidder with highest total score wins</p>
</div> </div>
<div className="text-center"> <div className="text-center">
<div className="w-12 h-12 bg-chart-2 rounded-full flex items-center justify-center text-white font-bold text-lg mx-auto mb-2">2</div> <div className="w-10 h-10 bg-chart-2 rounded-full flex items-center justify-center text-white font-bold mx-auto mb-2">2</div>
<h4 className="font-medium mb-2">2순위 가격 지불</h4> <h4 className="font-medium mb-1 text-sm">Pay Second Price</h4>
<p className="text-sm text-muted-foreground">실제로는 2순위 입찰가만 지불</p> <p className="text-xs text-muted-foreground">Actually only pay second-place bid</p>
</div> </div>
<div className="text-center"> <div className="text-center">
<div className="w-12 h-12 bg-chart-3 rounded-full flex items-center justify-center text-white font-bold text-lg mx-auto mb-2">3</div> <div className="w-10 h-10 bg-chart-3 rounded-full flex items-center justify-center text-white font-bold mx-auto mb-2">3</div>
<h4 className="font-medium mb-2">공정한 가격 형성</h4> <h4 className="font-medium mb-1 text-sm">Fair Price Formation</h4>
<p className="text-sm text-muted-foreground">과도한 입찰 방지 및 효율성 증대</p> <p className="text-xs text-muted-foreground">Prevents excessive bidding and increases efficiency</p>
</div> </div>
</div> </div>
</div> </div>
<div className="bg-chart-1/5 rounded-lg p-6"> <div className="bg-chart-1/5 rounded-lg p-4">
<h4 className="font-semibold mb-3">📝 실제 예시</h4> <h4 className="font-semibold mb-2 text-sm">📝 Real Example</h4>
<div className="space-y-2 text-sm"> <div className="space-y-1 text-xs">
<p><strong>A 입찰자:</strong> $1,000 × 85점 = 85,000점 (1위 낙찰)</p> <p><strong>Bidder A:</strong> $1,000 × 85pts = 85,000pts (1st place winner)</p>
<p><strong>B 입찰자:</strong> $800 × 90점 = 72,000점 (2위)</p> <p><strong>Bidder B:</strong> $800 × 90pts = 72,000pts (2nd place)</p>
<p><strong>C 입찰자:</strong> $1,200 × 60점 = 72,000점 (3위)</p> <p><strong>Bidder C:</strong> $1,200 × 60pts = 72,000pts (3rd place)</p>
<p className="pt-2 font-medium text-primary"> <p className="pt-1 font-medium text-primary">
→ A가 낙찰되지만 실제 지불 금액은 B의 입찰가인 $800 수준 → A wins but actually pays around B's bid of $800
</p> </p>
</div> </div>
</div> </div>
@ -142,46 +142,46 @@ export default function AuctionGuide() {
</Card> </Card>
{/* Ranking System */} {/* Ranking System */}
<Card className="mb-8" data-testid="section-ranking"> <Card className="mb-4" data-testid="section-ranking">
<CardHeader> <CardHeader className="pb-2">
<CardTitle className="flex items-center space-x-2"> <CardTitle className="flex items-center space-x-2 text-lg">
<TrendingUp className="h-5 w-5 text-chart-2" /> <TrendingUp className="h-4 w-4 text-chart-2" />
<span>2. 순위 결정 시스템</span> <span>2. Ranking System</span>
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="pt-0">
<div className="space-y-6"> <div className="space-y-4">
<div className="text-center bg-gradient-to-r from-primary/10 to-chart-2/10 rounded-lg p-6"> <div className="text-center bg-gradient-to-r from-primary/10 to-chart-2/10 rounded-lg p-4">
<h3 className="text-2xl font-bold mb-4">최종 순위 공식</h3> <h3 className="text-xl font-bold mb-2">Final Ranking Formula</h3>
<div className="text-3xl font-bold text-primary mb-2"> <div className="text-2xl font-bold text-primary mb-1">
순위 점수 = 입찰가 × (품질점수 ÷ 100) Ranking Score = Bid Amount × (Quality Score ÷ 100)
</div> </div>
<p className="text-muted-foreground">네이버 광고 경매와 동일한 가중치 방식 적용</p> <p className="text-sm text-muted-foreground">Same weighting system as advertising auctions</p>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div> <div>
<h4 className="font-semibold text-lg mb-3 flex items-center"> <h4 className="font-semibold mb-2 flex items-center">
<DollarSign className="h-5 w-5 text-primary mr-2" /> <DollarSign className="h-4 w-4 text-primary mr-2" />
입찰가 (Bid Amount) Bid Amount
</h4> </h4>
<ul className="space-y-2 text-sm"> <ul className="space-y-1 text-sm">
<li>• 최소 입찰가: $100</li> <li>• Minimum bid: $100</li>
<li>• 최대 입찰가: $100,000</li> <li>• Maximum bid: $100,000</li>
<li>• 현재 최고가보다 높아야 함</li> <li>• Must be higher than current top bid</li>
<li>• 관리 기간: 기본 30일</li> <li>• Management period: Default 30 days</li>
</ul> </ul>
</div> </div>
<div> <div>
<h4 className="font-semibold text-lg mb-3 flex items-center"> <h4 className="font-semibold mb-2 flex items-center">
<Star className="h-5 w-5 text-chart-2 mr-2" /> <Star className="h-4 w-4 text-chart-2 mr-2" />
품질점수 (Quality Score) Quality Score
</h4> </h4>
<ul className="space-y-2 text-sm"> <ul className="space-y-1 text-sm">
<li>• 점수 범위: 1-100점</li> <li>• Score range: 1-100 points</li>
<li>• 콘텐츠 품질 평가</li> <li>• Content quality evaluation</li>
<li>• 사용자 참여도 분석</li> <li>• User engagement analysis</li>
<li>• 편집 기준 준수도</li> <li>• Editorial standards compliance</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -190,68 +190,68 @@ export default function AuctionGuide() {
</Card> </Card>
{/* Quality Score System */} {/* Quality Score System */}
<Card className="mb-8" data-testid="section-quality"> <Card className="mb-4" data-testid="section-quality">
<CardHeader> <CardHeader className="pb-2">
<CardTitle className="flex items-center space-x-2"> <CardTitle className="flex items-center space-x-2 text-lg">
<Award className="h-5 w-5 text-chart-3" /> <Award className="h-4 w-4 text-chart-3" />
<span>3. 품질점수 시스템</span> <span>3. Quality Score System</span>
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="pt-0">
<div className="space-y-6"> <div className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
<Card className="border-destructive/20"> <Card className="border-destructive/20">
<CardContent className="p-4 text-center"> <CardContent className="p-3 text-center">
<Badge variant="destructive" className="mb-2">1-40점</Badge> <Badge variant="destructive" className="mb-1 text-xs">1-40 pts</Badge>
<h4 className="font-semibold mb-2">낮은 품질</h4> <h4 className="font-semibold mb-1 text-sm">Low Quality</h4>
<ul className="text-xs space-y-1"> <ul className="text-xs space-y-0.5">
<li>• 기본적인 편집 기준 미달</li> <li>• Below basic editorial standards</li>
<li>• 낮은 사용자 참여도</li> <li>• Low user engagement</li>
<li>• 콘텐츠 일관성 부족</li> <li>• Lack of content consistency</li>
</ul> </ul>
</CardContent> </CardContent>
</Card> </Card>
<Card className="border-chart-4/20"> <Card className="border-chart-4/20">
<CardContent className="p-4 text-center"> <CardContent className="p-3 text-center">
<Badge variant="secondary" className="mb-2">41-70점</Badge> <Badge variant="secondary" className="mb-1 text-xs">41-70 pts</Badge>
<h4 className="font-semibold mb-2">보통 품질</h4> <h4 className="font-semibold mb-1 text-sm">Average Quality</h4>
<ul className="text-xs space-y-1"> <ul className="text-xs space-y-0.5">
<li>• 표준 편집 기준 충족</li> <li>• Meets standard editorial criteria</li>
<li>• 안정적인 콘텐츠 품질</li> <li>• Stable content quality</li>
<li>• 적절한 사용자 반응</li> <li>• Appropriate user response</li>
</ul> </ul>
</CardContent> </CardContent>
</Card> </Card>
<Card className="border-chart-2/20"> <Card className="border-chart-2/20">
<CardContent className="p-4 text-center"> <CardContent className="p-3 text-center">
<Badge variant="default" className="mb-2">71-100점</Badge> <Badge variant="default" className="mb-1 text-xs">71-100 pts</Badge>
<h4 className="font-semibold mb-2">높은 품질</h4> <h4 className="font-semibold mb-1 text-sm">High Quality</h4>
<ul className="text-xs space-y-1"> <ul className="text-xs space-y-0.5">
<li>• 우수한 편집 기준</li> <li>• Excellent editorial standards</li>
<li>• 높은 사용자 참여도</li> <li>• High user engagement</li>
<li>• 혁신적인 콘텐츠</li> <li>• Innovative content</li>
</ul> </ul>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
<div className="bg-chart-2/5 rounded-lg p-6"> <div className="bg-chart-2/5 rounded-lg p-4">
<h4 className="font-semibold mb-3 flex items-center"> <h4 className="font-semibold mb-2 flex items-center">
<Calculator className="h-5 w-5 text-chart-2 mr-2" /> <Calculator className="h-4 w-4 text-chart-2 mr-2" />
품질점수 혜택 Quality Score Benefits
</h4> </h4>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm"> <div className="grid grid-cols-1 md:grid-cols-3 gap-3 text-sm">
<div> <div>
<h5 className="font-medium mb-2">📈 순위 향상</h5> <h5 className="font-medium mb-1">📈 Ranking Improvement</h5>
<p className="text-muted-foreground">동일 입찰가 중 높은 품질점수 우선 선정</p> <p className="text-xs text-muted-foreground">Higher quality scores prioritized among same bids</p>
</div> </div>
<div> <div>
<h5 className="font-medium mb-2">💰 비용 절약</h5> <h5 className="font-medium mb-1">💰 Cost Savings</h5>
<p className="text-muted-foreground">낮은 입찰가로도 높은 순위 획득 가능</p> <p className="text-xs text-muted-foreground">Achieve high rankings with lower bids</p>
</div> </div>
<div> <div>
<h5 className="font-medium mb-2">🎯 효과 증대</h5> <h5 className="font-medium mb-1">🎯 Increased Effectiveness</h5>
<p className="text-muted-foreground">더 많은 노출과 사용자 참여 기회</p> <p className="text-xs text-muted-foreground">More exposure and user engagement opportunities</p>
</div> </div>
</div> </div>
</div> </div>
@ -260,57 +260,57 @@ export default function AuctionGuide() {
</Card> </Card>
{/* Auction Types */} {/* Auction Types */}
<Card className="mb-8" data-testid="section-types"> <Card className="mb-4" data-testid="section-types">
<CardHeader> <CardHeader className="pb-2">
<CardTitle className="flex items-center space-x-2"> <CardTitle className="flex items-center space-x-2 text-lg">
<List className="h-5 w-5 text-chart-4" /> <List className="h-4 w-4 text-chart-4" />
<span>4. 경매 유형별 특징</span> <span>4. Auction Types</span>
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="pt-0">
<div className="grid grid-cols-1 md:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<Card className="border-primary/20"> <Card className="border-primary/20">
<CardContent className="p-4"> <CardContent className="p-3">
<h4 className="font-semibold text-lg mb-3 flex items-center"> <h4 className="font-semibold mb-2 flex items-center">
<Users className="h-5 w-5 text-primary mr-2" /> <Users className="h-4 w-4 text-primary mr-2" />
People (인물) People
</h4> </h4>
<ul className="space-y-2 text-sm"> <ul className="space-y-1 text-sm">
<li>• <strong>24명의 주요 인물</strong></li> <li>• <strong>24 key figures</strong></li>
<li>• 개인 브랜딩 관리</li> <li>• Personal branding management</li>
<li>• 발언 및 활동 콘텐츠</li> <li>• Statements and activity content</li>
<li>• 프로필 정보 편집권</li> <li>• Profile information editing rights</li>
<li>• 최소 입찰: $500</li> <li>• Minimum bid: $500</li>
</ul> </ul>
</CardContent> </CardContent>
</Card> </Card>
<Card className="border-chart-1/20"> <Card className="border-chart-1/20">
<CardContent className="p-4"> <CardContent className="p-3">
<h4 className="font-semibold text-lg mb-3 flex items-center"> <h4 className="font-semibold mb-2 flex items-center">
<Hash className="h-5 w-5 text-chart-1 mr-2" /> <Hash className="h-4 w-4 text-chart-1 mr-2" />
Topics (주제) Topics
</h4> </h4>
<ul className="space-y-2 text-sm"> <ul className="space-y-1 text-sm">
<li>• <strong>20개 핵심 주제</strong></li> <li>• <strong>20 core topics</strong></li>
<li>• 트렌드 분석 관리</li> <li>• Trend analysis management</li>
<li>• 주제별 콘텐츠 큐레이션</li> <li>• Topic-specific content curation</li>
<li>• 예측시장 연동</li> <li>• Prediction market integration</li>
<li>• 최소 입찰: $300</li> <li>• Minimum bid: $300</li>
</ul> </ul>
</CardContent> </CardContent>
</Card> </Card>
<Card className="border-chart-2/20"> <Card className="border-chart-2/20">
<CardContent className="p-4"> <CardContent className="p-3">
<h4 className="font-semibold text-lg mb-3 flex items-center"> <h4 className="font-semibold mb-2 flex items-center">
<Building className="h-5 w-5 text-chart-2 mr-2" /> <Building className="h-4 w-4 text-chart-2 mr-2" />
Companies (기업) Companies
</h4> </h4>
<ul className="space-y-2 text-sm"> <ul className="space-y-1 text-sm">
<li>• <strong>27개 주요 기업</strong></li> <li>• <strong>27 major companies</strong></li>
<li>• 기업 뉴스 관리</li> <li>• Corporate news management</li>
<li>• 재무 정보 업데이트</li> <li>• Financial information updates</li>
<li>• 기업 평판 관리</li> <li>• Corporate reputation management</li>
<li>• 최소 입찰: $1,000</li> <li>• Minimum bid: $1,000</li>
</ul> </ul>
</CardContent> </CardContent>
</Card> </Card>
@ -319,64 +319,64 @@ export default function AuctionGuide() {
</Card> </Card>
{/* Strategic Bidding */} {/* Strategic Bidding */}
<Card className="mb-8" data-testid="section-strategy"> <Card className="mb-4" data-testid="section-strategy">
<CardHeader> <CardHeader className="pb-2">
<CardTitle className="flex items-center space-x-2"> <CardTitle className="flex items-center space-x-2 text-lg">
<Target className="h-5 w-5 text-chart-5" /> <Target className="h-4 w-4 text-chart-5" />
<span>5. 전략적 입찰 가이드</span> <span>5. Strategic Bidding Guide</span>
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="pt-0">
<div className="space-y-6"> <div className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div> <div>
<h4 className="font-semibold text-lg mb-3 text-primary">💡 효과적인 입찰 전략</h4> <h4 className="font-semibold mb-2 text-primary">💡 Effective Bidding Strategies</h4>
<ul className="space-y-2 text-sm"> <ul className="space-y-1 text-sm">
<li>• <strong>품질점수 우선 개선</strong>: 입찰가보다 ROI가 높음</li> <li>• <strong>Improve Quality Score First</strong>: Higher ROI than bid amount</li>
<li>• <strong>경쟁 환경 분석</strong>: 유사한 카테고리 경매 분석</li> <li>• <strong>Analyze Competition</strong>: Study similar category auctions</li>
<li>• <strong>점진적 입찰</strong>: 한 번에 높은 금액보다 단계적 증액</li> <li>• <strong>Gradual Bidding</strong>: Step-by-step increases over large amounts</li>
<li>• <strong>시간대 고려</strong>: 마감 임박 시 경쟁 심화</li> <li>• <strong>Consider Timing</strong>: Competition intensifies near deadlines</li>
</ul> </ul>
</div> </div>
<div> <div>
<h4 className="font-semibold text-lg mb-3 text-destructive">⚠️ 피해야 할 실수</h4> <h4 className="font-semibold mb-2 text-destructive">⚠️ Mistakes to Avoid</h4>
<ul className="space-y-2 text-sm"> <ul className="space-y-1 text-sm">
<li>• <strong>품질점수 무시</strong>: 입찰가만으로는 승리 불가</li> <li>• <strong>Ignoring Quality Score</strong>: Cannot win with bid amount alone</li>
<li>• <strong>과도한 경쟁</strong>: 감정적 입찰로 인한 손실</li> <li>• <strong>Excessive Competition</strong>: Losses from emotional bidding</li>
<li>• <strong>단기적 사고</strong>: 관리 기간 대비 수익성 미고려</li> <li>• <strong>Short-term Thinking</strong>: Not considering profitability vs management period</li>
<li>• <strong>마감 직전 입찰</strong>: 충분한 검토 시간 부족</li> <li>• <strong>Last-minute Bidding</strong>: Insufficient review time</li>
</ul> </ul>
</div> </div>
</div> </div>
<div className="bg-accent/10 rounded-lg p-6"> <div className="bg-accent/10 rounded-lg p-4">
<h4 className="font-semibold mb-3 flex items-center"> <h4 className="font-semibold mb-2 flex items-center">
<Lightbulb className="h-5 w-5 text-accent mr-2" /> <Lightbulb className="h-4 w-4 text-accent mr-2" />
성공적인 경매 참여 팁 Successful Auction Participation Tips
</h4> </h4>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm"> <div className="grid grid-cols-1 md:grid-cols-3 gap-3 text-sm">
<div> <div>
<h5 className="font-medium mb-2">1단계: 준비</h5> <h5 className="font-medium mb-1">Phase 1: Preparation</h5>
<ul className="space-y-1 text-muted-foreground"> <ul className="space-y-0.5 text-xs text-muted-foreground">
<li>• 목표 언론매체 선정</li> <li>• Select target media outlets</li>
<li>• 예산 계획 수립</li> <li>• Establish budget plan</li>
<li>• 품질점수 자가 평가</li> <li>• Self-assess quality score</li>
</ul> </ul>
</div> </div>
<div> <div>
<h5 className="font-medium mb-2">2단계: 분석</h5> <h5 className="font-medium mb-1">Phase 2: Analysis</h5>
<ul className="space-y-1 text-muted-foreground"> <ul className="space-y-0.5 text-xs text-muted-foreground">
<li>• 과거 경매 결과 분석</li> <li>• Analyze past auction results</li>
<li>• 경쟁자 입찰 패턴</li> <li>• Competitor bidding patterns</li>
<li>• 시장 가치 평가</li> <li>• Market value assessment</li>
</ul> </ul>
</div> </div>
<div> <div>
<h5 className="font-medium mb-2">3단계: 실행</h5> <h5 className="font-medium mb-1">Phase 3: Execution</h5>
<ul className="space-y-1 text-muted-foreground"> <ul className="space-y-0.5 text-xs text-muted-foreground">
<li>• 계획된 입찰 실행</li> <li>• Execute planned bids</li>
<li>• 실시간 모니터링</li> <li>• Real-time monitoring</li>
<li>• 적시 조정 및 대응</li> <li>• Timely adjustments and responses</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -386,51 +386,51 @@ export default function AuctionGuide() {
</Card> </Card>
{/* Technical Implementation */} {/* Technical Implementation */}
<Card className="mb-8" data-testid="section-technical"> <Card className="mb-4" data-testid="section-technical">
<CardHeader> <CardHeader className="pb-2">
<CardTitle className="flex items-center space-x-2"> <CardTitle className="flex items-center space-x-2 text-lg">
<Brain className="h-5 w-5 text-primary" /> <Brain className="h-4 w-4 text-primary" />
<span>6. 기술적 구현</span> <span>6. Technical Implementation</span>
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="pt-0">
<div className="space-y-6"> <div className="space-y-4">
<div className="bg-primary/5 rounded-lg p-6"> <div className="bg-primary/5 rounded-lg p-4">
<h4 className="font-semibold mb-3">🔧 시스템 아키텍처</h4> <h4 className="font-semibold mb-2">🔧 System Architecture</h4>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm"> <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
<div> <div>
<h5 className="font-medium mb-2">실시간 입찰 처리</h5> <h5 className="font-medium mb-1">Real-time Bid Processing</h5>
<ul className="space-y-1 text-muted-foreground"> <ul className="space-y-0.5 text-xs text-muted-foreground">
<li>• PostgreSQL 기반 트랜잭션 관리</li> <li>• PostgreSQL-based transaction management</li>
<li>• 동시성 제어 및 무결성 보장</li> <li>• Concurrency control and integrity assurance</li>
<li>• 실시간 순위 업데이트</li> <li>• Real-time ranking updates</li>
</ul> </ul>
</div> </div>
<div> <div>
<h5 className="font-medium mb-2">보안 및 검증</h5> <h5 className="font-medium mb-1">Security and Verification</h5>
<ul className="space-y-1 text-muted-foreground"> <ul className="space-y-0.5 text-xs text-muted-foreground">
<li>• 사용자 인증 및 권한 관리</li> <li>• User authentication and authorization</li>
<li>• 입찰 데이터 암호화</li> <li>• Bid data encryption</li>
<li>• 부정 입찰 방지 시스템</li> <li>• Fraud prevention system</li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<div className="bg-chart-2/5 rounded-lg p-6"> <div className="bg-chart-2/5 rounded-lg p-4">
<h4 className="font-semibold mb-3">📊 데이터 분석</h4> <h4 className="font-semibold mb-2">📊 Data Analysis</h4>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm"> <div className="grid grid-cols-1 md:grid-cols-3 gap-3 text-sm">
<div> <div>
<h5 className="font-medium mb-2">입찰 패턴 분석</h5> <h5 className="font-medium mb-1">Bidding Pattern Analysis</h5>
<p className="text-muted-foreground">사용자별 입찰 히스토리 및 성공률 추적</p> <p className="text-xs text-muted-foreground">Track user-specific bid history and success rates</p>
</div> </div>
<div> <div>
<h5 className="font-medium mb-2">시장 가격 예측</h5> <h5 className="font-medium mb-1">Market Price Prediction</h5>
<p className="text-muted-foreground">머신러닝 기반 적정 입찰가 제안</p> <p className="text-xs text-muted-foreground">ML-based optimal bid suggestions</p>
</div> </div>
<div> <div>
<h5 className="font-medium mb-2">성과 측정</h5> <h5 className="font-medium mb-1">Performance Measurement</h5>
<p className="text-muted-foreground">관리 권한 획득 후 ROI 분석</p> <p className="text-xs text-muted-foreground">ROI analysis after acquiring management rights</p>
</div> </div>
</div> </div>
</div> </div>
@ -440,22 +440,22 @@ export default function AuctionGuide() {
{/* Call to Action */} {/* Call to Action */}
<Card className="bg-gradient-to-r from-primary/10 to-chart-2/10"> <Card className="bg-gradient-to-r from-primary/10 to-chart-2/10">
<CardContent className="p-8 text-center"> <CardContent className="p-6 text-center">
<h3 className="text-2xl font-bold mb-4">지금 경매에 참여하세요!</h3> <h3 className="text-2xl font-bold mb-2">Join the Auction Now!</h3>
<p className="text-lg text-muted-foreground mb-6"> <p className="text-muted-foreground mb-4">
혁신적인 미디어 관리 경험을 시작하고 최고의 언론매체 권한을 획득하세요 Start your innovative media management experience and acquire the best media outlet rights
</p> </p>
<div className="flex justify-center space-x-4"> <div className="flex justify-center space-x-3">
<Link href="/auctions"> <Link href="/auctions">
<Button size="lg" data-testid="button-view-auctions"> <Button data-testid="button-view-auctions">
<Gavel className="mr-2 h-4 w-4" /> <Gavel className="mr-2 h-4 w-4" />
활성 경매 보기 View Active Auctions
</Button> </Button>
</Link> </Link>
<Link href="/"> <Link href="/">
<Button variant="outline" size="lg" data-testid="button-back-home"> <Button variant="outline" data-testid="button-back-home">
<Home className="mr-2 h-4 w-4" /> <Home className="mr-2 h-4 w-4" />
홈으로 돌아가기 Back to Home
</Button> </Button>
</Link> </Link>
</div> </div>