feat(blog): 커스텀 404 + 추천 글 자동화 + 글 공유 버튼 (#93, #89, #92)

[Malloc72P]

세 개의 UX/기능 이슈를 한 PR로 묶어 처리합니다.

#93 커스텀 404 페이지

• app/not-found.tsx 신설. MainClientLayout을 재사용해 헤더(검색 포함)·푸터를 그대로 확보.
• 막다른 길 복구 동선: 홈으로 · 전체 태그 · 최근 글 4개.
• 기존 Next 기본 404의 "복구 동선 없음" 문제 해소.

#89 추천 글 자동화 (태그/시리즈 유사도)

• libs/recommend-posts.ts: 태그 자카드 유사도 + 같은 시리즈 가중치로 상위 N 산출, 현재 글 제외, 접점 없는 글 제외, 동점은 최신 우선.
• PostRecommendation이 현재 글을 받아 동적 추천으로 전환(기존 하드코딩 Constants.recommendation.postIds 제거).
• 하드코딩이 사라져 CSS 라이브러리 구성 및 레이아웃 구성하기 #1(추천 ID 오타) 도 자연 해소. 죽은 상수와 전용 테스트(constants.test.ts)를 정리하고, 동적 로직 단위 테스트로 대체.

#92 글 공유 버튼

• share-buttons.tsx: 링크 복사 / X(트위터) 공유 / 모바일 navigator.share.
• 글 하단(footer)에 배치하며, 공유 링크는 localhost가 아닌 canonical 절대 URL(siteConfig.url + route) 사용.

테스트

• 단위: recommend-posts(6), share-buttons(4) 추가 — 총 21 스위트 / 81개 통과
• E2E: 404 시나리오에 헤더·복구 링크 단언 보강 — 7개 통과
• 로컬 dev + CI=true 프로덕션 빌드 양쪽 검증, lint 0 / tsc clean

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
blog	Ignored	Preview	Jun 29, 2026 8:03am

[Malloc72P]

🔍 코드 리뷰 (self-review)

세 기능 모두 의도대로 동작하고 단위 21스위트/81개 + E2E 7개가 통과합니다. 반영할 미흡사항을 정리합니다.

1. (보통) 레이아웃 데이터 준비 로직 중복 — DRY

app/not-found.tsx의 series/tags/posts 준비 코드가 app/(main)/layout.tsx와 거의 동일합니다(findX → Mapper → filter). 데이터 소스/매핑이 바뀌면 두 곳을 함께 고쳐야 합니다.
→ 공용 헬퍼(예: loadMainLayoutData())로 추출해 단일 출처로 만들겠습니다. ((main)/layout은 거기에 prev/next 계산만 더함)

2. (낮음/의도적 차이) "인기글" → "최근 글"

이슈 #93은 "인기글 링크"를 제안했지만, 조회수 등 인기도 데이터가 없어 최신 글 4개를 "최근 글"로 정직하게 표기했습니다. 인기도 집계가 생기기 전까지는 이 절충이 타당하다고 판단합니다(필요 시 후속).

3. (참고/미반영) 추천 sparse 케이스

태그·시리즈 접점이 적은 글은 추천이 1~2개만 나올 수 있습니다(0개면 섹션 숨김). 무관한 추천을 넣는 것보다 적게 보여주는 편이 낫다고 보고 fallback은 두지 않았습니다. 향후 "최근 글로 채우기"는 별도 검토.

---

1번을 반영한 뒤 별도 코멘트로 정리하겠습니다.

[Malloc72P]

✅ 리뷰 반영 완료 (a92fab2)

리뷰 1번(데이터 준비 중복)을 반영했습니다.

• libs/api/load-layout-data.ts 신설 — 시리즈/태그/글 준비를 단일 출처로 추출
• (main)/layout과 not-found가 공용 로더 사용 → 중복 findX/Mapper 제거
  • (main)/layout은 이전/다음 글 계산만, not-found는 최근 글 정렬만 별도 수행

2·3번은 리뷰에 적은 대로 의도적 절충(인기도 데이터 부재 → 최근 글 / 추천 sparse 허용)이라 코드 변경 없이 유지합니다.

검증

• 단위 21스위트/81개 통과 · lint 0 · tsc --noEmit clean
• E2E 7개 통과(로컬 dev) — 레이아웃 리팩터가 전 페이지에 영향을 주므로 전체 재검증
• CI에서 프로덕션 빌드 경로로 재확인됩니다.