diff --git a/apps/admin/src/components/features/univ-apply-infos/tabs/UnivApplyInfoManageTab.tsx b/apps/admin/src/components/features/univ-apply-infos/tabs/UnivApplyInfoManageTab.tsx index 29cf32b3..767b1dec 100644 --- a/apps/admin/src/components/features/univ-apply-infos/tabs/UnivApplyInfoManageTab.tsx +++ b/apps/admin/src/components/features/univ-apply-infos/tabs/UnivApplyInfoManageTab.tsx @@ -1,7 +1,7 @@ "use client"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; -import { type FormEvent, useId, useState } from "react"; +import { type FormEvent, useEffect, useId, useState } from "react"; import { toast } from "sonner"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; @@ -69,6 +69,7 @@ export function UnivApplyInfoManageTab() { const [editModal, setEditModal] = useState({ open: false }); const [editForm, setEditForm] = useState({}); const [editExtraInfoText, setEditExtraInfoText] = useState(""); + const editingId = editModal.open ? editModal.id : undefined; const [createModal, setCreateModal] = useState({ open: false }); const [createForm, setCreateForm] = useState>({}); @@ -103,6 +104,28 @@ export function UnivApplyInfoManageTab() { enabled: hostSearchQuery.length > 0, }); + const editDetailQuery = useQuery({ + queryKey: ["univ-apply-infos", "detail", editingId], + queryFn: () => adminApi.getUnivApplyInfo(editingId as number), + enabled: editingId !== undefined, + }); + + // biome-ignore lint/correctness/useExhaustiveDependencies: 조회된 상세 정보의 id가 바뀔 때만 폼을 채워야 하며, 리페치로 데이터 참조가 바뀌어도 수정 중인 값을 덮어쓰면 안 됨 + useEffect(() => { + if (!editDetailQuery.data) return; + const detail = editDetailQuery.data; + setEditForm({ + studentCapacity: detail.studentCapacity, + semesterAvailableForDispatch: detail.semesterAvailableForDispatch, + semesterRequirement: detail.semesterRequirement, + detailsForLanguage: detail.detailsForLanguage, + gpaRequirement: detail.gpaRequirement, + gpaRequirementCriteria: detail.gpaRequirementCriteria, + detailsForAccommodation: detail.detailsForAccommodation, + }); + setEditExtraInfoText(detail.extraInfo ? JSON.stringify(detail.extraInfo, null, 2) : ""); + }, [editDetailQuery.data?.id]); + const updateMutation = useMutation({ mutationFn: ({ id, data }: { id: number; data: UnivApplyInfoUpdatePayload }) => adminApi.updateUnivApplyInfo(id, data), @@ -158,7 +181,7 @@ export function UnivApplyInfoManageTab() { }; const handleOpenEdit = (item: UnivApplyInfoSearchResult) => { - setEditForm({ studentCapacity: item.studentCapacity }); + setEditForm({}); setEditExtraInfoText(""); setEditModal({ open: true, id: item.id, name: item.koreanName }); }; @@ -363,85 +386,91 @@ export function UnivApplyInfoManageTab() { ✕ -
-
- - - setEditForm((p) => ({ - ...p, - studentCapacity: e.target.value ? Number(e.target.value) : undefined, - })) - } - /> -
-
- - -
- {EDIT_TEXT_FIELDS.map(({ key, label }) => ( -
-