diff --git a/frontend/src/pages/pc/public/Home.jsx b/frontend/src/pages/pc/public/Home.jsx index d5b3e95..274520b 100644 --- a/frontend/src/pages/pc/public/Home.jsx +++ b/frontend/src/pages/pc/public/Home.jsx @@ -2,9 +2,10 @@ import { useState } from "react"; import { useQuery } from "@tanstack/react-query"; import { motion } from "framer-motion"; import { Link } from "react-router-dom"; -import { Calendar, ArrowRight, Clock, Link2, Tag } from "lucide-react"; +import { Calendar, ArrowRight, Clock, Link2, Tag, Music } from "lucide-react"; import { getTodayKST } from "../../../utils/date"; import { getMembers } from "../../../api/public/members"; +import { getAlbums } from "../../../api/public/albums"; import { getUpcomingSchedules } from "../../../api/public/schedules"; function Home() { @@ -14,6 +15,13 @@ function Home() { queryFn: getMembers, }); + // useQuery로 앨범 로드 (최신 4개) + const { data: albums = [] } = useQuery({ + queryKey: ["albums"], + queryFn: getAlbums, + select: (data) => data.slice(0, 4), + }); + // useQuery로 다가오는 일정 로드 (오늘 이후 3개) const { data: upcomingSchedules = [] } = useQuery({ queryKey: ["upcomingSchedules", 3], @@ -34,20 +42,13 @@ function Home() { >

fromis_9

프로미스나인

-

+

인사드리겠습니다. 둘, 셋!
이제는 약속해 소중히 간직해,
당신의 아이돌로 성장하겠습니다!

- - 멤버 보기 - - @@ -156,6 +157,56 @@ function Home() { + {/* 앨범 미리보기 */} +
+
+
+

앨범

+ + 전체보기 + +
+
+ {albums.map((album, index) => ( + window.location.href = `/album/${encodeURIComponent(album.title)}`} + > +
+ {album.title} + {/* 호버 오버레이 */} +
+
+ +

{album.tracks?.length || 0}곡 수록

+
+
+
+
+

{album.title}

+

{album.release_date?.slice(0, 4)}

+
+
+ ))} +
+
+
+ {/* 일정 미리보기 */}