feat(artist-list) : 아티스트 목록 구현

Author: stupilman

next.config.ts

@@ -13,6 +13,10 @@ const nextConfig: NextConfig = {
         protocol: "https",
         hostname: "example.com",
       },
+      {
+        protocol: "https",
+        hostname: "i.scdn.co",
+      },
     ],
   },
 };

src/components/artist/list/ArtistListButtons.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Button } from "@/components/ui/button";
 import {
   Select,
@@ -27,7 +29,6 @@ export default function ArtistListButtons() {
       <Button variant={"outline"} type={"button"} className={"rounded-full"}>
         EDM
       </Button>
-      {/*TODO: 아래 dropdown들 모두 select로 바꾸기*/}
       <Select>
         <SelectTrigger type={"button"} className={"rounded-full text-sm font-bold"}>
           <SelectValue placeholder="더 보기" />

src/components/artist/list/ArtistListItems.tsx

@@ -1,39 +1,39 @@
 import Link from "next/link";
-import { Card } from "@/components/ui/card";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { UsersRound } from "lucide-react";
+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으로 돌리기*/
 }
 
-export default function ArtistListItems() {
+export default function ArtistListItems({ artists }: { artists: ArtistListItem[] }) {
   return (
-    <div className="grid grid-cols-5 gap-8">
-      {Array.from({ length: 10 }).map((_, index) => (
-        // TODO: 나중에 ArtistCard로 바꿔끼우기
-        <Link key={index} href="artists/1">
-          <Card className="items-center p-8 text-center shadow-none">
-            <Avatar className="ring-border size-30 ring-4">
-              <AvatarImage
-                src="https://kopis.or.kr/_next/image?url=%2Fupload%2FpfmPoster%2FPF_PF281383_251211_125646.jpg&w=384&q=75"
-                alt="아티스트"
-              />
-              <AvatarFallback>CN</AvatarFallback>
-            </Avatar>
-            <div className="">
-              <h3 className="text-text-main text-lg font-bold">먼데이키즈</h3>
-              <p className="text-text-sub text-sm font-semibold">발라드 가수</p>
-            </div>
-            <div className="text-text-sub flex items-center gap-2 text-sm font-semibold">
-              <UsersRound size={12} strokeWidth={3} />
-              <p>24.5K 팔로우 중</p>
-            </div>
-            <Button variant="default" size="lg" className="w-full">
-              팔로우
+    <div className="grid grid-cols-5 gap-x-8 gap-y-12">
+      {artists.map((artist) => (
+        <Link
+          key={artist.id}
+          href={`/concerts/${artist.id}`}
+          className="flex cursor-pointer flex-col gap-5"
+        >
+          <div className="relative aspect-square w-full overflow-hidden rounded-lg border">
+            <Image
+              src={artist.imageUrl || "/images/artist-placeholder.png"}
+              alt="Concert Poster"
+              fill
+              sizes="(min-width: 1024px) 20vw, (min-width: 768px) 25vw, 50vw"
+              className="object-cover"
+            />
+            <Button
+              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"
+            >
+              <Heart />
             </Button>
-          </Card>
+          </div>
+          <strong className="line-clamp-1 text-2xl">{artist.artistName}</strong>
         </Link>
       ))}
     </div>

src/components/artist/list/ArtistListMain.tsx

@@ -1,12 +1,15 @@
 import ArtistListFilters from "@/components/artist/list/ArtistListFilters";
 import ArtistListItems from "@/components/artist/list/ArtistListItems";
+import { getArtists } from "@/lib/artists/artists";
+
+export default async function ArtistListMain() {
+  const artists = await getArtists();
 
-export default function ArtistListMain() {
   return (
     <section className={"bg-bg-main flex justify-center px-15 py-16"}>
       <div className={"flex w-full max-w-400 flex-col gap-8"}>
         <ArtistListFilters />
-        <ArtistListItems />
+        <ArtistListItems artists={artists} />
       </div>
     </section>
   );