홈페이지 다가오는 일정 섹션 API 연동 및 UI 개선

- 백엔드: /api/schedules에 startDate, endDate, limit 파라미터 지원 추가
- 프론트엔드: 더미 데이터 제거, 실제 API 호출로 변경
- KST 기준으로 오늘 이후 3개 일정 표시
- 일정 페이지와 동일한 카드 스타일 적용
- 멤버 5명 이상이면 '프로미스나인'으로 표시

backend/routes/schedules.js

@@ -7,7 +7,7 @@ const router = express.Router();
 // 공개 일정 목록 조회 (검색 포함)
 router.get("/", async (req, res) => {
   try {
-    const { search } = req.query;
+    const { search, startDate, endDate, limit } = req.query;
 
     // 검색어가 있으면 Meilisearch 사용
     if (search && search.trim()) {
@@ -15,8 +15,25 @@ router.get("/", async (req, res) => {
       return res.json(results);
     }
 
+    // 날짜 필터 및 제한 조건 구성
+    let whereClause = "WHERE 1=1";
+    const params = [];
+
+    if (startDate) {
+      whereClause += " AND s.date >= ?";
+      params.push(startDate);
+    }
+    if (endDate) {
+      whereClause += " AND s.date <= ?";
+      params.push(endDate);
+    }
+
+    // limit 파라미터 처리
+    const limitClause = limit ? `LIMIT ${parseInt(limit)}` : "";
+
     // 검색어 없으면 DB에서 전체 조회
-    const [schedules] = await pool.query(`
+    const [schedules] = await pool.query(
+      `
       SELECT 
         s.id,
         s.title,
@@ -34,9 +51,13 @@ router.get("/", async (req, res) => {
       LEFT JOIN schedule_categories c ON s.category_id = c.id
       LEFT JOIN schedule_members sm ON s.id = sm.schedule_id
       LEFT JOIN members m ON sm.member_id = m.id
+      ${whereClause}
       GROUP BY s.id
-      ORDER BY s.date DESC, s.time DESC
+      ORDER BY s.date ASC, s.time ASC
-    `);
+      ${limitClause}
+    `,
+      params
+    );
 
     res.json(schedules);
   } catch (error) {

frontend/src/pages/pc/Home.jsx

@@ -1,17 +1,31 @@
 import { useState, useEffect } from 'react';
 import { motion } from 'framer-motion';
 import { Link } from 'react-router-dom';
-import { Calendar, Users, Disc3, ArrowRight } from 'lucide-react';
+import { Calendar, Users, Disc3, ArrowRight, Clock } from 'lucide-react';
-import { schedules, albums } from '../../data/dummy';
 
 function Home() {
     const [members, setMembers] = useState([]);
+    const [upcomingSchedules, setUpcomingSchedules] = useState([]);
 
     useEffect(() => {
+        // 멤버 데이터 로드
         fetch('/api/members')
             .then(res => res.json())
             .then(data => setMembers(data))
             .catch(error => console.error('멤버 데이터 로드 오류:', error));
+        
+        // 다가오는 일정 로드 (오늘 이후 3개)
+        // KST 기준으로 오늘 날짜 계산
+        const now = new Date();
+        const kstOffset = 9 * 60; // KST는 UTC+9
+        const kstTime = new Date(now.getTime() + (kstOffset + now.getTimezoneOffset()) * 60000);
+        const todayStr = kstTime.toISOString().split('T')[0];
+        
+        fetch(`/api/schedules?startDate=${todayStr}&limit=3`)
+
+            .then(res => res.json())
+            .then(data => setUpcomingSchedules(data))
+            .catch(error => console.error('일정 데이터 로드 오류:', error));
     }, []);
 
     return (
@@ -126,30 +140,87 @@ function Home() {
                             전체보기 <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>
+                    ) : (
                         <div className="space-y-4">
-                        {schedules.slice(0, 3).map((schedule) => (
+                            {upcomingSchedules.map((schedule, index) => {
-                            <div
+                                const scheduleDate = new Date(schedule.date);
+                                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;
+                                
+                                // 카테고리 색상 (기본값)
+                                const categoryColor = schedule.category_color || '#6B8E6B';
+                                
+                                return (
+                                    <motion.div
                                         key={schedule.id}
-                                className="flex items-center gap-6 p-6 bg-gray-50 rounded-xl hover:bg-gray-100 transition-colors"
+                                        initial={{ opacity: 0 }}
+                                        animate={{ opacity: 1 }}
+                                        transition={{ delay: index * 0.05 }}
+                                        className="flex items-stretch bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow overflow-hidden"
                                     >
-                                <div className="text-center min-w-[80px]">
+                                        {/* 날짜 영역 */}
-                                    <p className="text-2xl font-bold text-primary">
+                                        <div className="w-20 flex flex-col items-center justify-center text-white py-5 bg-primary">
-                                        {schedule.date.split('-')[2]}
+                                            <span className="text-3xl font-bold">{day}</span>
-                                    </p>
+                                            <span className="text-sm font-medium opacity-80">{weekday}</span>
-                                    <p className="text-sm text-gray-500">
-                                        {schedule.date.split('-')[1]}월
-                                    </p>
                                         </div>
-                                <div className="flex-1">
+
-                                    <h3 className="font-bold text-lg">{schedule.title}</h3>
+
-                                    <p className="text-gray-500">{schedule.platform} · {schedule.time}</p>
+                                        {/* 내용 영역 */}
+                                        <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" />
+                                                        <span>{schedule.time.slice(0, 5)}</span>
                                                     </div>
-                                <div className="text-sm text-primary font-medium">
+                                                )}
-                                    {schedule.members.join(', ')}
+                                                {schedule.category_name && (
+                                                    <div className="flex items-center gap-1.5">
+                                                        <span 
+                                                            className="w-2 h-2 rounded-full" 
+                                                            style={{ backgroundColor: categoryColor }}
+                                                        />
+                                                        <span>
+                                                            {schedule.category_name}
+                                                            {schedule.source_name && ` · ${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>
+                                );
+                            })}
+                        </div>
+                    )}
+
+
                 </div>
             </section>
         </div>
@@ -157,3 +228,4 @@ function Home() {
 }
 
 export default Home;
+