refactor: 전체보기 기능 제거 및 날짜 선택 기본값 개선
- 전체보기 버튼 제거 - 월 이동 시 이번달이면 오늘, 다른 달이면 1일 자동 선택 - 같은 날짜 클릭 시 토글 제거 (항상 선택 유지) - 필터링 대상 줄여서 성능 개선
This commit is contained in:
parent
578ab25568
commit
4619d101f0
2 changed files with 68 additions and 46 deletions
|
|
@ -158,19 +158,36 @@ function Schedule() {
|
||||||
|
|
||||||
const prevMonth = () => {
|
const prevMonth = () => {
|
||||||
setSlideDirection(-1);
|
setSlideDirection(-1);
|
||||||
setCurrentDate(new Date(year, month - 1, 1));
|
const newDate = new Date(year, month - 1, 1);
|
||||||
setSelectedDate(null); // 월 변경 시 초기화
|
setCurrentDate(newDate);
|
||||||
|
// 이번달이면 오늘, 다른 달이면 1일 선택
|
||||||
|
const today = new Date();
|
||||||
|
if (newDate.getFullYear() === today.getFullYear() && newDate.getMonth() === today.getMonth()) {
|
||||||
|
setSelectedDate(getTodayKST());
|
||||||
|
} else {
|
||||||
|
const firstDay = `${newDate.getFullYear()}-${String(newDate.getMonth() + 1).padStart(2, '0')}-01`;
|
||||||
|
setSelectedDate(firstDay);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const nextMonth = () => {
|
const nextMonth = () => {
|
||||||
setSlideDirection(1);
|
setSlideDirection(1);
|
||||||
setCurrentDate(new Date(year, month + 1, 1));
|
const newDate = new Date(year, month + 1, 1);
|
||||||
setSelectedDate(null); // 월 변경 시 초기화
|
setCurrentDate(newDate);
|
||||||
|
// 이번달이면 오늘, 다른 달이면 1일 선택
|
||||||
|
const today = new Date();
|
||||||
|
if (newDate.getFullYear() === today.getFullYear() && newDate.getMonth() === today.getMonth()) {
|
||||||
|
setSelectedDate(getTodayKST());
|
||||||
|
} else {
|
||||||
|
const firstDay = `${newDate.getFullYear()}-${String(newDate.getMonth() + 1).padStart(2, '0')}-01`;
|
||||||
|
setSelectedDate(firstDay);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 날짜 선택 (토글 없이 항상 선택)
|
||||||
const selectDate = (day) => {
|
const selectDate = (day) => {
|
||||||
const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
|
const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
|
||||||
setSelectedDate(selectedDate === dateStr ? null : dateStr);
|
setSelectedDate(dateStr);
|
||||||
};
|
};
|
||||||
|
|
||||||
const selectYear = (newYear) => {
|
const selectYear = (newYear) => {
|
||||||
|
|
@ -179,7 +196,16 @@ function Schedule() {
|
||||||
};
|
};
|
||||||
|
|
||||||
const selectMonth = (newMonth) => {
|
const selectMonth = (newMonth) => {
|
||||||
setCurrentDate(new Date(year, newMonth, 1));
|
const newDate = new Date(year, newMonth, 1);
|
||||||
|
setCurrentDate(newDate);
|
||||||
|
// 이번달이면 오늘, 다른 달이면 1일 선택
|
||||||
|
const today = new Date();
|
||||||
|
if (newDate.getFullYear() === today.getFullYear() && newDate.getMonth() === today.getMonth()) {
|
||||||
|
setSelectedDate(getTodayKST());
|
||||||
|
} else {
|
||||||
|
const firstDay = `${year}-${String(newMonth + 1).padStart(2, '0')}-01`;
|
||||||
|
setSelectedDate(firstDay);
|
||||||
|
}
|
||||||
setShowYearMonthPicker(false);
|
setShowYearMonthPicker(false);
|
||||||
setViewMode('yearMonth');
|
setViewMode('yearMonth');
|
||||||
};
|
};
|
||||||
|
|
@ -537,23 +563,12 @@ function Schedule() {
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</AnimatePresence>
|
</AnimatePresence>
|
||||||
|
|
||||||
{/* 범례 및 전체보기 */}
|
{/* 범례 */}
|
||||||
<div className="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between text-sm">
|
<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">
|
<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="w-2 h-2 rounded-full bg-primary flex-shrink-0" />
|
||||||
<span className="leading-none">일정 있음</span>
|
<span className="leading-none">일정 있음</span>
|
||||||
</div>
|
</div>
|
||||||
<button
|
|
||||||
onClick={() => setSelectedDate(null)}
|
|
||||||
className={`px-4 py-2 rounded-lg transition-colors ${
|
|
||||||
selectedDate
|
|
||||||
? 'bg-primary text-white hover:bg-primary-dark'
|
|
||||||
: 'bg-gray-100 text-gray-400 cursor-default'
|
|
||||||
}`}
|
|
||||||
disabled={!selectedDate}
|
|
||||||
>
|
|
||||||
전체 보기
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
|
||||||
|
|
@ -302,15 +302,31 @@ function AdminSchedule() {
|
||||||
// 월 이동
|
// 월 이동
|
||||||
const prevMonth = () => {
|
const prevMonth = () => {
|
||||||
setSlideDirection(-1);
|
setSlideDirection(-1);
|
||||||
setCurrentDate(new Date(year, month - 1, 1));
|
const newDate = new Date(year, month - 1, 1);
|
||||||
setSelectedDate(null);
|
setCurrentDate(newDate);
|
||||||
|
// 이번달이면 오늘, 다른 달이면 1일 선택
|
||||||
|
const today = new Date();
|
||||||
|
if (newDate.getFullYear() === today.getFullYear() && newDate.getMonth() === today.getMonth()) {
|
||||||
|
setSelectedDate(getTodayKST());
|
||||||
|
} else {
|
||||||
|
const firstDay = `${newDate.getFullYear()}-${String(newDate.getMonth() + 1).padStart(2, '0')}-01`;
|
||||||
|
setSelectedDate(firstDay);
|
||||||
|
}
|
||||||
setSchedules([]); // 이전 달 데이터 즉시 초기화
|
setSchedules([]); // 이전 달 데이터 즉시 초기화
|
||||||
};
|
};
|
||||||
|
|
||||||
const nextMonth = () => {
|
const nextMonth = () => {
|
||||||
setSlideDirection(1);
|
setSlideDirection(1);
|
||||||
setCurrentDate(new Date(year, month + 1, 1));
|
const newDate = new Date(year, month + 1, 1);
|
||||||
setSelectedDate(null);
|
setCurrentDate(newDate);
|
||||||
|
// 이번달이면 오늘, 다른 달이면 1일 선택
|
||||||
|
const today = new Date();
|
||||||
|
if (newDate.getFullYear() === today.getFullYear() && newDate.getMonth() === today.getMonth()) {
|
||||||
|
setSelectedDate(getTodayKST());
|
||||||
|
} else {
|
||||||
|
const firstDay = `${newDate.getFullYear()}-${String(newDate.getMonth() + 1).padStart(2, '0')}-01`;
|
||||||
|
setSelectedDate(firstDay);
|
||||||
|
}
|
||||||
setSchedules([]); // 이전 달 데이터 즉시 초기화
|
setSchedules([]); // 이전 달 데이터 즉시 초기화
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -326,20 +342,24 @@ function AdminSchedule() {
|
||||||
|
|
||||||
// 월 선택 시 적용 후 닫기
|
// 월 선택 시 적용 후 닫기
|
||||||
const selectMonth = (newMonth) => {
|
const selectMonth = (newMonth) => {
|
||||||
setCurrentDate(new Date(year, newMonth, 1));
|
const newDate = new Date(year, newMonth, 1);
|
||||||
|
setCurrentDate(newDate);
|
||||||
|
// 이번달이면 오늘, 다른 달이면 1일 선택
|
||||||
|
const today = new Date();
|
||||||
|
if (newDate.getFullYear() === today.getFullYear() && newDate.getMonth() === today.getMonth()) {
|
||||||
|
setSelectedDate(getTodayKST());
|
||||||
|
} else {
|
||||||
|
const firstDay = `${year}-${String(newMonth + 1).padStart(2, '0')}-01`;
|
||||||
|
setSelectedDate(firstDay);
|
||||||
|
}
|
||||||
setShowYearMonthPicker(false);
|
setShowYearMonthPicker(false);
|
||||||
setViewMode('yearMonth');
|
setViewMode('yearMonth');
|
||||||
};
|
};
|
||||||
|
|
||||||
// 날짜 선택
|
// 날짜 선택 (토글 없이 항상 선택)
|
||||||
const selectDate = (day) => {
|
const selectDate = (day) => {
|
||||||
const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
|
const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
|
||||||
setSelectedDate(selectedDate === dateStr ? null : dateStr);
|
setSelectedDate(dateStr);
|
||||||
};
|
|
||||||
|
|
||||||
// 전체보기
|
|
||||||
const showAll = () => {
|
|
||||||
setSelectedDate(null);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// 삭제 관련 상태
|
// 삭제 관련 상태
|
||||||
|
|
@ -814,25 +834,12 @@ function AdminSchedule() {
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</AnimatePresence>
|
</AnimatePresence>
|
||||||
{/* 범례 및 전체보기 */}
|
{/* 범례 */}
|
||||||
<div className="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between text-sm">
|
<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">
|
<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="w-2 h-2 rounded-full bg-primary flex-shrink-0" />
|
||||||
<span className="leading-none">일정 있음</span>
|
<span className="leading-none">일정 있음</span>
|
||||||
</div>
|
</div>
|
||||||
<button
|
|
||||||
onClick={showAll}
|
|
||||||
className={`px-4 py-2 rounded-lg transition-colors ${
|
|
||||||
isSearchMode
|
|
||||||
? 'bg-gray-100 text-gray-400 cursor-not-allowed opacity-50'
|
|
||||||
: selectedDate
|
|
||||||
? 'bg-primary text-white hover:bg-primary-dark'
|
|
||||||
: 'bg-gray-100 text-gray-400 cursor-default'
|
|
||||||
}`}
|
|
||||||
disabled={!selectedDate || isSearchMode}
|
|
||||||
>
|
|
||||||
전체 보기
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue