caadiq/fromis_9
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: 전체보기 기능 제거 및 날짜 선택 기본값 개선

Browse source 
- 전체보기 버튼 제거
- 월 이동 시 이번달이면 오늘, 다른 달이면 1일 자동 선택
- 같은 날짜 클릭 시 토글 제거 (항상 선택 유지)
- 필터링 대상 줄여서 성능 개선
This commit is contained in:
caadiq 2026-01-09 17:35:15 +09:00
parent 578ab25568
commit 4619d101f0
2 changed files with 68 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
frontend/src/pages/pc/Schedule.jsx
View file

@ -158,19 +158,36 @@ function Schedule() {
const prevMonth = () => {
setSlideDirection(-1);
setCurrentDate(new Date(year, month - 1, 1));
setSelectedDate(null); // 월 변경 시 초기화
const newDate = new Date(year, month - 1, 1);
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 = () => {
setSlideDirection(1);
setCurrentDate(new Date(year, month + 1, 1));
setSelectedDate(null); // 월 변경 시 초기화
const newDate = new Date(year, month + 1, 1);
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 dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
setSelectedDate(selectedDate === dateStr ? null : dateStr);
setSelectedDate(dateStr);
};
const selectYear = (newYear) => {
@ -179,7 +196,16 @@ function Schedule() {
};
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);
setViewMode('yearMonth');
};
@ -537,23 +563,12 @@ function Schedule() {
</motion.div>
</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">
<span className="w-2 h-2 rounded-full bg-primary flex-shrink-0" />
<span className="leading-none">일정 있음</span>
</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>
</motion.div>

61
frontend/src/pages/pc/admin/AdminSchedule.jsx
View file

@ -302,15 +302,31 @@ function AdminSchedule() {
// 월 이동
const prevMonth = () => {
setSlideDirection(-1);
setCurrentDate(new Date(year, month - 1, 1));
setSelectedDate(null);
const newDate = new Date(year, month - 1, 1);
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([]); // 이전 달 데이터 즉시 초기화
};
const nextMonth = () => {
setSlideDirection(1);
setCurrentDate(new Date(year, month + 1, 1));
setSelectedDate(null);
const newDate = new Date(year, month + 1, 1);
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([]); // 이전 달 데이터 즉시 초기화
};
@ -326,20 +342,24 @@ function AdminSchedule() {
// 월 선택 시 적용 후 닫기
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);
setViewMode('yearMonth');
};
// 날짜 선택
// 날짜 선택 (토글 없이 항상 선택)
const selectDate = (day) => {
const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
setSelectedDate(selectedDate === dateStr ? null : dateStr);
};
// 전체보기
const showAll = () => {
setSelectedDate(null);
setSelectedDate(dateStr);
};
// 삭제 관련 상태
@ -814,25 +834,12 @@ function AdminSchedule() {
</div>
</motion.div>
</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">
<span className="w-2 h-2 rounded-full bg-primary flex-shrink-0" />
<span className="leading-none">일정 있음</span>
</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>
</motion.div>