Skip to content

featu: web-23 캘린더 일정 조회 페이지 #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
chlgusdn0203 wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

featu: web-23 캘린더 일정 조회 페이지 #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 64 additions & 0 deletions src/apis/calendar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,3 +32,67 @@ export const getVisitorCalendarMonth = async ({ year, month }) => {
yearMonth: `${year}-${paddedMonth}`,
}));
};

/**
* (관리자) 캘린더 연간 일정 조회
* @param {number} year
* @returns {Promise<Array>} 월별로 묶여있던 일정을 평탄화한 목록
*/
export const getAdminCalendar = async (year) => {
const response = await instance.get('/api/v1/admin/calendar', {
params: { year },
});

return flattenCalendarGroups(response.data?.data);
};

/**
* (관리자) 캘린더 월별 일정 조회
* @param {{ year: number, month: number }} params - month는 1부터 시작한다.
* @returns {Promise<Array>}
*/
export const getAdminCalendarMonth = async ({ year, month }) => {
const paddedMonth = String(month).padStart(2, '0');
const response = await instance.get('/api/v1/admin/calendar/month', {
params: { year, month: paddedMonth },
});

const schedules = response.data?.data;
if (!Array.isArray(schedules)) return [];

return schedules.map((schedule) => ({
...schedule,
yearMonth: `${year}-${paddedMonth}`,
}));
};

/**
* (관리자) 캘린더 일정 등록
* @param {{ title: string, startDate: string, endDate: string }} scheduleData
* @returns {Promise<Object>} 등록된 일정
*/
export const createCalendarSchedule = async (scheduleData) => {
const response = await instance.post('/api/v1/admin/calendar', scheduleData);

return response.data?.data;
};

/**
* (관리자) 캘린더 일정 수정
* @param {number} calendarId - 수정할 일정 ID
* @param {{ title: string, startDate: string, endDate: string }} scheduleData
* @returns {Promise<Object>} 수정된 일정
*/
export const updateCalendarSchedule = async (calendarId, scheduleData) => {
const response = await instance.patch(`/api/v1/admin/calendar/${calendarId}`, scheduleData);

return response.data?.data;
};

/**
* (관리자) 캘린더 일정 삭제 (복수 선택)
* @param {number[]} calendarIds - 삭제할 일정 ID 목록 (최소 1개)
* @returns {Promise}
*/
export const deleteCalendarSchedules = (calendarIds) =>
instance.delete('/api/v1/admin/calendar', { params: { calendarIds } });
2 changes: 1 addition & 1 deletion src/components/schedule/AllScheduleView.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { formatScheduleDate } from '@/utils/schedule';
const ACCENT_COLORS = ['#FFBA88', '#D95D03', '#F96B03', '#953E00', '#6C3E1E'];

function getScheduleKey(schedule) {
return schedule.id ?? `${schedule.startDate}-${schedule.endDate}-${schedule.title}`;
return schedule.calendarId ?? schedule.id ?? `${schedule.startDate}-${schedule.endDate}-${schedule.title}`;
}

