fix(frontend): 일정 추가/수정 페이지 useEffect → useQuery 변경
- React 18 Strict Mode 중복 요청 방지 - members, categories를 useQuery로 전환 - 수정 모드 일정 로드는 useEffect 유지 (폼 상태 초기화 필요) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
e3278c81de
commit
84113a8c48
1 changed files with 25 additions and 32 deletions
|
|
@ -1,5 +1,6 @@
|
|||
import { useState, useEffect, useRef } from "react";
|
||||
import { useNavigate, Link, useParams } from "react-router-dom";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { formatDate } from "../../../utils/date";
|
||||
import {
|
||||
|
|
@ -42,7 +43,6 @@ function AdminScheduleForm() {
|
|||
|
||||
const { toast, setToast } = useToast();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [members, setMembers] = useState([]);
|
||||
|
||||
// 폼 데이터 (날짜/시간 범위 지원)
|
||||
const [formData, setFormData] = useState({
|
||||
|
|
@ -77,8 +77,22 @@ function AdminScheduleForm() {
|
|||
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
||||
const [deleteTargetIndex, setDeleteTargetIndex] = useState(null);
|
||||
|
||||
// 카테고리 목록 (API에서 로드)
|
||||
const [categories, setCategories] = useState([]);
|
||||
// 멤버 목록 조회
|
||||
const { data: membersData = [] } = useQuery({
|
||||
queryKey: ["members"],
|
||||
queryFn: getMembers,
|
||||
enabled: isAuthenticated,
|
||||
staleTime: 5 * 60 * 1000,
|
||||
});
|
||||
const members = membersData.filter((m) => !m.is_former);
|
||||
|
||||
// 카테고리 목록 조회
|
||||
const { data: categories = [] } = useQuery({
|
||||
queryKey: ["admin", "categories"],
|
||||
queryFn: categoriesApi.getCategories,
|
||||
enabled: isAuthenticated,
|
||||
staleTime: 5 * 60 * 1000,
|
||||
});
|
||||
|
||||
// 저장 중 상태
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
|
@ -132,28 +146,16 @@ function AdminScheduleForm() {
|
|||
return days[date.getDay()];
|
||||
};
|
||||
|
||||
// 카테고리 로드
|
||||
const fetchCategories = async () => {
|
||||
try {
|
||||
const data = await categoriesApi.getCategories();
|
||||
setCategories(data);
|
||||
// 첫 번째 카테고리를 기본값으로 설정
|
||||
if (data.length > 0 && !formData.category) {
|
||||
setFormData((prev) => ({ ...prev, category: data[0].id }));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("카테고리 로드 오류:", error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!isAuthenticated) return;
|
||||
|
||||
fetchMembers();
|
||||
fetchCategories();
|
||||
if (categories.length > 0 && !formData.category && !isEditMode) {
|
||||
setFormData((prev) => ({ ...prev, category: categories[0].id }));
|
||||
}
|
||||
}, [categories, isEditMode]);
|
||||
|
||||
// 수정 모드일 경우 기존 데이터 로드
|
||||
if (isEditMode && id) {
|
||||
useEffect(() => {
|
||||
if (isAuthenticated && isEditMode && id) {
|
||||
fetchSchedule();
|
||||
}
|
||||
}, [isAuthenticated, isEditMode, id]);
|
||||
|
|
@ -223,15 +225,6 @@ function AdminScheduleForm() {
|
|||
}
|
||||
};
|
||||
|
||||
const fetchMembers = async () => {
|
||||
try {
|
||||
const data = await getMembers();
|
||||
setMembers(data.filter((m) => !m.is_former));
|
||||
} catch (error) {
|
||||
console.error("멤버 로드 오류:", error);
|
||||
}
|
||||
};
|
||||
|
||||
// 멤버 토글
|
||||
const toggleMember = (memberId) => {
|
||||
const newMembers = formData.members.includes(memberId)
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue