.
This commit is contained in:
9
LOG.md
9
LOG.md
@@ -2,6 +2,15 @@
|
||||
|
||||
## 2026-05-29
|
||||
|
||||
- Investigated Google Search Console crawlability concerns for the live site.
|
||||
- Checked live `robots.txt`, `sitemap.xml`, homepage, sample post pages, and backend post API with a Googlebot user agent; public post URLs in the sitemap returned 200 with no `X-Robots-Tag` or meta robots block.
|
||||
- Confirmed the non-www production host `blog.wypark.me` is the relevant host; its home/archive initial HTML currently contains no `/posts/` links because public lists are client-side rendered.
|
||||
- Identified crawlability risk areas: home/archive rely on client-side post-list fetching, local builds generate a static-only sitemap when the backend API is unreachable, sitemap `lastmod` values can be timezone-skewed when backend timestamps omit an offset, and canonical URLs are not currently emitted.
|
||||
- Validation: `npm run build` passed. As expected without a local backend, build-time sitemap generation logged `fetch failed` and produced only static sitemap entries in the local `.next` output.
|
||||
- Converted home and archive pages to server-rendered public post lists through a dedicated `src/api/publicPosts.ts` fetch helper so first HTML now includes discoverable `/posts/` links.
|
||||
- Added centralized site metadata utilities, canonical metadata for public pages/posts, dynamic sitemap generation, KST-aware API date parsing for `lastmod`, and robots/site URL reuse.
|
||||
- Validation: `npm run lint` passed and `npm run build` passed. A local production server with `NEXT_PUBLIC_API_URL=https://blogserver.wypark.me` returned 22 `/posts/` links on `/`, 204 on `/archive`, canonical URLs for both pages, and sitemap output with 104 URLs including 102 post URLs.
|
||||
- Recommended next task: deploy the SEO crawlability fix, then resubmit `https://blog.wypark.me/sitemap.xml` and a representative post URL in Google Search Console URL Inspection.
|
||||
- Redesigned the app shell into a macOS-inspired blog OS with pastel desktop background tokens, translucent menu bar, quick-launch Dock, and reusable window surfaces.
|
||||
- Applied the window treatment to the home dashboard, post reader, archive, category view, auth screens, chess puzzle view, and admin management shells.
|
||||
- Restored the missing local `chess.js` install in `node_modules` so build verification could run; no dependency version changes were intended.
|
||||
|
||||
68
src/api/publicPosts.ts
Normal file
68
src/api/publicPosts.ts
Normal file
@@ -0,0 +1,68 @@
|
||||
import { ApiResponse, Post, PostListResponse } from '@/types';
|
||||
|
||||
export const PUBLIC_POSTS_REVALIDATE_SECONDS = 300;
|
||||
|
||||
const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8080';
|
||||
|
||||
type PublicPostListParams = {
|
||||
page?: number;
|
||||
size?: number;
|
||||
keyword?: string;
|
||||
category?: string;
|
||||
tag?: string;
|
||||
sort?: string;
|
||||
};
|
||||
|
||||
const buildPostListUrl = (params: PublicPostListParams = {}) => {
|
||||
const searchParams = new URLSearchParams();
|
||||
|
||||
Object.entries({
|
||||
...params,
|
||||
sort: params.sort || 'createdAt,desc',
|
||||
}).forEach(([key, value]) => {
|
||||
if (value !== undefined && value !== '') {
|
||||
searchParams.set(key, String(value));
|
||||
}
|
||||
});
|
||||
|
||||
return `${API_URL}/api/posts?${searchParams.toString()}`;
|
||||
};
|
||||
|
||||
export const fetchPublicPosts = async (
|
||||
params: PublicPostListParams = {},
|
||||
): Promise<PostListResponse | null> => {
|
||||
try {
|
||||
const response = await fetch(buildPostListUrl(params), {
|
||||
method: 'GET',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
next: { revalidate: PUBLIC_POSTS_REVALIDATE_SECONDS },
|
||||
});
|
||||
|
||||
if (!response.ok) return null;
|
||||
|
||||
const json = (await response.json()) as ApiResponse<PostListResponse>;
|
||||
return json.data;
|
||||
} catch (error) {
|
||||
console.error('Public posts fetch error:', error);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
export const fetchPublicPost = async (slug: string): Promise<Post | null> => {
|
||||
try {
|
||||
const response = await fetch(`${API_URL}/api/posts/${encodeURIComponent(slug)}`, {
|
||||
method: 'GET',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
next: { revalidate: 60 },
|
||||
});
|
||||
|
||||
if (!response.ok) return null;
|
||||
|
||||
const json = (await response.json()) as ApiResponse<Post>;
|
||||
return json.data;
|
||||
} catch (error) {
|
||||
console.error('Public post fetch error:', error);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,61 +1,76 @@
|
||||
'use client';
|
||||
|
||||
import { useMemo } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { format } from 'date-fns';
|
||||
import type { Metadata } from 'next';
|
||||
import Link from 'next/link';
|
||||
import { Archive, Calendar, ChevronRight, FileText, Loader2 } from 'lucide-react';
|
||||
import { getPosts } from '@/api/posts';
|
||||
import { Archive, Calendar, ChevronRight, FileText } from 'lucide-react';
|
||||
import {
|
||||
fetchPublicPosts,
|
||||
} from '@/api/publicPosts';
|
||||
import EmptyState from '@/components/ui/EmptyState';
|
||||
import StatusBadge from '@/components/ui/StatusBadge';
|
||||
import Surface from '@/components/ui/Surface';
|
||||
import WindowSurface from '@/components/ui/WindowSurface';
|
||||
import { SITE_NAME } from '@/lib/site';
|
||||
import { Post, PostListResponse } from '@/types';
|
||||
|
||||
const getTotalElements = (data?: PostListResponse) => {
|
||||
export const dynamic = 'force-dynamic';
|
||||
export const revalidate = 300;
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Archive',
|
||||
alternates: {
|
||||
canonical: '/archive',
|
||||
},
|
||||
openGraph: {
|
||||
title: `Archive | ${SITE_NAME}`,
|
||||
url: '/archive',
|
||||
siteName: SITE_NAME,
|
||||
type: 'website',
|
||||
},
|
||||
};
|
||||
|
||||
const getTotalElements = (data?: PostListResponse | null) => {
|
||||
return data?.page?.totalElements ?? data?.totalElements ?? 0;
|
||||
};
|
||||
|
||||
export default function ArchivePage() {
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ['posts', 'all'],
|
||||
queryFn: () => getPosts({ page: 0, size: 1000 }),
|
||||
staleTime: 1000 * 60 * 5,
|
||||
const formatDate = (value: string) => {
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) return '';
|
||||
|
||||
return new Intl.DateTimeFormat('ko-KR', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
}).format(date);
|
||||
};
|
||||
|
||||
const groupPostsByMonth = (posts: Post[]) => {
|
||||
const groups: Record<string, Record<string, Post[]>> = {};
|
||||
|
||||
posts.forEach((post) => {
|
||||
const date = new Date(post.createdAt);
|
||||
if (Number.isNaN(date.getTime())) return;
|
||||
|
||||
const year = date.getFullYear().toString();
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
||||
|
||||
groups[year] ??= {};
|
||||
groups[year][month] ??= [];
|
||||
groups[year][month].push(post);
|
||||
});
|
||||
|
||||
const archiveGroups = useMemo(() => {
|
||||
if (!data?.content) return {};
|
||||
return groups;
|
||||
};
|
||||
|
||||
const groups: { [year: string]: { [month: string]: Post[] } } = {};
|
||||
|
||||
data.content.forEach((post) => {
|
||||
const date = new Date(post.createdAt);
|
||||
const year = date.getFullYear().toString();
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
||||
|
||||
if (!groups[year]) groups[year] = {};
|
||||
if (!groups[year][month]) groups[year][month] = [];
|
||||
|
||||
groups[year][month].push(post);
|
||||
});
|
||||
|
||||
return groups;
|
||||
}, [data]);
|
||||
|
||||
const sortedYears = useMemo(() => {
|
||||
return Object.keys(archiveGroups).sort((a, b) => Number(b) - Number(a));
|
||||
}, [archiveGroups]);
|
||||
const sortPostsNewestFirst = (posts: Post[]) => {
|
||||
return [...posts].sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
|
||||
};
|
||||
|
||||
export default async function ArchivePage() {
|
||||
const data = await fetchPublicPosts({ page: 0, size: 1000, sort: 'createdAt,desc' });
|
||||
const posts = data?.content || [];
|
||||
const archiveGroups = groupPostsByMonth(posts);
|
||||
const sortedYears = Object.keys(archiveGroups).sort((a, b) => Number(b) - Number(a));
|
||||
const totalPosts = getTotalElements(data);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex min-h-[50vh] items-center justify-center">
|
||||
<Loader2 className="animate-spin text-[var(--color-accent)]" size={40} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="mx-auto w-full px-0 py-4 md:w-[78vw] md:max-w-[1280px] md:py-6">
|
||||
<WindowSurface
|
||||
@@ -92,15 +107,15 @@ export default function ArchivePage() {
|
||||
|
||||
<div className="space-y-8 md:pl-12">
|
||||
{sortedMonths.map((month) => {
|
||||
const posts = months[month];
|
||||
const sortedPosts = [...posts].sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
|
||||
const monthPosts = months[month];
|
||||
const sortedPosts = sortPostsNewestFirst(monthPosts);
|
||||
|
||||
return (
|
||||
<div key={month} className="group">
|
||||
<h3 className="mb-4 flex items-center gap-2 text-lg font-bold text-[var(--color-text-muted)]">
|
||||
<Calendar size={18} className="text-[var(--color-text-subtle)]" />
|
||||
{month}월
|
||||
<StatusBadge tone="neutral">{posts.length}</StatusBadge>
|
||||
<StatusBadge tone="neutral">{monthPosts.length}</StatusBadge>
|
||||
</h3>
|
||||
|
||||
<div className="grid gap-3">
|
||||
@@ -117,9 +132,9 @@ export default function ArchivePage() {
|
||||
</h4>
|
||||
<div className="mt-1.5 flex items-center gap-2 text-xs text-[var(--color-text-subtle)]">
|
||||
<StatusBadge tone="neutral" className="px-1.5 py-0.5">{post.categoryName || '미분류'}</StatusBadge>
|
||||
<span>·</span>
|
||||
<span aria-hidden="true">·</span>
|
||||
<span className="tabular-nums">
|
||||
{format(new Date(post.createdAt), 'yyyy.MM.dd')}
|
||||
{formatDate(post.createdAt)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -138,7 +153,7 @@ export default function ArchivePage() {
|
||||
</div>
|
||||
) : (
|
||||
<EmptyState
|
||||
title="아직 작성된 기록이 없습니다."
|
||||
title="아직 작성한 글이 없습니다."
|
||||
icon={<FileText size={48} />}
|
||||
className="py-20"
|
||||
/>
|
||||
|
||||
@@ -5,6 +5,7 @@ import './globals.css';
|
||||
import Providers from './providers';
|
||||
import DesktopShell from '@/components/layout/DesktopShell';
|
||||
import { THEME_INIT_SCRIPT } from '@/components/theme/theme';
|
||||
import { DEFAULT_DESCRIPTION, SITE_NAME, SITE_URL } from '@/lib/site';
|
||||
|
||||
const pretendard = localFont({
|
||||
src: './fonts/PretendardVariable.woff2',
|
||||
@@ -14,8 +15,23 @@ const pretendard = localFont({
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'WYPark Blog',
|
||||
description: '개발 블로그',
|
||||
metadataBase: new URL(SITE_URL),
|
||||
title: {
|
||||
default: SITE_NAME,
|
||||
template: `%s | ${SITE_NAME}`,
|
||||
},
|
||||
description: DEFAULT_DESCRIPTION,
|
||||
alternates: {
|
||||
canonical: '/',
|
||||
},
|
||||
openGraph: {
|
||||
title: SITE_NAME,
|
||||
description: DEFAULT_DESCRIPTION,
|
||||
url: '/',
|
||||
siteName: SITE_NAME,
|
||||
type: 'website',
|
||||
locale: 'ko_KR',
|
||||
},
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
@@ -54,3 +70,4 @@ export default function RootLayout({
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
159
src/app/page.tsx
159
src/app/page.tsx
@@ -1,27 +1,52 @@
|
||||
'use client';
|
||||
|
||||
import { Suspense, type ReactNode } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import type { Metadata } from 'next';
|
||||
import type { ReactNode } from 'react';
|
||||
import Link from 'next/link';
|
||||
import {
|
||||
Archive,
|
||||
ChevronRight,
|
||||
Clock,
|
||||
Loader2,
|
||||
Search,
|
||||
TrendingUp,
|
||||
} from 'lucide-react';
|
||||
import { getPosts } from '@/api/posts';
|
||||
import {
|
||||
fetchPublicPosts,
|
||||
} from '@/api/publicPosts';
|
||||
import EmptyState from '@/components/ui/EmptyState';
|
||||
import StatusBadge from '@/components/ui/StatusBadge';
|
||||
import Surface from '@/components/ui/Surface';
|
||||
import WindowSurface from '@/components/ui/WindowSurface';
|
||||
import { DEFAULT_DESCRIPTION, SITE_NAME } from '@/lib/site';
|
||||
import { Post, PostListResponse } from '@/types';
|
||||
|
||||
export const dynamic = 'force-dynamic';
|
||||
export const revalidate = 300;
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: {
|
||||
absolute: SITE_NAME,
|
||||
},
|
||||
description: DEFAULT_DESCRIPTION,
|
||||
alternates: {
|
||||
canonical: '/',
|
||||
},
|
||||
openGraph: {
|
||||
title: SITE_NAME,
|
||||
description: DEFAULT_DESCRIPTION,
|
||||
url: '/',
|
||||
siteName: SITE_NAME,
|
||||
type: 'website',
|
||||
},
|
||||
};
|
||||
|
||||
type HomePageProps = {
|
||||
searchParams?: Promise<Record<string, string | string[] | undefined>>;
|
||||
};
|
||||
|
||||
const isNoticePost = (post: Post) => {
|
||||
const categoryName = post.categoryName || '';
|
||||
return categoryName === '공지' || categoryName === '怨듭?' || categoryName.toLowerCase() === 'notice';
|
||||
const normalizedName = categoryName.toLowerCase();
|
||||
|
||||
return categoryName === '공지' || normalizedName === 'notice' || normalizedName === 'announcement';
|
||||
};
|
||||
|
||||
const formatDate = (value?: string) => {
|
||||
@@ -50,18 +75,23 @@ const getSummary = (content?: string, maxLength = 118) => {
|
||||
.slice(0, maxLength);
|
||||
};
|
||||
|
||||
const getTotalElements = (data?: PostListResponse) => {
|
||||
const getTotalElements = (data?: PostListResponse | null) => {
|
||||
return data?.page?.totalElements ?? data?.totalElements ?? 0;
|
||||
};
|
||||
|
||||
const getSearchKeyword = async (searchParams?: HomePageProps['searchParams']) => {
|
||||
const resolvedSearchParams = searchParams ? await searchParams : {};
|
||||
const keyword = resolvedSearchParams.keyword;
|
||||
|
||||
return Array.isArray(keyword) ? keyword[0] || '' : keyword || '';
|
||||
};
|
||||
|
||||
function SearchResults({
|
||||
keyword,
|
||||
data,
|
||||
isLoading,
|
||||
}: {
|
||||
keyword: string;
|
||||
data?: PostListResponse;
|
||||
isLoading: boolean;
|
||||
data?: PostListResponse | null;
|
||||
}) {
|
||||
const searchResults = data?.content || [];
|
||||
const searchTotalElements = getTotalElements(data);
|
||||
@@ -85,11 +115,7 @@ function SearchResults({
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex min-h-60 items-center justify-center">
|
||||
<Loader2 className="animate-spin text-[var(--color-accent)]" size={30} />
|
||||
</div>
|
||||
) : searchResults.length > 0 ? (
|
||||
{searchResults.length > 0 ? (
|
||||
<div className="divide-y divide-[var(--color-line)]">
|
||||
{searchResults.map((post) => (
|
||||
<CompactPostRow key={post.id} post={post} />
|
||||
@@ -209,78 +235,51 @@ function PostListPanel({
|
||||
</div>
|
||||
|
||||
<div className="p-5 md:p-6">
|
||||
{posts.length > 0 ? (
|
||||
<div className="divide-y divide-[var(--color-line)]">
|
||||
{posts.map((post, index) => (
|
||||
<CompactPostRow
|
||||
key={post.id}
|
||||
post={post}
|
||||
rank={isPopular ? index + 1 : undefined}
|
||||
showViews={isPopular}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<EmptyState title={isPopular ? '인기 글을 집계 중입니다.' : '아직 공개된 글이 없습니다.'} className="min-h-72" />
|
||||
)}
|
||||
{posts.length > 0 ? (
|
||||
<div className="divide-y divide-[var(--color-line)]">
|
||||
{posts.map((post, index) => (
|
||||
<CompactPostRow
|
||||
key={post.id}
|
||||
post={post}
|
||||
rank={isPopular ? index + 1 : undefined}
|
||||
showViews={isPopular}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<EmptyState title={isPopular ? '인기 글을 집계 중입니다.' : '아직 공개된 글이 없습니다.'} className="min-h-72" />
|
||||
)}
|
||||
</div>
|
||||
</WindowSurface>
|
||||
);
|
||||
}
|
||||
|
||||
function HomeContent() {
|
||||
const searchParams = useSearchParams();
|
||||
const keyword = searchParams.get('keyword') || '';
|
||||
|
||||
const { data: noticesData, isLoading: isNoticesLoading } = useQuery({
|
||||
queryKey: ['posts', 'notices'],
|
||||
queryFn: () => getPosts({ category: '공지', size: 3, sort: 'createdAt,desc' }),
|
||||
retry: 0,
|
||||
});
|
||||
|
||||
const { data: latestData, isLoading: isLatestLoading } = useQuery({
|
||||
queryKey: ['posts', 'latest'],
|
||||
queryFn: () => getPosts({ size: 8, sort: 'createdAt,desc' }),
|
||||
retry: 0,
|
||||
});
|
||||
|
||||
const { data: popularData, isLoading: isPopularLoading } = useQuery({
|
||||
queryKey: ['posts', 'popular'],
|
||||
queryFn: () => getPosts({ size: 8, sort: 'viewCount,desc' }),
|
||||
retry: 0,
|
||||
});
|
||||
|
||||
const { data: searchData, isLoading: isSearchLoading } = useQuery({
|
||||
queryKey: ['posts', 'search', keyword],
|
||||
queryFn: () => getPosts({ keyword, size: 20 }),
|
||||
enabled: !!keyword,
|
||||
retry: 0,
|
||||
});
|
||||
|
||||
const notices = noticesData?.content || [];
|
||||
const latestList = (latestData?.content || []).filter((post) => !isNoticePost(post)).slice(0, 5);
|
||||
const popularList = (popularData?.content || []).filter((post) => !isNoticePost(post)).slice(0, 5);
|
||||
const isHomeLoading = !keyword && (isNoticesLoading || isLatestLoading || isPopularLoading);
|
||||
export default async function Home({ searchParams }: HomePageProps) {
|
||||
const keyword = await getSearchKeyword(searchParams);
|
||||
|
||||
if (keyword) {
|
||||
const searchData = await fetchPublicPosts({ keyword, size: 20 });
|
||||
|
||||
return (
|
||||
<main className="mx-auto w-full px-0 py-4 md:w-[78vw] md:max-w-[1280px] md:py-6">
|
||||
<SearchResults keyword={keyword} data={searchData} isLoading={isSearchLoading} />
|
||||
<SearchResults keyword={keyword} data={searchData} />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
if (isHomeLoading) {
|
||||
return (
|
||||
<div className="flex min-h-[60vh] items-center justify-center">
|
||||
<Loader2 className="animate-spin text-[var(--color-accent)]" size={36} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const [noticesData, latestData, popularData] = await Promise.all([
|
||||
fetchPublicPosts({ category: '공지', size: 3, sort: 'createdAt,desc' }),
|
||||
fetchPublicPosts({ size: 8, sort: 'createdAt,desc' }),
|
||||
fetchPublicPosts({ size: 8, sort: 'viewCount,desc' }),
|
||||
]);
|
||||
|
||||
const notices = noticesData?.content || [];
|
||||
const latestList = (latestData?.content || []).filter((post) => !isNoticePost(post)).slice(0, 5);
|
||||
const popularList = (popularData?.content || []).filter((post) => !isNoticePost(post)).slice(0, 5);
|
||||
|
||||
return (
|
||||
<main className="mx-auto w-full px-0 py-4 md:w-[78vw] md:max-w-[1280px] md:py-6">
|
||||
<h1 className="sr-only">WYPark Blog</h1>
|
||||
<h1 className="sr-only">{SITE_NAME}</h1>
|
||||
<WindowSurface
|
||||
title="WYPark"
|
||||
controls={(
|
||||
@@ -313,17 +312,3 @@ function HomeContent() {
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<Suspense
|
||||
fallback={(
|
||||
<div className="flex min-h-[60vh] items-center justify-center">
|
||||
<Loader2 className="animate-spin text-[var(--color-accent)]" size={36} />
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<HomeContent />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,87 +1,90 @@
|
||||
import { Metadata } from 'next';
|
||||
import PostDetailClient from '@/components/post/PostDetailClient';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { Post } from '@/types';
|
||||
import { fetchPublicPost } from '@/api/publicPosts';
|
||||
import PostDetailClient from '@/components/post/PostDetailClient';
|
||||
import { DEFAULT_DESCRIPTION, getCanonicalUrl, parseApiDate, SITE_NAME, SITE_URL } from '@/lib/site';
|
||||
|
||||
type Props = {
|
||||
params: Promise<{ slug: string }>;
|
||||
};
|
||||
|
||||
// 🛠️ 서버 사이드 데이터 패칭 함수 (Metadata와 Page 양쪽에서 재사용)
|
||||
async function getPostFromServer(slug: string): Promise<Post | null> {
|
||||
const BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8080';
|
||||
const getPostDescription = (content?: string) => {
|
||||
const plainText = content
|
||||
?.replace(/```[\s\S]*?```/g, ' ')
|
||||
.replace(/!\[(.*?)\]\(.*?\)/g, '$1')
|
||||
.replace(/\[(.*?)\]\(.*?\)/g, '$1')
|
||||
.replace(/[#*`_~>]/g, '')
|
||||
.replace(/\s+/g, ' ')
|
||||
.trim();
|
||||
|
||||
if (!plainText) return DEFAULT_DESCRIPTION;
|
||||
|
||||
return plainText.length > 150 ? `${plainText.slice(0, 150)}...` : plainText;
|
||||
};
|
||||
|
||||
const getFirstMarkdownImage = (content?: string) => {
|
||||
const imageMatch = content?.match(/!\[.*?\]\((.*?)\)/);
|
||||
const imageUrl = imageMatch?.[1]?.split(/\s+/)[0] || '/og-image.png';
|
||||
|
||||
try {
|
||||
const res = await fetch(`${BASE_URL}/api/posts/${slug}`, {
|
||||
// 캐시 설정: 60초마다 갱신 (블로그 특성상 적절)
|
||||
// 즉시 반영이 필요하다면 'no-store'로 설정하거나 revalidate: 0 사용
|
||||
next: { revalidate: 60 },
|
||||
});
|
||||
|
||||
if (!res.ok) return null;
|
||||
|
||||
const json = await res.json();
|
||||
return json.data;
|
||||
} catch (error) {
|
||||
console.error('Server fetch error:', error);
|
||||
return null;
|
||||
return new URL(imageUrl, SITE_URL).toString();
|
||||
} catch {
|
||||
return new URL('/og-image.png', SITE_URL).toString();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 🌟 메타데이터 생성 (SEO)
|
||||
export async function generateMetadata({ params }: Props): Promise<Metadata> {
|
||||
const { slug } = await params;
|
||||
const post = await getPostFromServer(slug);
|
||||
const post = await fetchPublicPost(slug);
|
||||
const canonicalUrl = getCanonicalUrl(`/posts/${encodeURIComponent(post?.slug || slug)}`);
|
||||
|
||||
if (!post) {
|
||||
return {
|
||||
title: '게시글을 찾을 수 없습니다',
|
||||
alternates: {
|
||||
canonical: canonicalUrl,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
// 본문 요약 및 이미지 추출 로직
|
||||
const description = post.content
|
||||
?.replace(/[#*`_~]/g, '')
|
||||
.replace(/\n/g, ' ')
|
||||
.substring(0, 150) + '...';
|
||||
|
||||
const imageMatch = post.content?.match(/!\[.*?\]\((.*?)\)/);
|
||||
const imageUrl = imageMatch ? imageMatch[1] : '/og-image.png';
|
||||
const description = getPostDescription(post.content);
|
||||
const imageUrl = getFirstMarkdownImage(post.content);
|
||||
const publishedTime = parseApiDate(post.createdAt).toISOString();
|
||||
const modifiedTime = parseApiDate(post.updatedAt || post.createdAt).toISOString();
|
||||
|
||||
return {
|
||||
title: post.title,
|
||||
description: description,
|
||||
description,
|
||||
alternates: {
|
||||
canonical: canonicalUrl,
|
||||
},
|
||||
openGraph: {
|
||||
title: post.title,
|
||||
description: description,
|
||||
url: `https://blog.wypark.me/posts/${slug}`,
|
||||
siteName: 'WYPark Blog',
|
||||
description,
|
||||
url: canonicalUrl,
|
||||
siteName: SITE_NAME,
|
||||
images: [{ url: imageUrl, width: 1200, height: 630 }],
|
||||
type: 'article',
|
||||
publishedTime: post.createdAt, // created_at 대신 createdAt 사용 주의 (타입 정의 따름)
|
||||
publishedTime,
|
||||
modifiedTime,
|
||||
authors: ['WYPark'],
|
||||
},
|
||||
twitter: {
|
||||
card: 'summary_large_image',
|
||||
title: post.title,
|
||||
description: description,
|
||||
description,
|
||||
images: [imageUrl],
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
// 🌟 실제 페이지 렌더링 (SSR 적용)
|
||||
export default async function PostDetailPage({ params }: Props) {
|
||||
const { slug } = await params;
|
||||
const post = await fetchPublicPost(slug);
|
||||
|
||||
// 1. 서버에서 데이터를 미리 가져옵니다.
|
||||
const post = await getPostFromServer(slug);
|
||||
|
||||
// 2. 데이터가 없으면 404 페이지로 보냅니다. (봇에게도 404 신호를 줌)
|
||||
if (!post) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
// 3. 가져온 데이터를 클라이언트 컴포넌트에 'initialPost'로 넘겨줍니다.
|
||||
return <PostDetailClient slug={slug} initialPost={post} />;
|
||||
}
|
||||
@@ -1,16 +1,14 @@
|
||||
import { MetadataRoute } from 'next';
|
||||
import { SITE_URL } from '@/lib/site';
|
||||
|
||||
export default function robots(): MetadataRoute.Robots {
|
||||
const baseUrl = 'https://blog.wypark.me';
|
||||
|
||||
return {
|
||||
rules: {
|
||||
userAgent: '*',
|
||||
allow: '/',
|
||||
// 검색 로봇이 굳이 긁어갈 필요 없는 페이지들은 차단 (글쓰기, 로그인 등)
|
||||
disallow: ['/write', '/login', '/signup', '/admin'],
|
||||
},
|
||||
// 여기서 동적으로 생성된 sitemap.xml을 가리킵니다.
|
||||
sitemap: `${baseUrl}/sitemap.xml`,
|
||||
sitemap: `${SITE_URL}/sitemap.xml`,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -1,60 +1,40 @@
|
||||
import { MetadataRoute } from 'next';
|
||||
import {
|
||||
fetchPublicPosts,
|
||||
} from '@/api/publicPosts';
|
||||
import { parseApiDate, SITE_URL } from '@/lib/site';
|
||||
|
||||
interface SitemapPost {
|
||||
slug: string;
|
||||
updatedAt?: string;
|
||||
createdAt?: string;
|
||||
}
|
||||
export const dynamic = 'force-dynamic';
|
||||
export const revalidate = 300;
|
||||
|
||||
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
|
||||
const baseUrl = 'https://blog.wypark.me';
|
||||
// API 주소 환경변수 사용 (없으면 로컬)
|
||||
const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8080';
|
||||
|
||||
// 1. 고정된 정적 페이지들
|
||||
const generatedAt = new Date();
|
||||
const routes: MetadataRoute.Sitemap = [
|
||||
{
|
||||
url: baseUrl,
|
||||
lastModified: new Date(),
|
||||
url: SITE_URL,
|
||||
lastModified: generatedAt,
|
||||
changeFrequency: 'daily',
|
||||
priority: 1,
|
||||
},
|
||||
{
|
||||
url: `${baseUrl}/archive`,
|
||||
lastModified: new Date(),
|
||||
url: `${SITE_URL}/archive`,
|
||||
lastModified: generatedAt,
|
||||
changeFrequency: 'daily',
|
||||
priority: 0.8,
|
||||
},
|
||||
];
|
||||
|
||||
try {
|
||||
// 2. API에서 게시글 목록 가져오기
|
||||
const response = await fetch(`${apiUrl}/api/posts?size=1000&sort=createdAt,desc`, {
|
||||
method: 'GET',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
next: { revalidate: 3600 }
|
||||
});
|
||||
const postsData = await fetchPublicPosts({ size: 1000, sort: 'createdAt,desc' });
|
||||
const posts = postsData?.content || [];
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch posts');
|
||||
}
|
||||
|
||||
const json = await response.json() as { data?: { content?: SitemapPost[] } };
|
||||
const posts = json.data?.content || [];
|
||||
|
||||
// 3. 게시글 데이터를 사이트맵 형식으로 변환
|
||||
const postRoutes = posts.map((post) => ({
|
||||
// 🛠️ 핵심 수정: slug를 encodeURIComponent로 감싸서 특수문자(&, 한글 등)를 안전하게 처리합니다.
|
||||
url: `${baseUrl}/posts/${encodeURIComponent(post.slug)}`,
|
||||
lastModified: new Date(post.updatedAt || post.createdAt || Date.now()),
|
||||
changeFrequency: 'weekly' as const,
|
||||
const postRoutes: MetadataRoute.Sitemap = posts
|
||||
.filter((post) => post.slug)
|
||||
.map((post) => ({
|
||||
url: `${SITE_URL}/posts/${encodeURIComponent(post.slug)}`,
|
||||
lastModified: parseApiDate(post.updatedAt || post.createdAt, generatedAt),
|
||||
changeFrequency: 'weekly',
|
||||
priority: 0.8,
|
||||
}));
|
||||
|
||||
return [...routes, ...postRoutes];
|
||||
|
||||
} catch (error) {
|
||||
console.error('Sitemap generation error:', error);
|
||||
return routes;
|
||||
}
|
||||
return [...routes, ...postRoutes];
|
||||
}
|
||||
|
||||
33
src/lib/site.ts
Normal file
33
src/lib/site.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
export const SITE_URL = 'https://blog.wypark.me';
|
||||
export const SITE_NAME = 'WYPark Blog';
|
||||
export const DEFAULT_DESCRIPTION = '개발 블로그';
|
||||
|
||||
const API_DATE_TIMEZONE = '+09:00';
|
||||
const TIMEZONE_SUFFIX_PATTERN = /(z|[+-]\d{2}:?\d{2})$/i;
|
||||
|
||||
const trimSubMilliseconds = (value: string) => {
|
||||
return value.replace(/(\.\d{3})\d+/, '$1');
|
||||
};
|
||||
|
||||
const withApiTimezone = (value: string) => {
|
||||
if (TIMEZONE_SUFFIX_PATTERN.test(value)) return value;
|
||||
if (/^\d{4}-\d{2}-\d{2}$/.test(value)) return `${value}T00:00:00${API_DATE_TIMEZONE}`;
|
||||
|
||||
return `${value}${API_DATE_TIMEZONE}`;
|
||||
};
|
||||
|
||||
export const getCanonicalUrl = (path = '/') => {
|
||||
return new URL(path, SITE_URL).toString();
|
||||
};
|
||||
|
||||
export const parseApiDate = (value?: string | null, fallback = new Date()) => {
|
||||
if (!value) return fallback;
|
||||
|
||||
const date = new Date(withApiTimezone(trimSubMilliseconds(value.trim())));
|
||||
|
||||
if (Number.isNaN(date.getTime())) return fallback;
|
||||
|
||||
const now = new Date();
|
||||
return date > now ? now : date;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user