57 lines
1.8 KiB
JavaScript
57 lines
1.8 KiB
JavaScript
import React from 'react';
|
|
import { usePosts } from '../hooks/usePosts';
|
|
import PostCard from '../components/PostCard';
|
|
import './News.css';
|
|
|
|
const News = () => {
|
|
// Pass the category slug 'news' to filter posts
|
|
const { posts, loading, error } = usePosts(1, 9, 'news');
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="news-loading">
|
|
<div className="loading-spinner"></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="news-error">
|
|
<div className="news-content-wrapper">
|
|
<h2 className="error-title">Oops! Something went wrong.</h2>
|
|
<p className="error-message">Failed to load news. Please try again later.</p>
|
|
<p style={{ fontSize: '0.875rem', marginTop: '0.5rem', color: '#9ca3af' }}>Error: {error.message}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="news-container">
|
|
<div className="news-content-wrapper">
|
|
<div className="news-header">
|
|
<h1 className="news-title">소식 (News)</h1>
|
|
<p className="news-subtitle">
|
|
Sokuree Consultant의 최신 소식과 인사이트를 전해드립니다.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="news-grid">
|
|
{posts.map((post) => (
|
|
<PostCard key={post.id} post={post} />
|
|
))}
|
|
</div>
|
|
|
|
{posts.length === 0 && (
|
|
<div className="news-empty">
|
|
<p style={{ fontSize: '1.25rem', color: '#6b7280' }}>등록된 소식이 없습니다.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default News;
|