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

client/src/pages/AuctionGuide.tsx

@@ -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>
+  );
+}