[Refactor] : 결제 페이지에 준회원이 아닌 경우 접근하지 못하도록 해요. (#88)

* fix: payment 가드 생성

* fix: 현재 모집기간 닫혀있을때 결제화면 접근 못함

* refac: 토스페이먼츠 접근 화면 가드 꼼꼼하게 다듬기

* fix: data undefined 처리

* fix: payment 성공화면 access화면 생성

src/components/auth/guard/PaymentAccessGuard.tsx

@@ -0,0 +1,58 @@
+import { useQuery } from '@tanstack/react-query';
+import memberApi from '@/apis/member/memberApi';
+import { useState, useEffect } from 'react';
+import { Outlet, useNavigate } from 'react-router-dom';
+import RoutePath from '@/routes/routePath';
+import { toast } from 'react-toastify';
+import LoadingSpinner from '@/components/common/LoadingSpinner';
+
+const PaymentAccessGuard = () => {
+  const [redirect, setRedirect] = useState(false);
+  const navigate = useNavigate();
+  const { data, isLoading } = useQuery({
+    queryKey: ['member'],
+    queryFn: memberApi.GET_DASHBOARD
+  });
+
+  useEffect(() => {
+    if (!data) return;
+
+    if (data.member.role !== 'ASSOCIATE') {
+      toast.error('준회원 조건을 충족해주세요.');
+      setRedirect(true);
+    }
+
+    if (!data.currentMembership) {
+      toast.error('정회원 지원 이후 학회비를 결제할 수 있어요.');
+      setRedirect(true);
+    }
+
+    if (!data.currentRecruitmentRound) {
+      toast.error('지금은 정회원 모집 기간이 아니에요.');
+      setRedirect(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (redirect) {
+      navigate(RoutePath.Dashboard);
+    }
+  }, [redirect, navigate]);
+
+  if (isLoading) {
+    return <LoadingSpinner />;
+  }
+
+  if (!data) return;
+
+  if (
+    data.member.role !== 'ASSOCIATE' ||
+    !data.currentRecruitmentRound ||
+    !data.currentMembership
+  ) {
+    navigate(RoutePath.Dashboard);
+    return null;
+  } else return <Outlet />;
+};
+
+export default PaymentAccessGuard;

src/components/auth/guard/PaymentSuccessAccessGuard.tsx

@@ -0,0 +1,49 @@
+import { useQuery } from '@tanstack/react-query';
+import memberApi from '@/apis/member/memberApi';
+import { useState, useEffect } from 'react';
+import { Outlet, useNavigate } from 'react-router-dom';
+import RoutePath from '@/routes/routePath';
+import { toast } from 'react-toastify';
+import LoadingSpinner from '@/components/common/LoadingSpinner';
+
+const PaymentSuccessAccessGuard = () => {
+  const [redirect, setRedirect] = useState(false);
+  const navigate = useNavigate();
+  const { data, isLoading } = useQuery({
+    queryKey: ['member'],
+    queryFn: memberApi.GET_DASHBOARD
+  });
+
+  useEffect(() => {
+    if (!data) return;
+
+    if (data.member.role !== 'REGULAR') {
+      toast.error('토스페이먼츠 결제를 완료해주세요.');
+      setRedirect(true);
+    }
+
+    if (!data.currentRecruitmentRound) {
+      toast.error('지금은 정회원 모집 기간이 아니에요.');
+      setRedirect(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (redirect) {
+      navigate(RoutePath.Dashboard);
+    }
+  }, [redirect, navigate]);
+
+  if (isLoading) {
+    return <LoadingSpinner />;
+  }
+
+  if (!data) return;
+
+  if (data.member.role !== 'REGULAR' || !data.currentRecruitmentRound) {
+    navigate(RoutePath.Dashboard);
+    return null;
+  } else return <Outlet />;
+};
+
+export default PaymentSuccessAccessGuard;

src/routes/index.tsx

@@ -2,6 +2,7 @@ import App from '@/App';
 import * as Sentry from '@sentry/react';
 import RoutePath from '@/routes/routePath';
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import PaymentSuccessAccessGuard from '@/components/auth/guard/PaymentSuccessAccessGuard';
 import Layout from '@/components/layout/Layout';
 import {
   MypageAccessGuard,
@@ -31,6 +32,7 @@ import {
 import { DicordConnect } from '@/pages/DiscordConnect';
 import { DiscordGuide } from '@/pages/DiscordGuide';
 import { Suspense } from 'react';
+import PaymentAccessGuard from '@/components/auth/guard/PaymentAccessGuard';
 
 const sentryCreateBrowserRouter =
   Sentry.wrapCreateBrowserRouter(createBrowserRouter);
@@ -122,15 +124,18 @@ const router = sentryCreateBrowserRouter([
       },
       {
         path: RoutePath.PaymentsCheckout,
-        element: <PaymentsCheckout />
+        element: <PaymentAccessGuard />,
+        children: [{ index: true, element: <PaymentsCheckout /> }]
       },
       {
         path: RoutePath.PaymentsFail,
-        element: <PaymentsFail />
+        element: <AuthAccessGuard />,
+        children: [{ index: true, element: <PaymentsFail /> }]
       },
       {
         path: RoutePath.PaymentsSuccess,
-        element: <PaymentsSuccess />
+        element: <PaymentSuccessAccessGuard />,
+        children: [{ index: true, element: <PaymentsSuccess /> }]
       },
       // Todo: 404 Not found page
       { path: '*', element: <Text>not found page</Text> }