diff --git a/src/components/ErrorBoundary/ApiErrorBoundary.tsx b/src/components/ErrorBoundary/ApiErrorBoundary.tsx index 8da229e5..2e3a7d83 100644 --- a/src/components/ErrorBoundary/ApiErrorBoundary.tsx +++ b/src/components/ErrorBoundary/ApiErrorBoundary.tsx @@ -28,7 +28,7 @@ type State = } | { error: AxiosError; - errorDetail: 'network' | 'unauthorized'; + errorDetail: 'server' | 'unauthorized' | 'auth-expired'; }; class ErrorBoundary extends Component { @@ -59,16 +59,23 @@ class ErrorBoundary extends Component { } if (error.response?.status === 401) { + if (!localStorage.getItem('userToken')) { + return { + error, + errorDetail: 'unauthorized', + }; + } + return { error, - errorDetail: 'unauthorized', + errorDetail: 'auth-expired', }; } if (error.response?.status >= 400) { return { error, - errorDetail: 'network', + errorDetail: 'server', }; } } @@ -82,7 +89,7 @@ class ErrorBoundary extends Component { componentDidCatch(): void { const { errorDetail } = this.state; - if (errorDetail === 'unauthorized') { + if (errorDetail === 'auth-expired') { localStorage.removeItem('userToken'); localStorage.removeItem('user'); @@ -96,6 +103,10 @@ class ErrorBoundary extends Component { } if (this.state.errorDetail === 'unauthorized') { + return ; + } + + if (this.state.errorDetail === 'auth-expired') { return ( <> @@ -104,7 +115,7 @@ class ErrorBoundary extends Component { ); } - if (this.state.errorDetail === 'network') { + if (this.state.errorDetail === 'server') { if (this.props.fallback) { const FallbackComponent = this.props.fallback.type; const fallbackProps = { diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx index 11057c7f..cfe4ae82 100644 --- a/src/pages/Login/Login.tsx +++ b/src/pages/Login/Login.tsx @@ -1,5 +1,6 @@ import styled from '@emotion/styled'; import { Spacer, Text, theme, SVGLoginKakao, SVGLoginNaver, SVGLoginLogo, Flex } from 'concept-be-design-system'; +import { useNavigate } from 'react-router-dom'; import SEOMeta from '../../components/SEOMeta/SEOMeta'; import { BASE_URL } from '../../constants'; @@ -7,6 +8,8 @@ import { BASE_URL } from '../../constants'; const REQUEST_URL = `${BASE_URL}/oauth/kakao`; const Login = () => { + const navigate = useNavigate(); + const onClickOauthKakao = () => { window.location.href = REQUEST_URL; }; @@ -37,6 +40,11 @@ const Login = () => { 네이버 로그인 + + + navigate('/')}> + 메인페이지로 가기 + ); @@ -75,3 +83,8 @@ const TextWrapper = styled.div` height: 100%; width: 100%; `; + +const LinkText = styled(Text)` + text-decoration: underline; + cursor: pointer; +`; diff --git a/src/pages/NeedAuth.tsx b/src/pages/NeedAuth.tsx deleted file mode 100644 index 07e63a83..00000000 --- a/src/pages/NeedAuth.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { ReactNode, useEffect } from 'react'; -import { useNavigate } from 'react-router-dom'; - -interface Props { - children: ReactNode; - withAuth: boolean; - to?: string; -} - -const getUserTokenInLocalStorage = () => localStorage.getItem('userToken'); - -function NeedAuth({ children, withAuth, to = '/login' }: Props) { - const navigate = useNavigate(); - - useEffect(() => { - const isAuthorization: boolean = getUserTokenInLocalStorage() !== null; - - if (withAuth && !isAuthorization) { - navigate(to); - } - }); - - return <>{children}; -} - -export default NeedAuth; diff --git a/src/router.tsx b/src/router.tsx index b804385c..3d14c7a7 100644 --- a/src/router.tsx +++ b/src/router.tsx @@ -9,7 +9,6 @@ import FeedDetailPage from './pages/FeedDetail/FeedDetail.page'; import Agreement from './pages/Login/Agreement'; import KakaoRedirect from './pages/Login/KakaoRedirect'; import Login from './pages/Login/Login'; -import NeedAuth from './pages/NeedAuth'; import NotFound from './pages/NotFound'; import More from './pages/Profile/More.page'; import Profile from './pages/Profile/Profile.page'; @@ -21,10 +20,9 @@ import WriteEditPage from './pages/WriteEdit/WriteEdit.page'; interface RouteElement { path: string; element: ReactNode; - isAuth: boolean; redirectPath?: string; errorElement?: ReactNode; - children: { path: string; element: ReactNode; withAuth: boolean }[]; + children: { path: string; element: ReactNode }[]; } const withAsyncBoundary = (children: ReactNode) => ( @@ -37,90 +35,56 @@ const routes: RouteElement[] = [ { path: '/', element: , - isAuth: false, errorElement: , children: [ { path: '', element: withAsyncBoundary(), - withAuth: false, }, { path: '/feed/:id', element: withAsyncBoundary(), - withAuth: true, }, { path: '/write', element: withAsyncBoundary(), - withAuth: true, }, { path: '/write-edit', element: withAsyncBoundary(), - withAuth: true, }, { path: '/login', element: , - withAuth: false, }, { path: '/oauth/redirected/kakao', element: , - withAuth: false, }, { path: '/profile/:id', element: withAsyncBoundary(), - withAuth: true, }, { path: '/profile-edit', element: withAsyncBoundary(), - withAuth: true, }, { path: '/profile/:id/more', element: , - withAuth: true, }, - { path: '/agreement', element: , - withAuth: false, }, { path: '/sign-up', element: withAsyncBoundary(), - withAuth: false, }, ], }, ]; -const router = createBrowserRouter( - routes.map((route) => { - const childrenRoutes = route.children?.map((childRoute) => { - if (childRoute.withAuth) { - return { - path: childRoute.path, - element: {childRoute.element}, - }; - } - - return { - path: childRoute.path, - element: childRoute.element, - }; - }); - - return { - ...route, - children: childrenRoutes, - }; - }), -); +const router = createBrowserRouter(routes); export default router;