+ {/* 글 공유: 정식 절대 URL을 넘겨 localhost가 아닌 canonical 링크가 공유되게 한다. */}
+
+
+
{post.prevPost ? (
) : (
@@ -223,7 +228,7 @@ export function PostDetail({ children, series, post }: PostDetailProps) {
)}
-
+
{/* === 댓글 (giscus · GitHub Discussions 기반, DB 없음) === */}
diff --git a/apps/blog/src/components/post-detail/post-recommendation.tsx b/apps/blog/src/components/post-detail/post-recommendation.tsx
index 5e497f2..19dd512 100644
--- a/apps/blog/src/components/post-detail/post-recommendation.tsx
+++ b/apps/blog/src/components/post-detail/post-recommendation.tsx
@@ -1,20 +1,27 @@
'use client';
-import { Constants } from '@libs/constants';
import { MainLayoutContext } from 'src/app/(main)/main-client-layout';
+import { recommendPosts } from '@libs/recommend-posts';
+import { PostModel } from '@libs/types/commons';
import Link from 'next/link';
import { useContext, useMemo } from 'react';
-export function PostRecommendation() {
+export interface PostRecommendationProps {
+ // 현재 보고 있는 글. 이 글과의 유사도로 추천 목록을 만든다.
+ currentPost: PostModel;
+}
+
+export function PostRecommendation({ currentPost }: PostRecommendationProps) {
+ // 전체 글 목록은 레이아웃 컨텍스트에 이미 있어 추가 fetch가 필요 없다.
const { posts } = useContext(MainLayoutContext);
- const recommendedPosts = useMemo(() => {
- const ids = Constants.recommendation.postIds;
- return ids
- .map((id) => posts.find((p) => p.id === id))
- .filter((p): p is NonNullable
=> p !== undefined);
- }, [posts]);
+ // 태그 겹침 + 같은 시리즈 가중치로 상위 4개를 산출한다(현재 글 제외).
+ const recommendedPosts = useMemo(
+ () => recommendPosts(currentPost, posts, 4),
+ [currentPost, posts],
+ );
+ // 접점 있는 글이 하나도 없으면 섹션 자체를 숨긴다.
if (recommendedPosts.length === 0) {
return null;
}
diff --git a/apps/blog/src/components/post-detail/share-buttons.test.tsx b/apps/blog/src/components/post-detail/share-buttons.test.tsx
new file mode 100644
index 0000000..2bcffdd
--- /dev/null
+++ b/apps/blog/src/components/post-detail/share-buttons.test.tsx
@@ -0,0 +1,53 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ShareButtons } from './share-buttons';
+
+const url = 'https://blog.malloc72p.com/posts/frontend/my-post';
+const title = '내 포스트 제목';
+
+describe('ShareButtons', () => {
+ const writeText = jest.fn();
+
+ beforeEach(() => {
+ writeText.mockReset().mockResolvedValue(undefined);
+ Object.assign(navigator, { clipboard: { writeText } });
+ // 기본 환경(jsdom)에는 navigator.share가 없다고 가정한다.
+ Object.assign(navigator, { share: undefined });
+ });
+
+ it('링크 복사 버튼과 X 공유 링크(인텐트 URL)를 렌더한다', () => {
+ render();
+
+ expect(screen.getByRole('button', { name: '링크 복사' })).toBeInTheDocument();
+
+ const xLink = screen.getByRole('link', { name: 'X(트위터)에 공유' });
+ expect(xLink).toHaveAttribute(
+ 'href',
+ `https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}&url=${encodeURIComponent(url)}`,
+ );
+ // 새 탭 + 안전한 rel을 보장한다.
+ expect(xLink).toHaveAttribute('target', '_blank');
+ expect(xLink).toHaveAttribute('rel', 'noopener noreferrer');
+ });
+
+ it('링크 복사 클릭 시 canonical URL을 클립보드에 쓰고 "복사됨"으로 피드백한다', async () => {
+ render();
+
+ fireEvent.click(screen.getByRole('button', { name: '링크 복사' }));
+
+ expect(writeText).toHaveBeenCalledWith(url);
+ expect(await screen.findByRole('button', { name: '링크 복사됨' })).toBeInTheDocument();
+ });
+
+ it('navigator.share 미지원 환경에서는 네이티브 공유 버튼을 노출하지 않는다', () => {
+ render();
+
+ expect(screen.queryByRole('button', { name: '공유하기' })).not.toBeInTheDocument();
+ });
+
+ it('navigator.share 지원 환경에서는 네이티브 공유 버튼을 노출한다', () => {
+ Object.assign(navigator, { share: jest.fn().mockResolvedValue(undefined) });
+ render();
+
+ expect(screen.getByRole('button', { name: '공유하기' })).toBeInTheDocument();
+ });
+});
diff --git a/apps/blog/src/components/post-detail/share-buttons.tsx b/apps/blog/src/components/post-detail/share-buttons.tsx
new file mode 100644
index 0000000..2ed4f40
--- /dev/null
+++ b/apps/blog/src/components/post-detail/share-buttons.tsx
@@ -0,0 +1,92 @@
+'use client';
+
+import { IconBrandX, IconCheck, IconLink, IconShare } from '@tabler/icons-react';
+import classNames from 'classnames';
+import { useEffect, useState } from 'react';
+
+export interface ShareButtonsProps {
+ // 공유할 글의 정식(canonical) 절대 URL.
+ url: string;
+ // 공유 텍스트로 사용할 글 제목.
+ title: string;
+}
+
+// 공통 버튼 스타일: 터치 타겟(약 44px) + 포커스 링.
+const buttonClass = classNames(
+ 'flex items-center justify-center p-2.5 rounded-md text-gray-500',
+ 'hover:text-black hover:bg-gray-100 active:bg-gray-200',
+ 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400',
+);
+
+export function ShareButtons({ url, title }: ShareButtonsProps) {
+ // 링크 복사 성공 피드백 상태.
+ const [copied, setCopied] = useState(false);
+ // navigator.share 지원 여부. SSR과 마크업이 어긋나지 않도록 마운트 후에만 반영한다.
+ const [canNativeShare, setCanNativeShare] = useState(false);
+
+ useEffect(() => {
+ setCanNativeShare(typeof navigator !== 'undefined' && typeof navigator.share === 'function');
+ }, []);
+
+ const copyLink = async () => {
+ try {
+ await navigator.clipboard.writeText(url);
+ setCopied(true);
+ // 1.5초 뒤 원래 아이콘으로 되돌린다.
+ setTimeout(() => setCopied(false), 1500);
+ } catch {
+ // 클립보드 접근이 거부된 환경에서는 조용히 무시한다.
+ }
+ };
+
+ const nativeShare = async () => {
+ try {
+ await navigator.share({ title, url });
+ } catch {
+ // 사용자가 공유 시트를 취소하면 무시한다.
+ }
+ };
+
+ // X(트위터) 공유 인텐트 URL. 제목과 링크를 쿼리로 안전하게 인코딩한다.
+ const xShareUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(
+ title,
+ )}&url=${encodeURIComponent(url)}`;
+
+ return (
+
+
이 글 공유하기
+
+ {/* 링크 복사 */}
+
+
+ {/* X(트위터) 공유 */}
+
+
+
+
+ {/* 모바일 등 지원 환경에서만 OS 네이티브 공유 시트를 띄운다. */}
+ {canNativeShare && (
+
+ )}
+