-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
로그아웃 구현(api 호출 및 refreshToken 만료 에러처리) (#296)
* feat: isValidServerError 타입가드 작성 및 인터셉터에 적용 * feat: 로그아웃 구현 - 로그아웃 버튼 클릭 핸들러 수정 - 세션 만료 시 자동 로그아웃 수행
- Loading branch information
Showing
7 changed files
with
156 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import styled from '@emotion/styled'; | ||
|
||
import { Flex } from '@components/shared/Flex'; | ||
import { Image } from '@components/shared/Image'; | ||
|
||
export const PageWrapper = styled.div` | ||
${({ theme }) => theme.STYLES.LAYOUT} | ||
min-height: 100dvh; | ||
background-color: ${({ theme }) => theme.PALETTE.GRAY_100}; | ||
`; | ||
|
||
export const PageContent = styled(Flex)` | ||
height: 100%; | ||
padding: 40px 0 20px 0; | ||
`; | ||
|
||
export const LogoImage = styled(Image)` | ||
padding-bottom: 40px; | ||
`; | ||
|
||
export const ButtonContainer = styled(Flex)` | ||
width: 100%; | ||
padding: 0 16px; | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,97 @@ | ||
import { useCallback, useLayoutEffect } from 'react'; | ||
import { useNavigate } from 'react-router-dom'; | ||
|
||
import { useQueryClient } from '@tanstack/react-query'; | ||
|
||
import { Header } from '@components/Header'; | ||
import { Navbar } from '@components/Navbar'; | ||
import { Button } from '@components/shared/Button'; | ||
import { Text } from '@components/shared/Text'; | ||
|
||
import { usePathnameChange } from '@hooks/usePathnameChange'; | ||
|
||
import { theme } from '@styles/theme'; | ||
|
||
import { useTokenStore } from '@stores/accessToken.store'; | ||
import { useLoginInfoStore } from '@stores/loginInfo.store'; | ||
|
||
import { FallbackProps } from '@type/FallbackProps'; | ||
|
||
import { PATH_NAME } from '@consts/pathName'; | ||
|
||
import { isValidServerError } from '@utils/isValidServerError'; | ||
|
||
import LOGO_SRC from '@assets/logoSvg.svg'; | ||
|
||
import { | ||
ButtonContainer, | ||
LogoImage, | ||
PageContent, | ||
PageWrapper, | ||
} from './AuthErrorPage.styles'; | ||
|
||
const buttonProps = { | ||
width: '100%', | ||
backgroundColor: 'transparent', | ||
fontWeight: 500, | ||
height: '2rem', | ||
textColor: theme.PALETTE.GRAY_400, | ||
borderColor: theme.PALETTE.GRAY_400, | ||
} as const; | ||
|
||
export const AuthErrorPage = ({ error, resetErrorBoundary }: FallbackProps) => { | ||
if (!isValidServerError(error)) { | ||
throw error; | ||
} | ||
const errorCode = error.response?.data.code; | ||
if (errorCode !== 'AUT-003' && errorCode !== 'AUT-006') { | ||
throw error; | ||
} | ||
|
||
const setAceessToken = useTokenStore((state) => state.setAccessToken); | ||
const setLoginInfo = useLoginInfoStore((state) => state.setLoginInfo); | ||
|
||
const navigate = useNavigate(); | ||
const queryClient = useQueryClient(); | ||
|
||
const reset = useCallback(() => { | ||
resetErrorBoundary(); | ||
queryClient.clear(); | ||
}, [queryClient, resetErrorBoundary]); | ||
|
||
usePathnameChange(reset); | ||
|
||
useLayoutEffect(() => { | ||
setAceessToken(null); | ||
setLoginInfo(null); | ||
}, [setAceessToken, setLoginInfo]); | ||
|
||
return ( | ||
<> | ||
<PageWrapper> | ||
<Header /> | ||
<PageContent direction="column" gap={20} align="center" justify="start"> | ||
<LogoImage | ||
src={LOGO_SRC} | ||
width="35%" | ||
height="auto" | ||
alt="pickle logo" | ||
/> | ||
<div> | ||
<Text size={40}>세션이</Text> | ||
<Text size={40}>만료되었습니다</Text> | ||
</div> | ||
<ButtonContainer gap={16}> | ||
<Button {...buttonProps} onClick={() => navigate(PATH_NAME.LOGIN)}> | ||
로그인하기 | ||
</Button> | ||
<Button {...buttonProps} onClick={() => navigate(PATH_NAME.MAIN)}> | ||
홈으로 | ||
</Button> | ||
</ButtonContainer> | ||
</PageContent> | ||
</PageWrapper> | ||
<Navbar /> | ||
</> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export * from './AuthErrorPage'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import { AxiosError } from 'axios'; | ||
|
||
import { CommonErrorResponse } from '@type/api/error'; | ||
|
||
export const isValidServerError = ( | ||
error: Error | ||
): error is AxiosError<CommonErrorResponse> => { | ||
if (error instanceof AxiosError) { | ||
const { response } = error; | ||
if (response?.data) { | ||
return 'code' in response.data; | ||
} | ||
} | ||
return false; | ||
}; |