feat(frontend-temp): Phase 9 - 스케줄 페이지 구현
PC 스케줄 페이지: - Calendar 컴포넌트 (년/월 선택, 날짜 선택, 일정 점 표시) - CategoryFilter 컴포넌트 (카테고리별 필터링) - 검색 기능 (무한 스크롤 + 가상 스크롤 + 자동완성) - 생일 폭죽 애니메이션 Mobile 스케줄 페이지: - 달력 뷰 / 리스트 뷰 전환 - 월 선택 드롭다운 - 검색 기능 (무한 스크롤) - 날짜별 그룹화된 일정 목록 공통 컴포넌트: - BirthdayCard (PC/Mobile) - fireBirthdayConfetti 함수 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
2ead24065b
commit
7a076aaffd
8 changed files with 1713 additions and 4 deletions
|
|
@ -14,6 +14,7 @@ import { Layout as MobileLayout } from '@/components/mobile';
|
|||
// 페이지
|
||||
import { PCHome, MobileHome } from '@/pages/home';
|
||||
import { PCMembers, MobileMembers } from '@/pages/members';
|
||||
import { PCSchedule, MobileSchedule } from '@/pages/schedule';
|
||||
|
||||
/**
|
||||
* PC 환경에서 body에 클래스 추가하는 래퍼
|
||||
|
|
@ -50,9 +51,9 @@ function App() {
|
|||
<Routes>
|
||||
<Route path="/" element={<PCHome />} />
|
||||
<Route path="/members" element={<PCMembers />} />
|
||||
{/* 추가 페이지는 Phase 9-11에서 구현 */}
|
||||
<Route path="/schedule" element={<PCSchedule />} />
|
||||
{/* 추가 페이지는 Phase 10-11에서 구현 */}
|
||||
{/* <Route path="/album" element={<PCAlbum />} /> */}
|
||||
{/* <Route path="/schedule" element={<PCSchedule />} /> */}
|
||||
{/* <Route path="*" element={<PCNotFound />} /> */}
|
||||
</Routes>
|
||||
</PCLayout>
|
||||
|
|
@ -81,9 +82,16 @@ function App() {
|
|||
</MobileLayout>
|
||||
}
|
||||
/>
|
||||
{/* 추가 페이지는 Phase 9-11에서 구현 */}
|
||||
<Route
|
||||
path="/schedule"
|
||||
element={
|
||||
<MobileLayout pageTitle="일정" useCustomLayout>
|
||||
<MobileSchedule />
|
||||
</MobileLayout>
|
||||
}
|
||||
/>
|
||||
{/* 추가 페이지는 Phase 10-11에서 구현 */}
|
||||
{/* <Route path="/album" element={<MobileLayout pageTitle="앨범"><MobileAlbum /></MobileLayout>} /> */}
|
||||
{/* <Route path="/schedule" element={<MobileLayout useCustomLayout><MobileSchedule /></MobileLayout>} /> */}
|
||||
</Routes>
|
||||
</MobileView>
|
||||
</BrowserRouter>
|
||||
|
|
|
|||
175
frontend-temp/src/components/schedule/BirthdayCard.jsx
Normal file
175
frontend-temp/src/components/schedule/BirthdayCard.jsx
Normal file
|
|
@ -0,0 +1,175 @@
|
|||
import confetti from 'canvas-confetti';
|
||||
import { dayjs } from '@/utils';
|
||||
|
||||
/**
|
||||
* 생일 폭죽 애니메이션
|
||||
*/
|
||||
export function fireBirthdayConfetti() {
|
||||
const duration = 3000;
|
||||
const animationEnd = Date.now() + duration;
|
||||
const colors = ['#ff69b4', '#ff1493', '#da70d6', '#ba55d3', '#9370db', '#8a2be2', '#ffd700', '#ff6347'];
|
||||
|
||||
const randomInRange = (min, max) => Math.random() * (max - min) + min;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
const timeLeft = animationEnd - Date.now();
|
||||
|
||||
if (timeLeft <= 0) {
|
||||
clearInterval(interval);
|
||||
return;
|
||||
}
|
||||
|
||||
const particleCount = 50 * (timeLeft / duration);
|
||||
|
||||
// 왼쪽에서 발사
|
||||
confetti({
|
||||
particleCount: Math.floor(particleCount),
|
||||
startVelocity: 30,
|
||||
spread: 60,
|
||||
origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },
|
||||
colors,
|
||||
shapes: ['circle', 'square'],
|
||||
gravity: 1.2,
|
||||
scalar: randomInRange(0.8, 1.2),
|
||||
drift: randomInRange(-0.5, 0.5),
|
||||
});
|
||||
|
||||
// 오른쪽에서 발사
|
||||
confetti({
|
||||
particleCount: Math.floor(particleCount),
|
||||
startVelocity: 30,
|
||||
spread: 60,
|
||||
origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },
|
||||
colors,
|
||||
shapes: ['circle', 'square'],
|
||||
gravity: 1.2,
|
||||
scalar: randomInRange(0.8, 1.2),
|
||||
drift: randomInRange(-0.5, 0.5),
|
||||
});
|
||||
}, 250);
|
||||
|
||||
// 초기 대형 폭죽
|
||||
confetti({
|
||||
particleCount: 100,
|
||||
spread: 100,
|
||||
origin: { x: 0.5, y: 0.6 },
|
||||
colors,
|
||||
shapes: ['circle', 'square'],
|
||||
startVelocity: 45,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* PC용 생일 카드 컴포넌트
|
||||
*/
|
||||
function BirthdayCard({ schedule, showYear = false, onClick }) {
|
||||
const scheduleDate = dayjs(schedule.date);
|
||||
const formatted = {
|
||||
year: scheduleDate.year(),
|
||||
month: scheduleDate.month() + 1,
|
||||
day: scheduleDate.date(),
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={onClick}
|
||||
className="relative overflow-hidden bg-gradient-to-r from-pink-400 via-purple-400 to-indigo-400 rounded-2xl shadow-lg hover:shadow-xl transition-shadow cursor-pointer"
|
||||
>
|
||||
{/* 배경 장식 */}
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<div className="absolute -top-4 -right-4 w-24 h-24 bg-white/10 rounded-full" />
|
||||
<div className="absolute -bottom-6 -left-6 w-32 h-32 bg-white/10 rounded-full" />
|
||||
<div className="absolute top-1/2 right-1/4 w-16 h-16 bg-white/5 rounded-full" />
|
||||
<div className="absolute bottom-4 left-12 text-xl animate-pulse">🎉</div>
|
||||
</div>
|
||||
|
||||
<div className="relative flex items-center p-4 gap-4">
|
||||
{/* 멤버 사진 */}
|
||||
{schedule.member_image && (
|
||||
<div className="flex-shrink-0">
|
||||
<div className="w-20 h-20 rounded-full border-4 border-white/50 shadow-lg overflow-hidden bg-white">
|
||||
<img
|
||||
src={schedule.member_image}
|
||||
alt={schedule.member_names}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 내용 */}
|
||||
<div className="flex-1 text-white flex items-center gap-3">
|
||||
<span className="text-4xl">🎂</span>
|
||||
<h3 className="font-bold text-2xl tracking-wide">{schedule.title}</h3>
|
||||
</div>
|
||||
|
||||
{/* 날짜 뱃지 */}
|
||||
<div className="flex-shrink-0 bg-white/20 backdrop-blur-sm rounded-xl px-4 py-2 text-center">
|
||||
{showYear && (
|
||||
<div className="text-white/70 text-xs font-medium">{formatted.year}</div>
|
||||
)}
|
||||
<div className="text-white/70 text-xs font-medium">{formatted.month}월</div>
|
||||
<div className="text-white text-2xl font-bold">{formatted.day}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Mobile용 생일 카드 컴포넌트
|
||||
*/
|
||||
export function MobileBirthdayCard({ schedule, showYear = false, onClick }) {
|
||||
const scheduleDate = dayjs(schedule.date);
|
||||
const formatted = {
|
||||
year: scheduleDate.year(),
|
||||
month: scheduleDate.month() + 1,
|
||||
day: scheduleDate.date(),
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={onClick}
|
||||
className="relative overflow-hidden bg-gradient-to-r from-pink-400 via-purple-400 to-indigo-400 rounded-xl shadow-md hover:shadow-lg transition-shadow cursor-pointer"
|
||||
>
|
||||
{/* 배경 장식 */}
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<div className="absolute -top-2 -right-2 w-16 h-16 bg-white/10 rounded-full" />
|
||||
<div className="absolute -bottom-4 -left-4 w-20 h-20 bg-white/10 rounded-full" />
|
||||
<div className="absolute bottom-2 left-8 text-base animate-pulse">🎉</div>
|
||||
</div>
|
||||
|
||||
<div className="relative flex items-center p-3 gap-3">
|
||||
{/* 멤버 사진 */}
|
||||
{schedule.member_image && (
|
||||
<div className="flex-shrink-0">
|
||||
<div className="w-14 h-14 rounded-full border-2 border-white/50 shadow-lg overflow-hidden bg-white">
|
||||
<img
|
||||
src={schedule.member_image}
|
||||
alt={schedule.member_names}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 내용 */}
|
||||
<div className="flex-1 text-white flex items-center gap-2 min-w-0">
|
||||
<span className="text-2xl">🎂</span>
|
||||
<h3 className="font-bold text-lg truncate">{schedule.title}</h3>
|
||||
</div>
|
||||
|
||||
{/* 날짜 뱃지 */}
|
||||
<div className="flex-shrink-0 bg-white/20 backdrop-blur-sm rounded-lg px-3 py-1.5 text-center">
|
||||
{showYear && (
|
||||
<div className="text-white/70 text-[10px] font-medium">{formatted.year}</div>
|
||||
)}
|
||||
<div className="text-white/70 text-[10px] font-medium">{formatted.month}월</div>
|
||||
<div className="text-white text-xl font-bold">{formatted.day}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default BirthdayCard;
|
||||
324
frontend-temp/src/components/schedule/Calendar.jsx
Normal file
324
frontend-temp/src/components/schedule/Calendar.jsx
Normal file
|
|
@ -0,0 +1,324 @@
|
|||
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;
|
||||
84
frontend-temp/src/components/schedule/CategoryFilter.jsx
Normal file
84
frontend-temp/src/components/schedule/CategoryFilter.jsx
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
import { useMemo } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
/**
|
||||
* 카테고리 필터 컴포넌트
|
||||
* @param {Array} categories - 카테고리 목록
|
||||
* @param {Array} selectedCategories - 선택된 카테고리 ID 목록
|
||||
* @param {function} onToggle - 카테고리 토글 핸들러
|
||||
* @param {function} onClear - 전체 선택 핸들러
|
||||
* @param {Map} categoryCounts - 카테고리별 개수 맵
|
||||
* @param {boolean} disabled - 비활성화 여부
|
||||
*/
|
||||
function CategoryFilter({
|
||||
categories,
|
||||
selectedCategories,
|
||||
onToggle,
|
||||
onClear,
|
||||
categoryCounts,
|
||||
disabled = false,
|
||||
}) {
|
||||
// 정렬된 카테고리 목록 (개수 기준, '기타'는 맨 뒤)
|
||||
const sortedCategories = useMemo(() => {
|
||||
return categories
|
||||
.map((category) => ({
|
||||
...category,
|
||||
count: categoryCounts.get(category.id) || 0,
|
||||
}))
|
||||
.filter((category) => category.count > 0)
|
||||
.sort((a, b) => {
|
||||
if (a.name === '기타') return 1;
|
||||
if (b.name === '기타') return -1;
|
||||
return b.count - a.count;
|
||||
});
|
||||
}, [categories, categoryCounts]);
|
||||
|
||||
const totalCount = categoryCounts.get('total') || 0;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
animate={{ opacity: disabled ? 0.4 : 1 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className={`bg-white rounded-2xl shadow-sm p-6 ${disabled ? 'pointer-events-none' : ''}`}
|
||||
>
|
||||
<h3 className="font-bold text-gray-900 mb-4">카테고리</h3>
|
||||
<div className="space-y-1">
|
||||
{/* 전체 */}
|
||||
<button
|
||||
onClick={onClear}
|
||||
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">{totalCount}</span>
|
||||
</button>
|
||||
|
||||
{/* 개별 카테고리 */}
|
||||
{sortedCategories.map((category) => {
|
||||
const isSelected = selectedCategories.includes(category.id);
|
||||
return (
|
||||
<button
|
||||
key={category.id}
|
||||
onClick={() => onToggle(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">{category.count}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
export default CategoryFilter;
|
||||
|
|
@ -6,3 +6,8 @@ export { default as AdminScheduleCard } from './AdminScheduleCard';
|
|||
export { default as MobileScheduleCard } from './MobileScheduleCard';
|
||||
export { default as MobileScheduleListCard } from './MobileScheduleListCard';
|
||||
export { default as MobileScheduleSearchCard } from './MobileScheduleSearchCard';
|
||||
|
||||
// 공통 컴포넌트
|
||||
export { default as Calendar } from './Calendar';
|
||||
export { default as CategoryFilter } from './CategoryFilter';
|
||||
export { default as BirthdayCard, MobileBirthdayCard, fireBirthdayConfetti } from './BirthdayCard';
|
||||
|
|
|
|||
516
frontend-temp/src/pages/schedule/MobileSchedule.jsx
Normal file
516
frontend-temp/src/pages/schedule/MobileSchedule.jsx
Normal file
|
|
@ -0,0 +1,516 @@
|
|||
import { useState, useEffect, useRef, useMemo } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { ChevronLeft, ChevronRight, ChevronDown, Search, X, Calendar as CalendarIcon, List } from 'lucide-react';
|
||||
import { useQuery, useInfiniteQuery } from '@tanstack/react-query';
|
||||
import { useInView } from 'react-intersection-observer';
|
||||
|
||||
import {
|
||||
MobileScheduleListCard,
|
||||
MobileScheduleSearchCard,
|
||||
MobileBirthdayCard,
|
||||
fireBirthdayConfetti,
|
||||
} from '@/components/schedule';
|
||||
import { getSchedules, searchSchedules } from '@/api/schedules';
|
||||
import { useScheduleStore } from '@/stores';
|
||||
import { getTodayKST, dayjs, getCategoryInfo } from '@/utils';
|
||||
|
||||
const WEEKDAYS = ['일', '월', '화', '수', '목', '금', '토'];
|
||||
const MONTHS = ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'];
|
||||
const SEARCH_LIMIT = 20;
|
||||
const MIN_YEAR = 2017;
|
||||
|
||||
/**
|
||||
* Mobile 스케줄 페이지
|
||||
*/
|
||||
function MobileSchedule() {
|
||||
const navigate = useNavigate();
|
||||
const scrollContainerRef = useRef(null);
|
||||
|
||||
// 상태 관리 (zustand store)
|
||||
const {
|
||||
currentDate,
|
||||
setCurrentDate,
|
||||
selectedDate: storedSelectedDate,
|
||||
setSelectedDate: setStoredSelectedDate,
|
||||
selectedCategories,
|
||||
setSelectedCategories,
|
||||
isSearchMode,
|
||||
setIsSearchMode,
|
||||
searchInput,
|
||||
setSearchInput,
|
||||
searchTerm,
|
||||
setSearchTerm,
|
||||
} = useScheduleStore();
|
||||
|
||||
const selectedDate = storedSelectedDate === undefined ? getTodayKST() : storedSelectedDate;
|
||||
const setSelectedDate = setStoredSelectedDate;
|
||||
|
||||
// 로컬 상태
|
||||
const [viewMode, setViewMode] = useState('calendar'); // 'calendar' | 'list'
|
||||
const [showMonthPicker, setShowMonthPicker] = useState(false);
|
||||
|
||||
const year = currentDate.getFullYear();
|
||||
const month = currentDate.getMonth();
|
||||
|
||||
// 월별 일정 데이터
|
||||
const { data: schedules = [], isLoading: loading } = useQuery({
|
||||
queryKey: ['schedules', year, month + 1],
|
||||
queryFn: () => getSchedules(year, month + 1),
|
||||
});
|
||||
|
||||
// 검색 무한 스크롤
|
||||
const { ref: loadMoreRef, inView } = useInView({ threshold: 0, rootMargin: '100px' });
|
||||
|
||||
const {
|
||||
data: searchData,
|
||||
fetchNextPage,
|
||||
hasNextPage,
|
||||
isFetchingNextPage,
|
||||
} = useInfiniteQuery({
|
||||
queryKey: ['scheduleSearch', searchTerm],
|
||||
queryFn: async ({ pageParam = 0 }) => {
|
||||
return searchSchedules(searchTerm, { offset: pageParam, limit: SEARCH_LIMIT });
|
||||
},
|
||||
getNextPageParam: (lastPage) => {
|
||||
if (lastPage.hasMore) {
|
||||
return lastPage.offset + lastPage.schedules.length;
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
enabled: !!searchTerm && isSearchMode,
|
||||
});
|
||||
|
||||
const searchResults = useMemo(() => {
|
||||
if (!searchData?.pages) return [];
|
||||
return searchData.pages.flatMap((page) => page.schedules);
|
||||
}, [searchData]);
|
||||
|
||||
// 무한 스크롤 트리거
|
||||
const prevInViewRef = useRef(false);
|
||||
useEffect(() => {
|
||||
if (inView && !prevInViewRef.current && hasNextPage && !isFetchingNextPage && isSearchMode && searchTerm) {
|
||||
fetchNextPage();
|
||||
}
|
||||
prevInViewRef.current = inView;
|
||||
}, [inView, hasNextPage, isFetchingNextPage, fetchNextPage, isSearchMode, searchTerm]);
|
||||
|
||||
// 오늘 생일 폭죽
|
||||
useEffect(() => {
|
||||
if (loading || schedules.length === 0) return;
|
||||
const today = getTodayKST();
|
||||
const confettiKey = `birthday-confetti-${today}`;
|
||||
if (localStorage.getItem(confettiKey)) return;
|
||||
const hasBirthdayToday = schedules.some((s) => s.is_birthday && s.date === today);
|
||||
if (hasBirthdayToday) {
|
||||
const timer = setTimeout(() => {
|
||||
fireBirthdayConfetti();
|
||||
localStorage.setItem(confettiKey, 'true');
|
||||
}, 500);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [schedules, loading]);
|
||||
|
||||
// 달력 계산
|
||||
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);
|
||||
|
||||
// 일정 날짜별 맵
|
||||
const scheduleDateMap = useMemo(() => {
|
||||
const map = new Map();
|
||||
schedules.forEach((s) => {
|
||||
const dateStr = s.date;
|
||||
if (!map.has(dateStr)) {
|
||||
map.set(dateStr, []);
|
||||
}
|
||||
map.get(dateStr).push(s);
|
||||
});
|
||||
return map;
|
||||
}, [schedules]);
|
||||
|
||||
// 카테고리 추출
|
||||
const categories = useMemo(() => {
|
||||
const categoryMap = new Map();
|
||||
schedules.forEach((s) => {
|
||||
if (s.category_id && !categoryMap.has(s.category_id)) {
|
||||
categoryMap.set(s.category_id, {
|
||||
id: s.category_id,
|
||||
name: s.category_name,
|
||||
color: s.category_color,
|
||||
});
|
||||
}
|
||||
});
|
||||
return Array.from(categoryMap.values());
|
||||
}, [schedules]);
|
||||
|
||||
// 필터링된 스케줄
|
||||
const filteredSchedules = useMemo(() => {
|
||||
if (isSearchMode && searchTerm) {
|
||||
if (selectedCategories.length === 0) return searchResults;
|
||||
return searchResults.filter((s) => selectedCategories.includes(s.category_id));
|
||||
}
|
||||
|
||||
return schedules
|
||||
.filter((s) => {
|
||||
const matchesDate = selectedDate ? s.date === selectedDate : true;
|
||||
const matchesCategory = selectedCategories.length === 0 || selectedCategories.includes(s.category_id);
|
||||
return matchesDate && matchesCategory;
|
||||
})
|
||||
.sort((a, b) => {
|
||||
// 생일 우선
|
||||
if (a.is_birthday && !b.is_birthday) return -1;
|
||||
if (!a.is_birthday && b.is_birthday) return 1;
|
||||
// 시간순
|
||||
return (a.time || '00:00:00').localeCompare(b.time || '00:00:00');
|
||||
});
|
||||
}, [schedules, selectedDate, selectedCategories, isSearchMode, searchTerm, searchResults]);
|
||||
|
||||
// 날짜별 그룹화 (리스트 모드용)
|
||||
const groupedSchedules = useMemo(() => {
|
||||
if (isSearchMode && searchTerm) {
|
||||
const groups = new Map();
|
||||
searchResults.forEach((s) => {
|
||||
if (!groups.has(s.date)) {
|
||||
groups.set(s.date, []);
|
||||
}
|
||||
groups.get(s.date).push(s);
|
||||
});
|
||||
return Array.from(groups.entries()).sort((a, b) => a[0].localeCompare(b[0]));
|
||||
}
|
||||
|
||||
const groups = new Map();
|
||||
schedules.forEach((s) => {
|
||||
if (selectedCategories.length > 0 && !selectedCategories.includes(s.category_id)) return;
|
||||
if (!groups.has(s.date)) {
|
||||
groups.set(s.date, []);
|
||||
}
|
||||
groups.get(s.date).push(s);
|
||||
});
|
||||
return Array.from(groups.entries()).sort((a, b) => a[0].localeCompare(b[0]));
|
||||
}, [schedules, selectedCategories, isSearchMode, searchTerm, searchResults]);
|
||||
|
||||
// 월 이동
|
||||
const canGoPrevMonth = !(year === MIN_YEAR && month === 0);
|
||||
|
||||
const prevMonth = () => {
|
||||
if (!canGoPrevMonth) return;
|
||||
const newDate = new Date(year, month - 1, 1);
|
||||
setCurrentDate(newDate);
|
||||
};
|
||||
|
||||
const nextMonth = () => {
|
||||
const newDate = new Date(year, month + 1, 1);
|
||||
setCurrentDate(newDate);
|
||||
};
|
||||
|
||||
// 날짜 선택
|
||||
const selectDate = (day) => {
|
||||
const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
|
||||
setSelectedDate(dateStr);
|
||||
};
|
||||
|
||||
// 일정 클릭
|
||||
const handleScheduleClick = (schedule) => {
|
||||
if (schedule.is_birthday) {
|
||||
const scheduleYear = new Date(schedule.date).getFullYear();
|
||||
navigate(`/birthday/${encodeURIComponent(schedule.member_names)}/${scheduleYear}`);
|
||||
return;
|
||||
}
|
||||
if ([2, 3, 6].includes(schedule.category_id)) {
|
||||
navigate(`/schedule/${schedule.id}`);
|
||||
return;
|
||||
}
|
||||
if (!schedule.description && schedule.source?.url) {
|
||||
window.open(schedule.source.url, '_blank');
|
||||
} else {
|
||||
navigate(`/schedule/${schedule.id}`);
|
||||
}
|
||||
};
|
||||
|
||||
// 검색 모드 종료
|
||||
const exitSearchMode = () => {
|
||||
setIsSearchMode(false);
|
||||
setSearchInput('');
|
||||
setSearchTerm('');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full bg-gray-50">
|
||||
{/* 헤더 */}
|
||||
<div className="bg-white sticky top-0 z-20">
|
||||
{isSearchMode ? (
|
||||
// 검색 모드 헤더
|
||||
<div className="flex items-center gap-2 px-4 py-3">
|
||||
<button onClick={exitSearchMode} className="p-1">
|
||||
<ChevronLeft size={24} className="text-gray-600" />
|
||||
</button>
|
||||
<div className="flex-1 relative">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="일정 검색..."
|
||||
value={searchInput}
|
||||
autoFocus
|
||||
onChange={(e) => setSearchInput(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' && searchInput.trim()) {
|
||||
setSearchTerm(searchInput);
|
||||
}
|
||||
}}
|
||||
className="w-full pl-10 pr-10 py-2 bg-gray-100 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-primary/50"
|
||||
/>
|
||||
<Search size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
|
||||
{searchInput && (
|
||||
<button
|
||||
onClick={() => {
|
||||
setSearchInput('');
|
||||
setSearchTerm('');
|
||||
}}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2"
|
||||
>
|
||||
<X size={18} className="text-gray-400" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
// 일반 모드 헤더
|
||||
<>
|
||||
<div className="flex items-center justify-between px-4 py-3">
|
||||
<button
|
||||
onClick={() => setShowMonthPicker(!showMonthPicker)}
|
||||
className="flex items-center gap-1 text-lg font-bold"
|
||||
>
|
||||
{year}년 {month + 1}월
|
||||
<ChevronDown size={20} className={`transition-transform ${showMonthPicker ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setIsSearchMode(true)}
|
||||
className="p-2 hover:bg-gray-100 rounded-full"
|
||||
>
|
||||
<Search size={20} className="text-gray-600" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setViewMode(viewMode === 'calendar' ? 'list' : 'calendar')}
|
||||
className="p-2 hover:bg-gray-100 rounded-full"
|
||||
>
|
||||
{viewMode === 'calendar' ? (
|
||||
<List size={20} className="text-gray-600" />
|
||||
) : (
|
||||
<CalendarIcon size={20} className="text-gray-600" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 월 선택 드롭다운 */}
|
||||
<AnimatePresence>
|
||||
{showMonthPicker && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: 'auto', opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
className="overflow-hidden border-t border-gray-100"
|
||||
>
|
||||
<div className="p-4">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<button
|
||||
onClick={() => setCurrentDate(new Date(year - 1, month, 1))}
|
||||
disabled={year <= MIN_YEAR}
|
||||
className={`p-1 ${year <= MIN_YEAR ? 'opacity-30' : ''}`}
|
||||
>
|
||||
<ChevronLeft size={20} />
|
||||
</button>
|
||||
<span className="font-medium">{year}년</span>
|
||||
<button onClick={() => setCurrentDate(new Date(year + 1, month, 1))} className="p-1">
|
||||
<ChevronRight size={20} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
{MONTHS.map((m, i) => (
|
||||
<button
|
||||
key={m}
|
||||
onClick={() => {
|
||||
setCurrentDate(new Date(year, i, 1));
|
||||
setShowMonthPicker(false);
|
||||
}}
|
||||
className={`py-2 rounded-lg text-sm ${
|
||||
month === i ? 'bg-primary text-white' : 'hover:bg-gray-100'
|
||||
}`}
|
||||
>
|
||||
{m}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* 달력 모드 - 달력 그리드 */}
|
||||
{viewMode === 'calendar' && (
|
||||
<div className="px-4 pb-4">
|
||||
{/* 월 네비게이션 */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<button onClick={prevMonth} disabled={!canGoPrevMonth} className={`p-1 ${!canGoPrevMonth ? 'opacity-30' : ''}`}>
|
||||
<ChevronLeft size={20} />
|
||||
</button>
|
||||
<span className="font-medium">{month + 1}월</span>
|
||||
<button onClick={nextMonth} className="p-1">
|
||||
<ChevronRight size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 요일 헤더 */}
|
||||
<div className="grid grid-cols-7 mb-2">
|
||||
{WEEKDAYS.map((day, i) => (
|
||||
<div
|
||||
key={day}
|
||||
className={`text-center text-xs font-medium py-1 ${
|
||||
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) => (
|
||||
<div key={`empty-${i}`} className="aspect-square" />
|
||||
))}
|
||||
|
||||
{/* 현재 달 날짜 */}
|
||||
{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 isToday = dateStr === getTodayKST();
|
||||
const daySchedules = scheduleDateMap.get(dateStr) || [];
|
||||
const dayOfWeek = (firstDay + i) % 7;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={day}
|
||||
onClick={() => selectDate(day)}
|
||||
className={`aspect-square flex flex-col items-center justify-center rounded-lg text-sm relative
|
||||
${isSelected ? 'bg-primary text-white' : ''}
|
||||
${isToday && !isSelected ? 'text-primary font-bold' : ''}
|
||||
${dayOfWeek === 0 && !isSelected ? 'text-red-500' : ''}
|
||||
${dayOfWeek === 6 && !isSelected ? 'text-blue-500' : ''}
|
||||
`}
|
||||
>
|
||||
<span>{day}</span>
|
||||
{!isSelected && daySchedules.length > 0 && (
|
||||
<div className="absolute bottom-1 flex gap-0.5">
|
||||
{daySchedules.slice(0, 3).map((s, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="w-1 h-1 rounded-full"
|
||||
style={{ backgroundColor: s.category_color || '#4A7C59' }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 일정 목록 */}
|
||||
<div ref={scrollContainerRef} className="flex-1 overflow-y-auto">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-20">
|
||||
<div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
) : isSearchMode && searchTerm ? (
|
||||
// 검색 결과
|
||||
<div className="p-4 space-y-3">
|
||||
{searchResults.length > 0 ? (
|
||||
<>
|
||||
{searchResults.map((schedule) => (
|
||||
<div key={schedule.id}>
|
||||
{schedule.is_birthday ? (
|
||||
<MobileBirthdayCard schedule={schedule} showYear onClick={() => handleScheduleClick(schedule)} />
|
||||
) : (
|
||||
<MobileScheduleSearchCard schedule={schedule} onClick={() => handleScheduleClick(schedule)} />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<div ref={loadMoreRef} className="py-4">
|
||||
{isFetchingNextPage && (
|
||||
<div className="flex justify-center">
|
||||
<div className="w-6 h-6 border-2 border-primary border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="text-center py-20 text-gray-400">검색 결과가 없습니다</div>
|
||||
)}
|
||||
</div>
|
||||
) : viewMode === 'calendar' ? (
|
||||
// 달력 모드 - 선택된 날짜의 일정
|
||||
<div className="p-4 space-y-3">
|
||||
{filteredSchedules.length > 0 ? (
|
||||
filteredSchedules.map((schedule) => (
|
||||
<div key={schedule.id}>
|
||||
{schedule.is_birthday ? (
|
||||
<MobileBirthdayCard schedule={schedule} onClick={() => handleScheduleClick(schedule)} />
|
||||
) : (
|
||||
<MobileScheduleListCard schedule={schedule} onClick={() => handleScheduleClick(schedule)} />
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="text-center py-20 text-gray-400">
|
||||
{selectedDate ? '이 날짜에 일정이 없습니다' : '이번 달에 일정이 없습니다'}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
// 리스트 모드 - 날짜별 그룹화
|
||||
<div className="divide-y divide-gray-100">
|
||||
{groupedSchedules.length > 0 ? (
|
||||
groupedSchedules.map(([date, daySchedules]) => {
|
||||
const d = dayjs(date);
|
||||
return (
|
||||
<div key={date} className="bg-white">
|
||||
<div className="sticky top-0 bg-gray-50 px-4 py-2 text-sm font-medium text-gray-600">
|
||||
{d.format('M월 D일')} ({WEEKDAYS[d.day()]})
|
||||
</div>
|
||||
<div className="p-4 space-y-3">
|
||||
{daySchedules.map((schedule) => (
|
||||
<div key={schedule.id}>
|
||||
{schedule.is_birthday ? (
|
||||
<MobileBirthdayCard schedule={schedule} onClick={() => handleScheduleClick(schedule)} />
|
||||
) : (
|
||||
<MobileScheduleListCard schedule={schedule} onClick={() => handleScheduleClick(schedule)} />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<div className="text-center py-20 text-gray-400">이번 달에 일정이 없습니다</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default MobileSchedule;
|
||||
595
frontend-temp/src/pages/schedule/PCSchedule.jsx
Normal file
595
frontend-temp/src/pages/schedule/PCSchedule.jsx
Normal file
|
|
@ -0,0 +1,595 @@
|
|||
import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { Search, ArrowLeft, X, Tag } from 'lucide-react';
|
||||
import { useQuery, useInfiniteQuery } from '@tanstack/react-query';
|
||||
import { useVirtualizer } from '@tanstack/react-virtual';
|
||||
import { useInView } from 'react-intersection-observer';
|
||||
|
||||
import {
|
||||
Calendar,
|
||||
CategoryFilter,
|
||||
ScheduleCard,
|
||||
BirthdayCard,
|
||||
fireBirthdayConfetti,
|
||||
} from '@/components/schedule';
|
||||
import { getSchedules, searchSchedules } from '@/api/schedules';
|
||||
import { useScheduleStore } from '@/stores';
|
||||
import { getTodayKST } from '@/utils';
|
||||
|
||||
const SEARCH_LIMIT = 20;
|
||||
|
||||
/**
|
||||
* PC 스케줄 페이지
|
||||
*/
|
||||
function PCSchedule() {
|
||||
const navigate = useNavigate();
|
||||
const scrollContainerRef = useRef(null);
|
||||
const searchContainerRef = useRef(null);
|
||||
const categoryRef = useRef(null);
|
||||
|
||||
// 상태 관리 (zustand store)
|
||||
const {
|
||||
currentDate,
|
||||
setCurrentDate,
|
||||
selectedDate: storedSelectedDate,
|
||||
setSelectedDate: setStoredSelectedDate,
|
||||
selectedCategories,
|
||||
setSelectedCategories,
|
||||
isSearchMode,
|
||||
setIsSearchMode,
|
||||
searchInput,
|
||||
setSearchInput,
|
||||
searchTerm,
|
||||
setSearchTerm,
|
||||
} = useScheduleStore();
|
||||
|
||||
// 초기값 설정
|
||||
const selectedDate = storedSelectedDate === undefined ? getTodayKST() : storedSelectedDate;
|
||||
const setSelectedDate = setStoredSelectedDate;
|
||||
|
||||
// 로컬 상태
|
||||
const [showSuggestions, setShowSuggestions] = useState(false);
|
||||
const [selectedSuggestionIndex, setSelectedSuggestionIndex] = useState(-1);
|
||||
const [suggestions, setSuggestions] = useState([]);
|
||||
const [originalSearchQuery, setOriginalSearchQuery] = useState('');
|
||||
const [showCategoryTooltip, setShowCategoryTooltip] = useState(false);
|
||||
|
||||
const year = currentDate.getFullYear();
|
||||
const month = currentDate.getMonth();
|
||||
|
||||
// 월별 일정 데이터
|
||||
const { data: schedules = [], isLoading: loading } = useQuery({
|
||||
queryKey: ['schedules', year, month + 1],
|
||||
queryFn: () => getSchedules(year, month + 1),
|
||||
});
|
||||
|
||||
// 검색 무한 스크롤
|
||||
const { ref: loadMoreRef, inView } = useInView({ threshold: 0, rootMargin: '100px' });
|
||||
|
||||
const {
|
||||
data: searchData,
|
||||
fetchNextPage,
|
||||
hasNextPage,
|
||||
isFetchingNextPage,
|
||||
} = useInfiniteQuery({
|
||||
queryKey: ['scheduleSearch', searchTerm],
|
||||
queryFn: async ({ pageParam = 0 }) => {
|
||||
return searchSchedules(searchTerm, { offset: pageParam, limit: SEARCH_LIMIT });
|
||||
},
|
||||
getNextPageParam: (lastPage) => {
|
||||
if (lastPage.hasMore) {
|
||||
return lastPage.offset + lastPage.schedules.length;
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
enabled: !!searchTerm && isSearchMode,
|
||||
});
|
||||
|
||||
const searchResults = useMemo(() => {
|
||||
if (!searchData?.pages) return [];
|
||||
return searchData.pages.flatMap((page) => page.schedules);
|
||||
}, [searchData]);
|
||||
|
||||
// 무한 스크롤 트리거
|
||||
const prevInViewRef = useRef(false);
|
||||
useEffect(() => {
|
||||
if (inView && !prevInViewRef.current && hasNextPage && !isFetchingNextPage && isSearchMode && searchTerm) {
|
||||
fetchNextPage();
|
||||
}
|
||||
prevInViewRef.current = inView;
|
||||
}, [inView, hasNextPage, isFetchingNextPage, fetchNextPage, isSearchMode, searchTerm]);
|
||||
|
||||
// 검색어 자동완성
|
||||
useEffect(() => {
|
||||
if (!originalSearchQuery?.trim()) {
|
||||
setSuggestions([]);
|
||||
return;
|
||||
}
|
||||
const timeoutId = setTimeout(async () => {
|
||||
try {
|
||||
const response = await fetch(`/api/schedules/suggestions?q=${encodeURIComponent(originalSearchQuery)}&limit=10`);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setSuggestions(data.suggestions || []);
|
||||
}
|
||||
} catch {
|
||||
setSuggestions([]);
|
||||
}
|
||||
}, 200);
|
||||
return () => clearTimeout(timeoutId);
|
||||
}, [originalSearchQuery]);
|
||||
|
||||
// 오늘 생일 폭죽
|
||||
useEffect(() => {
|
||||
if (loading || schedules.length === 0) return;
|
||||
const today = getTodayKST();
|
||||
const confettiKey = `birthday-confetti-${today}`;
|
||||
if (localStorage.getItem(confettiKey)) return;
|
||||
const hasBirthdayToday = schedules.some((s) => s.is_birthday && s.date === today);
|
||||
if (hasBirthdayToday) {
|
||||
const timer = setTimeout(() => {
|
||||
fireBirthdayConfetti();
|
||||
localStorage.setItem(confettiKey, 'true');
|
||||
}, 500);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [schedules, loading]);
|
||||
|
||||
// 외부 클릭 처리
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event) => {
|
||||
if (categoryRef.current && !categoryRef.current.contains(event.target)) {
|
||||
setShowCategoryTooltip(false);
|
||||
}
|
||||
if (searchContainerRef.current && !searchContainerRef.current.contains(event.target)) {
|
||||
setShowSuggestions(false);
|
||||
setSelectedSuggestionIndex(-1);
|
||||
}
|
||||
};
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
// 날짜 변경 시 스크롤 초기화
|
||||
useEffect(() => {
|
||||
if (scrollContainerRef.current) {
|
||||
scrollContainerRef.current.scrollTop = 0;
|
||||
}
|
||||
}, [selectedDate]);
|
||||
|
||||
// 카테고리 추출
|
||||
const categories = useMemo(() => {
|
||||
const categoryMap = new Map();
|
||||
schedules.forEach((s) => {
|
||||
if (s.category_id && !categoryMap.has(s.category_id)) {
|
||||
categoryMap.set(s.category_id, {
|
||||
id: s.category_id,
|
||||
name: s.category_name,
|
||||
color: s.category_color,
|
||||
});
|
||||
}
|
||||
});
|
||||
return Array.from(categoryMap.values());
|
||||
}, [schedules]);
|
||||
|
||||
// 카테고리별 카운트
|
||||
const categoryCounts = useMemo(() => {
|
||||
const source = isSearchMode && searchTerm ? searchResults : schedules;
|
||||
const counts = new Map();
|
||||
let total = 0;
|
||||
|
||||
source.forEach((s) => {
|
||||
if (!(isSearchMode && searchTerm) && selectedDate && s.date !== selectedDate) return;
|
||||
const catId = s.category_id;
|
||||
if (catId) {
|
||||
counts.set(catId, (counts.get(catId) || 0) + 1);
|
||||
total++;
|
||||
}
|
||||
});
|
||||
counts.set('total', total);
|
||||
return counts;
|
||||
}, [schedules, searchResults, isSearchMode, searchTerm, selectedDate]);
|
||||
|
||||
// 카테고리 색상/이름 가져오기
|
||||
const getCategoryColor = useCallback(
|
||||
(categoryId, schedule = null) => {
|
||||
if (schedule?.category_color) return schedule.category_color;
|
||||
const cat = categories.find((c) => c.id === categoryId);
|
||||
return cat?.color || '#808080';
|
||||
},
|
||||
[categories]
|
||||
);
|
||||
|
||||
const getCategoryName = useCallback(
|
||||
(categoryId, schedule = null) => {
|
||||
if (schedule?.category_name) return schedule.category_name;
|
||||
const cat = categories.find((c) => c.id === categoryId);
|
||||
return cat?.name || '';
|
||||
},
|
||||
[categories]
|
||||
);
|
||||
|
||||
// 필터링된 스케줄
|
||||
const currentYearMonth = `${year}-${String(month + 1).padStart(2, '0')}`;
|
||||
|
||||
const filteredSchedules = useMemo(() => {
|
||||
const sortWithBirthdayFirst = (list) => {
|
||||
return [...list].sort((a, b) => {
|
||||
const aIsBirthday = a.is_birthday || String(a.id).startsWith('birthday-');
|
||||
const bIsBirthday = b.is_birthday || String(b.id).startsWith('birthday-');
|
||||
if (aIsBirthday && !bIsBirthday) return -1;
|
||||
if (!aIsBirthday && bIsBirthday) return 1;
|
||||
return 0;
|
||||
});
|
||||
};
|
||||
|
||||
if (isSearchMode) {
|
||||
if (!searchTerm) return [];
|
||||
if (selectedCategories.length === 0) return sortWithBirthdayFirst(searchResults);
|
||||
return sortWithBirthdayFirst(searchResults.filter((s) => selectedCategories.includes(s.category_id)));
|
||||
}
|
||||
|
||||
const filtered = schedules
|
||||
.filter((s) => {
|
||||
const matchesDate = selectedDate ? s.date === selectedDate : s.date?.startsWith(currentYearMonth);
|
||||
const matchesCategory = selectedCategories.length === 0 || selectedCategories.includes(s.category_id);
|
||||
return matchesDate && matchesCategory;
|
||||
})
|
||||
.sort((a, b) => {
|
||||
const aIsBirthday = a.is_birthday || String(a.id).startsWith('birthday-');
|
||||
const bIsBirthday = b.is_birthday || String(b.id).startsWith('birthday-');
|
||||
if (aIsBirthday && !bIsBirthday) return -1;
|
||||
if (!aIsBirthday && bIsBirthday) return 1;
|
||||
if (a.date !== b.date) return a.date.localeCompare(b.date);
|
||||
return (a.time || '00:00:00').localeCompare(b.time || '00:00:00');
|
||||
});
|
||||
return filtered;
|
||||
}, [schedules, selectedDate, currentYearMonth, selectedCategories, isSearchMode, searchTerm, searchResults]);
|
||||
|
||||
// 가상 스크롤
|
||||
const virtualizer = useVirtualizer({
|
||||
count: isSearchMode && searchTerm ? filteredSchedules.length : 0,
|
||||
getScrollElement: () => scrollContainerRef.current,
|
||||
estimateSize: () => 120,
|
||||
overscan: 5,
|
||||
});
|
||||
|
||||
// 일정 클릭 핸들러
|
||||
const handleScheduleClick = (schedule) => {
|
||||
if (schedule.is_birthday || String(schedule.id).startsWith('birthday-')) {
|
||||
const scheduleYear = new Date(schedule.date).getFullYear();
|
||||
navigate(`/birthday/${encodeURIComponent(schedule.member_names)}/${scheduleYear}`);
|
||||
return;
|
||||
}
|
||||
if ([2, 3, 6].includes(schedule.category_id)) {
|
||||
navigate(`/schedule/${schedule.id}`);
|
||||
return;
|
||||
}
|
||||
if (!schedule.description && schedule.source?.url) {
|
||||
window.open(schedule.source.url, '_blank');
|
||||
} else {
|
||||
navigate(`/schedule/${schedule.id}`);
|
||||
}
|
||||
};
|
||||
|
||||
// 카테고리 토글
|
||||
const toggleCategory = (categoryId) => {
|
||||
if (selectedCategories.includes(categoryId)) {
|
||||
setSelectedCategories(selectedCategories.filter((id) => id !== categoryId));
|
||||
} else {
|
||||
setSelectedCategories([...selectedCategories, categoryId]);
|
||||
}
|
||||
};
|
||||
|
||||
// 검색 모드 종료
|
||||
const exitSearchMode = () => {
|
||||
setIsSearchMode(false);
|
||||
setSearchInput('');
|
||||
setOriginalSearchQuery('');
|
||||
setSearchTerm('');
|
||||
setShowSuggestions(false);
|
||||
setSelectedSuggestionIndex(-1);
|
||||
if (scrollContainerRef.current) {
|
||||
scrollContainerRef.current.scrollTop = 0;
|
||||
}
|
||||
};
|
||||
|
||||
// 검색 실행
|
||||
const executeSearch = () => {
|
||||
if (searchInput.trim()) {
|
||||
setSearchTerm(searchInput);
|
||||
setShowSuggestions(false);
|
||||
setSelectedSuggestionIndex(-1);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-[calc(100vh-64px)] overflow-hidden flex flex-col">
|
||||
<div className="flex-1 flex flex-col overflow-hidden max-w-7xl mx-auto px-6 pt-16 pb-8 w-full">
|
||||
{/* 헤더 */}
|
||||
<div className="flex-shrink-0 text-center mb-8">
|
||||
<motion.h1 initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} className="text-4xl font-bold mb-4">
|
||||
일정
|
||||
</motion.h1>
|
||||
<motion.p initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.2 }} className="text-gray-500">
|
||||
프로미스나인의 다가오는 일정을 확인하세요
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-h-0 grid grid-cols-3 gap-8">
|
||||
{/* 왼쪽: 달력 + 카테고리 */}
|
||||
<div className="space-y-6">
|
||||
<Calendar
|
||||
currentDate={currentDate}
|
||||
onDateChange={setCurrentDate}
|
||||
selectedDate={selectedDate}
|
||||
onSelectDate={setSelectedDate}
|
||||
schedules={schedules}
|
||||
getCategoryColor={getCategoryColor}
|
||||
disabled={isSearchMode}
|
||||
/>
|
||||
<CategoryFilter
|
||||
categories={categories}
|
||||
selectedCategories={selectedCategories}
|
||||
onToggle={toggleCategory}
|
||||
onClear={() => setSelectedCategories([])}
|
||||
categoryCounts={categoryCounts}
|
||||
disabled={isSearchMode && searchResults.length === 0}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 오른쪽: 스케줄 리스트 */}
|
||||
<div className="col-span-2 flex flex-col min-h-0">
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between h-11 mb-2">
|
||||
<AnimatePresence mode="wait">
|
||||
{isSearchMode ? (
|
||||
<motion.div
|
||||
key="search-mode"
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.95 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
className="flex items-center flex-1"
|
||||
>
|
||||
<div className="flex-1 relative" ref={searchContainerRef}>
|
||||
<div className="flex items-center border border-gray-200 rounded-xl overflow-hidden">
|
||||
<button
|
||||
onClick={exitSearchMode}
|
||||
className="flex items-center justify-center px-3 bg-gray-50 border-r border-gray-200 hover:bg-gray-100 transition-colors self-stretch"
|
||||
>
|
||||
<ArrowLeft size={18} className="text-gray-500" />
|
||||
</button>
|
||||
<div className="flex-1 flex items-center bg-white px-3 py-2.5">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="제목, 멤버, 카테고리로 검색..."
|
||||
value={searchInput}
|
||||
autoFocus
|
||||
onChange={(e) => {
|
||||
setSearchInput(e.target.value);
|
||||
setOriginalSearchQuery(e.target.value);
|
||||
setShowSuggestions(true);
|
||||
setSelectedSuggestionIndex(-1);
|
||||
}}
|
||||
onFocus={() => setShowSuggestions(true)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
const newIndex = selectedSuggestionIndex < suggestions.length - 1 ? selectedSuggestionIndex + 1 : 0;
|
||||
setSelectedSuggestionIndex(newIndex);
|
||||
if (suggestions[newIndex]) setSearchInput(suggestions[newIndex]);
|
||||
} else if (e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
const newIndex = selectedSuggestionIndex > 0 ? selectedSuggestionIndex - 1 : suggestions.length - 1;
|
||||
setSelectedSuggestionIndex(newIndex);
|
||||
if (suggestions[newIndex]) setSearchInput(suggestions[newIndex]);
|
||||
} else if (e.key === 'Enter') {
|
||||
if (selectedSuggestionIndex >= 0 && suggestions[selectedSuggestionIndex]) {
|
||||
setSearchInput(suggestions[selectedSuggestionIndex]);
|
||||
setSearchTerm(suggestions[selectedSuggestionIndex]);
|
||||
} else if (searchInput.trim()) {
|
||||
setSearchTerm(searchInput);
|
||||
}
|
||||
setShowSuggestions(false);
|
||||
setSelectedSuggestionIndex(-1);
|
||||
} else if (e.key === 'Escape') {
|
||||
exitSearchMode();
|
||||
}
|
||||
}}
|
||||
className="flex-1 bg-transparent focus:outline-none text-gray-700 placeholder-gray-400 text-sm"
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
setSearchInput('');
|
||||
setOriginalSearchQuery('');
|
||||
setShowSuggestions(false);
|
||||
}}
|
||||
className={`p-1 rounded transition-colors ${searchInput ? 'hover:bg-gray-100 opacity-100' : 'opacity-0 pointer-events-none'}`}
|
||||
>
|
||||
<X size={16} className="text-gray-400" />
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
onClick={executeSearch}
|
||||
className="flex items-center justify-center px-6 bg-primary hover:bg-primary/90 transition-colors self-stretch"
|
||||
>
|
||||
<Search size={18} className="text-white" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 검색어 추천 */}
|
||||
{showSuggestions && suggestions.length > 0 && (
|
||||
<div
|
||||
className="absolute top-full mt-2 bg-white rounded-xl shadow-lg border border-gray-200 py-1 z-50 overflow-hidden"
|
||||
style={{ left: '44px', right: '66px' }}
|
||||
>
|
||||
{suggestions.map((suggestion, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => {
|
||||
setSearchInput(suggestion);
|
||||
setSearchTerm(suggestion);
|
||||
setShowSuggestions(false);
|
||||
}}
|
||||
onMouseEnter={() => setSelectedSuggestionIndex(index)}
|
||||
className={`w-full px-4 py-2.5 text-left flex items-center gap-3 transition-colors ${
|
||||
selectedSuggestionIndex === index ? 'bg-primary/10 text-primary' : 'hover:bg-gray-50 text-gray-700'
|
||||
}`}
|
||||
>
|
||||
<Search size={15} className={selectedSuggestionIndex === index ? 'text-primary' : 'text-gray-400'} />
|
||||
<span className="text-sm">{suggestion}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="normal-mode"
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.95 }}
|
||||
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 }}
|
||||
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 ref={scrollContainerRef} className="flex-1 min-h-0 overflow-y-auto space-y-4 py-2 pr-2">
|
||||
{loading ? (
|
||||
<div className="text-center py-20 text-gray-500">로딩 중...</div>
|
||||
) : filteredSchedules.length > 0 ? (
|
||||
isSearchMode && searchTerm ? (
|
||||
<>
|
||||
<div style={{ height: `${virtualizer.getTotalSize()}px`, width: '100%', position: 'relative' }}>
|
||||
{virtualizer.getVirtualItems().map((virtualItem) => {
|
||||
const schedule = filteredSchedules[virtualItem.index];
|
||||
if (!schedule) return null;
|
||||
return (
|
||||
<div
|
||||
key={virtualItem.key}
|
||||
ref={virtualizer.measureElement}
|
||||
data-index={virtualItem.index}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
transform: `translateY(${virtualItem.start}px)`,
|
||||
}}
|
||||
>
|
||||
<div className={virtualItem.index < filteredSchedules.length - 1 ? 'pb-4' : ''}>
|
||||
{schedule.is_birthday ? (
|
||||
<BirthdayCard schedule={schedule} showYear onClick={() => handleScheduleClick(schedule)} />
|
||||
) : (
|
||||
<ScheduleCard schedule={schedule} showYear onClick={() => handleScheduleClick(schedule)} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div ref={loadMoreRef} className="py-4">
|
||||
{isFetchingNextPage && (
|
||||
<div className="flex justify-center">
|
||||
<div className="w-6 h-6 border-2 border-primary border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
{!hasNextPage && filteredSchedules.length > 0 && (
|
||||
<div className="text-center text-sm text-gray-400">{filteredSchedules.length}개 표시 (모두 로드됨)</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
filteredSchedules.map((schedule, index) => (
|
||||
<motion.div
|
||||
key={`${schedule.id}-${selectedDate || 'all'}`}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: Math.min(index, 10) * 0.03 }}
|
||||
>
|
||||
{schedule.is_birthday ? (
|
||||
<BirthdayCard schedule={schedule} onClick={() => handleScheduleClick(schedule)} />
|
||||
) : (
|
||||
<ScheduleCard schedule={schedule} onClick={() => handleScheduleClick(schedule)} />
|
||||
)}
|
||||
</motion.div>
|
||||
))
|
||||
)
|
||||
) : (
|
||||
!isSearchMode && (
|
||||
<motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} className="flex flex-col items-center justify-center py-16">
|
||||
<div className="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mb-4">
|
||||
<svg className="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-gray-400 text-lg font-medium mb-1">{selectedDate ? '일정이 없습니다' : '예정된 일정이 없습니다'}</p>
|
||||
<p className="text-gray-300 text-sm">{selectedDate ? '다른 날짜를 선택해 보세요' : '다른 달을 확인해 보세요'}</p>
|
||||
</motion.div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PCSchedule;
|
||||
2
frontend-temp/src/pages/schedule/index.js
Normal file
2
frontend-temp/src/pages/schedule/index.js
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
export { default as PCSchedule } from './PCSchedule';
|
||||
export { default as MobileSchedule } from './MobileSchedule';
|
||||
Loading…
Add table
Reference in a new issue