+
-
+
);
diff --git a/src/app/(layout)/posts/[slug]/_components/post-actions/LikeButton.tsx b/src/app/(layout)/posts/[slug]/_components/post-actions/LikeButton.tsx
index 49d0bee..3b17d85 100644
--- a/src/app/(layout)/posts/[slug]/_components/post-actions/LikeButton.tsx
+++ b/src/app/(layout)/posts/[slug]/_components/post-actions/LikeButton.tsx
@@ -1,34 +1,40 @@
"use client";
+import { usePostLike } from "@/hooks/usePostLike";
import clsx from "clsx";
import { Heart } from "lucide-react";
import { useState } from "react";
-export default function LikeButton() {
- const [isLiked, setIsLiked] = useState(false);
- const [likeCount] = useState(0);
- const [isPopping, setIsPopping] = useState(false);
+interface PostLikeButtonProps {
+ postId: string;
+}
- const handleClick = () => {
- setIsLiked((v) => !v);
+export default function LikeButton({ postId }: PostLikeButtonProps) {
+ const { count, liked, loading, toggleLike } = usePostLike(postId);
+
+ const [isPopping, setIsPopping] = useState(false);
+ const handleClick = async () => {
+ await toggleLike();
setIsPopping(true);
window.setTimeout(() => setIsPopping(false), 180);
};
return (
);
diff --git a/src/app/(layout)/posts/[slug]/_components/post-actions/ShareButton.tsx b/src/app/(layout)/posts/[slug]/_components/post-actions/ShareButton.tsx
index 7751855..45e7076 100644
--- a/src/app/(layout)/posts/[slug]/_components/post-actions/ShareButton.tsx
+++ b/src/app/(layout)/posts/[slug]/_components/post-actions/ShareButton.tsx
@@ -38,7 +38,7 @@ export default function ShareButton({ title, thumbnail }: ShareButtonProps) {
diff --git a/src/hooks/usePostLike.ts b/src/hooks/usePostLike.ts
new file mode 100644
index 0000000..7fae34b
--- /dev/null
+++ b/src/hooks/usePostLike.ts
@@ -0,0 +1,127 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import type { PostgrestError } from "@supabase/supabase-js";
+import { supabase } from "@/lib/supabase/client";
+import { getOrCreateViewerId } from "@/lib/supabase/viewerId";
+
+type UsePostLikeResult = {
+ count: number;
+ liked: boolean;
+ loading: boolean;
+ toggleLike: () => Promise;
+};
+
+function isDuplicateKeyError(error: PostgrestError | null): boolean {
+ return !!error && error.code === "23505";
+}
+
+export function usePostLike(postId: string): UsePostLikeResult {
+ const [count, setCount] = useState(0);
+ const [liked, setLiked] = useState(false);
+ const [loading, setLoading] = useState(true);
+
+ const viewerIdRef = useRef(null);
+
+ useEffect(() => {
+ viewerIdRef.current = getOrCreateViewerId();
+ }, []);
+
+ useEffect(() => {
+ if (!postId) return;
+
+ const fetchLikeState = async () => {
+ const viewerId = viewerIdRef.current ?? getOrCreateViewerId();
+ if (!viewerId) {
+ setLoading(false);
+ return;
+ }
+
+ const {
+ data,
+ count: total,
+ error,
+ } = await supabase
+ .from("post_likes")
+ .select("viewer_id", { count: "exact" })
+ .eq("post_id", postId);
+
+ if (error) {
+ console.error("좋아요 조회 실패:", error);
+ setLoading(false);
+ return;
+ }
+
+ const rows = data ?? [];
+
+ setCount(total ?? rows.length);
+ setLiked(rows.some((row) => row.viewer_id === viewerId));
+ setLoading(false);
+ };
+
+ void fetchLikeState();
+ }, [postId]);
+
+ const refreshCount = async () => {
+ const { count: total, error } = await supabase
+ .from("post_likes")
+ .select("*", { count: "exact", head: true })
+ .eq("post_id", postId);
+
+ if (error) {
+ console.error("좋아요 카운트 재조회 실패:", error);
+ return;
+ }
+
+ if (typeof total === "number") {
+ setCount(total);
+ }
+ };
+
+ const toggleLike = async () => {
+ const viewerId = viewerIdRef.current ?? getOrCreateViewerId();
+ if (!viewerId) return;
+
+ if (liked) {
+ const { error } = await supabase
+ .from("post_likes")
+ .delete()
+ .eq("post_id", postId)
+ .eq("viewer_id", viewerId);
+
+ if (error) {
+ console.error("좋아요 취소 실패:", error);
+ return;
+ }
+
+ setLiked(false);
+ setCount((prev) => Math.max(0, prev - 1));
+ return;
+ }
+
+ const { error } = await supabase.from("post_likes").insert({
+ post_id: postId,
+ viewer_id: viewerId,
+ });
+
+ if (error) {
+ if (isDuplicateKeyError(error)) {
+ setLiked(true);
+ await refreshCount();
+ } else {
+ console.error("좋아요 추가 실패:", error);
+ }
+ return;
+ }
+
+ setLiked(true);
+ setCount((prev) => prev + 1);
+ };
+
+ return {
+ count,
+ liked,
+ loading,
+ toggleLike,
+ };
+}
\ No newline at end of file
diff --git a/src/lib/supabase/viewerId.ts b/src/lib/supabase/viewerId.ts
new file mode 100644
index 0000000..15e5e0f
--- /dev/null
+++ b/src/lib/supabase/viewerId.ts
@@ -0,0 +1,19 @@
+const VIEWER_ID_KEY = "b_log_viewer_id";
+
+export function getOrCreateViewerId(): string | null {
+ if (typeof window === "undefined") return null;
+
+ let id = window.localStorage.getItem(VIEWER_ID_KEY);
+
+ if (!id) {
+ if (window.crypto?.randomUUID) {
+ id = window.crypto.randomUUID();
+ } else {
+ id = `${Date.now()}-${Math.random().toString(16).slice(2)}`;
+ }
+
+ window.localStorage.setItem(VIEWER_ID_KEY, id);
+ }
+
+ return id;
+}