Unify article page UI and CSS with home screen for consistent branding
Remove back and home buttons from article page header, integrate logo navigation to home, and update styling to match home page. 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/pIEDxt1
This commit is contained in:
kimjaehyeon0101
@ -5,7 +5,7 @@ import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { TrendingUp, TrendingDown, DollarSign, Clock, ArrowLeft } from "lucide-react";
|
||||
import { TrendingUp, TrendingDown, DollarSign, Clock } from "lucide-react";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { apiRequest, queryClient } from "@/lib/queryClient";
|
||||
import type { Article, PredictionMarket } from "@shared/schema";
|
||||
@ -115,31 +115,24 @@ export default function Article() {
|
||||
|
||||
if (articleLoading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<header className="bg-card border-b border-border sticky top-0 z-50">
|
||||
<div className="max-w-4xl mx-auto px-6 py-4">
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<header className="bg-white border-b border-gray-200 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">
|
||||
<Button variant="ghost" onClick={() => window.history.back()}>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
뒤로가기
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => setLocation("/")}>
|
||||
홈으로
|
||||
</Button>
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
src="/attached_assets/logo_black_1759181850935.png"
|
||||
alt="SAPIENS"
|
||||
className="h-5 w-auto cursor-pointer"
|
||||
data-testid="logo-sapiens"
|
||||
onClick={() => setLocation("/")}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-4xl mx-auto px-6 py-8">
|
||||
<main className="max-w-7xl mx-auto px-6 py-8">
|
||||
<div className="animate-pulse">
|
||||
<div className="h-8 bg-gray-300 rounded mb-4 w-3/4"></div>
|
||||
<div className="h-4 bg-gray-300 rounded mb-6 w-1/2"></div>
|
||||
@ -157,7 +150,7 @@ export default function Article() {
|
||||
|
||||
if (!article) {
|
||||
return (
|
||||
<div className="min-h-screen bg-background flex items-center justify-center">
|
||||
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<h1 className="text-2xl font-bold mb-4">기사를 찾을 수 없습니다</h1>
|
||||
<Button onClick={() => setLocation("/")}>홈으로 돌아가기</Button>
|
||||
@ -167,68 +160,39 @@ export default function Article() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Header */}
|
||||
<header className="bg-card border-b border-border sticky top-0 z-50">
|
||||
<div className="max-w-4xl mx-auto px-6 py-4">
|
||||
<header className="bg-white border-b border-gray-200 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">
|
||||
<Button variant="ghost" onClick={() => window.history.back()} data-testid="button-back">
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
뒤로가기
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => setLocation("/")} data-testid="button-home">
|
||||
홈으로
|
||||
</Button>
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
src="/attached_assets/logo_black_1759181850935.png"
|
||||
alt="SAPIENS"
|
||||
className="h-5 w-auto cursor-pointer"
|
||||
data-testid="logo-sapiens"
|
||||
onClick={() => setLocation("/")}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-4xl mx-auto px-6 py-8">
|
||||
<main className="max-w-7xl mx-auto px-6 py-12">
|
||||
{/* Article Content */}
|
||||
<article className="mb-12">
|
||||
<article className="mb-16 max-w-4xl">
|
||||
<header className="mb-8">
|
||||
<h1 className="text-4xl font-bold mb-4" data-testid="text-article-title">{article.title}</h1>
|
||||
<div className="flex items-center space-x-4 text-muted-foreground mb-6">
|
||||
<span data-testid="text-article-date">{formatDate(article.publishedAt)}</span>
|
||||
<span>•</span>
|
||||
<span data-testid="text-article-author">{article.author}</span>
|
||||
{article.tags?.map((tag) => (
|
||||
<Badge key={tag} variant="secondary">
|
||||
{tag}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{article.imageUrl && (
|
||||
<div className="mb-8">
|
||||
<img
|
||||
src={article.imageUrl}
|
||||
alt={article.title}
|
||||
className="w-full h-96 object-cover rounded-xl"
|
||||
data-testid="img-article-hero"
|
||||
/>
|
||||
</div>
|
||||
<h1 className="text-4xl font-bold mb-6 text-gray-900" data-testid="text-article-title">{article.title}</h1>
|
||||
{article.excerpt && (
|
||||
<p className="text-base text-gray-600 mb-8 leading-relaxed" data-testid="text-article-excerpt">
|
||||
{article.excerpt}
|
||||
</p>
|
||||
)}
|
||||
</header>
|
||||
|
||||
<div className="prose prose-lg max-w-none">
|
||||
{article.excerpt && (
|
||||
<p className="text-lg text-muted-foreground mb-6 font-medium" data-testid="text-article-excerpt">
|
||||
{article.excerpt}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div
|
||||
className="text-lg leading-relaxed"
|
||||
className="text-base leading-relaxed text-gray-700"
|
||||
data-testid="text-article-content"
|
||||
>
|
||||
{parseArticleContent(article.content).map((part, index) => {
|
||||
@ -236,14 +200,14 @@ export default function Article() {
|
||||
return (
|
||||
<h3
|
||||
key={index}
|
||||
className="text-2xl font-bold mt-8 mb-4 text-gray-800"
|
||||
className="text-xl font-bold mt-8 mb-4 text-gray-900"
|
||||
>
|
||||
{part.content}
|
||||
</h3>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<p key={index} className="mb-4 whitespace-pre-wrap">
|
||||
<p key={index} className="mb-5 whitespace-pre-wrap">
|
||||
{part.content}
|
||||
</p>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user