function AllScheduleView({
Expand Down
2 changes: 0 additions & 2 deletions src/constants/schedule.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,3 @@ export const DROPDOWN_TYPE = {
MONTH: 'month',
YEAR: 'year',
};

export const SCHEDULES = [];
130 changes: 99 additions & 31 deletions src/pages/admin/AdminSchedulePage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,18 @@
import { useEffect, useMemo, useRef, useState } from 'react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';

import {
createCalendarSchedule,
deleteCalendarSchedules,
getAdminCalendar,
getAdminCalendarMonth,
updateCalendarSchedule,
} from '@/apis/calendar';
import AlertModal from '@/components/admin/AlertModal';
import Header from '@/components/layout/Header';
import AdminCalendarView from '@/components/schedule/AdminCalendarView';
import AllScheduleView from '@/components/schedule/AllScheduleView';
import ScheduleStyles from '@/styles/ScheduleStyles';
import { CLUB_START_YEAR, DROPDOWN_TYPE, SCHEDULES, VIEW_MODE } from '@/constants/schedule';
import { CLUB_START_YEAR, DROPDOWN_TYPE, VIEW_MODE } from '@/constants/schedule';
import {
formatAdminDate,
formatDateKey,
Expand All @@ -17,6 +25,10 @@ import {
updateScrollThumb,
} from '@/utils/schedule';

const FETCH_ERROR_MESSAGE = '일정을 불러오지 못했습니다.\n잠시 후 다시 시도해주세요.';
const SAVE_ERROR_MESSAGE = '일정 저장에 실패했습니다.\n잠시 후 다시 시도해주세요.';
const DELETE_ERROR_MESSAGE = '일정 삭제에 실패했습니다.\n잠시 후 다시 시도해주세요.';

function AdminSchedulePage() {
const monthListRef = useRef(null);
const monthTrackRef = useRef(null);
Expand Down Expand Up @@ -46,21 +58,21 @@ function AdminSchedulePage() {
const [viewMode, setViewMode] = useState(VIEW_MODE.CALENDAR);
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [schedulesToDelete, setSchedulesToDelete] = useState([]);
const [localSchedules, setLocalSchedules] = useState([]);

const allSchedules = useMemo(() => [...SCHEDULES, ...localSchedules], [localSchedules]);
const [yearSchedules, setYearSchedules] = useState([]);
const [monthSchedules, setMonthSchedules] = useState([]);
const [alertMessage, setAlertMessage] = useState(null);

const calendarDates = useMemo(() => getCalendarDates(year, month), [year, month]);
const scheduleDateKeys = useMemo(() => getScheduleDateKeys(allSchedules), [allSchedules]);
const scheduleDateKeys = useMemo(() => getScheduleDateKeys(monthSchedules), [monthSchedules]);
const visibleSchedules = useMemo(() => {
const filteredSchedules =
viewMode === VIEW_MODE.ALL
? allSchedules.filter(
? yearSchedules.filter(
(schedule) => parseLocalDate(schedule.startDate).getFullYear() === year
)
: allSchedules.filter((schedule) => isScheduleInMonth(schedule, year, month));
: monthSchedules.filter((schedule) => isScheduleInMonth(schedule, year, month));
return [...filteredSchedules].sort(sortByStartDate);
}, [allSchedules, month, viewMode, year]);
}, [month, monthSchedules, viewMode, year, yearSchedules]);
const scheduleMonthEntries = useMemo(
() => Object.entries(groupSchedulesByMonth(visibleSchedules)),
[visibleSchedules]
Expand All @@ -87,37 +99,89 @@ function AdminSchedulePage() {
setOpenedDropdown(null);
};

const handleAddSchedule = ({ dateKey, endDateKey, title }) => {
setLocalSchedules((prev) => [
...prev,
{ id: `local-${Date.now()}`, startDate: dateKey, endDate: endDateKey ?? dateKey, title },
]);
const fetchYearSchedules = useCallback(async () => {
try {
const scheduleList = await getAdminCalendar(year);
setYearSchedules(scheduleList);
} catch (error) {
console.error('[AdminSchedulePage] 연간 일정 조회 실패', error);
setYearSchedules([]);
setAlertMessage(FETCH_ERROR_MESSAGE);
}
}, [year]);

const fetchMonthSchedules = useCallback(async () => {
try {
const scheduleList = await getAdminCalendarMonth({ year, month: month + 1 });
setMonthSchedules(scheduleList);
} catch (error) {
console.error('[AdminSchedulePage] 월간 일정 조회 실패', error);
setMonthSchedules([]);
setAlertMessage(FETCH_ERROR_MESSAGE);
}
}, [month, year]);

useEffect(() => {
if (viewMode === VIEW_MODE.ALL) fetchYearSchedules();
}, [viewMode, fetchYearSchedules]);

useEffect(() => {
if (viewMode === VIEW_MODE.CALENDAR) fetchMonthSchedules();
}, [viewMode, fetchMonthSchedules]);

const handleAddSchedule = async ({ dateKey, endDateKey, title }) => {
try {
await createCalendarSchedule({
title,
startDate: dateKey,
endDate: endDateKey ?? dateKey,
});
await fetchMonthSchedules();
} catch (error) {
console.error('[AdminSchedulePage] 일정 등록 실패', error);
setAlertMessage(SAVE_ERROR_MESSAGE);
}
};

const handleSaveEdits = (updatedSchedules) => {
setLocalSchedules((prev) =>
prev.map((s) => {
const edited = updatedSchedules.find((u) => u.id === s.id);
return edited ? { ...s, title: edited.title } : s;
})
const handleSaveEdits = async (updatedSchedules) => {
const changedSchedules = updatedSchedules.filter(
(edited, index) => edited.title !== visibleSchedules[index]?.title
);
Comment on lines +147 to 149

@gemini-code-assist gemini-code-assist Bot Jul 11, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

updatedSchedules와 visibleSchedules를 인덱스(index) 기준으로 비교하여 변경 여부를 판단하고 있습니다.

하지만 React의 상태 변경이나 비동기 데이터 갱신 등으로 인해 visibleSchedules의 순서나 원소 개수가 변할 경우, 인덱스 기반 비교는 잘못된 객체를 비교하거나 undefined 참조 오류를 발생시킬 수 있어 안전하지 않습니다.

고유 식별자인 calendarId를 사용하여 원래 일정을 찾아 비교하는 것이 훨씬 안전하고 견고합니다.

Suggested change
const changedSchedules = updatedSchedules.filter(
(edited, index) => edited.title !== visibleSchedules[index]?.title
);
const changedSchedules = updatedSchedules.filter((edited) => {
const original = visibleSchedules.find((s) => s.calendarId === edited.calendarId);
return original ? edited.title !== original.title : false;
});

if (changedSchedules.length === 0) return;

try {
await Promise.all(
changedSchedules.map((schedule) =>
updateCalendarSchedule(schedule.calendarId, {
title: schedule.title,
startDate: schedule.startDate,
endDate: schedule.endDate,
})
)
);
await fetchMonthSchedules();
} catch (error) {
console.error('[AdminSchedulePage] 일정 수정 실패', error);
setAlertMessage(SAVE_ERROR_MESSAGE);
}
Comment on lines +152 to +166

@gemini-code-assist gemini-code-assist Bot Jul 11, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Promise.all을 사용하여 여러 일정을 동시에 수정할 때, 하나라도 실패하면 전체가 거부(reject)되어 catch 블록으로 이동합니다. 이 경우 성공적으로 수정된 일부 일정이 있더라도 fetchMonthSchedules()가 호출되지 않아 화면의 데이터가 서버와 동기화되지 않는 문제가 발생할 수 있습니다.

오류가 발생하더라도 최종적으로 fetchMonthSchedules()를 호출하여 최신 상태를 반영할 수 있도록 finally 블록을 사용하거나 에러 핸들링을 보완하는 것이 좋습니다.

    try {
      await Promise.all(
        changedSchedules.map((schedule) =>
          updateCalendarSchedule(schedule.calendarId, {
            title: schedule.title,
            startDate: schedule.startDate,
            endDate: schedule.endDate,
          })
        )
      );
    } catch (error) {
      console.error('[AdminSchedulePage] 일정 수정 실패', error);
      setAlertMessage(SAVE_ERROR_MESSAGE);
    } finally {
      await fetchMonthSchedules();
    }

};

const handleDeleteSchedule = (toDelete) => {
if (!toDelete || toDelete.length === 0) return;
setSchedulesToDelete(toDelete);
setIsDeleteModalOpen(true);
};
const handleDeleteConfirm = () => {
setLocalSchedules((prev) =>
prev.filter(
(s) =>
!schedulesToDelete.some(
(d) => d.startDate === s.startDate && d.endDate === s.endDate && d.title === s.title
)
)
);
setIsDeleteModalOpen(false);
setSchedulesToDelete([]);
const handleDeleteConfirm = async () => {
try {
await deleteCalendarSchedules(schedulesToDelete.map((schedule) => schedule.calendarId));
await (viewMode === VIEW_MODE.ALL ? fetchYearSchedules() : fetchMonthSchedules());
} catch (error) {
console.error('[AdminSchedulePage] 일정 삭제 실패', error);
setAlertMessage(DELETE_ERROR_MESSAGE);
} finally {
setIsDeleteModalOpen(false);
setSchedulesToDelete([]);
}
};
const handleDeleteCancel = () => {
setIsDeleteModalOpen(false);
Expand Down Expand Up @@ -291,6 +355,10 @@ function AdminSchedulePage() {
</div>
)}
</section>

{alertMessage && (
<AlertModal message={alertMessage} onConfirm={() => setAlertMessage(null)} />
)}
</>
);
}
Expand Down