[FE] Admin: 코스 생성 후 데이터 새로고침 및 폼 초기화 누락

[junglesub]

🛠️ Refactor suggestion

코스 생성 후 데이터 새로고침 및 폼 초기화 누락

코스 생성 후 목록을 새로고침하고 폼을 초기화하는 로직이 없어 사용자 경험이 떨어질 수 있습니다.

+ import { useQueryClient } from "@tanstack/react-query";

+ const queryClient = useQueryClient();

  const handleSaveCourse = async () => {
    setIsSaving(true);
    try {
      await fetchBe(`/v1/clubs/${clubSlug}/courses`, {
        method: "POST",
        body: newCourse,
      });
+     // 쿼리 무효화로 목록 새로고침
+     queryClient.invalidateQueries({ queryKey: ["clubCourses", clubSlug] });
+     // 폼 초기화
+     setNewCourse({
+       title: "",
+       slug: "",
+       description: "",
+       pictureUrl: "",
+       isVisible: true,
+     });
      setAddDialogOpen(false);
-     setTimeout(() => {
        navigate(`/club/${clubSlug}/admin/course/${newCourse.slug}`);
-     }, 300);
    } catch (e) {
      alert(e instanceof Error ? e.message : "코스 저장 중 오류 발생");
    } finally {
      setIsSaving(false);
    }
  };

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

// At the top of the file, add:
import { useQueryClient } from "@tanstack/react-query";

…

const AdminCoursePage = () => {
  // Inside your component, before handleSaveCourse:
  const queryClient = useQueryClient();

  // 코스 저장 핸들러 (실제 API 연동 필요)
  const handleSaveCourse = async () => {
    setIsSaving(true);
    try {
      await fetchBe(`/v1/clubs/${clubSlug}/courses`, {
        method: "POST",
        body: newCourse,
      });
      // 쿼리 무효화로 목록 새로고침
      queryClient.invalidateQueries({ queryKey: ["clubCourses", clubSlug] });
      // 폼 초기화
      setNewCourse({
        title: "",
        slug: "",
        description: "",
        pictureUrl: "",
        isVisible: true,
      });
      setAddDialogOpen(false);
      // 즉시 네비게이트
      navigate(`/club/${clubSlug}/admin/course/${newCourse.slug}`);
    } catch (e) {
      alert(e instanceof Error ? e.message : "코스 저장 중 오류 발생");
    } finally {
      setIsSaving(false);
    }
  };

  …
};

🤖 Prompt for AI Agents

In src/main/front/src/admin-club/pages/AdminCoursePage.tsx around lines 37 to
54, after successfully saving a new course, the code does not refresh the course
list or reset the form, which can degrade user experience. To fix this, add
logic to refresh the course list data and reset the form state after the POST
request completes successfully, before closing the dialog and navigating. This
ensures the UI reflects the new course and the form is cleared for future input.

Originally posted by @coderabbitai[bot] in #157 (comment)

[TwinWhales]

AdminCoursePage.tsx

• 목록을 갱신하지 않음
• 생성 완료 후에도 입력 폼이 초기화되지 않음
• useQueryClient() : import 없음