diff --git a/frontend/src/pages/mobile/public/Album.jsx b/frontend/src/pages/mobile/public/Album.jsx
index 22a4d2d..1fca0a7 100644
--- a/frontend/src/pages/mobile/public/Album.jsx
+++ b/frontend/src/pages/mobile/public/Album.jsx
@@ -1,22 +1,18 @@
 import { motion } from 'framer-motion';
-import { useState, useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 import { getAlbums } from '../../../api/public/albums';
 
 // 모바일 앨범 목록 페이지
 function MobileAlbum() {
     const navigate = useNavigate();
-    const [albums, setAlbums] = useState([]);
-    const [loading, setLoading] = useState(true);
 
-    useEffect(() => {
-        getAlbums()
-            .then(data => {
-                setAlbums(data);
-                setLoading(false);
-            })
-            .catch(console.error);
-    }, []);
+    // useQuery로 앨범 데이터 로드
+    const { data: albums = [], isLoading: loading } = useQuery({
+        queryKey: ['albums'],
+        queryFn: getAlbums,
+    });
+
 
     if (loading) {
         return (
diff --git a/frontend/src/pages/mobile/public/Home.jsx b/frontend/src/pages/mobile/public/Home.jsx
index 89f43df..8689b4e 100644
--- a/frontend/src/pages/mobile/public/Home.jsx
+++ b/frontend/src/pages/mobile/public/Home.jsx
@@ -1,6 +1,6 @@
 import { motion } from 'framer-motion';
 import { ChevronRight, Clock, Tag } from 'lucide-react';
-import { useState, useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 import { getTodayKST } from '../../../utils/date';
 import { getMembers } from '../../../api/public/members';
@@ -10,27 +10,27 @@ import { getUpcomingSchedules } from '../../../api/public/schedules';
 // 모바일 홈 페이지
 function MobileHome() {
     const navigate = useNavigate();
-    const [members, setMembers] = useState([]);
-    const [albums, setAlbums] = useState([]);
-    const [schedules, setSchedules] = useState([]);
 
-    // 데이터 로드
-    useEffect(() => {
-        // 멤버 로드
-        getMembers()
-            .then(data => setMembers(data.filter(m => !m.is_former)))
-            .catch(console.error);
+    // useQuery로 멤버 데이터 로드 (활동 중인 멤버만)
+    const { data: members = [] } = useQuery({
+        queryKey: ['members'],
+        queryFn: getMembers,
+        select: (data) => data.filter(m => !m.is_former),
+    });
 
-        // 앨범 로드 (최신 2개)
-        getAlbums()
-            .then(data => setAlbums(data.slice(0, 2)))
-            .catch(console.error);
+    // useQuery로 앨범 로드 (최신 2개)
+    const { data: albums = [] } = useQuery({
+        queryKey: ['albums'],
+        queryFn: getAlbums,
+        select: (data) => data.slice(0, 2),
+    });
+
+    // useQuery로 다가오는 일정 로드
+    const { data: schedules = [] } = useQuery({
+        queryKey: ['upcomingSchedules', 3],
+        queryFn: () => getUpcomingSchedules(3),
+    });
 
-        // 다가오는 일정 로드
-        getUpcomingSchedules(3)
-            .then(data => setSchedules(data))
-            .catch(console.error);
-    }, []);
 
     return (
         <div>
diff --git a/frontend/src/pages/mobile/public/Members.jsx b/frontend/src/pages/mobile/public/Members.jsx
index e63ea31..be9db69 100644
--- a/frontend/src/pages/mobile/public/Members.jsx
+++ b/frontend/src/pages/mobile/public/Members.jsx
@@ -1,22 +1,23 @@
 import { motion, AnimatePresence } from 'framer-motion';
-import { useState, useEffect } from 'react';
+import { useState, useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
 import { Instagram, Calendar, X } from 'lucide-react';
 import { getMembers } from '../../../api/public/members';
 
 // 모바일 멤버 페이지
 function MobileMembers() {
-    const [members, setMembers] = useState([]);
-    const [formerMembers, setFormerMembers] = useState([]);
     const [selectedMember, setSelectedMember] = useState(null);
 
-    useEffect(() => {
-        getMembers()
-            .then(data => {
-                setMembers(data.filter(m => !m.is_former));
-                setFormerMembers(data.filter(m => m.is_former));
-            })
-            .catch(console.error);
-    }, []);
+    // useQuery로 멤버 데이터 로드
+    const { data: allMembers = [] } = useQuery({
+        queryKey: ['members'],
+        queryFn: getMembers,
+    });
+
+    // useMemo로 현재/전 멤버 분리
+    const members = useMemo(() => allMembers.filter(m => !m.is_former), [allMembers]);
+    const formerMembers = useMemo(() => allMembers.filter(m => m.is_former), [allMembers]);
+
 
     // 나이 계산
     const calculateAge = (birthDate) => {
diff --git a/frontend/src/pages/pc/public/Album.jsx b/frontend/src/pages/pc/public/Album.jsx
index e2ac260..b63946d 100644
--- a/frontend/src/pages/pc/public/Album.jsx
+++ b/frontend/src/pages/pc/public/Album.jsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 import { motion } from 'framer-motion';
 import { Calendar, Music } from 'lucide-react';
@@ -7,20 +7,13 @@ import { formatDate } from '../../../utils/date';
 
 function Album() {
     const navigate = useNavigate();
-    const [albums, setAlbums] = useState([]);
-    const [loading, setLoading] = useState(true);
+    
+    // useQuery로 앨범 데이터 로드
+    const { data: albums = [], isLoading: loading } = useQuery({
+        queryKey: ['albums'],
+        queryFn: getAlbums,
+    });
 
-    useEffect(() => {
-        getAlbums()
-            .then(data => {
-                setAlbums(data);
-                setLoading(false);
-            })
-            .catch(error => {
-                console.error('앨범 데이터 로드 오류:', error);
-                setLoading(false);
-            });
-    }, []);
 
     // 타이틀곡 찾기
     const getTitleTrack = (tracks) => {
diff --git a/frontend/src/pages/pc/public/Home.jsx b/frontend/src/pages/pc/public/Home.jsx
index c40a54b..d5b3e95 100644
--- a/frontend/src/pages/pc/public/Home.jsx
+++ b/frontend/src/pages/pc/public/Home.jsx
@@ -1,260 +1,304 @@
-import { useState, useEffect } from 'react';
-import { motion } from 'framer-motion';
-import { Link } from 'react-router-dom';
-import { Calendar, ArrowRight, Clock, Link2, Tag } from 'lucide-react';
-import { getTodayKST } from '../../../utils/date';
-import { getMembers } from '../../../api/public/members';
-import { getUpcomingSchedules } from '../../../api/public/schedules';
+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 { getTodayKST } from "../../../utils/date";
+import { getMembers } from "../../../api/public/members";
+import { getUpcomingSchedules } from "../../../api/public/schedules";
 
 function Home() {
-    const [members, setMembers] = useState([]);
-    const [upcomingSchedules, setUpcomingSchedules] = useState([]);
+  // useQuery로 멤버 데이터 로드
+  const { data: members = [] } = useQuery({
+    queryKey: ["members"],
+    queryFn: getMembers,
+  });
 
-    useEffect(() => {
-        // 멤버 데이터 로드
-        getMembers()
-            .then(data => setMembers(data))
-            .catch(error => console.error('멤버 데이터 로드 오류:', error));
-        
-        // 다가오는 일정 로드 (오늘 이후 3개)
-        getUpcomingSchedules(3)
-            .then(data => setUpcomingSchedules(data))
-            .catch(error => console.error('일정 데이터 로드 오류:', error));
-    }, []);
+  // useQuery로 다가오는 일정 로드 (오늘 이후 3개)
+  const { data: upcomingSchedules = [] } = useQuery({
+    queryKey: ["upcomingSchedules", 3],
+    queryFn: () => getUpcomingSchedules(3),
+  });
 
-    return (
-        <div>
-            {/* 히어로 섹션 */}
-            <section className="relative h-[600px] bg-gradient-to-br from-primary to-primary-dark overflow-hidden">
-                <div className="absolute inset-0 bg-black/20" />
-                <div className="relative max-w-7xl mx-auto px-6 h-full flex items-center">
-                    <motion.div
-                        initial={{ opacity: 0, y: 30 }}
-                        animate={{ opacity: 1, y: 0 }}
-                        transition={{ duration: 0.8 }}
-                        className="text-white"
-                    >
-                        <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">
-                            인사드리겠습니다. 둘, 셋!<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>
-
-                {/* 장식 */}
-                <div className="absolute right-0 bottom-0 w-1/2 h-full opacity-10">
-                    <div className="absolute right-10 top-20 w-64 h-64 rounded-full bg-white/30" />
-                    <div className="absolute right-40 bottom-20 w-48 h-48 rounded-full bg-white/20" />
-                </div>
-            </section>
-
-            {/* 그룹 통계 섹션 */}
-            <section className="py-16 bg-gray-50">
-                <div className="max-w-7xl mx-auto px-6">
-                    <motion.div 
-                        className="grid grid-cols-4 gap-6"
-                        initial="hidden"
-                        whileInView="visible"
-                        viewport={{ once: true, amount: 0.1 }}
-                        variants={{
-                            hidden: { opacity: 1 },
-                            visible: { opacity: 1, transition: { staggerChildren: 0.1 } }
-                        }}
-                    >
-                        {[
-                            { value: "2018.01.24", label: "데뷔일" },
-                            { value: `D+${(Math.floor((new Date() - new Date('2018-01-24')) / (1000 * 60 * 60 * 24)) + 1).toLocaleString()}`, label: "D+Day" },
-                            { value: "5", label: "멤버 수" },
-                            { value: "flover", label: "팬덤명" }
-                        ].map((stat, index) => (
-                            <motion.div
-                                key={index}
-                                variants={{
-                                    hidden: { opacity: 0, y: 20 },
-                                    visible: { opacity: 1, y: 0, transition: { duration: 0.4, ease: "easeOut" } }
-                                }}
-                                className="bg-gradient-to-br from-primary to-primary-dark rounded-2xl p-6 text-white text-center"
-                            >
-                                <p className="text-3xl font-bold mb-1">{stat.value}</p>
-                                <p className="text-white/70 text-sm">{stat.label}</p>
-                            </motion.div>
-                        ))}
-                    </motion.div>
-                </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="/members" className="text-primary hover:underline flex items-center gap-1">
-                            전체보기 <ArrowRight size={16} />
-                        </Link>
-                    </div>
-                    <div className="grid grid-cols-5 gap-6">
-                        {members.filter(m => !m.is_former).map((member, index) => (
-                            <motion.div
-                                key={member.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 relative rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300"
-                            >
-                                {/* 이미지 컨테이너 */}
-                                <div className="aspect-[3/4] overflow-hidden">
-                                    <img
-                                        src={member.image_url}
-                                        alt={member.name}
-                                        className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
-                                    />
-                                </div>
-                                
-                                {/* 그라데이션 오버레이 */}
-                                <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-60 group-hover:opacity-90 transition-opacity duration-300" />
-                                
-                                {/* 멤버 정보 */}
-                                <div className="absolute bottom-0 left-0 right-0 p-5 text-white">
-                                    <h3 className="font-bold text-xl drop-shadow-lg">{member.name}</h3>
-                                </div>
-                            </motion.div>
-                        ))}
-                    </div>
-                </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="/schedule" className="text-primary hover:underline flex items-center gap-1">
-                            전체보기 <ArrowRight size={16} />
-                        </Link>
-                    </div>
-                    {upcomingSchedules.length === 0 ? (
-                        <div className="text-center py-12 text-gray-400">
-                            <Calendar size={48} className="mx-auto mb-4 opacity-30" />
-                            <p>예정된 일정이 없습니다</p>
-                        </div>
-                    ) : (
-                        <motion.div 
-                            className="space-y-4"
-                            initial="hidden"
-                            whileInView="visible"
-                            viewport={{ once: true, amount: 0.1 }}
-                            variants={{
-                                hidden: { opacity: 1 },
-                                visible: { opacity: 1, transition: { staggerChildren: 0.1 } }
-                            }}
-                        >
-                            {upcomingSchedules.map((schedule) => {
-                                const scheduleDate = new Date(schedule.date);
-                                const today = new Date();
-                                const currentYear = today.getFullYear();
-                                const currentMonth = today.getMonth();
-                                
-                                const scheduleYear = scheduleDate.getFullYear();
-                                const scheduleMonth = scheduleDate.getMonth();
-                                const isCurrentYear = scheduleYear === currentYear;
-                                const isCurrentMonth = isCurrentYear && scheduleMonth === currentMonth;
-                                
-                                const day = scheduleDate.getDate();
-                                const weekdays = ['일', '월', '화', '수', '목', '금', '토'];
-                                const weekday = weekdays[scheduleDate.getDay()];
-                                
-                                // 멤버 처리
-                                const memberList = schedule.member_names ? schedule.member_names.split(',') : [];
-                                const displayMembers = memberList.length >= 5 ? ['프로미스나인'] : memberList;
-                                
-                                return (
-                                    <motion.div
-                                        key={schedule.id}
-                                        variants={{
-                                            hidden: { opacity: 0, x: -30 },
-                                            visible: { opacity: 1, x: 0, transition: { duration: 0.4, ease: "easeOut" } }
-                                        }}
-                                        className="flex items-stretch bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow overflow-hidden"
-                                    >
-                                        {/* 날짜 영역 - primary 색상 고정 */}
-                                        <div className="w-20 flex flex-col items-center justify-center text-white py-5 bg-primary">
-                                            {/* 현재 년도가 아니면 년.월 표시 */}
-                                            {!isCurrentYear && (
-                                                <span className="text-xs font-medium opacity-70">
-                                                    {scheduleYear}.{scheduleMonth + 1}
-                                                </span>
-                                            )}
-                                            {/* 현재 달이 아니면 월 표시 (현재 년도일 때) */}
-                                            {isCurrentYear && !isCurrentMonth && (
-                                                <span className="text-xs font-medium opacity-70">
-                                                    {scheduleMonth + 1}월
-                                                </span>
-                                            )}
-                                            <span className="text-3xl font-bold">{day}</span>
-                                            <span className="text-sm font-medium opacity-80">{weekday}</span>
-                                        </div>
-
-                                        {/* 내용 영역 */}
-                                        <div className="flex-1 p-5 flex flex-col justify-center">
-                                            <h3 className="font-bold text-lg text-gray-900 mb-2">{schedule.title}</h3>
-                                            
-                                            <div className="flex flex-wrap items-center gap-3 text-sm text-gray-500">
-                                                {schedule.time && (
-                                                    <div className="flex items-center gap-1">
-                                                        <Clock size={14} className="text-primary opacity-60" />
-                                                        <span>{schedule.time.slice(0, 5)}</span>
-                                                    </div>
-                                                )}
-                                                {schedule.category_name && (
-                                                    <div className="flex items-center gap-1">
-                                                        <Tag size={14} className="text-primary opacity-60" />
-                                                        <span>{schedule.category_name}</span>
-                                                    </div>
-                                                )}
-                                                {schedule.source_name && (
-                                                    <div className="flex items-center gap-1">
-                                                        <Link2 size={14} className="text-primary opacity-60" />
-                                                        <span>{schedule.source_name}</span>
-                                                    </div>
-                                                )}
-                                            </div>
-                                            
-                                            {/* 멤버 태그 */}
-                                            {displayMembers.length > 0 && (
-                                                <div className="flex flex-wrap gap-1.5 mt-3">
-                                                    {displayMembers.map((name, i) => (
-                                                        <span 
-                                                            key={i} 
-                                                            className="px-2.5 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full"
-                                                        >
-                                                            {name.trim()}
-                                                        </span>
-                                                    ))}
-                                                </div>
-                                            )}
-                                        </div>
-                                    </motion.div>
-                                );
-                            })}
-                        </motion.div>
-                    )}
-
-
-                </div>
-            </section>
+  return (
+    <div>
+      {/* 히어로 섹션 */}
+      <section className="relative h-[600px] bg-gradient-to-br from-primary to-primary-dark overflow-hidden">
+        <div className="absolute inset-0 bg-black/20" />
+        <div className="relative max-w-7xl mx-auto px-6 h-full flex items-center">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            className="text-white"
+          >
+            <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">
+              인사드리겠습니다. 둘, 셋!
+              <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>
-    );
+
+        {/* 장식 */}
+        <div className="absolute right-0 bottom-0 w-1/2 h-full opacity-10">
+          <div className="absolute right-10 top-20 w-64 h-64 rounded-full bg-white/30" />
+          <div className="absolute right-40 bottom-20 w-48 h-48 rounded-full bg-white/20" />
+        </div>
+      </section>
+
+      {/* 그룹 통계 섹션 */}
+      <section className="py-16 bg-gray-50">
+        <div className="max-w-7xl mx-auto px-6">
+          <motion.div
+            className="grid grid-cols-4 gap-6"
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, amount: 0.1 }}
+            variants={{
+              hidden: { opacity: 1 },
+              visible: { opacity: 1, transition: { staggerChildren: 0.1 } },
+            }}
+          >
+            {[
+              { value: "2018.01.24", label: "데뷔일" },
+              {
+                value: `D+${(
+                  Math.floor(
+                    (new Date() - new Date("2018-01-24")) /
+                      (1000 * 60 * 60 * 24)
+                  ) + 1
+                ).toLocaleString()}`,
+                label: "D+Day",
+              },
+              { value: "5", label: "멤버 수" },
+              { value: "flover", label: "팬덤명" },
+            ].map((stat, index) => (
+              <motion.div
+                key={index}
+                variants={{
+                  hidden: { opacity: 0, y: 20 },
+                  visible: {
+                    opacity: 1,
+                    y: 0,
+                    transition: { duration: 0.4, ease: "easeOut" },
+                  },
+                }}
+                className="bg-gradient-to-br from-primary to-primary-dark rounded-2xl p-6 text-white text-center"
+              >
+                <p className="text-3xl font-bold mb-1">{stat.value}</p>
+                <p className="text-white/70 text-sm">{stat.label}</p>
+              </motion.div>
+            ))}
+          </motion.div>
+        </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="/members"
+              className="text-primary hover:underline flex items-center gap-1"
+            >
+              전체보기 <ArrowRight size={16} />
+            </Link>
+          </div>
+          <div className="grid grid-cols-5 gap-6">
+            {members
+              .filter((m) => !m.is_former)
+              .map((member, index) => (
+                <motion.div
+                  key={member.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 relative rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300"
+                >
+                  {/* 이미지 컨테이너 */}
+                  <div className="aspect-[3/4] overflow-hidden">
+                    <img
+                      src={member.image_url}
+                      alt={member.name}
+                      className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
+                    />
+                  </div>
+
+                  {/* 그라데이션 오버레이 */}
+                  <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-60 group-hover:opacity-90 transition-opacity duration-300" />
+
+                  {/* 멤버 정보 */}
+                  <div className="absolute bottom-0 left-0 right-0 p-5 text-white">
+                    <h3 className="font-bold text-xl drop-shadow-lg">
+                      {member.name}
+                    </h3>
+                  </div>
+                </motion.div>
+              ))}
+          </div>
+        </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="/schedule"
+              className="text-primary hover:underline flex items-center gap-1"
+            >
+              전체보기 <ArrowRight size={16} />
+            </Link>
+          </div>
+          {upcomingSchedules.length === 0 ? (
+            <div className="text-center py-12 text-gray-400">
+              <Calendar size={48} className="mx-auto mb-4 opacity-30" />
+              <p>예정된 일정이 없습니다</p>
+            </div>
+          ) : (
+            <motion.div
+              className="space-y-4"
+              initial="hidden"
+              whileInView="visible"
+              viewport={{ once: true, amount: 0.1 }}
+              variants={{
+                hidden: { opacity: 1 },
+                visible: { opacity: 1, transition: { staggerChildren: 0.1 } },
+              }}
+            >
+              {upcomingSchedules.map((schedule) => {
+                const scheduleDate = new Date(schedule.date);
+                const today = new Date();
+                const currentYear = today.getFullYear();
+                const currentMonth = today.getMonth();
+
+                const scheduleYear = scheduleDate.getFullYear();
+                const scheduleMonth = scheduleDate.getMonth();
+                const isCurrentYear = scheduleYear === currentYear;
+                const isCurrentMonth =
+                  isCurrentYear && scheduleMonth === currentMonth;
+
+                const day = scheduleDate.getDate();
+                const weekdays = ["일", "월", "화", "수", "목", "금", "토"];
+                const weekday = weekdays[scheduleDate.getDay()];
+
+                // 멤버 처리
+                const memberList = schedule.member_names
+                  ? schedule.member_names.split(",")
+                  : [];
+                const displayMembers =
+                  memberList.length >= 5 ? ["프로미스나인"] : memberList;
+
+                return (
+                  <motion.div
+                    key={schedule.id}
+                    variants={{
+                      hidden: { opacity: 0, x: -30 },
+                      visible: {
+                        opacity: 1,
+                        x: 0,
+                        transition: { duration: 0.4, ease: "easeOut" },
+                      },
+                    }}
+                    className="flex items-stretch bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow overflow-hidden"
+                  >
+                    {/* 날짜 영역 - primary 색상 고정 */}
+                    <div className="w-20 flex flex-col items-center justify-center text-white py-5 bg-primary">
+                      {/* 현재 년도가 아니면 년.월 표시 */}
+                      {!isCurrentYear && (
+                        <span className="text-xs font-medium opacity-70">
+                          {scheduleYear}.{scheduleMonth + 1}
+                        </span>
+                      )}
+                      {/* 현재 달이 아니면 월 표시 (현재 년도일 때) */}
+                      {isCurrentYear && !isCurrentMonth && (
+                        <span className="text-xs font-medium opacity-70">
+                          {scheduleMonth + 1}월
+                        </span>
+                      )}
+                      <span className="text-3xl font-bold">{day}</span>
+                      <span className="text-sm font-medium opacity-80">
+                        {weekday}
+                      </span>
+                    </div>
+
+                    {/* 내용 영역 */}
+                    <div className="flex-1 p-5 flex flex-col justify-center">
+                      <h3 className="font-bold text-lg text-gray-900 mb-2">
+                        {schedule.title}
+                      </h3>
+
+                      <div className="flex flex-wrap items-center gap-3 text-sm text-gray-500">
+                        {schedule.time && (
+                          <div className="flex items-center gap-1">
+                            <Clock
+                              size={14}
+                              className="text-primary opacity-60"
+                            />
+                            <span>{schedule.time.slice(0, 5)}</span>
+                          </div>
+                        )}
+                        {schedule.category_name && (
+                          <div className="flex items-center gap-1">
+                            <Tag
+                              size={14}
+                              className="text-primary opacity-60"
+                            />
+                            <span>{schedule.category_name}</span>
+                          </div>
+                        )}
+                        {schedule.source_name && (
+                          <div className="flex items-center gap-1">
+                            <Link2
+                              size={14}
+                              className="text-primary opacity-60"
+                            />
+                            <span>{schedule.source_name}</span>
+                          </div>
+                        )}
+                      </div>
+
+                      {/* 멤버 태그 */}
+                      {displayMembers.length > 0 && (
+                        <div className="flex flex-wrap gap-1.5 mt-3">
+                          {displayMembers.map((name, i) => (
+                            <span
+                              key={i}
+                              className="px-2.5 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full"
+                            >
+                              {name.trim()}
+                            </span>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  </motion.div>
+                );
+              })}
+            </motion.div>
+          )}
+        </div>
+      </section>
+    </div>
+  );
 }
 
 export default Home;
-
diff --git a/frontend/src/pages/pc/public/Members.jsx b/frontend/src/pages/pc/public/Members.jsx
index e529ab3..a641b35 100644
--- a/frontend/src/pages/pc/public/Members.jsx
+++ b/frontend/src/pages/pc/public/Members.jsx
@@ -1,24 +1,16 @@
-import { useState, useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
 import { motion } from 'framer-motion';
 import { Instagram, Calendar } from 'lucide-react';
 import { getMembers } from '../../../api/public/members';
 import { formatDate } from '../../../utils/date';
 
 function Members() {
-    const [members, setMembers] = useState([]);
-    const [loading, setLoading] = useState(true);
+    // useQuery로 멤버 데이터 로드
+    const { data: members = [], isLoading: loading } = useQuery({
+        queryKey: ['members'],
+        queryFn: getMembers,
+    });
 
-    useEffect(() => {
-        getMembers()
-            .then(data => {
-                setMembers(data);
-                setLoading(false);
-            })
-            .catch(error => {
-                console.error('데이터 로드 오류:', error);
-                setLoading(false);
-            });
-    }, []);
 
     if (loading) {
         return (