From 07543adb9d64c2b815e67dec19a01f6cfb23ebc1 Mon Sep 17 00:00:00 2001
From: kimjaehyeon0101 <47347352-kimjaehyeon0101@users.noreply.replit.com>
Date: Tue, 30 Sep 2025 01:58:29 +0000
Subject: [PATCH] Update auction guide to a dedicated page and improve layout

Refactor AuctionGuide from a sheet to a dedicated page at '/auction-guide'. Modify layout properties in AuctionGuide.tsx and remove sheet component usage from Auctions.tsx.

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
---
 client/src/pages/AuctionGuide.tsx |   4 +-
 client/src/pages/Auctions.tsx     | 181 ++----------------------------
 2 files changed, 11 insertions(+), 174 deletions(-)

diff --git a/client/src/pages/AuctionGuide.tsx b/client/src/pages/AuctionGuide.tsx
index c503cc9..db8033a 100644
--- a/client/src/pages/AuctionGuide.tsx
+++ b/client/src/pages/AuctionGuide.tsx
@@ -15,7 +15,7 @@ export default function AuctionGuide() {
     <div className="min-h-screen bg-gray-50">
       {/* Header */}
       <header className="bg-white border-b border-gray-200 sticky top-0 z-50">
-        <div className="max-w-7xl mx-auto px-4 py-3">
+        <div className="px-6 py-3">
           <div className="flex items-center justify-between">
             <Link href="/">
               <img 
@@ -41,7 +41,7 @@ export default function AuctionGuide() {
         </div>
       </header>
 
-      <main className="max-w-6xl mx-auto px-4 py-4">
+      <main className="px-6 py-6 w-full">
         {/* Header Section */}
         <div className="mb-4">
           <h1 className="text-2xl font-bold mb-1" data-testid="text-guide-title">
diff --git a/client/src/pages/Auctions.tsx b/client/src/pages/Auctions.tsx
index 74f1f12..957cda0 100644
--- a/client/src/pages/Auctions.tsx
+++ b/client/src/pages/Auctions.tsx
@@ -6,13 +6,6 @@ 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";
@@ -42,7 +35,6 @@ 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');
@@ -257,14 +249,15 @@ export default function Auctions() {
             </div>
             
             <div className="flex items-center space-x-3">
-              <Button 
-                variant="ghost" 
-                size="sm" 
-                onClick={() => setIsGuideOpen(!isGuideOpen)}
-                data-testid="button-auction-guide"
-              >
-                <BookOpen className="h-4 w-4" />
-              </Button>
+              <Link href="/auction-guide">
+                <Button 
+                  variant="ghost" 
+                  size="sm" 
+                  data-testid="button-auction-guide"
+                >
+                  <BookOpen className="h-4 w-4" />
+                </Button>
+              </Link>
               
               {isAuthenticated && user ? (
                 <>
@@ -612,162 +605,6 @@ export default function Auctions() {
         onClose={() => setIsLoginModalOpen(false)} 
       />
       
-      {/* Auction Guide Sheet */}
-      <Sheet open={isGuideOpen} onOpenChange={setIsGuideOpen}>
-        <SheetContent side="right" className="w-full max-w-full 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>
   );