포스트 북마크 & 좋아요 기능 추가

블로그에서 좋아요(Like)와 북마크(Bookmark) 기능은 작지만 강력한 UX 요소입니다.
간단한 버튼 클릭 하나로 독자는 반응을 남기고, 글쓴이는 피드백을 얻을 수 있죠.

이번 글에서는 Next.js에서 좋아요와 북마크 기능을 다음 방식으로 구현해볼게요:

• ① 좋아요: 클릭 시 서버에 count 증가
• ② 북마크: 로컬스토리지 기반, 로그인 없이도 구현 가능

---

🩷 1. 좋아요 기능: 서버에 count 저장

1) API 만들기

// pages/api/like.ts
let likes: { [slug: string]: number } = {};

export default function handler(req, res) {
  const { slug } = req.query;

  if (req.method === 'GET') {
    res.status(200).json({ count: likes[slug as string] || 0 });
  } else if (req.method === 'POST') {
    likes[slug as string] = (likes[slug as string] || 0) + 1;
    res.status(200).json({ count: likes[slug as string] });
  }
}

2) 클라이언트에서 좋아요 요청

const [likes, setLikes] = useState(0);

useEffect(() => {
  fetch(`/api/like?slug=${slug}`)
    .then(res => res.json())
    .then(data => setLikes(data.count));
}, [slug]);

const handleLike = async () => {
  const res = await fetch(`/api/like?slug=${slug}`, { method: "POST" });
  const data = await res.json();
  setLikes(data.count);
};

<button onClick={handleLike}>❤️ {likes} Likes</button>

간단한 API 기반 좋아요 기능 완성!

---

📌 2. 북마크 기능: 로컬스토리지 기반

북마크 기능은 로컬 스토리지를 이용하면 로그인 없이도 구현할 수 있어요.

const [bookmarked, setBookmarked] = useState(false);

useEffect(() => {
  const stored = localStorage.getItem('bookmarks');
  const bookmarks = stored ? JSON.parse(stored) : [];
  setBookmarked(bookmarks.includes(slug));
}, [slug]);

const toggleBookmark = () => {
  const stored = localStorage.getItem('bookmarks');
  const bookmarks = stored ? JSON.parse(stored) : [];

  if (bookmarks.includes(slug)) {
    const updated = bookmarks.filter((s) => s !== slug);
    localStorage.setItem('bookmarks', JSON.stringify(updated));
    setBookmarked(false);
  } else {
    const updated = [...bookmarks, slug];
    localStorage.setItem('bookmarks', JSON.stringify(updated));
    setBookmarked(true);
  }
};

<button onClick={toggleBookmark}>
  {bookmarked ? "🔖 Bookmarked" : "📌 Bookmark"}
</button>

장점: 클라이언트만으로도 빠르게 구현 가능

단점: 로그인 연동이 없으면 다른 기기에서 동기화 안 됨

---

📊 3. 두 기능을 UI로 정리해 보기

<div className="flex gap-4 mt-6">
  <button onClick={handleLike} className="text-pink-500">❤️ {likes}</button>
  <button onClick={toggleBookmark}>
    {bookmarked ? "🔖" : "📌"} 북마크
  </button>
</div>

작지만 유용한 인터랙션을 통해 글에 더 많은 참여를 유도할 수 있어요.

---

✅ 마무리하며

좋아요와 북마크는 개발자 블로그에 꼭 필요한 핵심 UX 기능입니다.
복잡한 인증 없이도 구현 가능하고, 사용자는 즉각적인 피드백을 느낄 수 있어요.

“작은 반응이 큰 연결을 만든다.”