Next.js 블로그 만들기 — 정적 블로그에 맞춤 추천 포스트 기능 추가

'use client'
 
import { useState, useEffect, useCallback } from 'react'
 
const STORAGE_KEY = 'eco-log:view-history'
const MAX_ENTRIES = 50
 
interface ViewEntry {
  readonly slug: string
  readonly tags: readonly string[]
  readonly viewedAt: number
}
 
interface UseViewHistoryReturn {
  readonly history: readonly ViewEntry[]
  readonly isMounted: boolean
  readonly addView: (slug: string, tags: readonly string[]) => void
}
 
function readHistory(): readonly ViewEntry[] {
  try {
    const raw = localStorage.getItem(STORAGE_KEY)
    if (!raw) return []
    const parsed: unknown = JSON.parse(raw)
    if (!Array.isArray(parsed)) return []
    return parsed as readonly ViewEntry[]
  } catch {
    return []
  }
}
 
function writeHistory(entries: readonly ViewEntry[]): void {
  try {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(entries))
  } catch {
    // localStorage 비활성화 또는 용량 초과 — 무시
  }
}
 
export function useViewHistory(): UseViewHistoryReturn {
  const [history, setHistory] = useState<readonly ViewEntry[]>([])
  const [isMounted, setIsMounted] = useState(false)
 
  useEffect(() => {
    setHistory(readHistory())
    setIsMounted(true)
  }, [])
 
  const addView = useCallback((slug: string, tags: readonly string[]) => {
    setHistory((prev) => {
      const filtered = prev.filter((entry) => entry.slug !== slug)
      const next: readonly ViewEntry[] = [
        { slug, tags, viewedAt: Date.now() },
        ...filtered,
      ].slice(0, MAX_ENTRIES)
      writeHistory(next)
      return next
    })
  }, [])
 
  return { history, isMounted, addView } as const
}

'use client'
 
import { useState, useMemo, useCallback } from 'react'
import type { PostMeta } from '@/types/post'
 
const POSTS_PER_PAGE = 5
const RECENCY_WINDOW_MS = 7 * 24 * 60 * 60 * 1000 // 7일
 
interface ViewEntry {
  readonly slug: string
  readonly tags: readonly string[]
  readonly viewedAt: number
}
 
interface ScoredPost {
  readonly post: PostMeta
  readonly score: number
}
 
interface UseRecommendedPostsReturn {
  readonly posts: readonly PostMeta[]
  readonly totalPages: number
  readonly currentPage: number
  readonly goNext: () => void
  readonly goPrev: () => void
}
 
function computeTagWeights(
  history: readonly ViewEntry[],
): ReadonlyMap<string, number> {
  const now = Date.now()
  const weights = new Map<string, number>()
 
  for (const entry of history) {
    const age = now - entry.viewedAt
    const recencyFactor = Math.max(0.3, 1 - (age / RECENCY_WINDOW_MS) * 0.7)
 
    for (const tag of entry.tags) {
      weights.set(tag, (weights.get(tag) ?? 0) + recencyFactor)
    }
  }
 
  return weights
}
 
function scorePost(
  post: PostMeta,
  tagWeights: ReadonlyMap<string, number>,
): number {
  let score = 0
  for (const tag of post.tags) {
    score += tagWeights.get(tag) ?? 0
  }
  return score
}
 
