feat: 생일 기능 추가 및 일정 페이지 개선
- 생일 카드 컴포넌트 추가 (PC/모바일) - 생일 폭죽(confetti) 애니메이션 적용 (하루에 한 번) - 생일 상세 페이지 추가 (/birthday/멤버이름/년도) - 관리자 일정 페이지에 생일 표시 (수정/삭제 버튼 숨김) - 일정 상세 페이지 404 에러 UI 개선 - 일정 상세 페이지 불필요한 재시도 방지 (retry: false) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
611a20a8f0
commit
6275f0f92a
10 changed files with 850 additions and 110 deletions
|
|
@ -1290,8 +1290,8 @@ router.get("/schedules", async (req, res) => {
|
|||
: "";
|
||||
|
||||
const [schedules] = await pool.query(
|
||||
`SELECT
|
||||
s.id, s.title, s.date, s.time, s.end_date, s.end_time,
|
||||
`SELECT
|
||||
s.id, s.title, s.date, s.time, s.end_date, s.end_time,
|
||||
s.category_id, s.description, s.source_url, s.source_name,
|
||||
s.location_name, s.location_address, s.location_detail, s.location_lat, s.location_lng,
|
||||
s.created_at,
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ router.get("/", async (req, res) => {
|
|||
// 검색어 없으면 DB에서 전체 조회
|
||||
const [schedules] = await pool.query(
|
||||
`
|
||||
SELECT
|
||||
SELECT
|
||||
s.id,
|
||||
s.title,
|
||||
s.description,
|
||||
|
|
@ -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(
|
||||
|
|
|
|||
11
frontend/package-lock.json
generated
11
frontend/package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,15 +854,34 @@ function MobileSchedule() {
|
|||
) : (
|
||||
// 선택된 날짜의 일정
|
||||
<div className="space-y-3">
|
||||
{selectedDateSchedules.map((schedule, index) => (
|
||||
<TimelineScheduleCard
|
||||
key={schedule.id}
|
||||
schedule={schedule}
|
||||
categoryColor={getCategoryColor(schedule.category_id)}
|
||||
categories={categories}
|
||||
delay={index * 0.05}
|
||||
/>
|
||||
))}
|
||||
{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}
|
||||
categoryColor={getCategoryColor(schedule.category_id)}
|
||||
categories={categories}
|
||||
delay={index * 0.05}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -28,16 +28,17 @@ const decodeHtmlEntities = (text) => {
|
|||
};
|
||||
|
||||
// 일정 아이템 컴포넌트 - React.memo로 불필요한 리렌더링 방지
|
||||
const ScheduleItem = memo(function ScheduleItem({
|
||||
schedule,
|
||||
index,
|
||||
selectedDate,
|
||||
categories,
|
||||
getColorStyle,
|
||||
navigate,
|
||||
openDeleteDialog
|
||||
const ScheduleItem = memo(function ScheduleItem({
|
||||
schedule,
|
||||
index,
|
||||
selectedDate,
|
||||
categories,
|
||||
getColorStyle,
|
||||
navigate,
|
||||
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(',') || '';
|
||||
|
|
@ -61,7 +62,7 @@ const ScheduleItem = memo(function ScheduleItem({
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
<div
|
||||
className="w-1.5 rounded-full flex-shrink-0 self-stretch"
|
||||
style={{ backgroundColor: categoryColor }}
|
||||
/>
|
||||
|
|
@ -103,31 +104,34 @@ const ScheduleItem = memo(function ScheduleItem({
|
|||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
{schedule.source_url && (
|
||||
<a
|
||||
href={schedule.source_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="p-2 hover:bg-blue-100 rounded-lg transition-colors text-blue-500"
|
||||
{/* 생일 일정은 수정/삭제 불가 */}
|
||||
{!isBirthday && (
|
||||
<div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
{schedule.source_url && (
|
||||
<a
|
||||
href={schedule.source_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="p-2 hover:bg-blue-100 rounded-lg transition-colors text-blue-500"
|
||||
>
|
||||
<ExternalLink size={18} />
|
||||
</a>
|
||||
)}
|
||||
<button
|
||||
onClick={() => navigate(`/admin/schedule/${schedule.id}/edit`)}
|
||||
className="p-2 hover:bg-gray-200 rounded-lg transition-colors text-gray-500"
|
||||
>
|
||||
<ExternalLink size={18} />
|
||||
</a>
|
||||
)}
|
||||
<button
|
||||
onClick={() => navigate(`/admin/schedule/${schedule.id}/edit`)}
|
||||
className="p-2 hover:bg-gray-200 rounded-lg transition-colors text-gray-500"
|
||||
>
|
||||
<Edit2 size={18} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => openDeleteDialog(schedule)}
|
||||
className="p-2 hover:bg-red-100 rounded-lg transition-colors text-red-500"
|
||||
>
|
||||
<Trash2 size={18} />
|
||||
</button>
|
||||
</div>
|
||||
<Edit2 size={18} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => openDeleteDialog(schedule)}
|
||||
className="p-2 hover:bg-red-100 rounded-lg transition-colors text-red-500"
|
||||
>
|
||||
<Trash2 size={18} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
|
|
@ -1249,7 +1253,7 @@ function AdminSchedule() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
<div
|
||||
className="w-1.5 rounded-full flex-shrink-0 self-stretch"
|
||||
style={{ backgroundColor: getColorStyle(categories.find(c => c.id === schedule.category_id)?.color)?.style?.backgroundColor || '#6b7280' }}
|
||||
/>
|
||||
|
|
@ -1293,7 +1297,7 @@ function AdminSchedule() {
|
|||
|
||||
<div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
{schedule.source_url && (
|
||||
<a
|
||||
<a
|
||||
href={schedule.source_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
|
|
@ -1303,13 +1307,13 @@ function AdminSchedule() {
|
|||
<ExternalLink size={18} />
|
||||
</a>
|
||||
)}
|
||||
<button
|
||||
<button
|
||||
onClick={() => navigate(`/admin/schedule/${schedule.id}/edit`)}
|
||||
className="p-2 hover:bg-gray-200 rounded-lg transition-colors text-gray-500"
|
||||
>
|
||||
<Edit2 size={18} />
|
||||
</button>
|
||||
<button
|
||||
<button
|
||||
onClick={() => openDeleteDialog(schedule)}
|
||||
className="p-2 hover:bg-red-100 rounded-lg transition-colors text-red-500"
|
||||
>
|
||||
|
|
|
|||
207
frontend/src/pages/pc/public/Birthday.jsx
Normal file
207
frontend/src/pages/pc/public/Birthday.jsx
Normal file
|
|
@ -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;
|
||||
|
|
@ -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,12 +1143,15 @@ 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]"
|
||||
>
|
||||
{/* 날짜 영역 */}
|
||||
<div
|
||||
<div
|
||||
className="w-24 flex flex-col items-center justify-center text-white"
|
||||
style={{ backgroundColor: categoryColor }}
|
||||
>
|
||||
|
|
@ -1015,7 +1165,7 @@ function Schedule() {
|
|||
{/* 스케줄 내용 */}
|
||||
<div className="flex-1 p-4 flex flex-col justify-center">
|
||||
<h3 className="font-bold text-lg mb-1">{decodeHtmlEntities(schedule.title)}</h3>
|
||||
|
||||
|
||||
<div className="flex flex-wrap gap-3 text-base text-gray-500">
|
||||
{schedule.time && (
|
||||
<span className="flex items-center gap-1">
|
||||
|
|
@ -1060,6 +1210,7 @@ function Schedule() {
|
|||
})()}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -1093,73 +1244,90 @@ function Schedule() {
|
|||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: Math.min(index, 10) * 0.03 }}
|
||||
onClick={() => handleScheduleClick(schedule)}
|
||||
className="flex items-stretch bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow overflow-hidden cursor-pointer"
|
||||
>
|
||||
<div
|
||||
className="w-24 flex flex-col items-center justify-center text-white py-6"
|
||||
style={{ backgroundColor: categoryColor }}
|
||||
{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"
|
||||
>
|
||||
<span className="text-3xl font-bold">{formatted.day}</span>
|
||||
<span className="text-sm font-medium opacity-80">{formatted.weekday}</span>
|
||||
</div>
|
||||
<div className="flex-1 p-6 flex flex-col justify-center">
|
||||
<h3 className="font-bold text-lg mb-2">{decodeHtmlEntities(schedule.title)}</h3>
|
||||
<div className="flex flex-wrap gap-3 text-base text-gray-500">
|
||||
{schedule.time && (
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock size={16} className="opacity-60" />
|
||||
{schedule.time.slice(0, 5)}
|
||||
</span>
|
||||
)}
|
||||
<span className="flex items-center gap-1">
|
||||
<Tag size={16} className="opacity-60" />
|
||||
{categoryName}
|
||||
</span>
|
||||
{schedule.source_name && (
|
||||
<span className="flex items-center gap-1">
|
||||
<Link2 size={16} className="opacity-60" />
|
||||
{schedule.source_name}
|
||||
</span>
|
||||
)}
|
||||
<div
|
||||
className="w-24 flex flex-col items-center justify-center text-white py-6"
|
||||
style={{ backgroundColor: categoryColor }}
|
||||
>
|
||||
<span className="text-3xl font-bold">{formatted.day}</span>
|
||||
<span className="text-sm font-medium opacity-80">{formatted.weekday}</span>
|
||||
</div>
|
||||
{(() => {
|
||||
const memberNames = schedule.member_names || schedule.members?.map(m => m.name).join(',') || '';
|
||||
const memberList = memberNames.split(',').filter(name => name.trim());
|
||||
if (memberList.length === 0) return null;
|
||||
if (memberList.length === 5) {
|
||||
<div className="flex-1 p-6 flex flex-col justify-center">
|
||||
<h3 className="font-bold text-lg mb-2">{decodeHtmlEntities(schedule.title)}</h3>
|
||||
<div className="flex flex-wrap gap-3 text-base text-gray-500">
|
||||
{schedule.time && (
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock size={16} className="opacity-60" />
|
||||
{schedule.time.slice(0, 5)}
|
||||
</span>
|
||||
)}
|
||||
<span className="flex items-center gap-1">
|
||||
<Tag size={16} className="opacity-60" />
|
||||
{categoryName}
|
||||
</span>
|
||||
{schedule.source_name && (
|
||||
<span className="flex items-center gap-1">
|
||||
<Link2 size={16} className="opacity-60" />
|
||||
{schedule.source_name}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{(() => {
|
||||
const memberNames = schedule.member_names || schedule.members?.map(m => m.name).join(',') || '';
|
||||
const memberList = memberNames.split(',').filter(name => name.trim());
|
||||
if (memberList.length === 0) return null;
|
||||
if (memberList.length === 5) {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-1.5 mt-2">
|
||||
<span className="px-2 py-0.5 bg-primary/10 text-primary text-sm font-medium rounded-full">
|
||||
프로미스나인
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="flex flex-wrap gap-1.5 mt-2">
|
||||
<span className="px-2 py-0.5 bg-primary/10 text-primary text-sm font-medium rounded-full">
|
||||
프로미스나인
|
||||
</span>
|
||||
{memberList.map((name, i) => (
|
||||
<span key={i} className="px-2 py-0.5 bg-primary/10 text-primary text-sm font-medium rounded-full">
|
||||
{name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="flex flex-wrap gap-1.5 mt-2">
|
||||
{memberList.map((name, i) => (
|
||||
<span key={i} className="px-2 py-0.5 bg-primary/10 text-primary text-sm font-medium rounded-full">
|
||||
{name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
);
|
||||
})
|
||||
)
|
||||
) : (
|
||||
!isSearchMode && (
|
||||
<motion.div
|
||||
<motion.div
|
||||
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>
|
||||
)
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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="text-center">
|
||||
<div className="text-6xl mb-4">😢</div>
|
||||
<p className="text-gray-500 mb-6">일정을 찾을 수 없습니다</p>
|
||||
<Link
|
||||
to="/schedule"
|
||||
className="px-6 py-3 bg-primary hover:bg-primary-dark text-white rounded-xl font-medium transition-colors"
|
||||
<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 px-6">
|
||||
{/* 아이콘 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.5 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.5, type: "spring", stiffness: 100 }}
|
||||
className="mb-8"
|
||||
>
|
||||
일정 목록으로
|
||||
</Link>
|
||||
<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="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>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue