feat/#49/로그인하지 않은 상태로 마이페이지 접근 차단

src/components/Mypage/MypageLayout.tsx

@@ -72,6 +72,12 @@ type MypageLayoutProps = {
 };
 
 export default function MypageLayout({ children }: MypageLayoutProps) {
+  const { isLoggedIn } = useAuthStore();
+
+  if (!isLoggedIn) {
+    return null;
+  }
+
   return (
     <Styles.MypageContainer>
       <Styles.MypageSidebarContainer>

src/pages/_app.tsx

@@ -5,9 +5,33 @@ import type { AppProps } from "next/app";
 import localFont from "next/font/local";
 import { ApolloProvider } from "@apollo/client";
 import client from "@/lib/apolloClient";
+import { useAuthStore } from "@/stores/authStore";
+import { useRouter } from "next/router";
+import { useEffect, useRef } from "react";
 const myFont = localFont({ src: "../fonts/PretendardVariable.woff2" });
 
 export default function App({ Component, pageProps }: AppProps) {
+  const { isLoggedIn } = useAuthStore();
+  const hasAlerted = useRef(false);
+  const router = useRouter();
+
+  // "/mypage는 로그인된 상태에서만 접근할 수 있음"
+  useEffect(() => {
+    const protectedRoutes = ["/mypage"];
+    const isProtectedRoute = protectedRoutes.some((route) =>
+      router.pathname.startsWith(route),
+    );
+
+    if (isProtectedRoute && !hasAlerted.current) {
+      hasAlerted.current = true;
+
+      if (!isLoggedIn) {
+        alert("로그인이 필요합니다");
+        router.replace("/");
+      }
+    }
+  }, [isLoggedIn, router]);
+
   return (
     <div className={myFont.className}>
       <Layout>

src/pages/index.tsx

@@ -47,7 +47,7 @@ export default function Home() {
     resetType();
   }, [resetStack, resetType]);
 
-  const SIZE = 5;
+  const SIZE = 36;
 
   const observerRef = useRef<HTMLDivElement>(null);
   const { data, loading, fetchMore, refetch } = useQuery(SEARCH_PROJECT, {

src/pages/mypage/index.tsx

@@ -1,22 +1,14 @@
 import { useAuthStore } from "@/stores/authStore";
 import { useRouter } from "next/router";
-import { useEffect, useRef } from "react";
+import { useEffect } from "react";
 
 export default function Mypage() {
   const router = useRouter();
   const { isLoggedIn } = useAuthStore();
-  const hasAlerted = useRef(false);
 
   useEffect(() => {
-    if (!hasAlerted.current) {
-      hasAlerted.current = true;
-
-      if (isLoggedIn) {
-        router.replace("/mypage/myprojects");
-      } else {
-        alert("로그인이 필요합니다");
-        router.replace("/");
-      }
+    if (isLoggedIn) {
+      router.replace("/mypage/myprojects");
     }
   }, [isLoggedIn, router]);