Improve user authentication and navigation flow
Introduce a loading state for authentication, refactor route handling to conditionally render authenticated vs. unauthenticated views, add an Auction Guide page, and update navigation links to use the Link component for client-side routing. 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/u6Yn0uG
This commit is contained in:
kimjaehyeon0101
26
attached_assets/Pasted---1759160709290_1759160709291.txt
Normal file
26
attached_assets/Pasted---1759160709290_1759160709291.txt
Normal file
@ -0,0 +1,26 @@
|
||||
그러니까 홈화면에 언론매체 리스트들이 카테고리별로 쭉 있고, 그 언론매체 클릭하면 그 언론매체 안의 기사들을 쭉 볼 수 있고 (리스트뷰, 그리드뷰 선택할 수 있음) 그리고 그 기사 선택하면 기사 화면으로 넘어가고, 그 기사 화면에서 쭉 내리면 그 기사 관련 예측시장 이벤트들이 3개가 기본으로 뜨고 더 있으면 '더보기' 눌러서 예측시장 리스트만 쭉 볼 수 있어.
|
||||
|
||||
그리고 아이디 admin 비밀번호 1234 으로 로그인하면 모든 언론매체들을 관리할 수 있게되는데, 어떤 걸 관리할수 있는지는 너가 한번 기획해서 알아서 상상해서 만들어봐. (내가 지금 생각할 수 있는건 그 관리자가 사설이나 칼럼 올리면 항상 최상단에 그 글이 보이고, 그 사람이 댓글 쓰면 그 댓글이 상단 고정되고, 그 사람이 지정한 예측시장 이벤트가 맨 위에 뜨고. 기사 밑에 있는 예측시장 이벤트 리스트는 간결하게 요약된 버전인데, 거기서 바로 거래할수도 있지만 뭐 거기서 'Nostra에서 보기' 같은 버튼 누르면 내가 만든 Nostra라는 완전한 예측시장 페이지로 넘어가. 나의 Nostra 예측시장은 아래 두 링크의 UI와 UX와 완전 동일해. https://polymarket.com/
|
||||
https://kalshi.com/
|
||||
|
||||
그리고 프로필 옆에는 i주변에 동그라미 있는 아이콘이 있어서 그거 누르면 3줄 요약 프로필과 위키피디아 같이 그 사람에 대한 모든 것이 나와있는 프로필을 볼 수 있어. 프로필 사진 누르면 프로필 사진을 크게 볼 수도 있고.
|
||||
|
||||
그리고 사피엔스 홈에는 각 언론매체 관리자 계정 권한을 사고 팔수 있는 옥션 (다시말해 경매) 기능이 있어. 네이버에서 광고 입찰하는것 과 같지. 네이버에서 광고 경매 어떻게 하는지는 아래 내용을 참고하면 돼.
|
||||
네이버 광고 경매
|
||||
네이버 광고는 '경매(입찰)' 방식으로 운영되며, 광고주가 제시한 입찰가와 광고의 품질 지수를 종합적으로 고려해 노출 순위와 클릭당 과금액이 결정됩니다. 이는 사용자가 검색한 키워드와 관련성이 높은 광고를 상위에 노출하고, 광고주 간의 공정한 경쟁을 유도하기 위한 시스템입니다.
|
||||
네이버 광고 경매의 주요 요소
|
||||
네이버 광고 경매는 다음과 같은 주요 요소들로 이루어집니다.
|
||||
입찰가: 광고주가 키워드 클릭 1회당 지불할 의사가 있는 최대 금액입니다. 일반적으로 입찰가가 높을수록 상위 노출에 유리하며, 광고 그룹 또는 키워드 단위로 설정할 수 있습니다.
|
||||
품질 지수: 광고의 품질을 평가하는 점수입니다. 광고의 클릭률, 키워드와 광고의 연관성, 광고가 연결되는 페이지의 품질 등이 종합적으로 반영됩니다. 품질 지수가 높으면 낮은 입찰가로도 상위 노출이 가능하며, 클릭당 과금액도 줄어들 수 있습니다.
|
||||
광고 노출 순위: 광고의 노출 순위는 '입찰가'와 '품질 지수'를 결합한 점수를 바탕으로 결정됩니다. 단순히 높은 입찰가를 제시한다고 해서 1위에 노출되는 것이 아니라, 광고의 품질이 좋으면 더 높은 순위를 얻을 수 있습니다.
|
||||
광고 종류별 경매 방식
|
||||
네이버는 광고 상품별로 조금씩 다른 경매 방식을 적용합니다.
|
||||
파워링크 (사이트 검색광고): 사용자가 특정 키워드를 검색했을 때 통합검색 결과 상단에 노출되는 광고입니다. 클릭이 발생할 때만 비용이 부과되는 CPC(Cost Per Click) 방식으로, 입찰가와 품질 지수를 고려해 순위가 결정됩니다.
|
||||
쇼핑검색광고: 네이버 쇼핑 영역에 노출되는 상품형 광고로, 파워링크와 마찬가지로 클릭당 과금(CPC) 경매 방식입니다. 입찰가와 품질 요인에 따라 순위가 결정됩니다.
|
||||
플레이스 광고: 지역 기반 소상공인을 위한 광고로, 경매 방식을 통해 노출 순위가 정해집니다. 이 역시 입찰가와 광고 품질 점수가 중요한 요소입니다.
|
||||
성과형 디스플레이 광고(GFA): 네이버의 다양한 플랫폼에 배너 형태로 노출되는 광고로, 실시간 경매 방식으로 운영됩니다. 연령, 지역, 관심사 등 상세한 타겟팅 설정을 통해 원하는 잠재 고객에게 광고를 노출합니다.
|
||||
광고주가 고려해야 할 점
|
||||
네이버 광고 경매를 성공적으로 운영하기 위해서는 다음과 같은 점을 고려해야 합니다.
|
||||
키워드 선정: 경쟁이 치열한 키워드는 입찰가가 높아지므로, 상품 또는 서비스와 관련성이 높으면서도 경쟁이 비교적 덜한 키워드를 찾는 것이 중요합니다.
|
||||
품질 개선: 광고 소재의 클릭률을 높이고, 연결되는 페이지의 콘텐츠를 최적화하여 품질 지수를 높이면 광고 효율을 개선할 수 있습니다.
|
||||
입찰 전략: 예산과 목표에 따라 수동 입찰과 자동 입찰을 적절히 활용할 수 있습니다. 자동 입찰은 시스템이 최적화된 입찰가를 설정해주지만, 개별 키워드 입찰가를 직접 관리하여 더 세밀한 전략을 구사할 수도 있습니다.
|
||||
@ -11,29 +11,42 @@ import Article from "@/pages/Article";
|
||||
import AdminDashboard from "@/pages/AdminDashboard";
|
||||
import SuperAdminDashboard from "@/pages/SuperAdminDashboard";
|
||||
import Auctions from "@/pages/Auctions";
|
||||
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);
|
||||
|
||||
return (
|
||||
<Switch>
|
||||
{isLoading || !isAuthenticated ? (
|
||||
<Route path="/" component={Landing} />
|
||||
) : (
|
||||
<>
|
||||
<Route path="/" component={Home} />
|
||||
<Route path="/media/:slug" component={MediaOutlet} />
|
||||
<Route path="/articles/:slug" component={Article} />
|
||||
<Route path="/auctions" component={Auctions} />
|
||||
{(user?.role === 'admin' || user?.role === 'superadmin') && (
|
||||
<Route path="/admin" component={AdminDashboard} />
|
||||
)}
|
||||
{user?.role === 'superadmin' && (
|
||||
<Route path="/superadmin" component={SuperAdminDashboard} />
|
||||
)}
|
||||
</>
|
||||
<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="/auction-guide" component={AuctionGuide} />
|
||||
|
||||
{/* Admin routes - only when authenticated */}
|
||||
{isAuthenticated && (user?.role === 'admin' || user?.role === 'superadmin') && (
|
||||
<Route path="/admin" component={AdminDashboard} />
|
||||
)}
|
||||
{isAuthenticated && user?.role === 'superadmin' && (
|
||||
<Route path="/superadmin" component={SuperAdminDashboard} />
|
||||
)}
|
||||
|
||||
<Route component={NotFound} />
|
||||
</Switch>
|
||||
);
|
||||
|
||||
467
client/src/pages/AuctionGuide.tsx
Normal file
467
client/src/pages/AuctionGuide.tsx
Normal file
@ -0,0 +1,467 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Link } from "wouter";
|
||||
import {
|
||||
Lightbulb,
|
||||
Settings,
|
||||
TrendingUp,
|
||||
Award,
|
||||
List,
|
||||
Brain,
|
||||
Gavel,
|
||||
Home,
|
||||
Calculator,
|
||||
Users,
|
||||
Hash,
|
||||
Building,
|
||||
DollarSign,
|
||||
Star,
|
||||
Target,
|
||||
BookOpen
|
||||
} from "lucide-react";
|
||||
|
||||
export default function AuctionGuide() {
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
{/* Header */}
|
||||
<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="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>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
<nav className="hidden md:flex space-x-6">
|
||||
<Link href="/" className="text-muted-foreground hover:text-foreground transition-colors" 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="/auction-guide" className="text-foreground font-medium" data-testid="link-auction-guide">Auction Guide</Link>
|
||||
</nav>
|
||||
|
||||
<a href="/api/login">
|
||||
<Button data-testid="button-login">Login</Button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-6xl mx-auto px-6 py-8">
|
||||
{/* Header Section */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-4xl font-bold mb-4" data-testid="text-guide-title">SAPIENS 언론매체 경매 시스템 완전 가이드</h1>
|
||||
<p className="text-xl text-muted-foreground">
|
||||
네이버 광고 경매 방식을 적용한 혁신적인 미디어 관리 권한 경매 플랫폼
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Overview Card */}
|
||||
<Card className="mb-8" data-testid="section-overview">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<Lightbulb className="h-5 w-5 text-primary" />
|
||||
<span>경매 시스템 개요</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg mb-3">🎯 핵심 원리</h3>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li>• <strong>비크리 경매 방식</strong>: 노벨경제학상 수상 이론 적용</li>
|
||||
<li>• <strong>하이브리드 스코어링</strong>: 입찰가 × 품질점수 조합</li>
|
||||
<li>• <strong>공정한 가격 결정</strong>: 2순위 입찰가 기반 과금</li>
|
||||
<li>• <strong>품질 중심 평가</strong>: 단순 가격 경쟁 방지</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg mb-3">📊 경매 대상</h3>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li>• <strong>People (24명)</strong>: 주요 인물 언론매체 관리권</li>
|
||||
<li>• <strong>Topics (20개)</strong>: 핵심 주제 콘텐츠 관리권</li>
|
||||
<li>• <strong>Companies (27개)</strong>: 기업 미디어 관리권</li>
|
||||
<li>• <strong>독점적 편집권</strong>: 콘텐츠 우선순위 결정권</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Core Mechanism */}
|
||||
<Card className="mb-8" data-testid="section-mechanism">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<Settings className="h-5 w-5 text-chart-1" />
|
||||
<span>1. 기본 경매 메커니즘</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-6">
|
||||
<div className="bg-primary/5 rounded-lg p-6">
|
||||
<h3 className="font-semibold text-lg mb-4 flex items-center">
|
||||
<Award className="h-5 w-5 text-primary mr-2" />
|
||||
비크리 경매 방식 (Vickrey Auction)
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<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>
|
||||
<h4 className="font-medium mb-2">최고 입찰자 낙찰</h4>
|
||||
<p className="text-sm text-muted-foreground">가장 높은 종합 점수를 받은 입찰자가 낙찰</p>
|
||||
</div>
|
||||
<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>
|
||||
<h4 className="font-medium mb-2">2순위 가격 지불</h4>
|
||||
<p className="text-sm text-muted-foreground">실제로는 2순위 입찰가만 지불</p>
|
||||
</div>
|
||||
<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>
|
||||
<h4 className="font-medium mb-2">공정한 가격 형성</h4>
|
||||
<p className="text-sm text-muted-foreground">과도한 입찰 방지 및 효율성 증대</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-chart-1/5 rounded-lg p-6">
|
||||
<h4 className="font-semibold mb-3">📝 실제 예시</h4>
|
||||
<div className="space-y-2 text-sm">
|
||||
<p><strong>A 입찰자:</strong> $1,000 × 85점 = 85,000점 (1위 낙찰)</p>
|
||||
<p><strong>B 입찰자:</strong> $800 × 90점 = 72,000점 (2위)</p>
|
||||
<p><strong>C 입찰자:</strong> $1,200 × 60점 = 72,000점 (3위)</p>
|
||||
<p className="pt-2 font-medium text-primary">
|
||||
→ A가 낙찰되지만 실제 지불 금액은 B의 입찰가인 $800 수준
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Ranking System */}
|
||||
<Card className="mb-8" data-testid="section-ranking">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<TrendingUp className="h-5 w-5 text-chart-2" />
|
||||
<span>2. 순위 결정 시스템</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-6">
|
||||
<div className="text-center bg-gradient-to-r from-primary/10 to-chart-2/10 rounded-lg p-6">
|
||||
<h3 className="text-2xl font-bold mb-4">최종 순위 공식</h3>
|
||||
<div className="text-3xl font-bold text-primary mb-2">
|
||||
순위 점수 = 입찰가 × (품질점수 ÷ 100)
|
||||
</div>
|
||||
<p className="text-muted-foreground">네이버 광고 경매와 동일한 가중치 방식 적용</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h4 className="font-semibold text-lg mb-3 flex items-center">
|
||||
<DollarSign className="h-5 w-5 text-primary mr-2" />
|
||||
입찰가 (Bid Amount)
|
||||
</h4>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li>• 최소 입찰가: $100</li>
|
||||
<li>• 최대 입찰가: $100,000</li>
|
||||
<li>• 현재 최고가보다 높아야 함</li>
|
||||
<li>• 관리 기간: 기본 30일</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-lg mb-3 flex items-center">
|
||||
<Star className="h-5 w-5 text-chart-2 mr-2" />
|
||||
품질점수 (Quality Score)
|
||||
</h4>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li>• 점수 범위: 1-100점</li>
|
||||
<li>• 콘텐츠 품질 평가</li>
|
||||
<li>• 사용자 참여도 분석</li>
|
||||
<li>• 편집 기준 준수도</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Quality Score System */}
|
||||
<Card className="mb-8" data-testid="section-quality">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<Award className="h-5 w-5 text-chart-3" />
|
||||
<span>3. 품질점수 시스템</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<Card className="border-destructive/20">
|
||||
<CardContent className="p-4 text-center">
|
||||
<Badge variant="destructive" className="mb-2">1-40점</Badge>
|
||||
<h4 className="font-semibold mb-2">낮은 품질</h4>
|
||||
<ul className="text-xs space-y-1">
|
||||
<li>• 기본적인 편집 기준 미달</li>
|
||||
<li>• 낮은 사용자 참여도</li>
|
||||
<li>• 콘텐츠 일관성 부족</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="border-chart-4/20">
|
||||
<CardContent className="p-4 text-center">
|
||||
<Badge variant="secondary" className="mb-2">41-70점</Badge>
|
||||
<h4 className="font-semibold mb-2">보통 품질</h4>
|
||||
<ul className="text-xs space-y-1">
|
||||
<li>• 표준 편집 기준 충족</li>
|
||||
<li>• 안정적인 콘텐츠 품질</li>
|
||||
<li>• 적절한 사용자 반응</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="border-chart-2/20">
|
||||
<CardContent className="p-4 text-center">
|
||||
<Badge variant="default" className="mb-2">71-100점</Badge>
|
||||
<h4 className="font-semibold mb-2">높은 품질</h4>
|
||||
<ul className="text-xs space-y-1">
|
||||
<li>• 우수한 편집 기준</li>
|
||||
<li>• 높은 사용자 참여도</li>
|
||||
<li>• 혁신적인 콘텐츠</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="bg-chart-2/5 rounded-lg p-6">
|
||||
<h4 className="font-semibold mb-3 flex items-center">
|
||||
<Calculator className="h-5 w-5 text-chart-2 mr-2" />
|
||||
품질점수 혜택
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
|
||||
<div>
|
||||
<h5 className="font-medium mb-2">📈 순위 향상</h5>
|
||||
<p className="text-muted-foreground">동일 입찰가 중 높은 품질점수 우선 선정</p>
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="font-medium mb-2">💰 비용 절약</h5>
|
||||
<p className="text-muted-foreground">낮은 입찰가로도 높은 순위 획득 가능</p>
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="font-medium mb-2">🎯 효과 증대</h5>
|
||||
<p className="text-muted-foreground">더 많은 노출과 사용자 참여 기회</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Auction Types */}
|
||||
<Card className="mb-8" data-testid="section-types">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<List className="h-5 w-5 text-chart-4" />
|
||||
<span>4. 경매 유형별 특징</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<Card className="border-primary/20">
|
||||
<CardContent className="p-4">
|
||||
<h4 className="font-semibold text-lg mb-3 flex items-center">
|
||||
<Users className="h-5 w-5 text-primary mr-2" />
|
||||
People (인물)
|
||||
</h4>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li>• <strong>24명의 주요 인물</strong></li>
|
||||
<li>• 개인 브랜딩 관리</li>
|
||||
<li>• 발언 및 활동 콘텐츠</li>
|
||||
<li>• 프로필 정보 편집권</li>
|
||||
<li>• 최소 입찰: $500</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="border-chart-1/20">
|
||||
<CardContent className="p-4">
|
||||
<h4 className="font-semibold text-lg mb-3 flex items-center">
|
||||
<Hash className="h-5 w-5 text-chart-1 mr-2" />
|
||||
Topics (주제)
|
||||
</h4>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li>• <strong>20개 핵심 주제</strong></li>
|
||||
<li>• 트렌드 분석 관리</li>
|
||||
<li>• 주제별 콘텐츠 큐레이션</li>
|
||||
<li>• 예측시장 연동</li>
|
||||
<li>• 최소 입찰: $300</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="border-chart-2/20">
|
||||
<CardContent className="p-4">
|
||||
<h4 className="font-semibold text-lg mb-3 flex items-center">
|
||||
<Building className="h-5 w-5 text-chart-2 mr-2" />
|
||||
Companies (기업)
|
||||
</h4>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li>• <strong>27개 주요 기업</strong></li>
|
||||
<li>• 기업 뉴스 관리</li>
|
||||
<li>• 재무 정보 업데이트</li>
|
||||
<li>• 기업 평판 관리</li>
|
||||
<li>• 최소 입찰: $1,000</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Strategic Bidding */}
|
||||
<Card className="mb-8" data-testid="section-strategy">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<Target className="h-5 w-5 text-chart-5" />
|
||||
<span>5. 전략적 입찰 가이드</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h4 className="font-semibold text-lg mb-3 text-primary">💡 효과적인 입찰 전략</h4>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li>• <strong>품질점수 우선 개선</strong>: 입찰가보다 ROI가 높음</li>
|
||||
<li>• <strong>경쟁 환경 분석</strong>: 유사한 카테고리 경매 분석</li>
|
||||
<li>• <strong>점진적 입찰</strong>: 한 번에 높은 금액보다 단계적 증액</li>
|
||||
<li>• <strong>시간대 고려</strong>: 마감 임박 시 경쟁 심화</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-lg mb-3 text-destructive">⚠️ 피해야 할 실수</h4>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li>• <strong>품질점수 무시</strong>: 입찰가만으로는 승리 불가</li>
|
||||
<li>• <strong>과도한 경쟁</strong>: 감정적 입찰로 인한 손실</li>
|
||||
<li>• <strong>단기적 사고</strong>: 관리 기간 대비 수익성 미고려</li>
|
||||
<li>• <strong>마감 직전 입찰</strong>: 충분한 검토 시간 부족</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-accent/10 rounded-lg p-6">
|
||||
<h4 className="font-semibold mb-3 flex items-center">
|
||||
<Lightbulb className="h-5 w-5 text-accent mr-2" />
|
||||
성공적인 경매 참여 팁
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
|
||||
<div>
|
||||
<h5 className="font-medium mb-2">1단계: 준비</h5>
|
||||
<ul className="space-y-1 text-muted-foreground">
|
||||
<li>• 목표 언론매체 선정</li>
|
||||
<li>• 예산 계획 수립</li>
|
||||
<li>• 품질점수 자가 평가</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="font-medium mb-2">2단계: 분석</h5>
|
||||
<ul className="space-y-1 text-muted-foreground">
|
||||
<li>• 과거 경매 결과 분석</li>
|
||||
<li>• 경쟁자 입찰 패턴</li>
|
||||
<li>• 시장 가치 평가</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="font-medium mb-2">3단계: 실행</h5>
|
||||
<ul className="space-y-1 text-muted-foreground">
|
||||
<li>• 계획된 입찰 실행</li>
|
||||
<li>• 실시간 모니터링</li>
|
||||
<li>• 적시 조정 및 대응</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Technical Implementation */}
|
||||
<Card className="mb-8" data-testid="section-technical">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center space-x-2">
|
||||
<Brain className="h-5 w-5 text-primary" />
|
||||
<span>6. 기술적 구현</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-6">
|
||||
<div className="bg-primary/5 rounded-lg p-6">
|
||||
<h4 className="font-semibold mb-3">🔧 시스템 아키텍처</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<h5 className="font-medium mb-2">실시간 입찰 처리</h5>
|
||||
<ul className="space-y-1 text-muted-foreground">
|
||||
<li>• PostgreSQL 기반 트랜잭션 관리</li>
|
||||
<li>• 동시성 제어 및 무결성 보장</li>
|
||||
<li>• 실시간 순위 업데이트</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="font-medium mb-2">보안 및 검증</h5>
|
||||
<ul className="space-y-1 text-muted-foreground">
|
||||
<li>• 사용자 인증 및 권한 관리</li>
|
||||
<li>• 입찰 데이터 암호화</li>
|
||||
<li>• 부정 입찰 방지 시스템</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-chart-2/5 rounded-lg p-6">
|
||||
<h4 className="font-semibold mb-3">📊 데이터 분석</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
|
||||
<div>
|
||||
<h5 className="font-medium mb-2">입찰 패턴 분석</h5>
|
||||
<p className="text-muted-foreground">사용자별 입찰 히스토리 및 성공률 추적</p>
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="font-medium mb-2">시장 가격 예측</h5>
|
||||
<p className="text-muted-foreground">머신러닝 기반 적정 입찰가 제안</p>
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="font-medium mb-2">성과 측정</h5>
|
||||
<p className="text-muted-foreground">관리 권한 획득 후 ROI 분석</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Call to Action */}
|
||||
<Card className="bg-gradient-to-r from-primary/10 to-chart-2/10">
|
||||
<CardContent className="p-8 text-center">
|
||||
<h3 className="text-2xl font-bold mb-4">지금 경매에 참여하세요!</h3>
|
||||
<p className="text-lg text-muted-foreground mb-6">
|
||||
혁신적인 미디어 관리 경험을 시작하고 최고의 언론매체 권한을 획득하세요
|
||||
</p>
|
||||
<div className="flex justify-center space-x-4">
|
||||
<Link href="/auctions">
|
||||
<Button size="lg" data-testid="button-view-auctions">
|
||||
<Gavel className="mr-2 h-4 w-4" />
|
||||
활성 경매 보기
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/">
|
||||
<Button variant="outline" size="lg" data-testid="button-back-home">
|
||||
<Home className="mr-2 h-4 w-4" />
|
||||
홈으로 돌아가기
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -12,6 +12,8 @@ import { apiRequest } from "@/lib/queryClient";
|
||||
import { isUnauthorizedError } from "@/lib/authUtils";
|
||||
import AuctionCard from "@/components/AuctionCard";
|
||||
import type { Auction, MediaOutlet } from "@shared/schema";
|
||||
import { BookOpen } from "lucide-react";
|
||||
import { Link } from "wouter";
|
||||
|
||||
export default function Auctions() {
|
||||
const { user, isAuthenticated } = useAuth();
|
||||
@ -169,13 +171,14 @@ export default function Auctions() {
|
||||
</div>
|
||||
|
||||
<nav className="hidden md:flex space-x-6">
|
||||
<a href="/" className="text-muted-foreground hover:text-foreground transition-colors">Home</a>
|
||||
<a href="/auctions" className="text-foreground hover:text-primary transition-colors">Auctions</a>
|
||||
<Link href="/" className="text-muted-foreground hover:text-foreground transition-colors">Home</Link>
|
||||
<Link href="/auctions" className="text-foreground hover:text-primary transition-colors">Auctions</Link>
|
||||
<Link href="/auction-guide" className="text-muted-foreground hover:text-foreground transition-colors">Auction Guide</Link>
|
||||
<a href="#" className="text-muted-foreground hover:text-foreground transition-colors">Predictions</a>
|
||||
{(user?.role === 'admin' || user?.role === 'superadmin') && (
|
||||
<a href={user.role === 'admin' ? '/admin' : '/superadmin'} className="text-muted-foreground hover:text-foreground transition-colors">
|
||||
<Link href={user.role === 'admin' ? '/admin' : '/superadmin'} className="text-muted-foreground hover:text-foreground transition-colors">
|
||||
Dashboard
|
||||
</a>
|
||||
</Link>
|
||||
)}
|
||||
</nav>
|
||||
</div>
|
||||
@ -215,7 +218,15 @@ export default function Auctions() {
|
||||
<main className="max-w-7xl mx-auto px-6 py-8">
|
||||
{/* Page Header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold mb-4">Media Outlet Auctions</h1>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h1 className="text-3xl font-bold">Media Outlet Auctions</h1>
|
||||
<Link href="/auction-guide">
|
||||
<Button variant="outline" data-testid="button-auction-guide">
|
||||
<BookOpen className="mr-2 h-4 w-4" />
|
||||
Complete Auction Guide
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<p className="text-lg text-muted-foreground mb-6">
|
||||
Bid for exclusive editorial rights and content management privileges.
|
||||
Based on competitive bidding similar to advertising platforms, combining bid amount with quality scores.
|
||||
|
||||
Reference in New Issue
Block a user