fix(performanceNews): 공연 등록 중복 route 수정 (#437)

* feat(performanceNews): 공연 소식 페이지 기본 구성 구현

* feat(performanceNews): 전체 탭 구현

* feat(performanceNews): 세부 탭 구현

* feat(performanceNews): 공연 등록 페이지 ui 구현

* feat(performanceNews): 공연 소식 전체탭 api 연동

* feat(performanceNews): 공연 소식 세부탭 api 연동

* feat(performanceNews): 공연 소식 등록 api 연동

* feat(performanceNews): 공연 소식 상세 api 연동

* feat(performanceNews): 공연 소식 수정 api 연동

* feat(performanceNews): 링크 이동 모달 구현

* fix(performanceNews): 공연 등록 중복 route 수정

Author: goodsmell

src/App.jsx

@@ -235,14 +235,7 @@ function App() {
 
             <Route path="mypage/infochange" element={<AccountInfoChange />} />
             <Route path="/performanceNews" element={<PerformanceNews />} />
-            <Route
-              path="/performanceNews/register"
-              element={
-                <ProtectedRoute>
-                  <AddPerformanceNews />
-                </ProtectedRoute>
-              }
-            />
+
             <Route path="/performanceNews/edit/:id"
               element={
                 <ProtectedRoute>

src/pages/performanceNews/addPerformanceNews.tsx

@@ -35,14 +35,17 @@ const AddPerformanceNews = ({ mode }: { mode: "create" | "edit" }) => {
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const posterPreviewUrl = useMemo(() => {
     if (posterFile) return URL.createObjectURL(posterFile);
+
     return posterPreview; // 기존 이미지
   }, [posterFile, posterPreview]);
   const { mutateAsync, isPending } = useRegisterPerformance();
+
+  const isEdit = mode === "edit" && Boolean(id);
   const {
     data: detailData,
     isLoading: isDetailLoading,
     isError: isDetailError,
-  } = usePerformanceDetail(id ?? "", true);
+  } = usePerformanceDetail(id ?? "", isEdit);
 
   useEffect(() => {
     if (mode !== "edit" || !detailData) return;
@@ -102,6 +105,7 @@ const AddPerformanceNews = ({ mode }: { mode: "create" | "edit" }) => {
 
     try {
       if (mode === "create") {
+        console.log("등록");
         const poster = posterFile ?? (await getDefaultPosterFile());
         const ok = await mutateAsync({
           poster,
@@ -117,7 +121,7 @@ const AddPerformanceNews = ({ mode }: { mode: "create" | "edit" }) => {
         else setErrorMessage("등록에 실패했습니다. 잠시 후 다시 시도해주세요.");
         return;
       }
-
+      console.log("수정");
       // ---- edit ----
       if (!id) {
         setErrorMessage("공연 소식 id가 없습니다.");

src/routes/ProtectedRoute.tsx

@@ -1,7 +1,7 @@
 import Cookies from "js-cookie";
-import { useContext, useEffect, useRef } from "react";
+import { useContext, useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import AuthContext from "@/contexts/AuthContext";
 
 interface ProtectedRouteProps {
@@ -10,35 +10,46 @@ interface ProtectedRouteProps {
 
 const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
   const { isAuthenticated, refreshAccessToken } = useContext(AuthContext);
+  const [checked, setChecked] = useState(false);
+
   const navigate = useNavigate();
   const location = useLocation();
 
-  const checkedAuthFlag = useRef<boolean>(false);
-
   useEffect(() => {
-    if (checkedAuthFlag.current) return;
-
-    if (!Cookies.get("accessToken")) {
-      (async () => {
-        const newAccessToken = await refreshAccessToken();
-
-        if (!newAccessToken) {
-          alert("로그인이 필요한 서비스입니다.");
-          navigate("/signin", {
-            replace: true,
-            state: { from: location },
-          });
-        }
-
-        checkedAuthFlag.current = true;
-      })();
-    } else {
-      checkedAuthFlag.current = true;
-    }
-  }, [navigate, refreshAccessToken, location]);
-
-  // ✅ 인증된 경우에만 렌더
-  return isAuthenticated ? children : null;
+    let mounted = true;
+
+    const run = async () => {
+      const hasToken = Boolean(Cookies.get("accessToken"));
+
+      // 이미 인증 상태면 통과
+      if (isAuthenticated || hasToken) {
+        if (mounted) setChecked(true);
+        return;
+      }
+
+      // 토큰 없으면 refresh 시도
+      const newToken = await refreshAccessToken();
+
+      if (!newToken) {
+        alert("로그인이 필요한 서비스입니다.");
+        navigate("/signin", { replace: true, state: { from: location } });
+        return;
+      }
+
+      // refresh 성공이면 통과(컨텍스트 갱신 타이밍과 무관하게)
+      if (mounted) setChecked(true);
+    };
+
+    run();
+
+    return () => {
+      mounted = false;
+    };
+  }, [isAuthenticated, refreshAccessToken, navigate, location]);
+
+  if (!checked) return null; // 또는 로딩 컴포넌트
+
+  return <>{children}</>;
 };
 
 export default ProtectedRoute;