1041 lines
47 KiB
JavaScript
1041 lines
47 KiB
JavaScript
import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { Clock, Tag, Link2, ChevronLeft, ChevronRight, ChevronDown, Search, X, Calendar } from 'lucide-react';
|
|
import { useInfiniteQuery } from '@tanstack/react-query';
|
|
import { useInView } from 'react-intersection-observer';
|
|
import { useVirtualizer } from '@tanstack/react-virtual';
|
|
import { getSchedules, getCategories, searchSchedules } from '../../../api/public/schedules';
|
|
|
|
// 모바일 일정 페이지
|
|
function MobileSchedule() {
|
|
const [selectedDate, setSelectedDate] = useState(new Date());
|
|
const [schedules, setSchedules] = useState([]);
|
|
const [categories, setCategories] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [isSearchMode, setIsSearchMode] = useState(false);
|
|
const [searchInput, setSearchInput] = useState(''); // 입력값
|
|
const [searchTerm, setSearchTerm] = useState(''); // 실제 검색어
|
|
const [showCalendar, setShowCalendar] = useState(false);
|
|
const [calendarViewDate, setCalendarViewDate] = useState(() => new Date(selectedDate)); // 달력 뷰 날짜
|
|
const [calendarShowYearMonth, setCalendarShowYearMonth] = useState(false); // 달력 년월 선택 모드
|
|
const contentRef = useRef(null); // 스크롤 초기화용
|
|
|
|
// 달력 월 변경 함수
|
|
const changeCalendarMonth = (delta) => {
|
|
const newDate = new Date(calendarViewDate);
|
|
newDate.setMonth(newDate.getMonth() + delta);
|
|
setCalendarViewDate(newDate);
|
|
};
|
|
|
|
const SEARCH_LIMIT = 20; // 페이지당 20개
|
|
const ESTIMATED_ITEM_HEIGHT = 100; // 아이템 추정 높이 (동적 측정)
|
|
const scrollContainerRef = useRef(null); // 가상 스크롤 컨테이너
|
|
const { ref: loadMoreRef, inView } = useInView({ threshold: 0, rootMargin: '100px' });
|
|
|
|
// 검색 무한 스크롤
|
|
const {
|
|
data: searchData,
|
|
fetchNextPage,
|
|
hasNextPage,
|
|
isFetchingNextPage,
|
|
isLoading: searchLoading,
|
|
} = useInfiniteQuery({
|
|
queryKey: ['mobileScheduleSearch', 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 virtualizer = useVirtualizer({
|
|
count: isSearchMode && searchTerm ? searchResults.length : 0,
|
|
getScrollElement: () => scrollContainerRef.current,
|
|
estimateSize: () => ESTIMATED_ITEM_HEIGHT,
|
|
overscan: 5, // 버퍼 아이템 수
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (inView && hasNextPage && !isFetchingNextPage && isSearchMode && searchTerm) {
|
|
fetchNextPage();
|
|
}
|
|
}, [inView, hasNextPage, isFetchingNextPage, fetchNextPage, isSearchMode, searchTerm]);
|
|
|
|
// 일정 및 카테고리 로드 (월이 변경될 때만 실행)
|
|
const viewMonth = `${selectedDate.getFullYear()}-${selectedDate.getMonth()}`;
|
|
|
|
useEffect(() => {
|
|
const year = selectedDate.getFullYear();
|
|
const month = selectedDate.getMonth() + 1;
|
|
|
|
setLoading(true);
|
|
Promise.all([
|
|
getSchedules(year, month),
|
|
getCategories()
|
|
]).then(([schedulesData, categoriesData]) => {
|
|
setSchedules(schedulesData);
|
|
setCategories(categoriesData);
|
|
setLoading(false);
|
|
}).catch(console.error);
|
|
}, [viewMonth]);
|
|
|
|
// 월 변경
|
|
const changeMonth = (delta) => {
|
|
const newDate = new Date(selectedDate);
|
|
newDate.setMonth(newDate.getMonth() + delta);
|
|
|
|
// 이번 달이면 오늘 날짜, 다른 달이면 1일 선택
|
|
const today = new Date();
|
|
if (newDate.getFullYear() === today.getFullYear() && newDate.getMonth() === today.getMonth()) {
|
|
newDate.setDate(today.getDate());
|
|
} else {
|
|
newDate.setDate(1);
|
|
}
|
|
|
|
setSelectedDate(newDate);
|
|
setCalendarViewDate(newDate);
|
|
};
|
|
|
|
// 날짜 변경 시 스크롤 맨 위로 초기화
|
|
useEffect(() => {
|
|
if (contentRef.current) {
|
|
contentRef.current.scrollTop = 0;
|
|
}
|
|
}, [selectedDate]);
|
|
|
|
|
|
// 캘린더가 열릴 때 배경 스크롤 방지
|
|
useEffect(() => {
|
|
const preventScroll = (e) => e.preventDefault();
|
|
|
|
if (showCalendar) {
|
|
document.addEventListener('touchmove', preventScroll, { passive: false });
|
|
} else {
|
|
document.removeEventListener('touchmove', preventScroll);
|
|
}
|
|
return () => {
|
|
document.removeEventListener('touchmove', preventScroll);
|
|
};
|
|
}, [showCalendar]);
|
|
|
|
// 카테고리 색상
|
|
const getCategoryColor = (categoryId) => {
|
|
const category = categories.find(c => c.id === categoryId);
|
|
return category?.color || '#6b7280';
|
|
};
|
|
|
|
// 날짜별 일정 그룹화
|
|
const groupedSchedules = useMemo(() => {
|
|
const groups = {};
|
|
schedules.forEach(schedule => {
|
|
const date = schedule.date;
|
|
if (!groups[date]) groups[date] = [];
|
|
groups[date].push(schedule);
|
|
});
|
|
return Object.entries(groups).sort((a, b) => a[0].localeCompare(b[0]));
|
|
}, [schedules]);
|
|
|
|
// 해당 달의 모든 날짜 배열
|
|
const daysInMonth = useMemo(() => {
|
|
const year = selectedDate.getFullYear();
|
|
const month = selectedDate.getMonth();
|
|
const lastDay = new Date(year, month + 1, 0).getDate();
|
|
const days = [];
|
|
for (let d = 1; d <= lastDay; d++) {
|
|
days.push(new Date(year, month, d));
|
|
}
|
|
return days;
|
|
}, [selectedDate]);
|
|
|
|
// 선택된 날짜의 일정
|
|
const selectedDateSchedules = useMemo(() => {
|
|
// KST 기준 날짜 문자열 생성
|
|
const year = selectedDate.getFullYear();
|
|
const month = String(selectedDate.getMonth() + 1).padStart(2, '0');
|
|
const day = String(selectedDate.getDate()).padStart(2, '0');
|
|
const dateStr = `${year}-${month}-${day}`;
|
|
// API 응답의 date는 ISO 형식이므로 T 이전 부분만 비교
|
|
return schedules.filter(s => s.date.split('T')[0] === dateStr);
|
|
}, [schedules, selectedDate]);
|
|
|
|
// 요일 이름
|
|
const getDayName = (date) => {
|
|
return ['일', '월', '화', '수', '목', '금', '토'][date.getDay()];
|
|
};
|
|
|
|
// 오늘 여부
|
|
const isToday = (date) => {
|
|
const today = new Date();
|
|
return date.getDate() === today.getDate() &&
|
|
date.getMonth() === today.getMonth() &&
|
|
date.getFullYear() === today.getFullYear();
|
|
};
|
|
|
|
// 선택된 날짜 여부
|
|
const isSelected = (date) => {
|
|
return date.getDate() === selectedDate.getDate() &&
|
|
date.getMonth() === selectedDate.getMonth() &&
|
|
date.getFullYear() === selectedDate.getFullYear();
|
|
};
|
|
|
|
// 날짜 선택 컨테이너 ref
|
|
const dateScrollRef = useRef(null);
|
|
|
|
// 선택된 날짜로 자동 스크롤 + 페이지 스크롤 초기화
|
|
useEffect(() => {
|
|
// 페이지 스크롤을 맨 위로 즉시 이동
|
|
window.scrollTo(0, 0);
|
|
|
|
if (dateScrollRef.current) {
|
|
const selectedDay = selectedDate.getDate();
|
|
const buttons = dateScrollRef.current.querySelectorAll('button');
|
|
if (buttons[selectedDay - 1]) {
|
|
buttons[selectedDay - 1].scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
|
|
}
|
|
}
|
|
}, [selectedDate]);
|
|
|
|
return (
|
|
<>
|
|
{/* 툴바 (헤더 + 날짜 선택기) */}
|
|
<div className="mobile-toolbar-schedule shadow-sm z-50">
|
|
{isSearchMode ? (
|
|
<div className="flex items-center gap-3 px-4 py-3">
|
|
<div className="flex-1 flex items-center gap-2 bg-gray-100 rounded-full px-4 py-2 min-w-0">
|
|
<Search size={18} className="text-gray-400 flex-shrink-0" />
|
|
<input
|
|
type="text"
|
|
inputMode="search"
|
|
enterKeyHint="search"
|
|
placeholder="일정 검색..."
|
|
value={searchInput}
|
|
onChange={(e) => setSearchInput(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
setSearchTerm(searchInput);
|
|
}
|
|
}}
|
|
className="flex-1 bg-transparent outline-none text-sm min-w-0 [&::-webkit-search-cancel-button]:hidden"
|
|
autoFocus
|
|
/>
|
|
{searchInput && (
|
|
<button onClick={() => { setSearchInput(''); setSearchTerm(''); }} className="flex-shrink-0">
|
|
<X size={18} className="text-gray-400" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
<button
|
|
onClick={() => { setIsSearchMode(false); setSearchInput(''); setSearchTerm(''); }}
|
|
className="text-sm text-gray-500 flex-shrink-0"
|
|
>
|
|
취소
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="relative flex items-center justify-between px-4 py-3">
|
|
{showCalendar ? (
|
|
// 달력 열렸을 때: 년월은 absolute로 가운데 고정, 드롭다운은 바로 옆에
|
|
<>
|
|
<div className="flex items-center gap-1">
|
|
<button
|
|
onClick={() => {
|
|
setShowCalendar(false);
|
|
setCalendarShowYearMonth(false);
|
|
}}
|
|
className="p-2 rounded-lg hover:bg-gray-100"
|
|
>
|
|
<Calendar size={20} className="text-primary" />
|
|
</button>
|
|
<button onClick={() => changeCalendarMonth(-1)} className="p-2">
|
|
<ChevronLeft size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* 년월 텍스트: absolute로 정확히 가운데 고정, 클릭하면 드롭다운 토글 */}
|
|
<button
|
|
onClick={() => setCalendarShowYearMonth(!calendarShowYearMonth)}
|
|
className={`absolute left-1/2 -translate-x-1/2 font-bold transition-colors ${
|
|
calendarShowYearMonth ? 'text-primary' : ''
|
|
}`}
|
|
>
|
|
{calendarViewDate.getFullYear()}년 {calendarViewDate.getMonth() + 1}월
|
|
</button>
|
|
|
|
{/* 드롭다운 버튼: 년월 텍스트 바로 옆에 위치하도록 가운데 배치 */}
|
|
<button
|
|
onClick={() => setCalendarShowYearMonth(!calendarShowYearMonth)}
|
|
className={`absolute transition-colors ${
|
|
calendarShowYearMonth ? 'text-primary' : ''
|
|
}`}
|
|
style={{ left: 'calc(50% + 52px)' }}
|
|
>
|
|
<ChevronDown
|
|
size={16}
|
|
className={`transition-transform duration-200 ${calendarShowYearMonth ? 'rotate-180' : ''}`}
|
|
/>
|
|
</button>
|
|
|
|
<div className="flex items-center gap-1">
|
|
<button onClick={() => changeCalendarMonth(1)} className="p-2">
|
|
<ChevronRight size={20} />
|
|
</button>
|
|
<button onClick={() => setIsSearchMode(true)} className="p-2">
|
|
<Search size={20} />
|
|
</button>
|
|
</div>
|
|
</>
|
|
) : (
|
|
// 달력 닫혔을 때: 기존 UI
|
|
<>
|
|
<div className="flex items-center gap-1">
|
|
<button
|
|
onClick={() => {
|
|
setCalendarViewDate(selectedDate);
|
|
setShowCalendar(true);
|
|
}}
|
|
className="p-2 rounded-lg hover:bg-gray-100"
|
|
>
|
|
<Calendar size={20} className="text-gray-600" />
|
|
</button>
|
|
<button onClick={() => changeMonth(-1)} className="p-2">
|
|
<ChevronLeft size={20} />
|
|
</button>
|
|
</div>
|
|
<span className="font-bold">
|
|
{selectedDate.getFullYear()}년 {selectedDate.getMonth() + 1}월
|
|
</span>
|
|
<div className="flex items-center gap-1">
|
|
<button onClick={() => changeMonth(1)} className="p-2">
|
|
<ChevronRight size={20} />
|
|
</button>
|
|
<button onClick={() => setIsSearchMode(true)} className="p-2">
|
|
<Search size={20} />
|
|
</button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* 가로 스크롤 날짜 선택기 */}
|
|
{!isSearchMode && (
|
|
<div
|
|
ref={dateScrollRef}
|
|
className="flex overflow-x-auto scrollbar-hide px-2 py-2 gap-1"
|
|
style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
|
|
>
|
|
{daysInMonth.map((date) => {
|
|
const dayOfWeek = date.getDay();
|
|
const year = date.getFullYear();
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|
const dateStr = `${year}-${month}-${day}`;
|
|
|
|
// 해당 날짜의 일정 목록 (최대 3개)
|
|
const daySchedules = schedules
|
|
.filter(s => s.date?.split('T')[0] === dateStr)
|
|
.slice(0, 3);
|
|
|
|
return (
|
|
<button
|
|
key={date.getDate()}
|
|
onClick={() => {
|
|
setSelectedDate(date);
|
|
setCalendarViewDate(date);
|
|
}}
|
|
className={`flex flex-col items-center min-w-[44px] h-[64px] py-2 px-1 rounded-xl transition-all ${
|
|
isSelected(date)
|
|
? 'bg-primary text-white'
|
|
: 'hover:bg-gray-100'
|
|
}`}
|
|
>
|
|
<span className={`text-[10px] font-medium ${
|
|
isSelected(date)
|
|
? 'text-white/80'
|
|
: dayOfWeek === 0
|
|
? 'text-red-400'
|
|
: dayOfWeek === 6
|
|
? 'text-blue-400'
|
|
: 'text-gray-400'
|
|
}`}>
|
|
{getDayName(date)}
|
|
</span>
|
|
<span className={`text-sm font-semibold mt-0.5 ${
|
|
isSelected(date)
|
|
? 'text-white'
|
|
: isToday(date)
|
|
? 'text-primary'
|
|
: 'text-gray-700'
|
|
}`}>
|
|
{date.getDate()}
|
|
</span>
|
|
{/* 일정 점 (최대 3개) */}
|
|
<div className="flex gap-0.5 mt-1 h-1.5">
|
|
{!isSelected(date) && daySchedules.map((schedule, i) => {
|
|
const cat = categories.find(c => c.id === schedule.category_id);
|
|
const color = cat?.color || '#6b7280';
|
|
return (
|
|
<div
|
|
key={i}
|
|
className="w-1 h-1 rounded-full"
|
|
style={{ backgroundColor: color }}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 달력 팝업 - fixed로 위에 띄우기 */}
|
|
<AnimatePresence>
|
|
{showCalendar && !isSearchMode && (
|
|
<motion.div
|
|
initial={{ height: 0, opacity: 0 }}
|
|
animate={{ height: 'auto', opacity: 1 }}
|
|
exit={{ height: 0, opacity: 0 }}
|
|
className="fixed left-0 right-0 bg-white shadow-lg z-50 border-b overflow-hidden"
|
|
style={{ top: '56px' }}
|
|
>
|
|
<CalendarPicker
|
|
selectedDate={selectedDate}
|
|
schedules={schedules}
|
|
categories={categories}
|
|
hideHeader={true}
|
|
externalViewDate={calendarViewDate}
|
|
onViewDateChange={setCalendarViewDate}
|
|
externalShowYearMonth={calendarShowYearMonth}
|
|
onShowYearMonthChange={setCalendarShowYearMonth}
|
|
onSelectDate={(date) => {
|
|
setSelectedDate(date);
|
|
setCalendarViewDate(date);
|
|
setCalendarShowYearMonth(false);
|
|
setShowCalendar(false);
|
|
}}
|
|
/>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
|
|
{/* 캘린더 배경 오버레이 */}
|
|
<AnimatePresence>
|
|
{showCalendar && !isSearchMode && (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
onClick={() => setShowCalendar(false)}
|
|
className="fixed inset-0 bg-black/40 z-40"
|
|
style={{ top: 0 }}
|
|
/>
|
|
)}
|
|
</AnimatePresence>
|
|
|
|
{/* 컨텐츠 영역 */}
|
|
<div className="mobile-content" ref={isSearchMode && searchTerm ? scrollContainerRef : contentRef}>
|
|
<div className="px-4 pt-4 pb-4">
|
|
{isSearchMode ? (
|
|
// 검색 모드
|
|
!searchTerm ? (
|
|
// 검색어 입력 전 - 빈 상태
|
|
<div className="text-center py-8 text-gray-400">
|
|
검색어를 입력하세요
|
|
</div>
|
|
) : searchLoading ? (
|
|
<div className="flex justify-center py-8">
|
|
<div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin" />
|
|
</div>
|
|
) : searchResults.length === 0 ? (
|
|
<div className="text-center py-8 text-gray-400">
|
|
검색 결과가 없습니다
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div
|
|
style={{
|
|
height: `${virtualizer.getTotalSize()}px`,
|
|
width: '100%',
|
|
position: 'relative',
|
|
}}
|
|
>
|
|
{virtualizer.getVirtualItems().map((virtualItem) => {
|
|
const schedule = searchResults[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 < searchResults.length - 1 ? "pb-3" : ""}>
|
|
<ScheduleCard
|
|
schedule={schedule}
|
|
categoryColor={getCategoryColor(schedule.category_id)}
|
|
categories={categories}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
{/* 무한 스크롤 트리거 */}
|
|
<div ref={loadMoreRef} className="py-2">
|
|
{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>
|
|
</>
|
|
)
|
|
) : loading ? (
|
|
<div className="flex justify-center py-8">
|
|
<div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin" />
|
|
</div>
|
|
) : selectedDateSchedules.length === 0 ? (
|
|
<div className="text-center py-8 text-gray-400">
|
|
{selectedDate.getMonth() + 1}월 {selectedDate.getDate()}일 일정이 없습니다
|
|
</div>
|
|
) : (
|
|
// 선택된 날짜의 일정
|
|
<div className="space-y-3">
|
|
{selectedDateSchedules.map((schedule, index) => (
|
|
<TimelineScheduleCard
|
|
key={schedule.id}
|
|
schedule={schedule}
|
|
categoryColor={getCategoryColor(schedule.category_id)}
|
|
categories={categories}
|
|
delay={index * 0.05}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
// 일정 카드 컴포넌트 (검색용)
|
|
function ScheduleCard({ schedule, categoryColor, categories, delay = 0 }) {
|
|
const categoryName = categories.find(c => c.id === schedule.category_id)?.name || '미분류';
|
|
const memberNames = schedule.member_names || schedule.members?.map(m => m.name).join(',') || '';
|
|
const memberList = memberNames.split(',').filter(name => name.trim());
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay }}
|
|
className="bg-white rounded-xl p-4 shadow-sm"
|
|
>
|
|
<div className="flex gap-3">
|
|
<div
|
|
className="w-1 rounded-full flex-shrink-0"
|
|
style={{ backgroundColor: categoryColor }}
|
|
/>
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="font-semibold text-sm">{schedule.title}</h3>
|
|
<div className="flex flex-wrap items-center gap-2 mt-1 text-xs text-gray-500">
|
|
{schedule.time && (
|
|
<span className="flex items-center gap-1">
|
|
<Clock size={12} />
|
|
{schedule.time.slice(0, 5)}
|
|
</span>
|
|
)}
|
|
<span className="flex items-center gap-1">
|
|
<Tag size={12} />
|
|
{categoryName}
|
|
</span>
|
|
{schedule.source_name && (
|
|
<span className="flex items-center gap-1">
|
|
<Link2 size={12} />
|
|
{schedule.source_name}
|
|
</span>
|
|
)}
|
|
</div>
|
|
{memberList.length > 0 && (
|
|
<div className="flex flex-wrap gap-1 mt-2">
|
|
{memberList.length >= 5 ? (
|
|
<span className="px-2 py-0.5 bg-gradient-to-r from-primary to-primary-dark text-white text-xs rounded-full shadow-sm">
|
|
프로미스나인
|
|
</span>
|
|
) : (
|
|
memberList.map((name, i) => (
|
|
<span key={i} className="px-2 py-0.5 bg-primary/10 text-primary text-xs rounded-full">
|
|
{name.trim()}
|
|
</span>
|
|
))
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
// 타임라인용 일정 카드 컴포넌트 - 모던 디자인
|
|
function TimelineScheduleCard({ schedule, categoryColor, categories, delay = 0 }) {
|
|
const categoryName = categories.find(c => c.id === schedule.category_id)?.name || '미분류';
|
|
const memberNames = schedule.member_names || schedule.members?.map(m => m.name).join(',') || '';
|
|
const memberList = memberNames.split(',').filter(name => name.trim());
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -10 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ delay, type: "spring", stiffness: 300, damping: 30 }}
|
|
>
|
|
{/* 카드 본체 */}
|
|
<div className="relative bg-white rounded-md shadow-[0_2px_12px_rgba(0,0,0,0.06)] border border-gray-100/50 overflow-hidden">
|
|
<div className="p-4">
|
|
|
|
{/* 시간 뱃지 */}
|
|
{schedule.time && (
|
|
<div className="flex items-center gap-1.5 mb-2">
|
|
<div
|
|
className="flex items-center gap-1 px-2 py-0.5 rounded-full text-white text-xs font-medium"
|
|
style={{ backgroundColor: categoryColor }}
|
|
>
|
|
<Clock size={10} />
|
|
{schedule.time.slice(0, 5)}
|
|
</div>
|
|
<span
|
|
className="px-2 py-0.5 rounded-full text-xs font-medium"
|
|
style={{
|
|
backgroundColor: `${categoryColor}15`,
|
|
color: categoryColor
|
|
}}
|
|
>
|
|
{categoryName}
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* 제목 */}
|
|
<h3 className="font-bold text-[15px] text-gray-800 leading-snug">
|
|
{schedule.title}
|
|
</h3>
|
|
|
|
{/* 출처 */}
|
|
{schedule.source_name && (
|
|
<div className="flex items-center gap-1 mt-1.5 text-xs text-gray-400">
|
|
<Link2 size={11} />
|
|
<span>{schedule.source_name}</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* 멤버 */}
|
|
{memberList.length > 0 && (
|
|
<div className="flex flex-wrap gap-1.5 mt-3 pt-3 border-t border-gray-100">
|
|
{memberList.length >= 5 ? (
|
|
<span className="px-2.5 py-1 bg-gradient-to-r from-primary to-primary-dark text-white text-xs rounded-lg font-semibold shadow-sm">
|
|
프로미스나인
|
|
</span>
|
|
) : (
|
|
memberList.map((name, i) => (
|
|
<span
|
|
key={i}
|
|
className="px-2.5 py-1 bg-gradient-to-r from-primary to-primary-dark text-white text-xs rounded-lg font-semibold shadow-sm"
|
|
>
|
|
{name.trim()}
|
|
</span>
|
|
))
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
// 달력 선택기 컴포넌트
|
|
function CalendarPicker({
|
|
selectedDate,
|
|
schedules = [],
|
|
categories = [],
|
|
onSelectDate,
|
|
hideHeader = false, // 헤더 숨김 여부
|
|
externalViewDate, // 외부에서 제어하는 viewDate
|
|
onViewDateChange, // viewDate 변경 콜백
|
|
externalShowYearMonth, // 외부에서 제어하는 년월 선택 모드
|
|
onShowYearMonthChange // 년월 선택 모드 변경 콜백
|
|
}) {
|
|
const [internalViewDate, setInternalViewDate] = useState(new Date(selectedDate));
|
|
|
|
// 외부 viewDate가 있으면 사용, 없으면 내부 상태 사용
|
|
const viewDate = externalViewDate || internalViewDate;
|
|
const setViewDate = (date) => {
|
|
if (onViewDateChange) {
|
|
onViewDateChange(date);
|
|
} else {
|
|
setInternalViewDate(date);
|
|
}
|
|
};
|
|
|
|
// 터치 스와이프 핸들링
|
|
const touchStartX = useRef(0);
|
|
const touchEndX = useRef(0);
|
|
|
|
// 날짜별 일정 존재 여부 및 카테고리 색상
|
|
const scheduleDates = useMemo(() => {
|
|
const dateMap = {};
|
|
schedules.forEach(schedule => {
|
|
const date = schedule.date.split('T')[0]; // YYYY-MM-DD 형식으로 통일
|
|
if (!dateMap[date]) {
|
|
dateMap[date] = [];
|
|
}
|
|
const category = categories.find(c => c.id === schedule.category_id);
|
|
dateMap[date].push(category?.color || '#6b7280');
|
|
});
|
|
return dateMap;
|
|
}, [schedules, categories]);
|
|
|
|
// 날짜별 일정 목록 가져오기 (점 표시용, 최대 3개)
|
|
const getDaySchedules = (date) => {
|
|
const y = date.getFullYear();
|
|
const m = String(date.getMonth() + 1).padStart(2, '0');
|
|
const d = String(date.getDate()).padStart(2, '0');
|
|
const dateStr = `${y}-${m}-${d}`;
|
|
return schedules.filter(s => s.date?.split('T')[0] === dateStr).slice(0, 3);
|
|
};
|
|
|
|
const year = viewDate.getFullYear();
|
|
const month = viewDate.getMonth();
|
|
|
|
// 달력 데이터 생성 함수
|
|
const getCalendarDays = useCallback((y, m) => {
|
|
const firstDay = new Date(y, m, 1);
|
|
const lastDay = new Date(y, m + 1, 0);
|
|
const startDay = firstDay.getDay();
|
|
const daysInMonth = lastDay.getDate();
|
|
|
|
const days = [];
|
|
|
|
// 이전 달 날짜
|
|
const prevMonth = new Date(y, m, 0);
|
|
for (let i = startDay - 1; i >= 0; i--) {
|
|
days.push({
|
|
day: prevMonth.getDate() - i,
|
|
isCurrentMonth: false,
|
|
date: new Date(y, m - 1, prevMonth.getDate() - i)
|
|
});
|
|
}
|
|
|
|
// 현재 달 날짜
|
|
for (let i = 1; i <= daysInMonth; i++) {
|
|
days.push({
|
|
day: i,
|
|
isCurrentMonth: true,
|
|
date: new Date(y, m, i)
|
|
});
|
|
}
|
|
|
|
// 다음 달 날짜 (현재 줄만 채우기)
|
|
const remaining = (7 - (days.length % 7)) % 7;
|
|
for (let i = 1; i <= remaining; i++) {
|
|
days.push({
|
|
day: i,
|
|
isCurrentMonth: false,
|
|
date: new Date(y, m + 1, i)
|
|
});
|
|
}
|
|
|
|
return days;
|
|
}, []);
|
|
|
|
const changeMonth = useCallback((delta) => {
|
|
const newDate = new Date(viewDate);
|
|
newDate.setMonth(newDate.getMonth() + delta);
|
|
setViewDate(newDate);
|
|
}, [viewDate]);
|
|
|
|
const isToday = (date) => {
|
|
const today = new Date();
|
|
return date.getDate() === today.getDate() &&
|
|
date.getMonth() === today.getMonth() &&
|
|
date.getFullYear() === today.getFullYear();
|
|
};
|
|
|
|
// 선택된 날짜인지 확인
|
|
const isSelected = (date) => {
|
|
return date.getDate() === selectedDate.getDate() &&
|
|
date.getMonth() === selectedDate.getMonth() &&
|
|
date.getFullYear() === selectedDate.getFullYear();
|
|
};
|
|
|
|
// 년월 선택 모드 - 외부에서 제어 가능
|
|
const [internalShowYearMonth, setInternalShowYearMonth] = useState(false);
|
|
const showYearMonth = externalShowYearMonth !== undefined ? externalShowYearMonth : internalShowYearMonth;
|
|
const setShowYearMonth = (value) => {
|
|
if (onShowYearMonthChange) {
|
|
onShowYearMonthChange(value);
|
|
} else {
|
|
setInternalShowYearMonth(value);
|
|
}
|
|
};
|
|
|
|
const [yearRangeStart, setYearRangeStart] = useState(Math.floor(year / 12) * 12);
|
|
const yearRange = Array.from({ length: 12 }, (_, i) => yearRangeStart + i);
|
|
|
|
// 배경 스크롤 막기
|
|
useEffect(() => {
|
|
document.body.style.overflow = 'hidden';
|
|
return () => { document.body.style.overflow = ''; };
|
|
}, []);
|
|
|
|
// 현재 달 캘린더 데이터
|
|
const currentMonthDays = useMemo(() => {
|
|
return getCalendarDays(year, month);
|
|
}, [year, month, getCalendarDays]);
|
|
|
|
// 터치 핸들러
|
|
const handleTouchStart = (e) => {
|
|
touchStartX.current = e.touches[0].clientX;
|
|
};
|
|
|
|
const handleTouchMove = (e) => {
|
|
touchEndX.current = e.touches[0].clientX;
|
|
};
|
|
|
|
const handleTouchEnd = () => {
|
|
const diff = touchStartX.current - touchEndX.current;
|
|
const threshold = 50;
|
|
|
|
if (Math.abs(diff) > threshold) {
|
|
if (diff > 0) {
|
|
changeMonth(1);
|
|
} else {
|
|
changeMonth(-1);
|
|
}
|
|
}
|
|
touchStartX.current = 0;
|
|
touchEndX.current = 0;
|
|
};
|
|
|
|
// 월 렌더링 컴포넌트
|
|
const renderMonth = (days) => (
|
|
<div
|
|
onTouchStart={handleTouchStart}
|
|
onTouchMove={handleTouchMove}
|
|
onTouchEnd={handleTouchEnd}
|
|
>
|
|
{/* 요일 헤더 */}
|
|
<div className="grid grid-cols-7 gap-1 mb-2">
|
|
{['일', '월', '화', '수', '목', '금', '토'].map((day, i) => (
|
|
<div
|
|
key={day}
|
|
className={`text-center text-xs font-medium py-1 ${
|
|
i === 0 ? 'text-red-400' : i === 6 ? 'text-blue-400' : 'text-gray-500'
|
|
}`}
|
|
>
|
|
{day}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* 날짜 그리드 */}
|
|
<div className="grid grid-cols-7 gap-1">
|
|
{days.map((item, index) => {
|
|
const dayOfWeek = index % 7;
|
|
const isSunday = dayOfWeek === 0;
|
|
const isSaturday = dayOfWeek === 6;
|
|
const daySchedules = item.isCurrentMonth ? getDaySchedules(item.date) : [];
|
|
|
|
return (
|
|
<button
|
|
key={index}
|
|
onClick={() => onSelectDate(item.date)}
|
|
className="flex flex-col items-center py-2"
|
|
>
|
|
<span className={`w-9 h-9 flex items-center justify-center text-sm font-medium rounded-full transition-all ${
|
|
!item.isCurrentMonth
|
|
? 'text-gray-300'
|
|
: isSelected(item.date)
|
|
? 'bg-primary text-white font-bold shadow-lg'
|
|
: isToday(item.date)
|
|
? 'text-primary font-bold'
|
|
: isSunday
|
|
? 'text-red-500 hover:bg-red-50'
|
|
: isSaturday
|
|
? 'text-blue-500 hover:bg-blue-50'
|
|
: 'text-gray-700 hover:bg-gray-100'
|
|
}`}>
|
|
{item.day}
|
|
</span>
|
|
{/* 일정 점 - 선택된 날짜에는 표시하지 않음, 최대 3개 */}
|
|
{!isSelected(item.date) && daySchedules.length > 0 && (
|
|
<div className="flex gap-0.5 mt-0.5 h-1.5">
|
|
{daySchedules.map((schedule, i) => {
|
|
const cat = categories.find(c => c.id === schedule.category_id);
|
|
const color = cat?.color || '#6b7280';
|
|
return (
|
|
<div
|
|
key={i}
|
|
className="w-1 h-1 rounded-full"
|
|
style={{ backgroundColor: color }}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="p-4">
|
|
<AnimatePresence mode="wait">
|
|
{showYearMonth ? (
|
|
// 년월 선택 UI
|
|
<motion.div
|
|
key="yearMonth"
|
|
initial={{ opacity: 0, y: -10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -10 }}
|
|
transition={{ duration: 0.15 }}
|
|
>
|
|
{/* 년도 범위 헤더 */}
|
|
<div className="flex items-center justify-between mb-3">
|
|
<button
|
|
onClick={() => setYearRangeStart(yearRangeStart - 12)}
|
|
className="p-1"
|
|
>
|
|
<ChevronLeft size={18} />
|
|
</button>
|
|
<span className="font-semibold text-sm">
|
|
{yearRangeStart} - {yearRangeStart + 11}
|
|
</span>
|
|
<button
|
|
onClick={() => setYearRangeStart(yearRangeStart + 12)}
|
|
className="p-1"
|
|
>
|
|
<ChevronRight size={18} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* 년도 선택 */}
|
|
<div className="text-center text-xs text-gray-400 mb-2">년도</div>
|
|
<div className="grid grid-cols-4 gap-2 mb-4">
|
|
{yearRange.map(y => (
|
|
<button
|
|
key={y}
|
|
onClick={() => {
|
|
const newDate = new Date(viewDate);
|
|
newDate.setFullYear(y);
|
|
setViewDate(newDate);
|
|
}}
|
|
className={`py-2 text-sm rounded-lg transition-colors ${
|
|
y === year
|
|
? 'bg-primary text-white'
|
|
: 'text-gray-600 hover:bg-gray-100'
|
|
}`}
|
|
>
|
|
{y}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* 월 선택 */}
|
|
<div className="text-center text-xs text-gray-400 mb-2">월</div>
|
|
<div className="grid grid-cols-4 gap-2">
|
|
{Array.from({ length: 12 }, (_, i) => i + 1).map(m => (
|
|
<button
|
|
key={m}
|
|
onClick={() => {
|
|
const newDate = new Date(year, m - 1, 1);
|
|
setViewDate(newDate);
|
|
setShowYearMonth(false);
|
|
}}
|
|
className={`py-2 text-sm rounded-lg transition-colors ${
|
|
m === month + 1
|
|
? 'bg-primary text-white'
|
|
: 'text-gray-600 hover:bg-gray-100'
|
|
}`}
|
|
>
|
|
{m}월
|
|
</button>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
) : (
|
|
<motion.div
|
|
key={`calendar-${year}-${month}`}
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.15 }}
|
|
>
|
|
{/* 달력 헤더 - hideHeader일 때 숨김 */}
|
|
{!hideHeader && (
|
|
<div className="flex items-center justify-between mb-4">
|
|
<button
|
|
onClick={() => changeMonth(-1)}
|
|
className="p-1"
|
|
>
|
|
<ChevronLeft size={18} />
|
|
</button>
|
|
<button
|
|
onClick={() => setShowYearMonth(true)}
|
|
className="flex items-center gap-1 font-semibold text-sm hover:text-primary transition-colors"
|
|
>
|
|
{year}년 {month + 1}월
|
|
<ChevronDown size={16} />
|
|
</button>
|
|
<button
|
|
onClick={() => changeMonth(1)}
|
|
className="p-1"
|
|
>
|
|
<ChevronRight size={18} />
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* 달력 (터치 스와이프 지원) */}
|
|
{renderMonth(currentMonthDays)}
|
|
|
|
{/* 오늘 버튼 */}
|
|
<div className="mt-3 flex justify-center">
|
|
<button
|
|
onClick={() => onSelectDate(new Date())}
|
|
className="text-xs text-primary font-medium px-4 py-1.5 bg-primary/10 rounded-full"
|
|
>
|
|
오늘
|
|
</button>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default MobileSchedule;
|