From c14bd90e89d40b492602e59c22926d0a13f34d52 Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Sun, 5 Apr 2026 13:40:17 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20A?=
 =?UTF-8?q?PI=EB=A5=BC=20React=20Query=EB=A1=9C=20=EB=B3=80=EA=B2=BD=20(?=
 =?UTF-8?q?=EC=A4=91=EB=B3=B5=20=ED=98=B8=EC=B6=9C=20=EB=B0=A9=EC=A7=80)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- useEffect + useState → useQuery로 변경
- staleTime 10분으로 캐시하여 중복 요청 제거
- 카테고리 색상 Redis 캐시도 삭제 (DB 변경 반영)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../pages/pc/admin/schedules/form/index.jsx   | 39 +++++++++----------
 1 file changed, 18 insertions(+), 21 deletions(-)

diff --git a/frontend/src/pages/pc/admin/schedules/form/index.jsx b/frontend/src/pages/pc/admin/schedules/form/index.jsx
index 45a352f..2d38f3a 100644
--- a/frontend/src/pages/pc/admin/schedules/form/index.jsx
+++ b/frontend/src/pages/pc/admin/schedules/form/index.jsx
@@ -1,5 +1,6 @@
 import { useState, useEffect } from "react";
 import { useNavigate, Link } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
 import { motion, AnimatePresence } from "framer-motion";
 import { Home, ChevronRight } from "lucide-react";
 import AdminLayout from "@/components/pc/admin/layout/Layout";
@@ -38,32 +39,28 @@ function ScheduleFormPage() {
   const navigate = useNavigate();
   const { user, isAuthenticated } = useAdminAuth();
 
-  const [categories, setCategories] = useState([]);
   const [selectedCategory, setSelectedCategory] = useState(null);
-  const [loading, setLoading] = useState(true);
   const [isInitialLoad, setIsInitialLoad] = useState(true);
 
-  // 카테고리 로드
-  useEffect(() => {
-    if (!isAuthenticated) return;
-
-    const fetchCategories = async () => {
-      try {
-        const data = await categoriesApi.getCategories();
-        setCategories(data);
-        // 첫 번째 카테고리를 기본값으로
-        if (data.length > 0) {
-          setSelectedCategory(data[0].id);
-        }
-      } catch (error) {
-        console.error("카테고리 로드 오류:", error);
-      } finally {
-        setLoading(false);
+  // 카테고리 로드 (React Query)
+  const { data: categories = [], isLoading: loading } = useQuery({
+    queryKey: ["scheduleCategories"],
+    queryFn: categoriesApi.getCategories,
+    enabled: isAuthenticated,
+    staleTime: 10 * 60 * 1000,
+    onSuccess: (data) => {
+      if (data.length > 0 && !selectedCategory) {
+        setSelectedCategory(data[0].id);
       }
-    };
+    },
+  });
 
-    fetchCategories();
-  }, [isAuthenticated]);
+  // 카테고리 로드 시 기본값 설정
+  useEffect(() => {
+    if (categories.length > 0 && !selectedCategory) {
+      setSelectedCategory(categories[0].id);
+    }
+  }, [categories, selectedCategory]);
 
   // 카테고리에 따른 폼 렌더링
   const renderForm = () => {