feat(artist-list) : 아티스트 좋아요 기능 구현

Author: stupilman

src/components/artist/list/ArtistListItems.tsx

@@ -1,23 +1,36 @@
+"use client";
+
 import Link from "next/link";
 import { ArtistListItem } from "@/types/artists";
 import Image from "next/image";
 import { Heart } from "lucide-react";
 import { Button } from "@/components/ui/button";
-
-{
-  /*TODO: 나중에 바로 아래 div에서 api로 불러온 콘서트 목록 map으로 돌리기*/
-}
+import { twMerge } from "tailwind-merge";
+import { likeArtist } from "@/lib/artists/artists";
+import { toast } from "sonner";
 
 export default function ArtistListItems({ artists }: { artists: ArtistListItem[] }) {
+  const handleLike = async (id: number) => {
+    try {
+      await likeArtist(id);
+      toast.success("아티스트를 좋아요 했어요!");
+    } catch (err) {
+      if (err instanceof Error) {
+        toast.error(err.message);
+      } else {
+        toast.error("알 수 없는 오류가 발생했습니다.");
+      }
+    }
+  };
   return (
-    <div className="grid grid-cols-5 gap-x-8 gap-y-12">
+    <div className="grid gap-x-8 gap-y-12 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
       {artists.map((artist) => (
         <Link
           key={artist.id}
           href={`/concerts/${artist.id}`}
-          className="flex cursor-pointer flex-col gap-5"
+          className="group flex flex-col gap-5 transition hover:opacity-90"
         >
-          <div className="relative aspect-square w-full overflow-hidden rounded-lg border">
+          <div className="border-border/60 relative aspect-square overflow-hidden rounded-lg border">
             <Image
               src={artist.imageUrl || "/images/artist-placeholder.png"}
               alt="Concert Poster"
@@ -26,11 +39,22 @@ export default function ArtistListItems({ artists }: { artists: ArtistListItem[]
               className="object-cover"
             />
             <Button
+              onClick={async (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                await handleLike(artist.id);
+              }}
               type="button"
               aria-label="아티스트 좋아요"
-              className="absolute top-2 right-2 z-10 h-10 w-10 cursor-pointer rounded-full bg-black/50 opacity-80 backdrop-blur-sm"
+              className="absolute top-2 right-2 h-9 w-9 scale-90 rounded-full bg-black/20 opacity-0 backdrop-blur-sm transition-all duration-200 group-hover:scale-100 group-hover:opacity-100"
             >
-              <Heart />
+              <Heart
+                className={twMerge(
+                  "h-5 w-5 fill-white text-white transition",
+                  artist.id % 2 === 0 && "fill-red-500 text-red-500"
+                )}
+                strokeWidth={0}
+              />
             </Button>
           </div>
           <strong className="line-clamp-1 text-2xl">{artist.artistName}</strong>

src/lib/artists/artists.ts

@@ -39,3 +39,44 @@ export async function getArtists(): Promise<ArtistListItem[]> {
     throw new Error("알 수 없는 오류가 발생했습니다.");
   }
 }
+
+export async function likeArtist(id: number): Promise<void> {
+  try {
+    // fetch (네트워크 단계)
+    const res = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/v1/artists/likes/${id}`, {
+      method: "POST",
+      cache: "no-store",
+      credentials: "include",
+    });
+
+    // JSON 파싱 단계 (여기서도 에러 날 수 있음)
+    let json: ArtistListResponse;
+
+    try {
+      json = (await res.json()) as ArtistListResponse;
+    } catch {
+      // JSON 파싱 실패 (빈 응답, HTML 응답 등)
+      throw new Error("서버 응답을 처리할 수 없습니다.");
+    }
+
+    // HTTP / 비즈니스 에러 분기
+    if (!res.ok || json.resultCode !== "OK") {
+      throw new Error(json.msg ?? "아티스트 좋아요 요청에 실패했습니다.");
+    }
+
+    // 성공
+  } catch (err) {
+    // 네트워크 에러 (Failed to fetch)
+    if (err instanceof TypeError) {
+      throw new Error("서버에 연결할 수 없습니다. 네트워크 상태를 확인해주세요.");
+    }
+
+    // 내가 던진 Error는 그대로 전달
+    if (err instanceof Error) {
+      throw err;
+    }
+
+    // 정말 예외적인 케이스
+    throw new Error("알 수 없는 오류가 발생했습니다.");
+  }
+}