feat(schedule): 공개 일정 페이지에 검색 기능 추가
- 헤더에 검색 토글 UI 추가 (밑줄 스타일 검색창) - API 검색 기능 (/api/admin/schedules?search=) 연동 - 검색 모드에서 달력/카테고리 비활성화 (framer-motion animate) - 검색 결과에 년.월 형식 날짜 표시 (2025.4) - 카테고리 개수: 검색 시 결과 기준, 일반 시 해당 월 기준 - 달력/카테고리 구조 분리하여 독립 제어 - AdminSchedule.jsx도 동일한 비활성화 방식 적용
This commit is contained in:
parent
dff43126c4
commit
387db937b0
2 changed files with 824 additions and 322 deletions
|
|
@ -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 { Clock, MapPin, Users, ChevronLeft, ChevronRight, ChevronDown } from 'lucide-react';
|
||||
import { schedules } from '../../data/dummy';
|
||||
import { Clock, ChevronLeft, ChevronRight, ChevronDown, Tag, Search, ArrowLeft } from 'lucide-react';
|
||||
|
||||
function Schedule() {
|
||||
const navigate = useNavigate();
|
||||
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 [viewMode, setViewMode] = useState('yearMonth'); // 'yearMonth' | 'months'
|
||||
const [slideDirection, setSlideDirection] = useState(0); // -1: prev, 1: next
|
||||
const [viewMode, setViewMode] = useState('yearMonth');
|
||||
const [slideDirection, setSlideDirection] = useState(0);
|
||||
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(() => {
|
||||
const handleClickOutside = (event) => {
|
||||
|
|
@ -18,16 +88,14 @@ function Schedule() {
|
|||
setShowYearMonthPicker(false);
|
||||
setViewMode('yearMonth');
|
||||
}
|
||||
};
|
||||
|
||||
if (showYearMonthPicker) {
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
if (categoryRef.current && !categoryRef.current.contains(event.target)) {
|
||||
setShowCategoryTooltip(false);
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
};
|
||||
}, [showYearMonthPicker]);
|
||||
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
// 달력 관련 함수
|
||||
const getDaysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();
|
||||
|
|
@ -40,8 +108,17 @@ function Schedule() {
|
|||
|
||||
const days = ['일', '월', '화', '수', '목', '금', '토'];
|
||||
|
||||
// 스케줄이 있는 날짜 목록
|
||||
const scheduleDates = schedules.map(s => s.date);
|
||||
// 스케줄이 있는 날짜 목록 (ISO 형식에서 YYYY-MM-DD 추출)
|
||||
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 dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
|
||||
|
|
@ -51,11 +128,13 @@ function Schedule() {
|
|||
const prevMonth = () => {
|
||||
setSlideDirection(-1);
|
||||
setCurrentDate(new Date(year, month - 1, 1));
|
||||
setSelectedDate(null); // 월 변경 시 초기화
|
||||
};
|
||||
|
||||
const nextMonth = () => {
|
||||
setSlideDirection(1);
|
||||
setCurrentDate(new Date(year, month + 1, 1));
|
||||
setSelectedDate(null); // 월 변경 시 초기화
|
||||
};
|
||||
|
||||
const selectDate = (day) => {
|
||||
|
|
@ -63,23 +142,63 @@ function Schedule() {
|
|||
setSelectedDate(selectedDate === dateStr ? null : dateStr);
|
||||
};
|
||||
|
||||
// 년도 선택 시 월 선택 모드로 전환
|
||||
const selectYear = (newYear) => {
|
||||
setCurrentDate(new Date(newYear, month, 1));
|
||||
setViewMode('months');
|
||||
};
|
||||
|
||||
// 월 선택 시 적용 후 닫기
|
||||
const selectMonth = (newMonth) => {
|
||||
setCurrentDate(new Date(year, newMonth, 1));
|
||||
setShowYearMonthPicker(false);
|
||||
setViewMode('yearMonth');
|
||||
};
|
||||
|
||||
// 필터링된 스케줄
|
||||
const filteredSchedules = selectedDate
|
||||
? schedules.filter(s => s.date === selectedDate)
|
||||
: schedules;
|
||||
// 카테고리 토글
|
||||
const toggleCategory = (categoryId) => {
|
||||
setSelectedCategories(prev =>
|
||||
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 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 yearRange = Array.from({ length: 12 }, (_, i) => startYear + i);
|
||||
|
||||
// 현재 년도/월 확인 함수
|
||||
const isCurrentYear = (y) => new Date().getFullYear() === y;
|
||||
const isCurrentMonth = (m) => {
|
||||
const today = new Date();
|
||||
return today.getFullYear() === year && today.getMonth() === m;
|
||||
};
|
||||
|
||||
// 월 배열
|
||||
const monthNames = ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'];
|
||||
|
||||
// 년도 범위 이동
|
||||
const prevYearRange = () => 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 (
|
||||
<div className="py-16">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
|
|
@ -132,11 +281,14 @@ function Schedule() {
|
|||
</div>
|
||||
|
||||
<div className="flex gap-8">
|
||||
{/* 달력 - 더 큰 사이즈 */}
|
||||
{/* 왼쪽: 달력 + 카테고리 */}
|
||||
<div className="w-[400px] flex-shrink-0">
|
||||
{/* 달력 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
className="w-[400px] flex-shrink-0"
|
||||
animate={{ opacity: isSearchMode ? 0.4 : 1, x: 0 }}
|
||||
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}>
|
||||
{/* 달력 헤더 */}
|
||||
|
|
@ -162,7 +314,7 @@ function Schedule() {
|
|||
</button>
|
||||
</div>
|
||||
|
||||
{/* 년/월 선택 팝업 - 달력 카드 중앙 정렬 */}
|
||||
{/* 년/월 선택 팝업 */}
|
||||
<AnimatePresence>
|
||||
{showYearMonthPicker && (
|
||||
<motion.div
|
||||
|
|
@ -171,35 +323,21 @@ function Schedule() {
|
|||
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"
|
||||
>
|
||||
{/* 헤더 - 년도 범위 이동 */}
|
||||
<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 onClick={prevYearRange} className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors">
|
||||
<ChevronLeft size={20} className="text-gray-600" />
|
||||
</button>
|
||||
<span className="font-medium text-gray-900">
|
||||
{viewMode === 'yearMonth' ? `${yearRange[0]} - ${yearRange[yearRange.length - 1]}` : `${year}년`}
|
||||
</span>
|
||||
<button
|
||||
onClick={nextYearRange}
|
||||
className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
>
|
||||
<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">
|
||||
{viewMode === 'yearMonth' && (
|
||||
<motion.div
|
||||
key="yearMonth"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
>
|
||||
{/* 년도 선택 */}
|
||||
<motion.div key="yearMonth" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.15 }}>
|
||||
<div className="text-center text-sm text-gray-500 mb-3">년도</div>
|
||||
<div className="grid grid-cols-4 gap-2 mb-4">
|
||||
{yearRange.map((y) => (
|
||||
|
|
@ -207,19 +345,15 @@ function Schedule() {
|
|||
key={y}
|
||||
onClick={() => selectYear(y)}
|
||||
className={`py-2 text-sm rounded-lg transition-colors ${
|
||||
year === y
|
||||
? 'bg-primary text-white'
|
||||
: isCurrentYear(y) && year !== y
|
||||
? 'border border-primary text-primary hover:bg-primary/10'
|
||||
: 'hover:bg-gray-100 text-gray-700'
|
||||
year === y ? 'bg-primary text-white' :
|
||||
isCurrentYear(y) && year !== y ? 'border border-primary text-primary hover:bg-primary/10' :
|
||||
'hover:bg-gray-100 text-gray-700'
|
||||
}`}
|
||||
>
|
||||
{y}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 월 선택 */}
|
||||
<div className="text-center text-sm text-gray-500 mb-3">월</div>
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
{monthNames.map((m, i) => (
|
||||
|
|
@ -227,11 +361,9 @@ function Schedule() {
|
|||
key={m}
|
||||
onClick={() => selectMonth(i)}
|
||||
className={`py-2 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'
|
||||
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}
|
||||
|
|
@ -240,16 +372,8 @@ function Schedule() {
|
|||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{viewMode === 'months' && (
|
||||
<motion.div
|
||||
key="months"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
>
|
||||
{/* 월 선택 */}
|
||||
<motion.div key="months" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.15 }}>
|
||||
<div className="text-center text-sm text-gray-500 mb-3">월 선택</div>
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
{monthNames.map((m, i) => (
|
||||
|
|
@ -257,11 +381,9 @@ function Schedule() {
|
|||
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'
|
||||
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}
|
||||
|
|
@ -275,7 +397,7 @@ function Schedule() {
|
|||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* 요일 헤더 + 날짜 그리드 (함께 슬라이드) */}
|
||||
{/* 요일 헤더 + 날짜 그리드 */}
|
||||
<AnimatePresence mode="wait" initial={false}>
|
||||
<motion.div
|
||||
key={`${year}-${month}`}
|
||||
|
|
@ -285,7 +407,6 @@ function Schedule() {
|
|||
transition={{ duration: 0.08 }}
|
||||
layout
|
||||
>
|
||||
{/* 요일 헤더 */}
|
||||
<div className="grid grid-cols-7 mb-4">
|
||||
{days.map((day, i) => (
|
||||
<div
|
||||
|
|
@ -299,7 +420,6 @@ function Schedule() {
|
|||
))}
|
||||
</div>
|
||||
|
||||
{/* 날짜 그리드 */}
|
||||
<div className="grid grid-cols-7 gap-1">
|
||||
{/* 전달 날짜 */}
|
||||
{Array.from({ length: firstDay }).map((_, i) => {
|
||||
|
|
@ -318,6 +438,7 @@ function Schedule() {
|
|||
const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
|
||||
const isSelected = selectedDate === dateStr;
|
||||
const hasEvent = hasSchedule(day);
|
||||
const eventColor = getScheduleColor(day);
|
||||
const dayOfWeek = (firstDay + i) % 7;
|
||||
const isToday = new Date().toDateString() === new Date(year, month, day).toDateString();
|
||||
|
||||
|
|
@ -333,14 +454,16 @@ function Schedule() {
|
|||
`}
|
||||
>
|
||||
<span>{day}</span>
|
||||
{hasEvent && (
|
||||
<span className={`w-1.5 h-1.5 rounded-full mt-0.5 ${isSelected ? 'bg-white' : 'bg-primary'}`} />
|
||||
)}
|
||||
{/* 점: absolute로 위치 고정하여 글씨 위치에 영향 없음 */}
|
||||
<span
|
||||
className={`absolute bottom-1 w-1.5 h-1.5 rounded-full ${hasEvent ? '' : 'opacity-0'}`}
|
||||
style={{ backgroundColor: isSelected ? 'white' : (eventColor || 'transparent') }}
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* 다음달 날짜 (마지막 주만 채우기) */}
|
||||
{/* 다음달 날짜 */}
|
||||
{(() => {
|
||||
const totalCells = firstDay + daysInMonth;
|
||||
const remainder = totalCells % 7;
|
||||
|
|
@ -376,43 +499,249 @@ function Schedule() {
|
|||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* 카테고리 필터 */}
|
||||
<motion.div
|
||||
animate={{ opacity: isSearchMode && searchResults.length === 0 ? 0.4 : 1 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className={`bg-white rounded-2xl shadow-sm p-6 mt-4 ${isSearchMode && searchResults.length === 0 ? 'pointer-events-none' : ''}`}
|
||||
>
|
||||
<h3 className="font-bold text-gray-900 mb-4">카테고리</h3>
|
||||
<div className="space-y-1">
|
||||
{/* 전체 */}
|
||||
<button
|
||||
onClick={() => setSelectedCategories([])}
|
||||
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="flex items-center gap-2">
|
||||
<span className="w-3 h-3 rounded-full bg-gray-400" />
|
||||
<span>전체</span>
|
||||
</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>
|
||||
|
||||
{/* 개별 카테고리 */}
|
||||
{categories.map(category => {
|
||||
// 검색 모드에서는 검색 결과 기준, 일반 모드에서는 해당 월 기준
|
||||
const count = isSearchMode && searchTerm
|
||||
? searchResults.filter(s => s.category_id === category.id).length
|
||||
: schedules.filter(s => {
|
||||
const scheduleDate = s.date ? s.date.split('T')[0] : '';
|
||||
return scheduleDate.startsWith(currentYearMonth) && s.category_id === category.id;
|
||||
}).length;
|
||||
const isSelected = selectedCategories.includes(category.id);
|
||||
return (
|
||||
<button
|
||||
key={category.id}
|
||||
onClick={() => toggleCategory(category.id)}
|
||||
className={`w-full flex items-center justify-between px-3 py-3 rounded-lg transition-colors ${
|
||||
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 space-y-4">
|
||||
{filteredSchedules.length > 0 ? (
|
||||
<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: index * 0.1 }}
|
||||
className="flex items-stretch bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow overflow-hidden"
|
||||
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 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="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-3">{schedule.title}</h3>
|
||||
<h3 className="font-bold text-lg mb-2">{schedule.title}</h3>
|
||||
|
||||
<div className="flex flex-wrap gap-4 text-sm text-gray-500">
|
||||
<div className="flex flex-wrap gap-3 text-sm text-gray-500">
|
||||
{schedule.time && (
|
||||
<div className="flex items-center gap-1">
|
||||
<Clock size={14} className="text-primary" />
|
||||
<span>{schedule.time}</span>
|
||||
<Clock size={14} style={{ color: categoryColor }} />
|
||||
<span>{schedule.time.slice(0, 5)}</span>
|
||||
</div>
|
||||
)}
|
||||
{categoryName && (
|
||||
<div className="flex items-center gap-1">
|
||||
<MapPin size={14} className="text-primary" />
|
||||
<span>{schedule.platform}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Users size={14} className="text-primary" />
|
||||
<span>{schedule.members.join(', ')}</span>
|
||||
<span
|
||||
className="w-2 h-2 rounded-full"
|
||||
style={{ backgroundColor: categoryColor }}
|
||||
/>
|
||||
<span>{categoryName}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
|
@ -427,6 +756,7 @@ function Schedule() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { useNavigate, Link } from 'react-router-dom';
|
|||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import {
|
||||
LogOut, Home, ChevronRight, Calendar, Plus, Edit2, Trash2,
|
||||
ChevronLeft, Search, ChevronDown, AlertTriangle
|
||||
ChevronLeft, Search, ChevronDown, AlertTriangle, Bot, Tag, ArrowLeft
|
||||
} from 'lucide-react';
|
||||
import Toast from '../../../components/Toast';
|
||||
import Tooltip from '../../../components/Tooltip';
|
||||
|
|
@ -13,16 +13,22 @@ function AdminSchedule() {
|
|||
const [loading, setLoading] = useState(false);
|
||||
const [user, setUser] = 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 [selectedDate, setSelectedDate] = useState(null);
|
||||
const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
|
||||
const [currentDate, setCurrentDate] = useState(new Date());
|
||||
const [slideDirection, setSlideDirection] = useState(0);
|
||||
|
||||
// 년월 선택 관련 (Schedule.jsx와 동일한 패턴)
|
||||
const [showYearMonthPicker, setShowYearMonthPicker] = useState(false);
|
||||
const [showCategoryTooltip, setShowCategoryTooltip] = useState(false);
|
||||
const [viewMode, setViewMode] = useState('yearMonth'); // 'yearMonth' | 'months'
|
||||
const pickerRef = useRef(null);
|
||||
const categoryTooltipRef = useRef(null);
|
||||
|
||||
// 달력 관련
|
||||
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 자동 숨김
|
||||
useEffect(() => {
|
||||
if (toast) {
|
||||
|
|
@ -157,6 +175,24 @@ function AdminSchedule() {
|
|||
}
|
||||
};
|
||||
|
||||
// 검색 함수 (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(() => {
|
||||
const handleClickOutside = (event) => {
|
||||
|
|
@ -164,14 +200,17 @@ function AdminSchedule() {
|
|||
setShowYearMonthPicker(false);
|
||||
setViewMode('yearMonth');
|
||||
}
|
||||
if (categoryTooltipRef.current && !categoryTooltipRef.current.contains(event.target)) {
|
||||
setShowCategoryTooltip(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (showYearMonthPicker) {
|
||||
if (showYearMonthPicker || showCategoryTooltip) {
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
}
|
||||
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, [showYearMonthPicker]);
|
||||
}, [showYearMonthPicker, showCategoryTooltip]);
|
||||
|
||||
const handleLogout = () => {
|
||||
localStorage.removeItem('adminToken');
|
||||
|
|
@ -183,11 +222,15 @@ function AdminSchedule() {
|
|||
const prevMonth = () => {
|
||||
setSlideDirection(-1);
|
||||
setCurrentDate(new Date(year, month - 1, 1));
|
||||
setSelectedDate(null);
|
||||
setSchedules([]); // 이전 달 데이터 즉시 초기화
|
||||
};
|
||||
|
||||
const nextMonth = () => {
|
||||
setSlideDirection(1);
|
||||
setCurrentDate(new Date(year, month + 1, 1));
|
||||
setSelectedDate(null);
|
||||
setSchedules([]); // 이전 달 데이터 즉시 초기화
|
||||
};
|
||||
|
||||
// 년도 범위 이동
|
||||
|
|
@ -260,17 +303,37 @@ function AdminSchedule() {
|
|||
}
|
||||
};
|
||||
|
||||
// 필터링된 일정
|
||||
const filteredSchedules = schedules.filter(schedule => {
|
||||
const matchesSearch = schedule.title.toLowerCase().includes(searchTerm.toLowerCase());
|
||||
// 카테고리 필터링: 빈 배열이면 전체, 아니면 선택된 카테고리들에 포함되는지 확인
|
||||
// 검색어 정규화 (대소문자, 띄어쓰기, 특수문자 무시)
|
||||
const normalizeForSearch = (str) => {
|
||||
return (str || '').toLowerCase().replace(/[\s\-_.,!?#@]/g, '');
|
||||
};
|
||||
|
||||
// 일정 목록 (검색 모드일 때 searchResults, 일반 모드일 때 로컬 필터링)
|
||||
const filteredSchedules = isSearchMode
|
||||
? (searchTerm ? searchResults : []) // 검색 모드: 검색 전엔 빈 목록, 검색 후엔 API 결과
|
||||
: 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 matchesSearch && matchesCategory && matchesDate;
|
||||
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 (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<Toast toast={toast} onClose={() => setToast(null)} />
|
||||
|
|
@ -389,6 +452,14 @@ function AdminSchedule() {
|
|||
<h1 className="text-3xl font-bold text-gray-900 mb-2">일정 관리</h1>
|
||||
<p className="text-gray-500">fromis_9의 일정을 관리합니다</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
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"
|
||||
>
|
||||
<Bot size={20} />
|
||||
봇 관리
|
||||
</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"
|
||||
|
|
@ -397,30 +468,39 @@ function AdminSchedule() {
|
|||
일정 추가
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-8">
|
||||
{/* 왼쪽: 달력 + 카테고리 필터 */}
|
||||
<div className="space-y-6">
|
||||
{/* 달력 (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
|
||||
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} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowYearMonthPicker(!showYearMonthPicker)}
|
||||
className="flex items-center gap-1 text-xl font-bold hover:text-primary transition-colors"
|
||||
onClick={() => !isSearchMode && setShowYearMonthPicker(!showYearMonthPicker)}
|
||||
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>
|
||||
<ChevronDown size={20} className={`transition-transform ${showYearMonthPicker ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
<button
|
||||
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} />
|
||||
</button>
|
||||
|
|
@ -581,24 +661,29 @@ function AdminSchedule() {
|
|||
const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
|
||||
const isSelected = selectedDate === dateStr;
|
||||
const hasEvent = hasSchedule(day);
|
||||
const eventColor = getScheduleColor(day);
|
||||
const dayOfWeek = (firstDay + i) % 7;
|
||||
const isToday = new Date().toDateString() === new Date(year, month, day).toDateString();
|
||||
|
||||
return (
|
||||
<button
|
||||
key={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
|
||||
${isSelected ? 'bg-primary text-white shadow-lg hover:bg-primary' : ''}
|
||||
onClick={() => !isSearchMode && selectDate(day)}
|
||||
disabled={isSearchMode}
|
||||
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' : ''}
|
||||
${dayOfWeek === 0 && !isSelected && !isToday ? 'text-red-500' : ''}
|
||||
${dayOfWeek === 6 && !isSelected && !isToday ? 'text-blue-500' : ''}
|
||||
`}
|
||||
>
|
||||
<span>{day}</span>
|
||||
{hasEvent && (
|
||||
<span className={`w-1.5 h-1.5 rounded-full mt-0.5 ${isSelected ? 'bg-white' : 'bg-primary'}`} />
|
||||
)}
|
||||
{/* 점: absolute로 위치 고정하여 글씨 위치에 영향 없음 */}
|
||||
<span
|
||||
className={`absolute bottom-1 w-1.5 h-1.5 rounded-full ${hasEvent ? '' : 'opacity-0'}`}
|
||||
style={{ backgroundColor: isSelected ? 'white' : (eventColor || 'transparent') }}
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
|
|
@ -626,19 +711,25 @@ function AdminSchedule() {
|
|||
<button
|
||||
onClick={showAll}
|
||||
className={`px-4 py-2 rounded-lg transition-colors ${
|
||||
selectedDate
|
||||
isSearchMode
|
||||
? 'bg-gray-100 text-gray-400 cursor-not-allowed opacity-50'
|
||||
: selectedDate
|
||||
? 'bg-primary text-white hover:bg-primary-dark'
|
||||
: 'bg-gray-100 text-gray-400 cursor-default'
|
||||
}`}
|
||||
disabled={!selectedDate}
|
||||
disabled={!selectedDate || isSearchMode}
|
||||
>
|
||||
전체 보기
|
||||
</button>
|
||||
</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>
|
||||
<div className="space-y-2">
|
||||
{categories.map(category => {
|
||||
|
|
@ -677,70 +768,142 @@ function AdminSchedule() {
|
|||
<span className="font-medium">{category.name}</span>
|
||||
<span className="ml-auto text-sm text-gray-400">
|
||||
{category.id === 'all'
|
||||
? schedules.length
|
||||
: schedules.filter(s => s.category_id === category.id).length
|
||||
? getTotalCount()
|
||||
: getSearchCategoryCount(category.id)
|
||||
}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* 오른쪽: 일정 목록 */}
|
||||
<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" />
|
||||
{/* 일정 목록 */}
|
||||
<div className="bg-white rounded-2xl shadow-sm overflow-hidden">
|
||||
<div className="p-5 border-b border-gray-100">
|
||||
<div className="flex items-center gap-3">
|
||||
<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('');
|
||||
}}
|
||||
className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
>
|
||||
<ArrowLeft size={20} className="text-gray-500" />
|
||||
</button>
|
||||
<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"
|
||||
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>
|
||||
</div>
|
||||
|
||||
{/* 일정 목록 */}
|
||||
<div className="bg-white rounded-2xl shadow-sm overflow-hidden">
|
||||
<div className="p-6 border-b border-gray-100">
|
||||
<div className="flex items-center justify-between">
|
||||
{selectedCategories.length > 1 ? (
|
||||
<Tooltip
|
||||
text={
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<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">
|
||||
<div key={id} className="flex items-center gap-2 py-1">
|
||||
<span
|
||||
className={`w-2.5 h-2.5 rounded-full flex-shrink-0 ${getColorStyle(cat.color).className || ''}`}
|
||||
style={getColorStyle(cat.color).style}
|
||||
className="w-2 h-2 rounded-full"
|
||||
style={{ backgroundColor: cat.color?.startsWith('#') ? cat.color : undefined }}
|
||||
/>
|
||||
<span>{cat.name}</span>
|
||||
<span className="text-sm">{cat.name}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<h3 className="font-bold text-gray-900">
|
||||
{`${selectedCategories.length}개 카테고리 선택됨`}
|
||||
</h3>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<h3 className="font-bold text-gray-900">
|
||||
{selectedCategories.length === 0
|
||||
? '전체 일정'
|
||||
: categories.find(c => c.id === selectedCategories[0])?.name
|
||||
}
|
||||
</h3>
|
||||
</motion.div>
|
||||
)}
|
||||
<span className="text-sm text-gray-500">{filteredSchedules.length}개의 일정</span>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
)}
|
||||
<span className="text-sm text-gray-400">{filteredSchedules.length}개</span>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -760,12 +923,18 @@ function AdminSchedule() {
|
|||
key={schedule.id}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
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"
|
||||
>
|
||||
<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">
|
||||
{new Date(schedule.date).getDate()}
|
||||
</div>
|
||||
|
|
@ -777,7 +946,10 @@ function AdminSchedule() {
|
|||
{/* 내용 */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<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 || '미지정'}
|
||||
</span>
|
||||
<span className="text-sm text-gray-400">{schedule.time?.slice(0, 5)}</span>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue