99 lines
3.2 KiB
JavaScript
99 lines
3.2 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import { useParams, Link } from 'react-router-dom';
|
|
import { wpApi } from '../api/wordpress';
|
|
import './NewsDetail.css';
|
|
|
|
const NewsDetail = () => {
|
|
const { slug } = useParams();
|
|
const [post, setPost] = useState(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState(null);
|
|
|
|
useEffect(() => {
|
|
const fetchPost = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const data = await wpApi.getPostBySlug(slug);
|
|
if (!data) {
|
|
throw new Error('Post not found');
|
|
}
|
|
setPost(data);
|
|
} catch (err) {
|
|
setError(err);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
if (slug) {
|
|
fetchPost();
|
|
}
|
|
}, [slug]);
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="news-detail-loading">
|
|
<div className="loading-spinner"></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error || !post) {
|
|
return (
|
|
<div className="news-detail-error">
|
|
<div className="container">
|
|
<h2 className="error-title">Post Not Found</h2>
|
|
<p className="error-message">The article you are looking for does not exist or has been removed.</p>
|
|
<Link to="/news" className="back-link">← Back to News</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const featuredImage = post._embedded?.['wp:featuredmedia']?.[0]?.source_url;
|
|
const authorName = post._embedded?.author?.[0]?.name || 'Admin';
|
|
const date = new Date(post.date).toLocaleDateString();
|
|
|
|
return (
|
|
<div className="news-detail-container">
|
|
<article className="news-article">
|
|
{/* Header Section */}
|
|
<header className="article-header">
|
|
<div className="article-meta">
|
|
<span className="article-date">{date}</span>
|
|
<span className="article-meta-divider">•</span>
|
|
<span className="article-author">{authorName}</span>
|
|
</div>
|
|
<h1 className="article-title" dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
|
|
</header>
|
|
|
|
{/* Featured Image */}
|
|
{featuredImage && (
|
|
<div className="article-image-wrapper">
|
|
<img
|
|
src={featuredImage}
|
|
alt={post.title.rendered}
|
|
className="article-image"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Content */}
|
|
<div
|
|
className="article-content"
|
|
dangerouslySetInnerHTML={{ __html: post.content.rendered }}
|
|
/>
|
|
|
|
{/* Footer / Navigation */}
|
|
<footer className="article-footer">
|
|
<Link to="/news" className="back-button">
|
|
목록으로 돌아가기
|
|
</Link>
|
|
</footer>
|
|
</article>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NewsDetail;
|