caadiq/fromis_9
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(schedule): 공개 일정 페이지에 검색 기능 추가

Browse source 
- 헤더에 검색 토글 UI 추가 (밑줄 스타일 검색창)
- API 검색 기능 (/api/admin/schedules?search=) 연동
- 검색 모드에서 달력/카테고리 비활성화 (framer-motion animate)
- 검색 결과에 년.월 형식 날짜 표시 (2025.4)
- 카테고리 개수: 검색 시 결과 기준, 일반 시 해당 월 기준
- 달력/카테고리 구조 분리하여 독립 제어
- AdminSchedule.jsx도 동일한 비활성화 방식 적용
This commit is contained in:
caadiq 2026-01-05 22:08:41 +09:00
parent dff43126c4
commit 387db937b0
2 changed files with 824 additions and 322 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

784
frontend/src/pages/pc/Schedule.jsx
View file

@ -1,16 +1,86 @@
import { useState, useEffect, useRef } from 'react'; import { useState, useEffect, useRef, useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion'; import { motion, AnimatePresence } from 'framer-motion';
import { Clock, MapPin, Users, ChevronLeft, ChevronRight, ChevronDown } from 'lucide-react'; import { Clock, ChevronLeft, ChevronRight, ChevronDown, Tag, Search, ArrowLeft } from 'lucide-react';
import { schedules } from '../../data/dummy';
function Schedule() { function Schedule() {
const navigate = useNavigate();
const [currentDate, setCurrentDate] = useState(new Date()); const [currentDate, setCurrentDate] = useState(new Date());
const [selectedDate, setSelectedDate] = useState(null); const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]); // 오늘 기본값
const [showYearMonthPicker, setShowYearMonthPicker] = useState(false); const [showYearMonthPicker, setShowYearMonthPicker] = useState(false);
const [viewMode, setViewMode] = useState('yearMonth'); // 'yearMonth' | 'months' const [viewMode, setViewMode] = useState('yearMonth');
const [slideDirection, setSlideDirection] = useState(0); // -1: prev, 1: next const [slideDirection, setSlideDirection] = useState(0);
const pickerRef = useRef(null); const pickerRef = useRef(null);
// 데이터 상태
const [schedules, setSchedules] = useState([]);
const [categories, setCategories] = useState([]);
const [selectedCategories, setSelectedCategories] = useState([]);
const [loading, setLoading] = useState(true);
// 카테고리 필터 툴팁
const [showCategoryTooltip, setShowCategoryTooltip] = useState(false);
const categoryRef = useRef(null);
// 검색 상태
const [isSearchMode, setIsSearchMode] = useState(false);
const [searchInput, setSearchInput] = useState('');
const [searchTerm, setSearchTerm] = useState('');
const [searchResults, setSearchResults] = useState([]);
const [searchLoading, setSearchLoading] = useState(false);
// 데이터 로드
useEffect(() => {
fetchSchedules();
fetchCategories();
}, []);
const fetchSchedules = async () => {
try {
const response = await fetch('/api/schedules');
if (response.ok) {
const data = await response.json();
setSchedules(data);
}
} catch (error) {
console.error('일정 로드 오류:', error);
} finally {
setLoading(false);
}
};
const fetchCategories = async () => {
try {
const response = await fetch('/api/schedule-categories');
if (response.ok) {
const data = await response.json();
setCategories(data);
}
} catch (error) {
console.error('카테고리 로드 오류:', error);
}
};
// 검색 함수 (API 호출)
const searchSchedules = async (term) => {
if (!term.trim()) {
setSearchResults([]);
return;
}
setSearchLoading(true);
try {
const response = await fetch(`/api/admin/schedules?search=${encodeURIComponent(term)}`);
if (response.ok) {
const data = await response.json();
setSearchResults(data);
}
} catch (error) {
console.error('검색 오류:', error);
} finally {
setSearchLoading(false);
}
};
// 외부 클릭시 팝업 닫기 // 외부 클릭시 팝업 닫기
useEffect(() => { useEffect(() => {
const handleClickOutside = (event) => { const handleClickOutside = (event) => {
@ -18,16 +88,14 @@ function Schedule() {
setShowYearMonthPicker(false); setShowYearMonthPicker(false);
setViewMode('yearMonth'); setViewMode('yearMonth');
} }
if (categoryRef.current && !categoryRef.current.contains(event.target)) {
setShowCategoryTooltip(false);
}
}; };
if (showYearMonthPicker) { document.addEventListener('mousedown', handleClickOutside);
document.addEventListener('mousedown', handleClickOutside); return () => document.removeEventListener('mousedown', handleClickOutside);
} }, []);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, [showYearMonthPicker]);
// 달력 관련 함수 // 달력 관련 함수
const getDaysInMonth = (year, month) => new Date(year, month + 1, 0).getDate(); const getDaysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();
@ -40,8 +108,17 @@ function Schedule() {
const days = ['일', '월', '화', '수', '목', '금', '토']; const days = ['일', '월', '화', '수', '목', '금', '토'];
// 스케줄이 있는 날짜 목록 // 스케줄이 있는 날짜 목록 (ISO 형식에서 YYYY-MM-DD 추출)
const scheduleDates = schedules.map(s => s.date); const scheduleDates = schedules.map(s => s.date ? s.date.split('T')[0] : '');
// 해당 날짜의 첫 번째 일정 카테고리 색상
const getScheduleColor = (day) => {
const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
const schedule = schedules.find(s => (s.date ? s.date.split('T')[0] : '') === dateStr);
if (!schedule) return null;
const cat = categories.find(c => c.id === schedule.category_id);
return cat?.color || '#4A7C59';
};
const hasSchedule = (day) => { const hasSchedule = (day) => {
const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`; const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
@ -51,11 +128,13 @@ function Schedule() {
const prevMonth = () => { const prevMonth = () => {
setSlideDirection(-1); setSlideDirection(-1);
setCurrentDate(new Date(year, month - 1, 1)); setCurrentDate(new Date(year, month - 1, 1));
setSelectedDate(null); // 월 변경 시 초기화
}; };
const nextMonth = () => { const nextMonth = () => {
setSlideDirection(1); setSlideDirection(1);
setCurrentDate(new Date(year, month + 1, 1)); setCurrentDate(new Date(year, month + 1, 1));
setSelectedDate(null); // 월 변경 시 초기화
}; };
const selectDate = (day) => { const selectDate = (day) => {
@ -63,23 +142,63 @@ function Schedule() {
setSelectedDate(selectedDate === dateStr ? null : dateStr); setSelectedDate(selectedDate === dateStr ? null : dateStr);
}; };
// 년도 선택 시 월 선택 모드로 전환
const selectYear = (newYear) => { const selectYear = (newYear) => {
setCurrentDate(new Date(newYear, month, 1)); setCurrentDate(new Date(newYear, month, 1));
setViewMode('months'); setViewMode('months');
}; };
// 월 선택 시 적용 후 닫기
const selectMonth = (newMonth) => { const selectMonth = (newMonth) => {
setCurrentDate(new Date(year, newMonth, 1)); setCurrentDate(new Date(year, newMonth, 1));
setShowYearMonthPicker(false); setShowYearMonthPicker(false);
setViewMode('yearMonth'); setViewMode('yearMonth');
}; };
// 필터링된 스케줄 // 카테고리 토글
const filteredSchedules = selectedDate const toggleCategory = (categoryId) => {
? schedules.filter(s => s.date === selectedDate) setSelectedCategories(prev =>
: schedules; prev.includes(categoryId)
? prev.filter(id => id !== categoryId)
: [...prev, categoryId]
);
};
// 필터링된 스케줄 (useMemo로 성능 최적화, 시간순 정렬)
const currentYearMonth = `${year}-${String(month + 1).padStart(2, '0')}`;
const filteredSchedules = useMemo(() => {
// 검색 모드일 때
if (isSearchMode) {
// 검색 전엔 빈 목록, 검색 후엔 API 결과
if (!searchTerm) return [];
return searchResults.sort((a, b) => {
const dateA = a.date ? a.date.split('T')[0] : '';
const dateB = b.date ? b.date.split('T')[0] : '';
if (dateA !== dateB) return dateA.localeCompare(dateB);
const timeA = a.time || '00:00:00';
const timeB = b.time || '00:00:00';
return timeA.localeCompare(timeB);
});
}
// 일반 모드: 기존 필터링
return schedules
.filter(s => {
const scheduleDate = s.date ? s.date.split('T')[0] : '';
const matchesDate = selectedDate
? scheduleDate === selectedDate
: scheduleDate.startsWith(currentYearMonth);
const matchesCategory = selectedCategories.length === 0 || selectedCategories.includes(s.category_id);
return matchesDate && matchesCategory;
})
.sort((a, b) => {
const dateA = a.date ? a.date.split('T')[0] : '';
const dateB = b.date ? b.date.split('T')[0] : '';
if (dateA !== dateB) return dateA.localeCompare(dateB);
const timeA = a.time || '00:00:00';
const timeB = b.time || '00:00:00';
return timeA.localeCompare(timeB);
});
}, [schedules, selectedDate, currentYearMonth, selectedCategories, isSearchMode, searchTerm, searchResults]);
const formatDate = (dateStr) => { const formatDate = (dateStr) => {
const date = new Date(dateStr); const date = new Date(dateStr);
@ -91,24 +210,54 @@ function Schedule() {
}; };
}; };
// 년도 범위 (현재 년도 기준 10년 단위) // 일정 클릭 핸들러
const handleScheduleClick = (schedule) => {
// 설명이 없고 URL만 있으면 바로 링크 열기
if (!schedule.description && schedule.source_url) {
window.open(schedule.source_url, '_blank');
} else {
// 상세 페이지로 이동 (추후 구현)
navigate(`/schedule/${schedule.id}`);
}
};
// 년도 범위
const startYear = Math.floor(year / 10) * 10 - 1; const startYear = Math.floor(year / 10) * 10 - 1;
const yearRange = Array.from({ length: 12 }, (_, i) => startYear + i); const yearRange = Array.from({ length: 12 }, (_, i) => startYear + i);
// 현재 년도/월 확인 함수
const isCurrentYear = (y) => new Date().getFullYear() === y; const isCurrentYear = (y) => new Date().getFullYear() === y;
const isCurrentMonth = (m) => { const isCurrentMonth = (m) => {
const today = new Date(); const today = new Date();
return today.getFullYear() === year && today.getMonth() === m; return today.getFullYear() === year && today.getMonth() === m;
}; };
// 월 배열
const monthNames = ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월']; const monthNames = ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'];
// 년도 범위 이동
const prevYearRange = () => setCurrentDate(new Date(year - 10, month, 1)); const prevYearRange = () => setCurrentDate(new Date(year - 10, month, 1));
const nextYearRange = () => setCurrentDate(new Date(year + 10, month, 1)); const nextYearRange = () => setCurrentDate(new Date(year + 10, month, 1));
// 선택된 카테고리 이름
const getSelectedCategoryNames = () => {
if (selectedCategories.length === 0) return '전체';
const names = selectedCategories.map(id => {
const cat = categories.find(c => c.id === id);
return cat?.name || '';
}).filter(Boolean);
if (names.length <= 2) return names.join(', ');
return `${names.slice(0, 2).join(', ')} 외 ${names.length - 2}개`;
};
// 카테고리 색상 가져오기
const getCategoryColor = (categoryId) => {
const cat = categories.find(c => c.id === categoryId);
return cat?.color || '#808080';
};
const getCategoryName = (categoryId) => {
const cat = categories.find(c => c.id === categoryId);
return cat?.name || '';
};
return ( return (
<div className="py-16"> <div className="py-16">
<div className="max-w-7xl mx-auto px-6"> <div className="max-w-7xl mx-auto px-6">
@ -132,13 +281,16 @@ function Schedule() {
</div> </div>
<div className="flex gap-8"> <div className="flex gap-8">
{/* 달력 - 더 큰 사이즈 */} {/* 왼쪽: 달력 + 카테고리 */}
<motion.div <div className="w-[400px] flex-shrink-0">
initial={{ opacity: 0, x: -20 }} {/* 달력 */}
animate={{ opacity: 1, x: 0 }} <motion.div
className="w-[400px] flex-shrink-0" initial={{ opacity: 0, x: -20 }}
> animate={{ opacity: isSearchMode ? 0.4 : 1, x: 0 }}
<div className="bg-white rounded-2xl shadow-sm pt-8 px-8 pb-6 relative transition-all duration-200" ref={pickerRef}> transition={{ duration: 0.2 }}
className={`${isSearchMode ? 'pointer-events-none' : ''}`}
>
<div className="bg-white rounded-2xl shadow-sm pt-8 px-8 pb-6 relative transition-all duration-200" ref={pickerRef}>
{/* 달력 헤더 */} {/* 달력 헤더 */}
<div className="flex items-center justify-between mb-8"> <div className="flex items-center justify-between mb-8">
<button <button
@ -162,7 +314,7 @@ function Schedule() {
</button> </button>
</div> </div>
{/* 년/월 선택 팝업 - 달력 카드 중앙 정렬 */} {/* 년/월 선택 팝업 */}
<AnimatePresence> <AnimatePresence>
{showYearMonthPicker && ( {showYearMonthPicker && (
<motion.div <motion.div
@ -171,111 +323,81 @@ function Schedule() {
exit={{ opacity: 0, y: -10 }} exit={{ opacity: 0, y: -10 }}
className="absolute top-20 left-8 right-8 mx-auto w-80 bg-white rounded-xl shadow-lg border border-gray-200 p-4 z-10" className="absolute top-20 left-8 right-8 mx-auto w-80 bg-white rounded-xl shadow-lg border border-gray-200 p-4 z-10"
> >
{/* 헤더 - 년도 범위 이동 */} <div className="flex items-center justify-between mb-4">
<div className="flex items-center justify-between mb-4"> <button onClick={prevYearRange} className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors">
<button <ChevronLeft size={20} className="text-gray-600" />
onClick={prevYearRange} </button>
className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors" <span className="font-medium text-gray-900">
> {viewMode === 'yearMonth' ? `${yearRange[0]} - ${yearRange[yearRange.length - 1]}` : `${year}년`}
<ChevronLeft size={20} className="text-gray-600" /> </span>
</button> <button onClick={nextYearRange} className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors">
<span className="font-medium text-gray-900"> <ChevronRight size={20} className="text-gray-600" />
{viewMode === 'yearMonth' ? `${yearRange[0]} - ${yearRange[yearRange.length - 1]}` : `${year}년`} </button>
</span> </div>
<button
onClick={nextYearRange}
className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
>
<ChevronRight size={20} className="text-gray-600" />
</button>
</div>
<AnimatePresence mode="wait"> <AnimatePresence mode="wait">
{viewMode === 'yearMonth' && ( {viewMode === 'yearMonth' && (
<motion.div <motion.div key="yearMonth" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.15 }}>
key="yearMonth" <div className="text-center text-sm text-gray-500 mb-3">년도</div>
initial={{ opacity: 0 }} <div className="grid grid-cols-4 gap-2 mb-4">
animate={{ opacity: 1 }} {yearRange.map((y) => (
exit={{ opacity: 0 }} <button
transition={{ duration: 0.15 }} key={y}
> onClick={() => selectYear(y)}
{/* 년도 선택 */} className={`py-2 text-sm rounded-lg transition-colors ${
<div className="text-center text-sm text-gray-500 mb-3">년도</div> year === y ? 'bg-primary text-white' :
<div className="grid grid-cols-4 gap-2 mb-4"> isCurrentYear(y) && year !== y ? 'border border-primary text-primary hover:bg-primary/10' :
{yearRange.map((y) => ( 'hover:bg-gray-100 text-gray-700'
<button }`}
key={y} >
onClick={() => selectYear(y)} {y}
className={`py-2 text-sm rounded-lg transition-colors ${ </button>
year === y ))}
? 'bg-primary text-white' </div>
: isCurrentYear(y) && year !== y <div className="text-center text-sm text-gray-500 mb-3">월</div>
? 'border border-primary text-primary hover:bg-primary/10' <div className="grid grid-cols-4 gap-2">
: 'hover:bg-gray-100 text-gray-700' {monthNames.map((m, i) => (
}`} <button
> key={m}
{y} onClick={() => selectMonth(i)}
</button> className={`py-2 text-sm rounded-lg transition-colors ${
))} month === i ? 'bg-primary text-white' :
</div> isCurrentMonth(i) && month !== i ? 'border border-primary text-primary hover:bg-primary/10' :
'hover:bg-gray-100 text-gray-700'
{/* 월 선택 */} }`}
<div className="text-center text-sm text-gray-500 mb-3">월</div> >
<div className="grid grid-cols-4 gap-2"> {m}
{monthNames.map((m, i) => ( </button>
<button ))}
key={m} </div>
onClick={() => selectMonth(i)} </motion.div>
className={`py-2 text-sm rounded-lg transition-colors ${ )}
month === i {viewMode === 'months' && (
? 'bg-primary text-white' <motion.div key="months" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.15 }}>
: isCurrentMonth(i) && month !== i <div className="text-center text-sm text-gray-500 mb-3">월 선택</div>
? 'border border-primary text-primary hover:bg-primary/10' <div className="grid grid-cols-4 gap-2">
: 'hover:bg-gray-100 text-gray-700' {monthNames.map((m, i) => (
}`} <button
> key={m}
{m} onClick={() => selectMonth(i)}
</button> className={`py-2.5 text-sm rounded-lg transition-colors ${
))} month === i ? 'bg-primary text-white' :
</div> isCurrentMonth(i) && month !== i ? 'border border-primary text-primary hover:bg-primary/10' :
</motion.div> 'hover:bg-gray-100 text-gray-700'
)} }`}
>
{viewMode === 'months' && ( {m}
<motion.div </button>
key="months" ))}
initial={{ opacity: 0 }} </div>
animate={{ opacity: 1 }} </motion.div>
exit={{ opacity: 0 }} )}
transition={{ duration: 0.15 }} </AnimatePresence>
>
{/* 월 선택 */}
<div className="text-center text-sm text-gray-500 mb-3">월 선택</div>
<div className="grid grid-cols-4 gap-2">
{monthNames.map((m, i) => (
<button
key={m}
onClick={() => selectMonth(i)}
className={`py-2.5 text-sm rounded-lg transition-colors ${
month === i
? 'bg-primary text-white'
: isCurrentMonth(i) && month !== i
? 'border border-primary text-primary hover:bg-primary/10'
: 'hover:bg-gray-100 text-gray-700'
}`}
>
{m}
</button>
))}
</div>
</motion.div>
)}
</AnimatePresence>
</motion.div> </motion.div>
)} )}
</AnimatePresence> </AnimatePresence>
{/* 요일 헤더 + 날짜 그리드 (함께 슬라이드) */} {/* 요일 헤더 + 날짜 그리드 */}
<AnimatePresence mode="wait" initial={false}> <AnimatePresence mode="wait" initial={false}>
<motion.div <motion.div
key={`${year}-${month}`} key={`${year}-${month}`}
@ -285,7 +407,6 @@ function Schedule() {
transition={{ duration: 0.08 }} transition={{ duration: 0.08 }}
layout layout
> >
{/* 요일 헤더 */}
<div className="grid grid-cols-7 mb-4"> <div className="grid grid-cols-7 mb-4">
{days.map((day, i) => ( {days.map((day, i) => (
<div <div
@ -299,58 +420,60 @@ function Schedule() {
))} ))}
</div> </div>
{/* 날짜 그리드 */}
<div className="grid grid-cols-7 gap-1"> <div className="grid grid-cols-7 gap-1">
{/* 전달 날짜 */} {/* 전달 날짜 */}
{Array.from({ length: firstDay }).map((_, i) => { {Array.from({ length: firstDay }).map((_, i) => {
const prevMonthDays = getDaysInMonth(year, month - 1); const prevMonthDays = getDaysInMonth(year, month - 1);
const day = prevMonthDays - firstDay + i + 1; const day = prevMonthDays - firstDay + i + 1;
return ( return (
<div key={`prev-${i}`} className="aspect-square flex items-center justify-center text-gray-300 text-base"> <div key={`prev-${i}`} className="aspect-square flex items-center justify-center text-gray-300 text-base">
{day} {day}
</div> </div>
); );
})} })}
{/* 현재 달 날짜 */} {/* 현재 달 날짜 */}
{Array.from({ length: daysInMonth }).map((_, i) => { {Array.from({ length: daysInMonth }).map((_, i) => {
const day = i + 1; const day = i + 1;
const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`; const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
const isSelected = selectedDate === dateStr; const isSelected = selectedDate === dateStr;
const hasEvent = hasSchedule(day); const hasEvent = hasSchedule(day);
const dayOfWeek = (firstDay + i) % 7; const eventColor = getScheduleColor(day);
const isToday = new Date().toDateString() === new Date(year, month, day).toDateString(); const dayOfWeek = (firstDay + i) % 7;
const isToday = new Date().toDateString() === new Date(year, month, day).toDateString();
return ( return (
<button <button
key={day} key={day}
onClick={() => selectDate(day)} onClick={() => selectDate(day)}
className={`aspect-square flex flex-col items-center justify-center rounded-full text-base font-medium transition-all relative hover:bg-gray-100 className={`aspect-square flex flex-col items-center justify-center rounded-full text-base font-medium transition-all relative hover:bg-gray-100
${isSelected ? 'bg-primary text-white shadow-lg hover:bg-primary' : ''} ${isSelected ? 'bg-primary text-white shadow-lg hover:bg-primary' : ''}
${isToday && !isSelected ? 'bg-primary/10 text-primary font-bold hover:bg-primary/20' : ''} ${isToday && !isSelected ? 'bg-primary/10 text-primary font-bold hover:bg-primary/20' : ''}
${dayOfWeek === 0 && !isSelected && !isToday ? 'text-red-500' : ''} ${dayOfWeek === 0 && !isSelected && !isToday ? 'text-red-500' : ''}
${dayOfWeek === 6 && !isSelected && !isToday ? 'text-blue-500' : ''} ${dayOfWeek === 6 && !isSelected && !isToday ? 'text-blue-500' : ''}
`} `}
> >
<span>{day}</span> <span>{day}</span>
{hasEvent && ( {/* 점: absolute로 위치 고정하여 글씨 위치에 영향 없음 */}
<span className={`w-1.5 h-1.5 rounded-full mt-0.5 ${isSelected ? 'bg-white' : 'bg-primary'}`} /> <span
)} className={`absolute bottom-1 w-1.5 h-1.5 rounded-full ${hasEvent ? '' : 'opacity-0'}`}
</button> style={{ backgroundColor: isSelected ? 'white' : (eventColor || 'transparent') }}
); />
})} </button>
);
})}
{/* 다음달 날짜 (마지막 주만 채우기) */} {/* 다음달 날짜 */}
{(() => { {(() => {
const totalCells = firstDay + daysInMonth; const totalCells = firstDay + daysInMonth;
const remainder = totalCells % 7; const remainder = totalCells % 7;
const nextDays = remainder === 0 ? 0 : 7 - remainder; const nextDays = remainder === 0 ? 0 : 7 - remainder;
return Array.from({ length: nextDays }).map((_, i) => ( return Array.from({ length: nextDays }).map((_, i) => (
<div key={`next-${i}`} className="aspect-square flex items-center justify-center text-gray-300 text-base"> <div key={`next-${i}`} className="aspect-square flex items-center justify-center text-gray-300 text-base">
{i + 1} {i + 1}
</div> </div>
)); ));
})()} })()}
</div> </div>
</motion.div> </motion.div>
</AnimatePresence> </AnimatePresence>
@ -376,53 +499,260 @@ function Schedule() {
</div> </div>
</motion.div> </motion.div>
{/* 스케줄 리스트 */} {/* 카테고리 필터 */}
<div className="flex-1 space-y-4"> <motion.div
{filteredSchedules.length > 0 ? ( animate={{ opacity: isSearchMode && searchResults.length === 0 ? 0.4 : 1 }}
filteredSchedules.map((schedule, index) => { transition={{ duration: 0.2 }}
const formatted = formatDate(schedule.date); className={`bg-white rounded-2xl shadow-sm p-6 mt-4 ${isSearchMode && searchResults.length === 0 ? 'pointer-events-none' : ''}`}
return ( >
<motion.div <h3 className="font-bold text-gray-900 mb-4">카테고리</h3>
key={schedule.id} <div className="space-y-1">
initial={{ opacity: 0, y: 20 }} {/* 전체 */}
animate={{ opacity: 1, y: 0 }} <button
transition={{ delay: index * 0.1 }} onClick={() => setSelectedCategories([])}
className="flex items-stretch bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow overflow-hidden" className={`w-full flex items-center justify-between px-3 py-3 rounded-lg transition-colors ${
> selectedCategories.length === 0 ? 'bg-primary/10 text-primary' : 'hover:bg-gray-50'
{/* 날짜 영역 */} }`}
<div className="w-24 bg-primary flex flex-col items-center justify-center text-white py-6"> >
<span className="text-sm font-medium opacity-80">{formatted.month}월</span> <div className="flex items-center gap-2">
<span className="text-3xl font-bold">{formatted.day}</span> <span className="w-3 h-3 rounded-full bg-gray-400" />
<span className="text-sm font-medium opacity-80">{formatted.weekday}</span> <span>전체</span>
</div> </div>
<span className="text-sm text-gray-400">
{isSearchMode && searchTerm
? searchResults.length
: schedules.filter(s => {
const scheduleDate = s.date ? s.date.split('T')[0] : '';
return scheduleDate.startsWith(currentYearMonth);
}).length
}
</span>
</button>
{/* 스케줄 내용 */} {/* 개별 카테고리 */}
<div className="flex-1 p-6 flex flex-col justify-center"> {categories.map(category => {
<h3 className="font-bold text-lg mb-3">{schedule.title}</h3> // 검색 모드에서는 검색 결과 기준, 일반 모드에서는 해당 월 기준
const count = isSearchMode && searchTerm
<div className="flex flex-wrap gap-4 text-sm text-gray-500"> ? searchResults.filter(s => s.category_id === category.id).length
<div className="flex items-center gap-1"> : schedules.filter(s => {
<Clock size={14} className="text-primary" /> const scheduleDate = s.date ? s.date.split('T')[0] : '';
<span>{schedule.time}</span> return scheduleDate.startsWith(currentYearMonth) && s.category_id === category.id;
</div> }).length;
<div className="flex items-center gap-1"> const isSelected = selectedCategories.includes(category.id);
<MapPin size={14} className="text-primary" /> return (
<span>{schedule.platform}</span> <button
</div> key={category.id}
<div className="flex items-center gap-1"> onClick={() => toggleCategory(category.id)}
<Users size={14} className="text-primary" /> className={`w-full flex items-center justify-between px-3 py-3 rounded-lg transition-colors ${
<span>{schedule.members.join(', ')}</span> isSelected ? 'bg-primary/10 text-primary' : 'hover:bg-gray-50'
}`}
>
<div className="flex items-center gap-2">
<span
className="w-3 h-3 rounded-full"
style={{ backgroundColor: category.color }}
/>
<span>{category.name}</span>
</div>
<span className="text-sm text-gray-400">{count}</span>
</button>
);
})}
</div>
</motion.div>
</div>
{/* 스케줄 리스트 */}
<div className="flex-1">
{/* 헤더 */}
<div className="flex items-center justify-between mb-4">
<AnimatePresence mode="wait">
{isSearchMode ? (
/* 검색 모드 - 밑줄 스타일 */
<motion.div
key="search-mode"
initial={{ opacity: 0, x: -10 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -10 }}
transition={{ duration: 0.15 }}
className="flex items-center gap-3 flex-1"
>
<button
onClick={() => {
setIsSearchMode(false);
setSearchInput('');
setSearchTerm('');
setSearchResults([]);
}}
className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
>
<ArrowLeft size={20} className="text-gray-500" />
</button>
<div className="flex-1 flex items-center gap-3 border-b border-gray-300 pb-1">
<input
type="text"
placeholder="일정 검색..."
value={searchInput}
autoFocus
onChange={(e) => setSearchInput(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter') {
setSearchTerm(searchInput);
searchSchedules(searchInput);
} else if (e.key === 'Escape') {
setIsSearchMode(false);
setSearchInput('');
setSearchTerm('');
setSearchResults([]);
}
}}
className="flex-1 bg-transparent focus:outline-none text-gray-700 placeholder-gray-400"
/>
</div>
<button
onClick={() => {
setSearchTerm(searchInput);
searchSchedules(searchInput);
}}
disabled={searchLoading}
className="px-4 py-1.5 bg-primary text-white text-sm font-medium rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50"
>
{searchLoading ? '...' : '검색'}
</button>
</motion.div>
) : (
/* 일반 모드 */
<motion.div
key="normal-mode"
initial={{ opacity: 0, x: 10 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: 10 }}
transition={{ duration: 0.15 }}
className="flex items-center gap-3"
>
<button
onClick={() => setIsSearchMode(true)}
className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
title="일정 검색"
>
<Search size={20} className="text-gray-500" />
</button>
<h2 className="text-lg font-bold text-gray-900">
{selectedDate
? (() => {
const d = new Date(selectedDate);
const dayNames = ['일', '월', '화', '수', '목', '금', '토'];
return `${d.getMonth() + 1}월 ${d.getDate()}일 ${dayNames[d.getDay()]}요일`;
})()
: `${month + 1}월 전체 일정`
}
</h2>
{selectedCategories.length > 0 && (
<div className="relative" ref={categoryRef}>
<button
onClick={() => setShowCategoryTooltip(!showCategoryTooltip)}
className="flex items-center gap-1 px-2 py-1 bg-gray-100 rounded-md text-sm text-gray-600 hover:bg-gray-200 transition-colors"
>
<Tag size={14} />
<span>{selectedCategories.length}개 카테고리</span>
</button>
<AnimatePresence>
{showCategoryTooltip && (
<motion.div
initial={{ opacity: 0, y: -5 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -5 }}
transition={{ duration: 0.15 }}
className="absolute top-full left-0 mt-1 bg-white rounded-lg shadow-lg border border-gray-200 p-3 z-10 min-w-[150px]"
>
{selectedCategories.map(id => {
const cat = categories.find(c => c.id === id);
if (!cat) return null;
return (
<div key={id} className="flex items-center gap-2 py-1">
<span className="w-2 h-2 rounded-full" style={{ backgroundColor: cat.color }} />
<span className="text-sm">{cat.name}</span>
</div>
);
})}
</motion.div>
)}
</AnimatePresence>
</div>
)}
</motion.div>
)}
</AnimatePresence>
{/* 검색 모드가 아닐 때만 개수 표시 */}
{!isSearchMode && (
<span className="text-sm text-gray-500">{filteredSchedules.length}개 일정</span>
)}
</div>
<div className="space-y-4">
{loading ? (
<div className="text-center py-20 text-gray-500">로딩 중...</div>
) : filteredSchedules.length > 0 ? (
filteredSchedules.map((schedule, index) => {
const formatted = formatDate(schedule.date);
const categoryColor = getCategoryColor(schedule.category_id);
const categoryName = getCategoryName(schedule.category_id);
return (
<motion.div
key={schedule.id}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
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 }}
>
{/* 검색 모드일 때 년.월 표시, 일반 모드에서는 월 표시 안함 */}
{isSearchMode && searchTerm && (
<span className="text-xs font-medium opacity-60">
{new Date(schedule.date).getFullYear()}.{new Date(schedule.date).getMonth() + 1}
</span>
)}
<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">{schedule.title}</h3>
<div className="flex flex-wrap gap-3 text-sm text-gray-500">
{schedule.time && (
<div className="flex items-center gap-1">
<Clock size={14} style={{ color: categoryColor }} />
<span>{schedule.time.slice(0, 5)}</span>
</div>
)}
{categoryName && (
<div className="flex items-center gap-1">
<span
className="w-2 h-2 rounded-full"
style={{ backgroundColor: categoryColor }}
/>
<span>{categoryName}</span>
</div>
)}
</div> </div>
</div> </div>
</div> </motion.div>
</motion.div> );
); })
}) ) : (
) : ( <div className="text-center py-20 text-gray-500">
<div className="text-center py-20 text-gray-500"> {selectedDate ? '선택한 날짜에 일정이 없습니다.' : '예정된 일정이 없습니다.'}
{selectedDate ? '선택한 날짜에 일정이 없습니다.' : '예정된 일정이 없습니다.'} </div>
</div> )}
)} </div>
</div> </div>
</div> </div>
</div> </div>