export function useRecommendedPosts(
  allPosts: readonly PostMeta[],
  history: readonly ViewEntry[],
): UseRecommendedPostsReturn {
  const [currentPage, setCurrentPage] = useState(0)
 
  const scoredPosts = useMemo(() => {
    if (history.length === 0) return []
 
    const viewedSlugs = new Set(history.map((e) => e.slug))
    const tagWeights = computeTagWeights(history)
 
    const scored: readonly ScoredPost[] = allPosts
      .filter((post) => !viewedSlugs.has(post.slug))
      .map((post) => ({ post, score: scorePost(post, tagWeights) }))
      .filter((item) => item.score > 0)
 
    return [...scored].sort((a, b) => {
      if (b.score !== a.score) return b.score - a.score
      return new Date(b.post.date).getTime() - new Date(a.post.date).getTime()
    })
  }, [allPosts, history])
 
  const totalPages = Math.max(
    1,
    Math.ceil(scoredPosts.length / POSTS_PER_PAGE),
  )
 
  const posts = useMemo(() => {
    const start = currentPage * POSTS_PER_PAGE
    return scoredPosts.slice(start, start + POSTS_PER_PAGE).map((s) => s.post)
  }, [scoredPosts, currentPage])
 
  const goNext = useCallback(() => {
    setCurrentPage((prev) => Math.min(prev + 1, totalPages - 1))
  }, [totalPages])
 
  const goPrev = useCallback(() => {
    setCurrentPage((prev) => Math.max(prev - 1, 0))
  }, [])
 
  return { posts, totalPages, currentPage, goNext, goPrev } as const
}

'use client'
 
import { useEffect } from 'react'
import { useViewHistory } from '@/hooks/useViewHistory'
 
interface ViewTrackerProps {
  readonly slug: string
  readonly tags: readonly string[]
}
 
export default function ViewTracker({ slug, tags }: ViewTrackerProps) {
  const { addView } = useViewHistory()
 
  useEffect(() => {
    addView(slug, tags)
  }, [slug, tags, addView])
 
  return null
}

'use client'
 
import { useViewHistory } from '@/hooks/useViewHistory'
import { useRecommendedPosts } from '@/hooks/useRecommendedPosts'
import RecommendedPostItem from '@/components/home/RecommendedPostItem'
import type { PostMeta } from '@/types/post'
 
interface RecommendedPostsProps {
  readonly allPosts: readonly PostMeta[]
}
 
export default function RecommendedPosts({ allPosts }: RecommendedPostsProps) {
  const { history, isMounted } = useViewHistory()
  const { posts, totalPages, currentPage, goNext, goPrev } =
    useRecommendedPosts(allPosts, history)
 
  if (!isMounted || posts.length === 0) return null
 
  return (
    <section className="mb-8">
      <div className="mb-3 flex items-center justify-between">
        <h2 className="text-lg font-bold text-text">맞춤 추천</h2>
        {totalPages > 1 && (
          <div className="flex items-center gap-2">
            <button
              type="button"
              onClick={goPrev}
              disabled={currentPage === 0}
              className="rounded px-2 py-1 text-sm text-text-secondary transition-colors hover:text-accent disabled:opacity-40 disabled:hover:text-text-secondary"
              aria-label="이전 페이지"
            >
              &larr;
            </button>
            <span className="text-xs text-text-tertiary">
              {currentPage + 1} / {totalPages}
            </span>
            <button
              type="button"
              onClick={goNext}
              disabled={currentPage === totalPages - 1}
              className="rounded px-2 py-1 text-sm text-text-secondary transition-colors hover:text-accent disabled:opacity-40 disabled:hover:text-text-secondary"
              aria-label="다음 페이지"
            >
              &rarr;
            </button>
          </div>
        )}
      </div>
      <ul className="space-y-2">
        {posts.map((post) => (
          <RecommendedPostItem key={post.slug} post={post} />
        ))}
      </ul>
    </section>
  )
}

import ViewTracker from '@/components/post/ViewTracker'
 
export default async function PostPage({ params }: PostPageProps) {
  const { slug } = await params
  const post = getPostBySlug(slug)
 
  return (
    <article className="min-w-0 flex-1">
      <ViewTracker slug={post.slug} tags={post.tags} />
      <header>...</header>
      <PostContent>...</PostContent>
    </article>
  )
}

import RecommendedPosts from '@/components/home/RecommendedPosts'
 
export default function HomePage() {
  const posts = getAllPostMetas()
 
  return (
    <section className="min-w-0 flex-1">
      <RecommendedPosts allPosts={posts} />
      <CategoryTabs ... />
    </section>
  )
}