Merge pull request #249 from boostcampwm2023/feat/blockSignup

feat : 외부 signup 페이지 접근 제한 코드 작성

frontend/src/GlobalErrorBoundary.tsx

@@ -2,8 +2,13 @@ import { PropsWithChildren } from "react";
 import { ErrorBoundary, FallbackProps } from "react-error-boundary";
 import ErrorPage from "./pages/error/CommonErrorPage";
 import AuthErrorPage from "./pages/error/AuthErrorPage";
+import { ERROR_MESSAGE } from "./constants/error";
+import NotPermittedPage from "./pages/error/NotPermittedPage";
 
 const GlobalErrorFallback = ({ error, resetErrorBoundary }: FallbackProps) => {
+  if (error.message === ERROR_MESSAGE.NOT_PERMITTED)
+    return <NotPermittedPage {...{ error, resetErrorBoundary }} />;
+
   if (error.response.status === 401) return <AuthErrorPage {...{ error, resetErrorBoundary }} />;
   return <ErrorPage {...{ error, resetErrorBoundary }} />;
 };

frontend/src/apis/api/loginAPI.ts

@@ -10,9 +10,7 @@ import { useNavigate } from "react-router-dom";
 import { authAPI, setAccessToken } from "../utils/authAPI";
 
 export const getLoginURL = async () => {
-  const response = await baseAPI.get<GithubOauthUrlDTO>(
-    API_URL.GITHUB_OAUTH_URL
-  );
+  const response = await baseAPI.get<GithubOauthUrlDTO>(API_URL.GITHUB_OAUTH_URL);
   return response.data.authUrl;
 };
 
@@ -40,6 +38,7 @@ export const postLogout = async () => {
 
   if (response.status === 200) {
     setAccessToken(undefined);
+    window.localStorage.clear();
     return response;
   }
 };

frontend/src/constants/error.ts

@@ -0,0 +1,3 @@
+export const ERROR_MESSAGE = {
+  NOT_PERMITTED: "허용되지 않는 접근입니다.",
+};

frontend/src/constants/path.ts

@@ -13,7 +13,7 @@ export const API_URL = {
 
 export const ROUTER_URL = {
   ROOT: "/",
-  TEMP: "/temp",
+  TEMP: "/",
   LOGIN: "/login",
   SIGNUP: "/signup",
   AUTH: "/auth/github/callback",

frontend/src/pages/TempHomepage.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import React from "react";
 import { ROUTER_URL } from "../constants/path";
 
@@ -10,6 +10,10 @@ const TempHomepage = () => {
       console.log(await response.json());
     });
   });
+  const navigate = useNavigate();
+  const navigateToSignupPage = () => {
+    navigate(ROUTER_URL.SIGNUP, { state: { tempIdToken: "hello world" } });
+  };
   return (
     <div>
       <div className="shadow-box bg-white mb-[40px]">
@@ -26,6 +30,11 @@ const TempHomepage = () => {
             Sign up
           </Link>
         </li>
+        <li>
+          <button className="hover:underline" onClick={navigateToSignupPage}>
+            Sign up with TempIDToken
+          </button>
+        </li>
         <li>
           <Link to={ROUTER_URL.PROJECTS} className="hover:underline">
             Projects

frontend/src/pages/account/SignupPage.tsx

@@ -2,23 +2,24 @@ import { useState } from "react";
 import SignupSideBar from "../../components/account/SignupSideBar";
 import SignupMainSection from "../../components/account/SignupMainSection";
 import { SIGNUP_STEP } from "../../constants/account";
+import { useLocation } from "react-router-dom";
+import { ERROR_MESSAGE } from "../../constants/error";
 
 const SignupPage = () => {
   const [currentStep, setCurrentStep] = useState<{
     NUMBER: number;
     NAME: string;
   }>(SIGNUP_STEP.STEP1);
 
+  const location = useLocation();
+  if (location.state ? false : true) {
+    throw Error(ERROR_MESSAGE.NOT_PERMITTED);
+  }
+
   return (
     <div className="flex items-center min-w-[76rem] h-[100vh] mx-6">
-      <SignupSideBar
-        currentStepName={currentStep.NAME}
-        currentStepNumber={currentStep.NUMBER}
-      />
-      <SignupMainSection
-        currentStepNumber={currentStep.NUMBER}
-        setCurrentStep={setCurrentStep}
-      />
+      <SignupSideBar currentStepName={currentStep.NAME} currentStepNumber={currentStep.NUMBER} />
+      <SignupMainSection currentStepNumber={currentStep.NUMBER} setCurrentStep={setCurrentStep} />
     </div>
   );
 };

frontend/src/pages/error/NotPermittedPage.tsx

@@ -0,0 +1,22 @@
+import { FallbackProps } from "react-error-boundary";
+import { useNavigate } from "react-router-dom";
+import { ROUTER_URL } from "../../constants/path";
+
+const NotPermittedPage = ({ error, resetErrorBoundary }: FallbackProps) => {
+  const navigate = useNavigate();
+  const redirectTempPage = () => {
+    resetErrorBoundary();
+    navigate(ROUTER_URL.TEMP);
+  };
+  return (
+    <div>
+      <p>Error 발생</p>
+      <p>error : {error.message}</p>
+      <button onClick={redirectTempPage} className="hover:underline">
+        Temp Page로 이동
+      </button>
+    </div>
+  );
+};
+
+export default NotPermittedPage;