325 lines
13 KiB
React
325 lines
13 KiB
React
|
import { useState, useRef, useEffect, useMemo } from 'react';
|
||
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
||
|
|
import { ChevronLeft, ChevronRight, ChevronDown } from 'lucide-react';
|
||
|
|
import { getTodayKST, dayjs } from '@/utils';
|
||
|
|
|
||
|
|
const WEEKDAYS = ['일', '월', '화', '수', '목', '금', '토'];
|
||
|
|
const MONTHS = ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'];
|
||
|
|
const MIN_YEAR = 2017;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 달력 컴포넌트
|
||
|
|
* @param {Date} currentDate - 현재 표시 중인 년/월
|
||
|
|
* @param {function} onDateChange - 년/월 변경 핸들러
|
||
|
|
* @param {string} selectedDate - 선택된 날짜 (YYYY-MM-DD)
|
||
|
|
* @param {function} onSelectDate - 날짜 선택 핸들러
|
||
|
|
* @param {Array} schedules - 일정 목록 (점 표시용)
|
||
|
|
* @param {function} getCategoryColor - 카테고리 색상 가져오기
|
||
|
|
* @param {boolean} disabled - 비활성화 여부
|
||
|
|
*/
|
||
|
|
function Calendar({
|
||
|
|
currentDate,
|
||
|
|
onDateChange,
|
||
|
|
selectedDate,
|
||
|
|
onSelectDate,
|
||
|
|
schedules = [],
|
||
|
|
getCategoryColor,
|
||
|
|
disabled = false,
|
||
|
|
}) {
|
||
|
|
const [showYearMonthPicker, setShowYearMonthPicker] = useState(false);
|
||
|
|
const [slideDirection, setSlideDirection] = useState(0);
|
||
|
|
const [yearRangeStart, setYearRangeStart] = useState(MIN_YEAR);
|
||
|
|
const pickerRef = useRef(null);
|
||
|
|
|
||
|
|
const year = currentDate.getFullYear();
|
||
|
|
const month = currentDate.getMonth();
|
||
|
|
|
||
|
|
// 외부 클릭 시 팝업 닫기
|
||
|
|
useEffect(() => {
|
||
|
|
const handleClickOutside = (event) => {
|
||
|
|
if (pickerRef.current && !pickerRef.current.contains(event.target)) {
|
||
|
|
setShowYearMonthPicker(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
document.addEventListener('mousedown', handleClickOutside);
|
||
|
|
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
// 달력 계산
|
||
|
|
const getDaysInMonth = (y, m) => new Date(y, m + 1, 0).getDate();
|
||
|
|
const getFirstDayOfMonth = (y, m) => new Date(y, m, 1).getDay();
|
||
|
|
|
||
|
|
const daysInMonth = getDaysInMonth(year, month);
|
||
|
|
const firstDay = getFirstDayOfMonth(year, month);
|
||
|
|
|
||
|
|
// 일정 날짜별 맵 (O(1) 조회용)
|
||
|
|
const scheduleDateMap = useMemo(() => {
|
||
|
|
const map = new Map();
|
||
|
|
schedules.forEach((s) => {
|
||
|
|
const dateStr = s.date ? s.date.split('T')[0] : '';
|
||
|
|
if (!map.has(dateStr)) {
|
||
|
|
map.set(dateStr, []);
|
||
|
|
}
|
||
|
|
map.get(dateStr).push(s);
|
||
|
|
});
|
||
|
|
return map;
|
||
|
|
}, [schedules]);
|
||
|
|
|
||
|
|
// 2017년 1월 이전으로 이동 불가
|
||
|
|
const canGoPrevMonth = !(year === MIN_YEAR && month === 0);
|
||
|
|
|
||
|
|
const prevMonth = () => {
|
||
|
|
if (!canGoPrevMonth) return;
|
||
|
|
setSlideDirection(-1);
|
||
|
|
const newDate = new Date(year, month - 1, 1);
|
||
|
|
onDateChange(newDate);
|
||
|
|
// 이번달이면 오늘, 다른 달이면 1일 선택
|
||
|
|
const today = new Date();
|
||
|
|
if (newDate.getFullYear() === today.getFullYear() && newDate.getMonth() === today.getMonth()) {
|
||
|
|
onSelectDate(getTodayKST());
|
||
|
|
} else {
|
||
|
|
onSelectDate(`${newDate.getFullYear()}-${String(newDate.getMonth() + 1).padStart(2, '0')}-01`);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const nextMonth = () => {
|
||
|
|
setSlideDirection(1);
|
||
|
|
const newDate = new Date(year, month + 1, 1);
|
||
|
|
onDateChange(newDate);
|
||
|
|
const today = new Date();
|
||
|
|
if (newDate.getFullYear() === today.getFullYear() && newDate.getMonth() === today.getMonth()) {
|
||
|
|
onSelectDate(getTodayKST());
|
||
|
|
} else {
|
||
|
|
onSelectDate(`${newDate.getFullYear()}-${String(newDate.getMonth() + 1).padStart(2, '0')}-01`);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const selectYear = (newYear) => {
|
||
|
|
onDateChange(new Date(newYear, month, 1));
|
||
|
|
};
|
||
|
|
|
||
|
|
const selectMonth = (newMonth) => {
|
||
|
|
const newDate = new Date(year, newMonth, 1);
|
||
|
|
onDateChange(newDate);
|
||
|
|
const today = new Date();
|
||
|
|
if (newDate.getFullYear() === today.getFullYear() && newDate.getMonth() === today.getMonth()) {
|
||
|
|
onSelectDate(getTodayKST());
|
||
|
|
} else {
|
||
|
|
onSelectDate(`${year}-${String(newMonth + 1).padStart(2, '0')}-01`);
|
||
|
|
}
|
||
|
|
setShowYearMonthPicker(false);
|
||
|
|
};
|
||
|
|
|
||
|
|
const selectDate = (day) => {
|
||
|
|
const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
|
||
|
|
onSelectDate(dateStr);
|
||
|
|
};
|
||
|
|
|
||
|
|
// 연도 범위
|
||
|
|
const yearRange = Array.from({ length: 12 }, (_, i) => yearRangeStart + i);
|
||
|
|
const canGoPrevYearRange = yearRangeStart > MIN_YEAR;
|
||
|
|
const prevYearRange = () => canGoPrevYearRange && setYearRangeStart((prev) => Math.max(MIN_YEAR, prev - 12));
|
||
|
|
const nextYearRange = () => setYearRangeStart((prev) => prev + 12);
|
||
|
|
|
||
|
|
const currentYear = new Date().getFullYear();
|
||
|
|
const isCurrentYear = (y) => y === currentYear;
|
||
|
|
const isCurrentMonth = (m) => {
|
||
|
|
const now = new Date();
|
||
|
|
return year === now.getFullYear() && m === now.getMonth();
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<motion.div
|
||
|
|
animate={{ opacity: disabled ? 0.4 : 1 }}
|
||
|
|
transition={{ duration: 0.2 }}
|
||
|
|
className={disabled ? 'pointer-events-none' : ''}
|
||
|
|
>
|
||
|
|
<div className="bg-white rounded-2xl shadow-sm pt-8 px-8 pb-6 relative" ref={pickerRef}>
|
||
|
|
{/* 헤더 */}
|
||
|
|
<div className="flex items-center justify-between mb-8">
|
||
|
|
<button
|
||
|
|
onClick={prevMonth}
|
||
|
|
disabled={!canGoPrevMonth}
|
||
|
|
className={`p-2 rounded-full transition-colors ${canGoPrevMonth ? 'hover:bg-gray-100' : 'opacity-30'}`}
|
||
|
|
>
|
||
|
|
<ChevronLeft size={24} />
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={() => setShowYearMonthPicker(!showYearMonthPicker)}
|
||
|
|
className="flex items-center gap-1 text-xl font-bold hover:text-primary transition-colors"
|
||
|
|
>
|
||
|
|
<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">
|
||
|
|
<ChevronRight size={24} />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 년/월 선택 팝업 */}
|
||
|
|
<AnimatePresence>
|
||
|
|
{showYearMonthPicker && (
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: -10 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
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}
|
||
|
|
disabled={!canGoPrevYearRange}
|
||
|
|
className={`p-1.5 rounded-lg transition-colors ${canGoPrevYearRange ? 'hover:bg-gray-100' : 'opacity-30'}`}
|
||
|
|
>
|
||
|
|
<ChevronLeft size={20} className="text-gray-600" />
|
||
|
|
</button>
|
||
|
|
<span className="font-medium text-gray-900">
|
||
|
|
{yearRange[0]} - {yearRange[yearRange.length - 1]}
|
||
|
|
</span>
|
||
|
|
<button onClick={nextYearRange} className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors">
|
||
|
|
<ChevronRight size={20} className="text-gray-600" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 년도 선택 */}
|
||
|
|
<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) => (
|
||
|
|
<button
|
||
|
|
key={y}
|
||
|
|
onClick={() => selectYear(y)}
|
||
|
|
className={`py-2 text-sm rounded-lg transition-colors ${
|
||
|
|
year === y
|
||
|
|
? 'bg-primary text-white'
|
||
|
|
: isCurrentYear(y) && year !== y
|
||
|
|
? 'text-primary font-medium 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">
|
||
|
|
{MONTHS.map((m, i) => (
|
||
|
|
<button
|
||
|
|
key={m}
|
||
|
|
onClick={() => selectMonth(i)}
|
||
|
|
className={`py-2 text-sm rounded-lg transition-colors ${
|
||
|
|
month === i
|
||
|
|
? 'bg-primary text-white'
|
||
|
|
: isCurrentMonth(i) && month !== i
|
||
|
|
? 'text-primary font-medium hover:bg-primary/10'
|
||
|
|
: 'hover:bg-gray-100 text-gray-700'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{m}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
)}
|
||
|
|
</AnimatePresence>
|
||
|
|
|
||
|
|
{/* 요일 헤더 + 날짜 그리드 */}
|
||
|
|
<AnimatePresence mode="wait" initial={false}>
|
||
|
|
<motion.div
|
||
|
|
key={`${year}-${month}`}
|
||
|
|
initial={{ opacity: 0, x: slideDirection * 20 }}
|
||
|
|
animate={{ opacity: 1, x: 0 }}
|
||
|
|
exit={{ opacity: 0, x: slideDirection * -20 }}
|
||
|
|
transition={{ duration: 0.08 }}
|
||
|
|
>
|
||
|
|
<div className="grid grid-cols-7 mb-4">
|
||
|
|
{WEEKDAYS.map((day, i) => (
|
||
|
|
<div
|
||
|
|
key={day}
|
||
|
|
className={`text-center text-sm font-medium py-2 ${
|
||
|
|
i === 0 ? 'text-red-500' : i === 6 ? 'text-blue-500' : 'text-gray-500'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{day}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-7 gap-1">
|
||
|
|
{/* 전달 날짜 */}
|
||
|
|
{Array.from({ length: firstDay }).map((_, i) => {
|
||
|
|
const prevMonthDays = getDaysInMonth(year, month - 1);
|
||
|
|
const day = prevMonthDays - firstDay + i + 1;
|
||
|
|
return (
|
||
|
|
<div key={`prev-${i}`} className="aspect-square flex items-center justify-center text-gray-300 text-base">
|
||
|
|
{day}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
|
||
|
|
{/* 현재 달 날짜 */}
|
||
|
|
{Array.from({ length: daysInMonth }).map((_, i) => {
|
||
|
|
const day = i + 1;
|
||
|
|
const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
|
||
|
|
const isSelected = selectedDate === dateStr;
|
||
|
|
const dayOfWeek = (firstDay + i) % 7;
|
||
|
|
const isToday = new Date().toDateString() === new Date(year, month, day).toDateString();
|
||
|
|
const daySchedules = (scheduleDateMap.get(dateStr) || []).slice(0, 3);
|
||
|
|
|
||
|
|
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' : ''}
|
||
|
|
${isToday && !isSelected ? 'text-primary font-bold' : ''}
|
||
|
|
${dayOfWeek === 0 && !isSelected && !isToday ? 'text-red-500' : ''}
|
||
|
|
${dayOfWeek === 6 && !isSelected && !isToday ? 'text-blue-500' : ''}
|
||
|
|
`}
|
||
|
|
>
|
||
|
|
<span>{day}</span>
|
||
|
|
{!isSelected && daySchedules.length > 0 && (
|
||
|
|
<span className="absolute bottom-1 flex gap-0.5">
|
||
|
|
{daySchedules.map((schedule, idx) => (
|
||
|
|
<span
|
||
|
|
key={idx}
|
||
|
|
className="w-1 h-1 rounded-full"
|
||
|
|
style={{ backgroundColor: getCategoryColor?.(schedule.category_id, schedule) || '#4A7C59' }}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
|
||
|
|
{/* 다음달 날짜 */}
|
||
|
|
{(() => {
|
||
|
|
const totalCells = firstDay + daysInMonth;
|
||
|
|
const remainder = totalCells % 7;
|
||
|
|
const nextDays = remainder === 0 ? 0 : 7 - remainder;
|
||
|
|
return Array.from({ length: nextDays }).map((_, i) => (
|
||
|
|
<div key={`next-${i}`} className="aspect-square flex items-center justify-center text-gray-300 text-base">
|
||
|
|
{i + 1}
|
||
|
|
</div>
|
||
|
|
));
|
||
|
|
})()}
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
</AnimatePresence>
|
||
|
|
|
||
|
|
{/* 범례 */}
|
||
|
|
<div className="mt-6 pt-4 border-t border-gray-100 flex items-center text-sm">
|
||
|
|
<div className="flex items-center gap-1.5 text-gray-500">
|
||
|
|
<span className="w-2 h-2 rounded-full bg-primary flex-shrink-0" />
|
||
|
|
<span className="leading-none">일정 있음</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Calendar;
|