perf: 일정 페이지 월별 데이터 로딩으로 변경
- 프론트엔드: currentDate 변경 시 해당 월 일정만 로드 - 백엔드: /api/schedules에 year/month 파라미터 지원 추가 - 초기 로딩 속도 개선 (전체 로드 → 월별 로드)
This commit is contained in:
parent
2b6fa74eb8
commit
80fad4d055
2 changed files with 21 additions and 4 deletions
|
|
@ -7,7 +7,7 @@ const router = express.Router();
|
||||||
// 공개 일정 목록 조회 (검색 포함)
|
// 공개 일정 목록 조회 (검색 포함)
|
||||||
router.get("/", async (req, res) => {
|
router.get("/", async (req, res) => {
|
||||||
try {
|
try {
|
||||||
const { search, startDate, endDate, limit } = req.query;
|
const { search, startDate, endDate, limit, year, month } = req.query;
|
||||||
|
|
||||||
// 검색어가 있으면 Meilisearch 사용
|
// 검색어가 있으면 Meilisearch 사용
|
||||||
if (search && search.trim()) {
|
if (search && search.trim()) {
|
||||||
|
|
@ -30,6 +30,15 @@ router.get("/", async (req, res) => {
|
||||||
let whereClause = "WHERE 1=1";
|
let whereClause = "WHERE 1=1";
|
||||||
const params = [];
|
const params = [];
|
||||||
|
|
||||||
|
// 년/월 필터링 (월별 데이터 로딩용)
|
||||||
|
if (year && month) {
|
||||||
|
whereClause += " AND YEAR(s.date) = ? AND MONTH(s.date) = ?";
|
||||||
|
params.push(parseInt(year), parseInt(month));
|
||||||
|
} else if (year) {
|
||||||
|
whereClause += " AND YEAR(s.date) = ?";
|
||||||
|
params.push(parseInt(year));
|
||||||
|
}
|
||||||
|
|
||||||
if (startDate) {
|
if (startDate) {
|
||||||
whereClause += " AND s.date >= ?";
|
whereClause += " AND s.date >= ?";
|
||||||
params.push(startDate);
|
params.push(startDate);
|
||||||
|
|
|
||||||
|
|
@ -82,14 +82,22 @@ function Schedule() {
|
||||||
}, [inView, hasNextPage, isFetchingNextPage, fetchNextPage, isSearchMode, searchTerm]);
|
}, [inView, hasNextPage, isFetchingNextPage, fetchNextPage, isSearchMode, searchTerm]);
|
||||||
|
|
||||||
// 데이터 로드
|
// 데이터 로드
|
||||||
|
// 초기 데이터 로드 (카테고리만)
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetchSchedules();
|
|
||||||
fetchCategories();
|
fetchCategories();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const fetchSchedules = async () => {
|
// 월 변경 시 일정 로드
|
||||||
|
useEffect(() => {
|
||||||
|
const year = currentDate.getFullYear();
|
||||||
|
const month = currentDate.getMonth();
|
||||||
|
fetchSchedules(year, month + 1);
|
||||||
|
}, [currentDate]);
|
||||||
|
|
||||||
|
const fetchSchedules = async (year, month) => {
|
||||||
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
const response = await fetch('/api/schedules');
|
const response = await fetch(`/api/schedules?year=${year}&month=${month}`);
|
||||||
if (response.ok) {
|
if (response.ok) {
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
setSchedules(data);
|
setSchedules(data);
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue