feat: 생일 기능 추가 및 일정 페이지 개선

- 생일 카드 컴포넌트 추가 (PC/모바일)
- 생일 폭죽(confetti) 애니메이션 적용 (하루에 한 번)
- 생일 상세 페이지 추가 (/birthday/멤버이름/년도)
- 관리자 일정 페이지에 생일 표시 (수정/삭제 버튼 숨김)
- 일정 상세 페이지 404 에러 UI 개선
- 일정 상세 페이지 불필요한 재시도 방지 (retry: false)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

backend/routes/admin.js

@@ -1320,6 +1320,58 @@ router.get("/schedules", async (req, res) => {
       })
     );
 
+    // 년/월 필터가 있고 검색이 아닌 경우 생일 데이터 추가
+    if (year && month && !search) {
+      const [birthdays] = await pool.query(
+        `SELECT id, name, name_en, birth_date, image_url
+         FROM members
+         WHERE is_former = 0 AND MONTH(birth_date) = ?`,
+        [parseInt(month)]
+      );
+
+      const birthdaySchedules = birthdays.map((member) => {
+        const birthDate = new Date(member.birth_date);
+        const birthdayThisYear = new Date(
+          parseInt(year),
+          birthDate.getMonth(),
+          birthDate.getDate()
+        );
+
+        return {
+          id: `birthday-${member.id}`,
+          title: `HAPPY ${member.name_en} DAY`,
+          description: null,
+          date: birthdayThisYear,
+          time: null,
+          end_date: null,
+          end_time: null,
+          category_id: 8,
+          source_url: null,
+          source_name: null,
+          location_name: null,
+          location_address: null,
+          location_detail: null,
+          location_lat: null,
+          location_lng: null,
+          created_at: null,
+          category_name: "생일",
+          category_color: "#f472b6",
+          images: [],
+          members: [{ id: member.id, name: member.name }],
+          member_names: member.name,
+          is_birthday: true,
+          member_image: member.image_url,
+        };
+      });
+
+      // 일정과 생일을 합쳐서 날짜순 정렬
+      const allSchedules = [...schedulesWithDetails, ...birthdaySchedules].sort(
+        (a, b) => new Date(a.date) - new Date(b.date)
+      );
+
+      return res.json(allSchedules);
+    }
+
     res.json(schedulesWithDetails);
   } catch (error) {
     console.error("일정 조회 오류:", error);

backend/routes/schedules.js

@@ -110,6 +110,49 @@ router.get("/", async (req, res) => {
       params
     );
 
+    // 년/월 필터가 있으면 해당 월의 현재 멤버 생일을 가상 일정으로 추가
+    if (year && month) {
+      const [birthdays] = await pool.query(
+        `SELECT id, name, name_en, birth_date, image_url
+         FROM members
+         WHERE is_former = 0 AND MONTH(birth_date) = ?`,
+        [parseInt(month)]
+      );
+
+      const birthdaySchedules = birthdays.map((member) => {
+        const birthDate = new Date(member.birth_date);
+        const birthdayThisYear = new Date(
+          parseInt(year),
+          birthDate.getMonth(),
+          birthDate.getDate()
+        );
+
+        return {
+          id: `birthday-${member.id}`,
+          title: `HAPPY ${member.name_en} DAY`,
+          description: null,
+          date: birthdayThisYear,
+          time: null,
+          category_id: 8,
+          source_url: null,
+          source_name: null,
+          location_name: null,
+          category_name: "생일",
+          category_color: "#f472b6",
+          member_names: member.name,
+          is_birthday: true,
+          member_image: member.image_url,
+        };
+      });
+
+      // 일정과 생일을 합쳐서 날짜순 정렬
+      const allSchedules = [...schedules, ...birthdaySchedules].sort(
+        (a, b) => new Date(a.date) - new Date(b.date)
+      );
+
+      return res.json(allSchedules);
+    }
+
     res.json(schedules);
   } catch (error) {
     console.error("일정 목록 조회 오류:", error);
@@ -164,6 +207,16 @@ router.get("/:id", async (req, res) => {
     );
     schedule.images = images.map((img) => img.image_url);
 
+    // 멤버 조회
+    const [members] = await pool.query(
+      `SELECT m.id, m.name FROM members m
+       JOIN schedule_members sm ON m.id = sm.member_id
+       WHERE sm.schedule_id = ?
+       ORDER BY m.id`,
+      [id]
+    );
+    schedule.members = members;
+
     // 콘서트 카테고리(id=6)인 경우 같은 제목의 관련 일정들도 조회
     if (schedule.category_id === 6) {
       const [relatedSchedules] = await pool.query(

frontend/package-lock.json

@@ -10,6 +10,7 @@
             "dependencies": {
                 "@tanstack/react-query": "^5.90.16",
                 "@tanstack/react-virtual": "^3.13.18",
+                "canvas-confetti": "^1.9.4",
                 "dayjs": "^1.11.19",
                 "framer-motion": "^11.0.8",
                 "lucide-react": "^0.344.0",
@@ -1464,6 +1465,16 @@
             ],
             "license": "CC-BY-4.0"
         },
+        "node_modules/canvas-confetti": {
+            "version": "1.9.4",
+            "resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.9.4.tgz",
+            "integrity": "sha512-yxQbJkAVrFXWNbTUjPqjF7G+g6pDotOUHGbkZq2NELZUMDpiJ85rIEazVb8GTaAptNW2miJAXbs1BtioA251Pw==",
+            "license": "ISC",
+            "funding": {
+                "type": "donate",
+                "url": "https://www.paypal.me/kirilvatev"
+            }
+        },
         "node_modules/chokidar": {
             "version": "3.6.0",
             "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",

frontend/package.json

@@ -11,6 +11,7 @@
     "dependencies": {
         "@tanstack/react-query": "^5.90.16",
         "@tanstack/react-virtual": "^3.13.18",
+        "canvas-confetti": "^1.9.4",
         "dayjs": "^1.11.19",
         "framer-motion": "^11.0.8",
         "lucide-react": "^0.344.0",

frontend/src/App.jsx

@@ -14,6 +14,7 @@ import PCAlbumGallery from './pages/pc/public/AlbumGallery';
 import PCTrackDetail from './pages/pc/public/TrackDetail';
 import PCSchedule from './pages/pc/public/Schedule';
 import PCScheduleDetail from './pages/pc/public/ScheduleDetail';
+import PCBirthday from './pages/pc/public/Birthday';
 import PCNotFound from './pages/pc/public/NotFound';
 
 // 모바일 페이지
@@ -86,6 +87,7 @@ function App() {
                                 <Route path="/album/:name/track/:trackTitle" element={<PCTrackDetail />} />
                                 <Route path="/schedule" element={<PCSchedule />} />
                                 <Route path="/schedule/:id" element={<PCScheduleDetail />} />
+                                <Route path="/birthday/:memberName/:year" element={<PCBirthday />} />
                                 <Route path="*" element={<PCNotFound />} />
                             </Routes>
                         </PCLayout>

frontend/src/pages/mobile/public/Schedule.jsx

@@ -1,11 +1,70 @@
 import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Clock, Tag, Link2, ChevronLeft, ChevronRight, ChevronDown, Search, X, Calendar } from 'lucide-react';
 import { useQuery, useInfiniteQuery } from '@tanstack/react-query';
 import { useInView } from 'react-intersection-observer';
 import { useVirtualizer } from '@tanstack/react-virtual';
+import confetti from 'canvas-confetti';
+import { getTodayKST } from '../../../utils/date';
 import { getSchedules, getCategories, searchSchedules } from '../../../api/public/schedules';
 
+// 폭죽 애니메이션 함수
+const fireBirthdayConfetti = () => {
+    const duration = 3000;
+    const animationEnd = Date.now() + duration;
+    const colors = ['#ff69b4', '#ff1493', '#da70d6', '#ba55d3', '#9370db', '#8a2be2', '#ffd700', '#ff6347'];
+
+    const randomInRange = (min, max) => Math.random() * (max - min) + min;
+
+    const interval = setInterval(() => {
+        const timeLeft = animationEnd - Date.now();
+
+        if (timeLeft <= 0) {
+            clearInterval(interval);
+            return;
+        }
+
+        const particleCount = 50 * (timeLeft / duration);
+
+        // 왼쪽에서 발사
+        confetti({
+            particleCount: Math.floor(particleCount),
+            startVelocity: 30,
+            spread: 60,
+            origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },
+            colors: colors,
+            shapes: ['circle', 'square'],
+            gravity: 1.2,
+            scalar: randomInRange(0.8, 1.2),
+            drift: randomInRange(-0.5, 0.5),
+        });
+
+        // 오른쪽에서 발사
+        confetti({
+            particleCount: Math.floor(particleCount),
+            startVelocity: 30,
+            spread: 60,
+            origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },
+            colors: colors,
+            shapes: ['circle', 'square'],
+            gravity: 1.2,
+            scalar: randomInRange(0.8, 1.2),
+            drift: randomInRange(-0.5, 0.5),
+        });
+    }, 250);
+
+    // 초기 대형 폭죽
+    confetti({
+        particleCount: 100,
+        spread: 100,
+        origin: { x: 0.5, y: 0.6 },
+        colors: colors,
+        shapes: ['circle', 'square'],
+        startVelocity: 45,
+    });
+};
+
 // HTML 엔티티 디코딩 함수
 const decodeHtmlEntities = (text) => {
     if (!text) return '';
@@ -14,8 +73,54 @@ const decodeHtmlEntities = (text) => {
     return textarea.value;
 };
 
+// 모바일 생일 카드 컴포넌트
+function MobileBirthdayCard({ schedule, onClick, delay = 0 }) {
+    return (
+        <motion.div
+            initial={{ opacity: 0, x: -10 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ delay, type: "spring", stiffness: 300, damping: 30 }}
+            onClick={onClick}
+            className="cursor-pointer"
+        >
+            <div className="relative overflow-hidden bg-gradient-to-r from-pink-400 via-purple-400 to-indigo-400 rounded-xl shadow-lg">
+                {/* 배경 장식 */}
+                <div className="absolute inset-0 overflow-hidden">
+                    <div className="absolute -top-3 -right-3 w-16 h-16 bg-white/10 rounded-full" />
+                    <div className="absolute -bottom-4 -left-4 w-20 h-20 bg-white/10 rounded-full" />
+                    <div className="absolute bottom-3 left-8 text-sm animate-pulse">🎉</div>
+                </div>
+
+                <div className="relative flex items-center p-4 gap-3">
+                    {/* 멤버 사진 */}
+                    {schedule.member_image && (
+                        <div className="flex-shrink-0">
+                            <div className="w-14 h-14 rounded-full border-2 border-white/50 shadow-md overflow-hidden bg-white">
+                                <img
+                                    src={schedule.member_image}
+                                    alt={schedule.member_names}
+                                    className="w-full h-full object-cover"
+                                />
+                            </div>
+                        </div>
+                    )}
+
+                    {/* 내용 */}
+                    <div className="flex-1 text-white flex items-center gap-2 min-w-0">
+                        <span className="text-2xl flex-shrink-0">🎂</span>
+                        <h3 className="font-bold text-base tracking-wide truncate">
+                            {decodeHtmlEntities(schedule.title)}
+                        </h3>
+                    </div>
+                </div>
+            </div>
+        </motion.div>
+    );
+}
+
 // 모바일 일정 페이지
 function MobileSchedule() {
+    const navigate = useNavigate();
     const [selectedDate, setSelectedDate] = useState(new Date());
     const [isSearchMode, setIsSearchMode] = useState(false);
     const [searchInput, setSearchInput] = useState(''); // 입력값
@@ -161,6 +266,32 @@ function MobileSchedule() {
         queryFn: () => getSchedules(viewYear, viewMonth),
     });
 
+    // 생일 폭죽 효과 (하루에 한 번만)
+    useEffect(() => {
+        if (loading || schedules.length === 0) return;
+
+        const today = getTodayKST();
+        const confettiKey = `birthday-confetti-${today}`;
+
+        // 이미 오늘 폭죽을 봤으면 스킵
+        if (localStorage.getItem(confettiKey)) return;
+
+        const hasBirthdayToday = schedules.some(s => {
+            if (!s.is_birthday) return false;
+            const scheduleDate = s.date ? s.date.split('T')[0] : '';
+            return scheduleDate === today;
+        });
+
+        if (hasBirthdayToday) {
+            // 약간의 딜레이 후 폭죽 발사 (페이지 렌더링 완료 후)
+            const timer = setTimeout(() => {
+                fireBirthdayConfetti();
+                localStorage.setItem(confettiKey, 'true');
+            }, 500);
+            return () => clearTimeout(timer);
+        }
+    }, [schedules, loading]);
+
     // 월 변경
     const changeMonth = (delta) => {
         const newDate = new Date(selectedDate);
@@ -723,7 +854,25 @@ function MobileSchedule() {
                 ) : (
                     // 선택된 날짜의 일정
                     <div className="space-y-3">
-                        {selectedDateSchedules.map((schedule, index) => (
+                        {selectedDateSchedules.map((schedule, index) => {
+                            const isBirthday = schedule.is_birthday || String(schedule.id).startsWith('birthday-');
+
+                            if (isBirthday) {
+                                return (
+                                    <MobileBirthdayCard
+                                        key={schedule.id}
+                                        schedule={schedule}
+                                        delay={index * 0.05}
+                                        onClick={() => {
+                                            const scheduleYear = new Date(schedule.date).getFullYear();
+                                            const memberName = schedule.member_names;
+                                            navigate(`/birthday/${encodeURIComponent(memberName)}/${scheduleYear}`);
+                                        }}
+                                    />
+                                );
+                            }
+
+                            return (
                                 <TimelineScheduleCard
                                     key={schedule.id}
                                     schedule={schedule}
@@ -731,7 +880,8 @@ function MobileSchedule() {
                                     categories={categories}
                                     delay={index * 0.05}
                                 />
-                        ))}
+                            );
+                        })}
                     </div>
                 )}
             </div>

frontend/src/pages/pc/admin/AdminSchedule.jsx

@@ -38,6 +38,7 @@ const ScheduleItem = memo(function ScheduleItem({
     openDeleteDialog
 }) {
     const scheduleDate = new Date(schedule.date);
+    const isBirthday = schedule.is_birthday || String(schedule.id).startsWith('birthday-');
     const categoryColor = getColorStyle(categories.find(c => c.id === schedule.category_id)?.color)?.style?.backgroundColor || '#6b7280';
     const categoryName = categories.find(c => c.id === schedule.category_id)?.name || '미분류';
     const memberNames = schedule.member_names || schedule.members?.map(m => m.name).join(',') || '';
@@ -103,6 +104,8 @@ const ScheduleItem = memo(function ScheduleItem({
                     )}
                 </div>
 
+                {/* 생일 일정은 수정/삭제 불가 */}
+                {!isBirthday && (
                     <div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                         {schedule.source_url && (
                             <a
@@ -128,6 +131,7 @@ const ScheduleItem = memo(function ScheduleItem({
                             <Trash2 size={18} />
                         </button>
                     </div>
+                )}
             </div>
         </motion.div>
     );

frontend/src/pages/pc/public/Birthday.jsx

@@ -0,0 +1,207 @@
+import { useParams, useNavigate } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
+import { motion } from 'framer-motion';
+import { ArrowLeft, Calendar, MapPin, Clock } from 'lucide-react';
+import { fetchApi } from '../../../api';
+
+// 한글 이름 → 영어 이름 매핑
+const memberEnglishName = {
+    '송하영': 'HAYOUNG',
+    '박지원': 'JIWON',
+    '이채영': 'CHAEYOUNG',
+    '이나경': 'NAKYUNG',
+    '백지헌': 'JIHEON',
+    '장규리': 'GYURI',
+    '이새롬': 'SAEROM',
+    '노지선': 'JISUN',
+    '이서연': 'SEOYEON',
+};
+
+function Birthday() {
+    const { memberName, year } = useParams();
+    const navigate = useNavigate();
+
+    // URL 디코딩
+    const decodedMemberName = decodeURIComponent(memberName || '');
+    const englishName = memberEnglishName[decodedMemberName];
+
+    // 멤버 정보 조회
+    const { data: member, isLoading: memberLoading, error } = useQuery({
+        queryKey: ['member', decodedMemberName],
+        queryFn: () => fetchApi(`/api/members/${encodeURIComponent(decodedMemberName)}`),
+        enabled: !!decodedMemberName,
+    });
+
+    // 해당 년도 생일카페 정보 조회 (나중에 구현)
+    // const { data: cafes } = useQuery({
+    //     queryKey: ['birthdayCafes', decodedMemberName, year],
+    //     queryFn: () => fetchApi(`/api/birthday-cafes?member=${encodeURIComponent(decodedMemberName)}&year=${year}`),
+    // });
+
+    if (!decodedMemberName || error) {
+        return (
+            <div className="min-h-[calc(100vh-64px)] flex items-center justify-center">
+                <div className="text-center">
+                    <h1 className="text-2xl font-bold text-gray-900 mb-2">멤버를 찾을 수 없습니다</h1>
+                    <button
+                        onClick={() => navigate('/schedule')}
+                        className="text-primary hover:underline"
+                    >
+                        일정으로 돌아가기
+                    </button>
+                </div>
+            </div>
+        );
+    }
+
+    if (memberLoading) {
+        return (
+            <div className="min-h-[calc(100vh-64px)] flex items-center justify-center">
+                <div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin" />
+            </div>
+        );
+    }
+
+    // 생일 계산
+    const birthDate = member?.birth_date ? new Date(member.birth_date) : null;
+    const birthdayThisYear = birthDate ? new Date(parseInt(year), birthDate.getMonth(), birthDate.getDate()) : null;
+
+    return (
+        <div className="min-h-[calc(100vh-64px)] bg-gradient-to-b from-pink-50 to-purple-50">
+            <div className="max-w-4xl mx-auto px-6 py-8">
+                {/* 뒤로가기 */}
+                <button
+                    onClick={() => navigate(-1)}
+                    className="flex items-center gap-2 text-gray-600 hover:text-gray-900 mb-6 transition-colors"
+                >
+                    <ArrowLeft size={20} />
+                    <span>뒤로가기</span>
+                </button>
+
+                {/* 헤더 카드 */}
+                <motion.div
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    className="relative overflow-hidden bg-gradient-to-r from-pink-400 via-purple-400 to-indigo-400 rounded-3xl shadow-xl mb-8"
+                >
+                    {/* 배경 장식 */}
+                    <div className="absolute inset-0 overflow-hidden">
+                        <div className="absolute -top-10 -right-10 w-40 h-40 bg-white/10 rounded-full" />
+                        <div className="absolute -bottom-10 -left-10 w-48 h-48 bg-white/10 rounded-full" />
+                        <div className="absolute top-1/3 right-1/4 w-20 h-20 bg-white/5 rounded-full" />
+                        <div className="absolute top-6 right-12 text-4xl animate-pulse">✨</div>
+                        <div className="absolute bottom-6 left-16 text-3xl animate-pulse delay-300">🎉</div>
+                        <div className="absolute top-1/2 right-8 text-2xl animate-bounce">🎈</div>
+                    </div>
+
+                    <div className="relative flex items-center p-8 gap-8">
+                        {/* 멤버 사진 */}
+                        {member?.image_url && (
+                            <div className="flex-shrink-0">
+                                <div className="w-32 h-32 rounded-full border-4 border-white/50 shadow-xl overflow-hidden bg-white">
+                                    <img
+                                        src={member.image_url}
+                                        alt={member.name}
+                                        className="w-full h-full object-cover"
+                                    />
+                                </div>
+                            </div>
+                        )}
+
+                        {/* 내용 */}
+                        <div className="flex-1 text-white">
+                            <div className="flex items-center gap-3 mb-2">
+                                <span className="text-5xl">🎂</span>
+                                <h1 className="font-bold text-4xl tracking-wide">
+                                    HAPPY {englishName} DAY
+                                </h1>
+                            </div>
+                            <p className="text-white/80 text-lg mt-2">
+                                {year}년 {birthdayThisYear?.getMonth() + 1}월 {birthdayThisYear?.getDate()}일
+                            </p>
+                        </div>
+
+                        {/* 년도 뱃지 */}
+                        <div className="flex-shrink-0 bg-white/20 backdrop-blur-sm rounded-2xl px-6 py-4 text-center">
+                            <div className="text-white/70 text-sm font-medium">YEAR</div>
+                            <div className="text-white text-4xl font-bold">{year}</div>
+                        </div>
+                    </div>
+                </motion.div>
+
+                {/* 생일카페 섹션 */}
+                <motion.div
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: 0.1 }}
+                    className="bg-white rounded-2xl shadow-lg p-8"
+                >
+                    <h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
+                        <span>☕</span>
+                        생일카페
+                    </h2>
+
+                    {/* 준비 중 메시지 */}
+                    <div className="text-center py-12">
+                        <div className="text-6xl mb-4">🎁</div>
+                        <p className="text-gray-500 text-lg">
+                            {year}년 {decodedMemberName} 생일카페 정보가 준비 중입니다
+                        </p>
+                        <p className="text-gray-400 text-sm mt-2">
+                            생일카페 정보가 등록되면 이곳에 표시됩니다
+                        </p>
+                    </div>
+
+                    {/* 생일카페 목록 (나중에 구현) */}
+                    {/* {cafes?.length > 0 ? (
+                        <div className="space-y-4">
+                            {cafes.map((cafe) => (
+                                <div key={cafe.id} className="border border-gray-200 rounded-xl p-6">
+                                    <h3 className="font-bold text-lg mb-3">{cafe.name}</h3>
+                                    <div className="space-y-2 text-gray-600">
+                                        <div className="flex items-center gap-2">
+                                            <Calendar size={16} />
+                                            <span>{cafe.start_date} ~ {cafe.end_date}</span>
+                                        </div>
+                                        <div className="flex items-center gap-2">
+                                            <Clock size={16} />
+                                            <span>{cafe.open_time} - {cafe.close_time}</span>
+                                        </div>
+                                        <div className="flex items-center gap-2">
+                                            <MapPin size={16} />
+                                            <span>{cafe.location}</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    ) : null} */}
+                </motion.div>
+
+                {/* 다른 년도 보기 (나중에 구현) */}
+                {/* <motion.div
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: 0.2 }}
+                    className="mt-6 flex justify-center gap-2"
+                >
+                    {[2023, 2024, 2025, 2026].map((y) => (
+                        <button
+                            key={y}
+                            onClick={() => navigate(`/birthday/${encodeURIComponent(decodedMemberName)}/${y}`)}
+                            className={`px-4 py-2 rounded-lg transition-colors ${
+                                parseInt(year) === y
+                                    ? 'bg-primary text-white'
+                                    : 'bg-white text-gray-600 hover:bg-gray-100'
+                            }`}
+                        >
+                            {y}
+                        </button>
+                    ))}
+                </motion.div> */}
+            </div>
+        </div>
+    );
+}
+
+export default Birthday;

frontend/src/pages/pc/public/Schedule.jsx

@@ -1,10 +1,11 @@
-import { useState, useEffect, useRef, useMemo, useDeferredValue, memo } from 'react';
+import { useState, useEffect, useRef, useMemo, useDeferredValue, memo, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Clock, ChevronLeft, ChevronRight, ChevronDown, Tag, Search, ArrowLeft, Link2, X } from 'lucide-react';
 import { useQuery, useInfiniteQuery } from '@tanstack/react-query';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useInView } from 'react-intersection-observer';
+import confetti from 'canvas-confetti';
 import { getTodayKST } from '../../../utils/date';
 import { getSchedules, getCategories, searchSchedules as searchSchedulesApi } from '../../../api/public/schedules';
 import useScheduleStore from '../../../stores/useScheduleStore';
@@ -17,6 +18,118 @@ const decodeHtmlEntities = (text) => {
     return textarea.value;
 };
 
+// 폭죽 애니메이션 함수
+const fireBirthdayConfetti = () => {
+    const duration = 3000;
+    const animationEnd = Date.now() + duration;
+    const colors = ['#ff69b4', '#ff1493', '#da70d6', '#ba55d3', '#9370db', '#8a2be2', '#ffd700', '#ff6347'];
+
+    const randomInRange = (min, max) => Math.random() * (max - min) + min;
+
+    const interval = setInterval(() => {
+        const timeLeft = animationEnd - Date.now();
+
+        if (timeLeft <= 0) {
+            clearInterval(interval);
+            return;
+        }
+
+        const particleCount = 50 * (timeLeft / duration);
+
+        // 왼쪽에서 발사
+        confetti({
+            particleCount: Math.floor(particleCount),
+            startVelocity: 30,
+            spread: 60,
+            origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },
+            colors: colors,
+            shapes: ['circle', 'square'],
+            gravity: 1.2,
+            scalar: randomInRange(0.8, 1.2),
+            drift: randomInRange(-0.5, 0.5),
+        });
+
+        // 오른쪽에서 발사
+        confetti({
+            particleCount: Math.floor(particleCount),
+            startVelocity: 30,
+            spread: 60,
+            origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },
+            colors: colors,
+            shapes: ['circle', 'square'],
+            gravity: 1.2,
+            scalar: randomInRange(0.8, 1.2),
+            drift: randomInRange(-0.5, 0.5),
+        });
+    }, 250);
+
+    // 초기 대형 폭죽
+    confetti({
+        particleCount: 100,
+        spread: 100,
+        origin: { x: 0.5, y: 0.6 },
+        colors: colors,
+        shapes: ['circle', 'square'],
+        startVelocity: 45,
+    });
+};
+
+// 생일 카드 컴포넌트
+function BirthdayCard({ schedule, formatted, showYear = false, onClick }) {
+    return (
+        <div
+            onClick={onClick}
+            className="relative overflow-hidden bg-gradient-to-r from-pink-400 via-purple-400 to-indigo-400 rounded-2xl shadow-lg hover:shadow-xl transition-shadow cursor-pointer"
+        >
+            {/* 배경 장식 */}
+            <div className="absolute inset-0 overflow-hidden">
+                <div className="absolute -top-4 -right-4 w-24 h-24 bg-white/10 rounded-full" />
+                <div className="absolute -bottom-6 -left-6 w-32 h-32 bg-white/10 rounded-full" />
+                <div className="absolute top-1/2 right-1/4 w-16 h-16 bg-white/5 rounded-full" />
+                <div className="absolute bottom-4 left-12 text-xl animate-pulse">🎉</div>
+            </div>
+
+            <div className="relative flex items-center p-4 gap-4">
+                {/* 멤버 사진 */}
+                {schedule.member_image && (
+                    <div className="flex-shrink-0">
+                        <div className="w-20 h-20 rounded-full border-4 border-white/50 shadow-lg overflow-hidden bg-white">
+                            <img
+                                src={schedule.member_image}
+                                alt={schedule.member_names}
+                                className="w-full h-full object-cover"
+                            />
+                        </div>
+                    </div>
+                )}
+
+                {/* 내용 */}
+                <div className="flex-1 text-white flex items-center gap-3">
+                    <span className="text-4xl">🎂</span>
+                    <h3 className="font-bold text-2xl tracking-wide">
+                        {schedule.title}
+                    </h3>
+                </div>
+
+                {/* 날짜 뱃지 */}
+                <div className="flex-shrink-0 bg-white/20 backdrop-blur-sm rounded-xl px-4 py-2 text-center">
+                    {showYear && (
+                        <div className="text-white/70 text-xs font-medium">
+                            {new Date(schedule.date).getFullYear()}
+                        </div>
+                    )}
+                    <div className="text-white/70 text-xs font-medium">
+                        {new Date(schedule.date).getMonth() + 1}월
+                    </div>
+                    <div className="text-white text-2xl font-bold">
+                        {formatted.day}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
 function Schedule() {
     const navigate = useNavigate();
 
@@ -59,6 +172,32 @@ function Schedule() {
         queryFn: () => getSchedules(year, month + 1),
     });
 
+    // 오늘 생일이 있으면 폭죽 발사 (하루에 한 번만)
+    useEffect(() => {
+        if (loading || schedules.length === 0) return;
+
+        const today = getTodayKST();
+        const confettiKey = `birthday-confetti-${today}`;
+
+        // 이미 오늘 폭죽을 봤으면 스킵
+        if (localStorage.getItem(confettiKey)) return;
+
+        const hasBirthdayToday = schedules.some(s => {
+            if (!s.is_birthday) return false;
+            const scheduleDate = s.date ? s.date.split('T')[0] : '';
+            return scheduleDate === today;
+        });
+
+        if (hasBirthdayToday) {
+            // 약간의 딜레이 후 폭죽 발사 (페이지 렌더링 완료 후)
+            const timer = setTimeout(() => {
+                fireBirthdayConfetti();
+                localStorage.setItem(confettiKey, 'true');
+            }, 500);
+            return () => clearTimeout(timer);
+        }
+    }, [schedules, loading]);
+
     // 카테고리 필터 툴팁
     const [showCategoryTooltip, setShowCategoryTooltip] = useState(false);
     const categoryRef = useRef(null);
@@ -366,6 +505,14 @@ function Schedule() {
 
     // 일정 클릭 핸들러
     const handleScheduleClick = (schedule) => {
+        // 생일 일정은 생일 페이지로 이동
+        if (schedule.is_birthday || String(schedule.id).startsWith('birthday-')) {
+            const scheduleYear = new Date(schedule.date).getFullYear();
+            const memberName = schedule.member_names; // 한글 이름
+            navigate(`/birthday/${encodeURIComponent(memberName)}/${scheduleYear}`);
+            return;
+        }
+
         // 유튜브(id=2), X(id=3), 콘서트(id=6) 카테고리는 상세 페이지로 이동
         if (schedule.category_id === 2 || schedule.category_id === 3 || schedule.category_id === 6) {
             navigate(`/schedule/${schedule.id}`);
@@ -996,6 +1143,9 @@ function Schedule() {
                                                         }}
                                                     >
                                                         <div className={virtualItem.index < filteredSchedules.length - 1 ? "pb-4" : ""}>
+                                                            {schedule.is_birthday ? (
+                                                                <BirthdayCard schedule={schedule} formatted={formatted} showYear={true} onClick={() => handleScheduleClick(schedule)} />
+                                                            ) : (
                                                             <div
                                                                 onClick={() => handleScheduleClick(schedule)}
                                                                 className="flex items-stretch bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow overflow-hidden cursor-pointer min-h-[100px]"
@@ -1060,6 +1210,7 @@ function Schedule() {
                                                                 })()}
                                                             </div>
                                                             </div>
+                                                            )}
                                                         </div>
                                                     </div>
                                                 );
@@ -1093,6 +1244,11 @@ function Schedule() {
                                                 initial={{ opacity: 0 }}
                                                 animate={{ opacity: 1 }}
                                                 transition={{ delay: Math.min(index, 10) * 0.03 }}
+                                            >
+                                                {schedule.is_birthday ? (
+                                                    <BirthdayCard schedule={schedule} formatted={formatted} onClick={() => handleScheduleClick(schedule)} />
+                                                ) : (
+                                                <div
                                                     onClick={() => handleScheduleClick(schedule)}
                                                     className="flex items-stretch bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow overflow-hidden cursor-pointer"
                                                 >
@@ -1147,6 +1303,8 @@ function Schedule() {
                                                             );
                                                         })()}
                                                     </div>
+                                                </div>
+                                                )}
                                             </motion.div>
                                         );
                                     })
@@ -1157,9 +1315,19 @@ function Schedule() {
                                         initial={{ opacity: 0, y: 10 }}
                                         animate={{ opacity: 1, y: 0 }}
                                         transition={{ duration: 0.2 }}
-                                        className="text-center py-20 text-gray-500"
+                                        className="flex flex-col items-center justify-center py-16"
                                     >
-                                        {selectedDate ? '선택한 날짜에 일정이 없습니다.' : '예정된 일정이 없습니다.'}
+                                        <div className="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mb-4">
+                                            <svg className="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                                            </svg>
+                                        </div>
+                                        <p className="text-gray-400 text-lg font-medium mb-1">
+                                            {selectedDate ? '일정이 없습니다' : '예정된 일정이 없습니다'}
+                                        </p>
+                                        <p className="text-gray-300 text-sm">
+                                            {selectedDate ? '다른 날짜를 선택해 보세요' : '다른 달을 확인해 보세요'}
+                                        </p>
                                     </motion.div>
                                 )
                             )}

frontend/src/pages/pc/public/ScheduleDetail.jsx

@@ -74,6 +74,9 @@ const formatXDateTime = (dateStr, timeStr) => {
 
 // 영상 정보 컴포넌트 (공통)
 function VideoInfo({ schedule, isShorts }) {
+    const members = schedule.members || [];
+    const isFullGroup = members.length === 5;
+
     return (
         <div className={`bg-gradient-to-br from-gray-50 to-gray-100/50 rounded-2xl p-6 ${isShorts ? 'flex-1' : ''}`}>
             {/* 제목 */}
@@ -112,6 +115,26 @@ function VideoInfo({ schedule, isShorts }) {
                 )}
             </div>
 
+            {/* 멤버 목록 */}
+            {members.length > 0 && (
+                <div className="flex flex-wrap gap-2 mt-4">
+                    {isFullGroup ? (
+                        <span className="px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full">
+                            프로미스나인
+                        </span>
+                    ) : (
+                        members.map((member) => (
+                            <span
+                                key={member.id}
+                                className="px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full"
+                            >
+                                {member.name}
+                            </span>
+                        ))
+                    )}
+                </div>
+            )}
+
             {/* 유튜브에서 보기 버튼 */}
             <div className="mt-6 pt-5 border-t border-gray-200">
                 <a
@@ -654,6 +677,7 @@ function ScheduleDetail() {
         queryKey: ['schedule', id],
         queryFn: () => getSchedule(id),
         placeholderData: keepPreviousData,
+        retry: false, // 404 등 에러 시 재시도하지 않음
     });
 
     if (isLoading) {
@@ -666,16 +690,84 @@ function ScheduleDetail() {
 
     if (error || !schedule) {
         return (
-            <div className="min-h-[calc(100vh-64px)] flex flex-col items-center justify-center bg-gray-50">
+            <div className="min-h-[calc(100vh-64px)] flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100">
-                <div className="text-center">
+                <div className="text-center px-6">
-                    <div className="text-6xl mb-4">😢</div>
+                    {/* 아이콘 */}
-                    <p className="text-gray-500 mb-6">일정을 찾을 수 없습니다</p>
+                    <motion.div
+                        initial={{ opacity: 0, scale: 0.5 }}
+                        animate={{ opacity: 1, scale: 1 }}
+                        transition={{ duration: 0.5, type: "spring", stiffness: 100 }}
+                        className="mb-8"
+                    >
+                        <div className="w-32 h-32 mx-auto bg-gradient-to-br from-primary/10 to-primary/5 rounded-3xl flex items-center justify-center">
+                            <Calendar size={64} className="text-primary/40" />
+                        </div>
+                    </motion.div>
+
+                    {/* 메시지 */}
+                    <motion.div
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ delay: 0.2, duration: 0.5 }}
+                        className="mb-8"
+                    >
+                        <h2 className="text-2xl font-bold text-gray-800 mb-3">
+                            일정을 찾을 수 없습니다
+                        </h2>
+                        <p className="text-gray-500 leading-relaxed">
+                            요청하신 일정이 존재하지 않거나 삭제되었을 수 있습니다.
+                            <br />
+                            다른 일정을 확인해 주세요.
+                        </p>
+                    </motion.div>
+
+                    {/* 장식 요소 */}
+                    <motion.div
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        transition={{ delay: 0.4, duration: 0.5 }}
+                        className="flex justify-center gap-2 mb-10"
+                    >
+                        {[...Array(5)].map((_, i) => (
+                            <motion.div
+                                key={i}
+                                className="w-2 h-2 rounded-full bg-primary"
+                                animate={{
+                                    y: [0, -8, 0],
+                                    opacity: [0.3, 1, 0.3],
+                                }}
+                                transition={{
+                                    duration: 1.2,
+                                    repeat: Infinity,
+                                    delay: i * 0.15,
+                                    ease: "easeInOut",
+                                }}
+                            />
+                        ))}
+                    </motion.div>
+
+                    {/* 버튼들 */}
+                    <motion.div
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ delay: 0.5, duration: 0.5 }}
+                        className="flex justify-center gap-4"
+                    >
+                        <button
+                            onClick={() => window.history.back()}
+                            className="flex items-center gap-2 px-6 py-3 border-2 border-primary text-primary rounded-full font-medium hover:bg-primary hover:text-white transition-colors duration-200"
+                        >
+                            <ChevronRight size={18} className="rotate-180" />
+                            이전 페이지
+                        </button>
                         <Link
                             to="/schedule"
-                        className="px-6 py-3 bg-primary hover:bg-primary-dark text-white rounded-xl font-medium transition-colors"
+                            className="flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-primary to-primary-dark text-white rounded-full font-medium hover:shadow-lg hover:shadow-primary/30 transition-all duration-200"
                         >
-                        일정 목록으로
+                            <Calendar size={18} />
+                            일정 목록
                         </Link>
+                    </motion.div>
                 </div>
             </div>
         );