PC 홈: 멤버보기 버튼 제거, 앨범 섹션 추가

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() {
           >
             <h1 className="text-6xl font-bold mb-4">fromis_9</h1>
             <p className="text-2xl font-light mb-2">프로미스나인</p>
-            <p className="text-lg opacity-80 mb-8 leading-relaxed">
+            <p className="text-lg opacity-80 leading-relaxed">
               인사드리겠습니다. 둘, 셋!
               <br />
               이제는 약속해 소중히 간직해,
               <br />
               당신의 아이돌로 성장하겠습니다!
             </p>
-            <Link
-              to="/members"
-              className="inline-flex items-center gap-2 bg-white text-primary px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition-colors"
-            >
-              멤버 보기
-              <ArrowRight size={18} />
-            </Link>
           </motion.div>
         </div>
 
@@ -156,6 +157,56 @@ function Home() {
         </div>
       </section>
 
+      {/* 앨범 미리보기 */}
+      <section className="py-16 bg-gray-50">
+        <div className="max-w-7xl mx-auto px-6">
+          <div className="flex justify-between items-center mb-8">
+            <h2 className="text-3xl font-bold">앨범</h2>
+            <Link
+              to="/album"
+              className="text-primary hover:underline flex items-center gap-1"
+            >
+              전체보기 <ArrowRight size={16} />
+            </Link>
+          </div>
+          <div className="grid grid-cols-4 gap-6">
+            {albums.map((album, index) => (
+              <motion.div
+                key={album.id}
+                initial={{ opacity: 0, y: 30 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{
+                  delay: 0.3 + index * 0.1,
+                  duration: 0.5,
+                  ease: "easeOut",
+                }}
+                className="group cursor-pointer"
+                onClick={() => window.location.href = `/album/${encodeURIComponent(album.title)}`}
+              >
+                <div className="relative aspect-square rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300">
+                  <img
+                    src={album.cover_medium_url || album.cover_original_url}
+                    alt={album.title}
+                    className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+                  />
+                  {/* 호버 오버레이 */}
+                  <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
+                    <div className="text-center text-white">
+                      <Music size={32} className="mx-auto mb-2" />
+                      <p className="text-sm">{album.tracks?.length || 0}곡 수록</p>
+                    </div>
+                  </div>
+                </div>
+                <div className="mt-3">
+                  <h3 className="font-bold text-lg truncate">{album.title}</h3>
+                  <p className="text-gray-500 text-sm">{album.release_date?.slice(0, 4)}</p>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+
       {/* 일정 미리보기 */}
       <section className="py-16 bg-gray-50">
         <div className="max-w-7xl mx-auto px-6">