362
frontend/src/pages/pc/admin/AdminSchedule.jsx
View file

@ -3,7 +3,7 @@ import { useNavigate, Link } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion'; import { motion, AnimatePresence } from 'framer-motion';
import { import {
LogOut, Home, ChevronRight, Calendar, Plus, Edit2, Trash2, LogOut, Home, ChevronRight, Calendar, Plus, Edit2, Trash2,
ChevronLeft, Search, ChevronDown, AlertTriangle ChevronLeft, Search, ChevronDown, AlertTriangle, Bot, Tag, ArrowLeft
} from 'lucide-react'; } from 'lucide-react';
import Toast from '../../../components/Toast'; import Toast from '../../../components/Toast';
import Tooltip from '../../../components/Tooltip'; import Tooltip from '../../../components/Tooltip';
@ -13,16 +13,22 @@ function AdminSchedule() {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [user, setUser] = useState(null); const [user, setUser] = useState(null);
const [toast, setToast] = useState(null); const [toast, setToast] = useState(null);
const [searchTerm, setSearchTerm] = useState(''); const [searchInput, setSearchInput] = useState(''); // 입력 상태
const [searchTerm, setSearchTerm] = useState(''); // 실제 검색어 (엔터 시 적용)
const [isSearchMode, setIsSearchMode] = useState(false); // 검색 모드 활성화
const [searchResults, setSearchResults] = useState([]); // 검색 결과 (API 응답)
const [searchLoading, setSearchLoading] = useState(false); // 검색 로딩
const [selectedCategories, setSelectedCategories] = useState([]); // 빈 배열 = 전체 const [selectedCategories, setSelectedCategories] = useState([]); // 빈 배열 = 전체
const [selectedDate, setSelectedDate] = useState(null); const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
const [currentDate, setCurrentDate] = useState(new Date()); const [currentDate, setCurrentDate] = useState(new Date());
const [slideDirection, setSlideDirection] = useState(0); const [slideDirection, setSlideDirection] = useState(0);
// 년월 선택 관련 (Schedule.jsx와 동일한 패턴) // 년월 선택 관련 (Schedule.jsx와 동일한 패턴)
const [showYearMonthPicker, setShowYearMonthPicker] = useState(false); const [showYearMonthPicker, setShowYearMonthPicker] = useState(false);
const [showCategoryTooltip, setShowCategoryTooltip] = useState(false);
const [viewMode, setViewMode] = useState('yearMonth'); // 'yearMonth' | 'months' const [viewMode, setViewMode] = useState('yearMonth'); // 'yearMonth' | 'months'
const pickerRef = useRef(null); const pickerRef = useRef(null);
const categoryTooltipRef = useRef(null);
// 달력 관련 // 달력 관련
const year = currentDate.getFullYear(); const year = currentDate.getFullYear();
@ -101,6 +107,18 @@ function AdminSchedule() {
}); });
}; };
// 해당 날짜의 첫 번째 일정 카테고리 색상
const getScheduleColor = (day) => {
const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
const schedule = schedules.find(s => {
const scheduleDate = new Date(s.date).toISOString().split('T')[0];
return scheduleDate === dateStr;
});
if (!schedule) return null;
const cat = categories.find(c => c.id === schedule.category_id);
return cat?.color || '#4A7C59';
};
// Toast 자동 숨김 // Toast 자동 숨김
useEffect(() => { useEffect(() => {
if (toast) { if (toast) {
@ -156,6 +174,24 @@ function AdminSchedule() {
setLoading(false); setLoading(false);
} }
}; };
// 검색 함수 (API 호출)
const searchSchedules = async (term) => {
if (!term.trim()) {
setSearchResults([]);
return;
}
setSearchLoading(true);
try {
const res = await fetch(`/api/admin/schedules?search=${encodeURIComponent(term)}`);
const data = await res.json();
setSearchResults(data);
} catch (error) {
console.error('검색 오류:', error);
} finally {
setSearchLoading(false);
}
};
// 외부 클릭 시 피커 닫기 // 외부 클릭 시 피커 닫기
useEffect(() => { useEffect(() => {
@ -164,14 +200,17 @@ function AdminSchedule() {
setShowYearMonthPicker(false); setShowYearMonthPicker(false);
setViewMode('yearMonth'); setViewMode('yearMonth');
} }
if (categoryTooltipRef.current && !categoryTooltipRef.current.contains(event.target)) {
setShowCategoryTooltip(false);
}
}; };
if (showYearMonthPicker) { if (showYearMonthPicker || showCategoryTooltip) {
document.addEventListener('mousedown', handleClickOutside); document.addEventListener('mousedown', handleClickOutside);
} }
return () => document.removeEventListener('mousedown', handleClickOutside); return () => document.removeEventListener('mousedown', handleClickOutside);
}, [showYearMonthPicker]); }, [showYearMonthPicker, showCategoryTooltip]);
const handleLogout = () => { const handleLogout = () => {
localStorage.removeItem('adminToken'); localStorage.removeItem('adminToken');
@ -183,11 +222,15 @@ function AdminSchedule() {
const prevMonth = () => { const prevMonth = () => {
setSlideDirection(-1); setSlideDirection(-1);
setCurrentDate(new Date(year, month - 1, 1)); setCurrentDate(new Date(year, month - 1, 1));
setSelectedDate(null);
setSchedules([]); // 이전 달 데이터 즉시 초기화
}; };
const nextMonth = () => { const nextMonth = () => {
setSlideDirection(1); setSlideDirection(1);
setCurrentDate(new Date(year, month + 1, 1)); setCurrentDate(new Date(year, month + 1, 1));
setSelectedDate(null);
setSchedules([]); // 이전 달 데이터 즉시 초기화
}; };
// 년도 범위 이동 // 년도 범위 이동
@ -260,16 +303,36 @@ function AdminSchedule() {
} }
}; };
// 필터링된 일정 // 검색어 정규화 (대소문자, 띄어쓰기, 특수문자 무시)
const filteredSchedules = schedules.filter(schedule => { const normalizeForSearch = (str) => {
const matchesSearch = schedule.title.toLowerCase().includes(searchTerm.toLowerCase()); return (str || '').toLowerCase().replace(/[\s\-_.,!?#@]/g, '');
// 카테고리 필터링: 빈 배열이면 전체, 아니면 선택된 카테고리들에 포함되는지 확인 };
const matchesCategory = selectedCategories.length === 0 || selectedCategories.includes(schedule.category_id);
// 날짜 필터링 추가 // 일정 목록 (검색 모드일 때 searchResults, 일반 모드일 때 로컬 필터링)
const scheduleDate = new Date(schedule.date).toISOString().split('T')[0]; const filteredSchedules = isSearchMode
const matchesDate = !selectedDate || scheduleDate === selectedDate; ? (searchTerm ? searchResults : []) // 검색 모드: 검색 전엔 빈 목록, 검색 후엔 API 결과
return matchesSearch && matchesCategory && matchesDate; : schedules.filter(schedule => { // 일반 모드: 로컬 필터링
}); const matchesCategory = selectedCategories.length === 0 || selectedCategories.includes(schedule.category_id);
const scheduleDate = new Date(schedule.date).toISOString().split('T')[0];
const matchesDate = !selectedDate || scheduleDate === selectedDate;
return matchesCategory && matchesDate;
});
// 검색 모드일 때 카테고리별 검색 결과 카운트 계산
const getSearchCategoryCount = (categoryId) => {
if (!isSearchMode || !searchTerm) {
return schedules.filter(s => s.category_id === categoryId).length;
}
return searchResults.filter(s => s.category_id === categoryId).length;
};
// 검색 모드일 때 전체 일정 수
const getTotalCount = () => {
if (!isSearchMode || !searchTerm) {
return schedules.length;
}
return searchResults.length;
};
return ( return (
<div className="min-h-screen bg-gray-50"> <div className="min-h-screen bg-gray-50">
@ -389,38 +452,55 @@ function AdminSchedule() {
<h1 className="text-3xl font-bold text-gray-900 mb-2">일정 관리</h1> <h1 className="text-3xl font-bold text-gray-900 mb-2">일정 관리</h1>
<p className="text-gray-500">fromis_9의 일정을 관리합니다</p> <p className="text-gray-500">fromis_9의 일정을 관리합니다</p>
</div> </div>
<button <div className="flex items-center gap-3">
onClick={() => navigate('/admin/schedule/new')} <button
className="flex items-center gap-2 px-5 py-3 bg-primary text-white rounded-xl hover:bg-primary-dark transition-colors font-medium shadow-sm" onClick={() => navigate('/admin/schedule/bots')}
> className="flex items-center gap-2 px-5 py-3 bg-gray-100 text-gray-700 rounded-xl hover:bg-gray-200 transition-colors font-medium"
<Plus size={20} /> >
일정 추가 <Bot size={20} />
</button> 봇 관리
</button>
<button
onClick={() => navigate('/admin/schedule/new')}
className="flex items-center gap-2 px-5 py-3 bg-primary text-white rounded-xl hover:bg-primary-dark transition-colors font-medium shadow-sm"
>
<Plus size={20} />
일정 추가
</button>
</div>
</div> </div>
<div className="grid grid-cols-3 gap-8"> <div className="grid grid-cols-3 gap-8">
{/* 왼쪽: 달력 + 카테고리 필터 */} {/* 왼쪽: 달력 + 카테고리 필터 */}
<div className="space-y-6"> <div className="space-y-6">
{/* 달력 (Schedule.jsx와 동일한 패턴) */} {/* 달력 (Schedule.jsx와 동일한 패턴) */}
<div ref={pickerRef} className="bg-white rounded-2xl shadow-sm pt-8 px-8 pb-6 relative"> <motion.div
ref={pickerRef}
animate={{ opacity: isSearchMode ? 0.4 : 1 }}
transition={{ duration: 0.2 }}
className={`bg-white rounded-2xl shadow-sm pt-8 px-8 pb-6 relative ${isSearchMode ? 'pointer-events-none' : ''}`}
>
{/* 달력 헤더 */} {/* 달력 헤더 */}
<div className="flex items-center justify-between mb-8"> <div className={`flex items-center justify-between mb-8 ${isSearchMode ? 'opacity-50' : ''}`}>
<button <button
onClick={prevMonth} onClick={prevMonth}
className="p-2 hover:bg-gray-100 rounded-full transition-colors" disabled={isSearchMode}
className={`p-2 rounded-full transition-colors ${isSearchMode ? 'cursor-not-allowed' : 'hover:bg-gray-100'}`}
> >
<ChevronLeft size={24} /> <ChevronLeft size={24} />
</button> </button>
<button <button
onClick={() => setShowYearMonthPicker(!showYearMonthPicker)} onClick={() => !isSearchMode && setShowYearMonthPicker(!showYearMonthPicker)}
className="flex items-center gap-1 text-xl font-bold hover:text-primary transition-colors" disabled={isSearchMode}
className={`flex items-center gap-1 text-xl font-bold transition-colors ${isSearchMode ? 'cursor-not-allowed' : 'hover:text-primary'}`}
> >
<span>{year}년 {month + 1}월</span> <span>{year}년 {month + 1}월</span>
<ChevronDown size={20} className={`transition-transform ${showYearMonthPicker ? 'rotate-180' : ''}`} /> <ChevronDown size={20} className={`transition-transform ${showYearMonthPicker ? 'rotate-180' : ''}`} />
</button> </button>
<button <button
onClick={nextMonth} onClick={nextMonth}
className="p-2 hover:bg-gray-100 rounded-full transition-colors" disabled={isSearchMode}
className={`p-2 rounded-full transition-colors ${isSearchMode ? 'cursor-not-allowed' : 'hover:bg-gray-100'}`}
> >
<ChevronRight size={24} /> <ChevronRight size={24} />
</button> </button>
@ -581,24 +661,29 @@ function AdminSchedule() {
const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`; const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
const isSelected = selectedDate === dateStr; const isSelected = selectedDate === dateStr;
const hasEvent = hasSchedule(day); const hasEvent = hasSchedule(day);
const eventColor = getScheduleColor(day);
const dayOfWeek = (firstDay + i) % 7; const dayOfWeek = (firstDay + i) % 7;
const isToday = new Date().toDateString() === new Date(year, month, day).toDateString(); const isToday = new Date().toDateString() === new Date(year, month, day).toDateString();
return ( return (
<button <button
key={day} key={day}
onClick={() => selectDate(day)} onClick={() => !isSearchMode && selectDate(day)}
className={`aspect-square flex flex-col items-center justify-center rounded-full text-base font-medium transition-all relative hover:bg-gray-100 disabled={isSearchMode}
${isSelected ? 'bg-primary text-white shadow-lg hover:bg-primary' : ''} className={`aspect-square flex flex-col items-center justify-center rounded-full text-base font-medium transition-all relative
${isSearchMode ? 'cursor-not-allowed opacity-50' : 'hover:bg-gray-100'}
${isSelected && !isSearchMode ? 'bg-primary text-white shadow-lg hover:bg-primary' : ''}
${isToday && !isSelected ? 'bg-primary/10 text-primary font-bold hover:bg-primary/20' : ''} ${isToday && !isSelected ? 'bg-primary/10 text-primary font-bold hover:bg-primary/20' : ''}
${dayOfWeek === 0 && !isSelected && !isToday ? 'text-red-500' : ''} ${dayOfWeek === 0 && !isSelected && !isToday ? 'text-red-500' : ''}
${dayOfWeek === 6 && !isSelected && !isToday ? 'text-blue-500' : ''} ${dayOfWeek === 6 && !isSelected && !isToday ? 'text-blue-500' : ''}
`} `}
> >
<span>{day}</span> <span>{day}</span>
{hasEvent && ( {/* 점: absolute로 위치 고정하여 글씨 위치에 영향 없음 */}
<span className={`w-1.5 h-1.5 rounded-full mt-0.5 ${isSelected ? 'bg-white' : 'bg-primary'}`} /> <span
)} className={`absolute bottom-1 w-1.5 h-1.5 rounded-full ${hasEvent ? '' : 'opacity-0'}`}
style={{ backgroundColor: isSelected ? 'white' : (eventColor || 'transparent') }}
/>
</button> </button>
); );
})} })}
@ -626,19 +711,25 @@ function AdminSchedule() {
<button <button
onClick={showAll} onClick={showAll}
className={`px-4 py-2 rounded-lg transition-colors ${ className={`px-4 py-2 rounded-lg transition-colors ${
selectedDate isSearchMode
? 'bg-primary text-white hover:bg-primary-dark' ? 'bg-gray-100 text-gray-400 cursor-not-allowed opacity-50'
: 'bg-gray-100 text-gray-400 cursor-default' : selectedDate
? 'bg-primary text-white hover:bg-primary-dark'
: 'bg-gray-100 text-gray-400 cursor-default'
}`} }`}
disabled={!selectedDate} disabled={!selectedDate || isSearchMode}
> >
전체 보기 전체 보기
</button> </button>
</div> </div>
</div> </motion.div>
{/* 카테고리 필터 */} {/* 카테고리 필터 */}
<div className="bg-white rounded-2xl shadow-sm p-6"> <motion.div
animate={{ opacity: isSearchMode && !searchTerm ? 0.4 : 1 }}
transition={{ duration: 0.2 }}
className={`bg-white rounded-2xl shadow-sm p-6 ${isSearchMode && !searchTerm ? 'pointer-events-none' : ''}`}
>
<h3 className="font-bold text-gray-900 mb-4">카테고리</h3> <h3 className="font-bold text-gray-900 mb-4">카테고리</h3>
<div className="space-y-2"> <div className="space-y-2">
{categories.map(category => { {categories.map(category => {
@ -677,70 +768,142 @@ function AdminSchedule() {
<span className="font-medium">{category.name}</span> <span className="font-medium">{category.name}</span>
<span className="ml-auto text-sm text-gray-400"> <span className="ml-auto text-sm text-gray-400">
{category.id === 'all' {category.id === 'all'
? schedules.length ? getTotalCount()
: schedules.filter(s => s.category_id === category.id).length : getSearchCategoryCount(category.id)
} }
</span> </span>
</button> </button>
); );
})} })}
</div> </div>
</div> </motion.div>
</div> </div>
{/* 오른쪽: 일정 목록 */} {/* 오른쪽: 일정 목록 */}
<div className="col-span-2"> <div className="col-span-2">
{/* 검색 */}
<div className="bg-white rounded-2xl shadow-sm p-4 mb-6">
<div className="relative">
<Search size={20} className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400" />
<input
type="text"
placeholder="일정 검색..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full pl-12 pr-4 py-3 bg-gray-50 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
/>
</div>
</div>
{/* 일정 목록 */} {/* 일정 목록 */}
<div className="bg-white rounded-2xl shadow-sm overflow-hidden"> <div className="bg-white rounded-2xl shadow-sm overflow-hidden">
<div className="p-6 border-b border-gray-100"> <div className="p-5 border-b border-gray-100">
<div className="flex items-center justify-between"> <div className="flex items-center gap-3">
{selectedCategories.length > 1 ? ( <AnimatePresence mode="wait">
<Tooltip {isSearchMode ? (
text={ /* 검색 모드 */
<div className="flex flex-col gap-1.5"> <motion.div
{selectedCategories.map(id => { key="search-mode"
const cat = categories.find(c => c.id === id); initial={{ opacity: 0, x: -10 }}
if (!cat) return null; animate={{ opacity: 1, x: 0 }}
return ( exit={{ opacity: 0, x: -10 }}
<div key={id} className="flex items-center gap-2"> transition={{ duration: 0.15 }}
<span className="flex items-center gap-3 flex-1"
className={`w-2.5 h-2.5 rounded-full flex-shrink-0 ${getColorStyle(cat.color).className || ''}`} >
style={getColorStyle(cat.color).style} <button
/> onClick={() => {
<span>{cat.name}</span> setIsSearchMode(false);
</div> setSearchInput('');
); setSearchTerm('');
})} }}
</div> className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
} >
> <ArrowLeft size={20} className="text-gray-500" />
<h3 className="font-bold text-gray-900"> </button>
{`${selectedCategories.length}개 카테고리 선택됨`} <input
</h3> type="text"
</Tooltip> placeholder="일정 검색..."
) : ( value={searchInput}
<h3 className="font-bold text-gray-900"> autoFocus
{selectedCategories.length === 0 onChange={(e) => setSearchInput(e.target.value)}
? '전체 일정' onKeyDown={(e) => {
: categories.find(c => c.id === selectedCategories[0])?.name if (e.key === 'Enter') {
} setSearchTerm(searchInput);
</h3> searchSchedules(searchInput);
)} } else if (e.key === 'Escape') {
<span className="text-sm text-gray-500">{filteredSchedules.length}개의 일정</span> setIsSearchMode(false);
setSearchInput('');
setSearchTerm('');
setSearchResults([]);
}
}}
className="flex-1 bg-transparent focus:outline-none text-gray-700 placeholder-gray-400"
/>
<button
onClick={() => {
setSearchTerm(searchInput);
searchSchedules(searchInput);
}}
disabled={searchLoading}
className="px-4 py-1.5 bg-primary text-white text-sm font-medium rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50"
>
{searchLoading ? '...' : '검색'}
</button>
</motion.div>
) : (
/* 일반 모드 */
<motion.div
key="normal-mode"
initial={{ opacity: 0, x: 10 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: 10 }}
transition={{ duration: 0.15 }}
className="flex items-center gap-3 flex-1"
>
<button
onClick={() => setIsSearchMode(true)}
className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
>
<Search size={20} className="text-gray-500" />
</button>
<span className="font-medium text-gray-900">
{selectedDate
? (() => {
const d = new Date(selectedDate);
const dayNames = ['일', '월', '화', '수', '목', '금', '토'];
return `${d.getMonth() + 1}월 ${d.getDate()}일 ${dayNames[d.getDay()]}요일`;
})()
: `${month + 1}월 전체 일정`
}
</span>
<div className="flex-1" />
{/* 카테고리 필터 */}
{selectedCategories.length > 0 && (
<div className="relative" ref={categoryTooltipRef}>
<button
onClick={() => setShowCategoryTooltip(!showCategoryTooltip)}
className="flex items-center gap-1 px-2 py-1 bg-gray-100 rounded-md text-sm text-gray-600 hover:bg-gray-200 transition-colors"
>
<Tag size={14} />
<span>{selectedCategories.length}개</span>
</button>
<AnimatePresence>
{showCategoryTooltip && (
<motion.div
initial={{ opacity: 0, y: -5 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -5 }}
transition={{ duration: 0.15 }}
className="absolute top-full right-0 mt-1 bg-white rounded-lg shadow-lg border border-gray-200 p-3 z-10 min-w-[120px]"
>
{selectedCategories.map(id => {
const cat = categories.find(c => c.id === id);
if (!cat) return null;
return (
<div key={id} className="flex items-center gap-2 py-1">
<span
className="w-2 h-2 rounded-full"
style={{ backgroundColor: cat.color?.startsWith('#') ? cat.color : undefined }}
/>
<span className="text-sm">{cat.name}</span>
</div>
);
})}
</motion.div>
)}
</AnimatePresence>
</div>
)}
<span className="text-sm text-gray-400">{filteredSchedules.length}개</span>
</motion.div>
)}
</AnimatePresence>
</div> </div>
</div> </div>
@ -760,12 +923,18 @@ function AdminSchedule() {
key={schedule.id} key={schedule.id}
initial={{ opacity: 0, y: 10 }} initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.05 }} transition={{ delay: Math.min(index, 10) * 0.03 }}
className="p-6 hover:bg-gray-50 transition-colors group" className="p-6 hover:bg-gray-50 transition-colors group"
> >
<div className="flex items-start gap-4"> <div className="flex items-start gap-4">
{/* 날짜 */} {/* 날짜 */}
<div className="w-16 text-center flex-shrink-0"> <div className="w-20 text-center flex-shrink-0">
{/* 검색 모드일 때 년/월 표시 */}
{isSearchMode && searchTerm && (
<div className="text-xs text-gray-400 mb-0.5">
{new Date(schedule.date).getFullYear()}.{new Date(schedule.date).getMonth() + 1}
</div>
)}
<div className="text-2xl font-bold text-gray-900"> <div className="text-2xl font-bold text-gray-900">
{new Date(schedule.date).getDate()} {new Date(schedule.date).getDate()}
</div> </div>
@ -777,7 +946,10 @@ function AdminSchedule() {
{/* 내용 */} {/* 내용 */}
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-1"> <div className="flex items-center gap-2 mb-1">
<span className={`px-2 py-0.5 text-xs font-medium rounded-full ${getCategoryColor(schedule.category_color)}`}> <span
className="px-2 py-0.5 text-xs font-medium rounded-full text-white"
style={{ backgroundColor: schedule.category_color || '#808080' }}
>
{schedule.category_name || '미지정'} {schedule.category_name || '미지정'}
</span> </span>
<span className="text-sm text-gray-400">{schedule.time?.slice(0, 5)}</span> <span className="text-sm text-gray-400">{schedule.time?.slice(0, 5)}</span>