From 57b67dde7d138ff3dc15729d55bf10264fa78cfc Mon Sep 17 00:00:00 2001 From: JitHoon Date: Wed, 24 Jan 2024 23:52:17 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=95=84?= =?UTF-8?q?=EC=9B=83=20api=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/index.ts | 1 + src/api/lib/postLogout.ts | 20 ++++++++++++++++++++ 2 files changed, 21 insertions(+) create mode 100644 src/api/lib/postLogout.ts diff --git a/src/api/index.ts b/src/api/index.ts index 8c830a83..dc93f3ce 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -1,5 +1,6 @@ export { default as instance } from './lib/instance'; export { default as postLogin } from './lib/postLogin'; +export { default as postLogout } from './lib/postLogout'; export { default as postRefreshToken } from './lib/postRefreshToken'; export { getCouponList, diff --git a/src/api/lib/postLogout.ts b/src/api/lib/postLogout.ts new file mode 100644 index 00000000..2a3b6c5f --- /dev/null +++ b/src/api/lib/postLogout.ts @@ -0,0 +1,20 @@ +// import { AxiosError } from 'axios'; + +import { instance } from '..'; + +const postLogout = async () => { + await instance.post('/v1/member/logout'); + + /* HACK: 로그아웃 에러 response 가 있을 경우 사용 + + try { + const response = await instance.post('/v1/member/logouts'); + return response; + } catch (error) { + if (error instanceof AxiosError) error.response; + } + + */ +}; + +export default postLogout; From b020f77a8ba28e560264603bf3e0b77e3f8328f8 Mon Sep 17 00:00:00 2001 From: JitHoon Date: Wed, 24 Jan 2024 23:55:57 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=EC=BF=A0=ED=82=A4=20=EC=A0=84?= =?UTF-8?q?=EC=B2=B4=20=EC=82=AD=EC=A0=9C=20util=20=ED=95=A8=EC=88=98=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/index.ts | 1 + src/utils/lib/cookies.ts | 7 +++++++ 2 files changed, 8 insertions(+) diff --git a/src/utils/index.ts b/src/utils/index.ts index 7d76d2a6..22af543d 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -9,3 +9,4 @@ export { export { getUpdatedDate } from './lib/calculation'; export { getStatusToLocaleString } from './lib/dashboard'; export { getInputOptions } from './lib/auth'; +export { setCookies, getCookies, deleteAllCookies } from './lib/cookies'; diff --git a/src/utils/lib/cookies.ts b/src/utils/lib/cookies.ts index 03896659..2a350e30 100644 --- a/src/utils/lib/cookies.ts +++ b/src/utils/lib/cookies.ts @@ -17,3 +17,10 @@ export const getCookies: GetCookies = name => { ?.split('=')[1]; return cookieValue; }; + +export const deleteAllCookies = () => { + document.cookie.split(';').forEach(cookie => { + const [name] = cookie.trim().split('='); + document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/;`; + }); +}; From 85b5b53c4715d7df4f09e053e59e9cff40fd5af0 Mon Sep 17 00:00:00 2001 From: JitHoon Date: Wed, 24 Jan 2024 23:56:24 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20=EC=9C=A0=EC=A0=80=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=EC=97=90=20=EB=A1=9C=EA=B7=B8=EC=95=84=EC=9B=83=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Layout/Header/User/UserModal/index.tsx | 74 +++++++++++++++++-- 1 file changed, 66 insertions(+), 8 deletions(-) diff --git a/src/components/common/Layout/Header/User/UserModal/index.tsx b/src/components/common/Layout/Header/User/UserModal/index.tsx index a0a5e6b9..a4825f1d 100644 --- a/src/components/common/Layout/Header/User/UserModal/index.tsx +++ b/src/components/common/Layout/Header/User/UserModal/index.tsx @@ -1,21 +1,79 @@ +import { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; import styled from '@emotion/styled'; +import { ErrorModal } from '@components/common'; +import { postLogout } from 'src/api'; +import { getCookies, deleteAllCookies } from '@utils/lib/cookies'; import { UserModal, UserModalStyleProps } from '@/types/layout'; -import { getCookies } from '@utils/lib/cookies'; +import ERROR_MODAL_MESSAGE from 'src/constants/lib/ERROR_MODAL_MESSAGE'; import theme from '@styles/theme'; const UserModal = ({ isOpen }: UserModal) => { + const [isErrorModalOpen, setIsErrorModalOpen] = useState(false); + const navigate = useNavigate(); + const userName = getCookies('userName'); const userEmail = getCookies('userEmail'); + const ButtonFunc = () => setIsErrorModalOpen(false); + + const handleLogout = async () => { + await postLogout(); + deleteAllCookies(); + navigate('/login'); + /* HACK: 로그아웃 에러 response 가 있을 경우 사용 + + [ 대안 1 ] + const response = await postLogout(); + + if (response === undefined) { + setIsErrorModalOpen(true); + } else if (response?.status === 200) { + deleteAllCookies(); + navigate('/login'); + } + + [ 대안 2 ] + try { + const response = await postLogout(); + deleteAllCookies(); + navigate('/login'); + }catch (error) { + const modalContent = { + text: '로그아웃에 실패하였습니다.', + errorText: '잠시후 재시도 해주세요.' + }; + + const ButtonFunc = () => {}; + + ErrorModal({ modalContent, ButtonFunc }); + } + + */ + }; + return ( - - - {userName} - {userEmail} - - 로그아웃 - + <> + + + {userName} + {userEmail} + + + 로그아웃 + + + {isErrorModalOpen && ( + + )} + ); }; From 819c0e6477691ee865dcfe2f8274714872c95140 Mon Sep 17 00:00:00 2001 From: JitHoon Date: Wed, 24 Jan 2024 23:56:43 +0900 Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=EB=AA=A8=EB=8B=AC=20=EC=97=90?= =?UTF-8?q?=EB=9F=AC=20=EB=A9=94=EC=8B=9C=EC=A7=80=20=EC=83=81=EC=88=98?= =?UTF-8?q?=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/constants/lib/ERROR_MODAL_MESSAGE.ts | 12 ++++++++++++ src/pages/Login/index.tsx | 7 ++----- 2 files changed, 14 insertions(+), 5 deletions(-) create mode 100644 src/constants/lib/ERROR_MODAL_MESSAGE.ts diff --git a/src/constants/lib/ERROR_MODAL_MESSAGE.ts b/src/constants/lib/ERROR_MODAL_MESSAGE.ts new file mode 100644 index 00000000..a9992f67 --- /dev/null +++ b/src/constants/lib/ERROR_MODAL_MESSAGE.ts @@ -0,0 +1,12 @@ +const ERROR_MODAL_MESSAGE = { + LOGIN: { + text: '이메일 또는 비밀번호를 잘못 입력했습니다.', + errorText: '입력하신 내용을 다시 확인해주세요.' + }, + USER_MODAL: { + text: '로그아웃에 실패하였습니다.', + errorText: '잠시후 재시도 해주세요.' + } +}; + +export default ERROR_MODAL_MESSAGE; diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx index 4283e532..9ea6bfd1 100644 --- a/src/pages/Login/index.tsx +++ b/src/pages/Login/index.tsx @@ -3,13 +3,10 @@ import styled from '@emotion/styled'; import { ErrorModal, Footer } from '@components/common'; import { LoginForm, LoginTitle } from '@components/Login'; +import ERROR_MODAL_MESSAGE from 'src/constants/lib/ERROR_MODAL_MESSAGE'; const Login = () => { - const initialValue = { - text: '이메일 또는 비밀번호를 잘못 입력했습니다.', - errorText: '입력하신 내용을 다시 확인해주세요.' - }; - const [modalContent, setModalContent] = useState(initialValue); + const [modalContent, setModalContent] = useState(ERROR_MODAL_MESSAGE.LOGIN); const [isModalOpen, setIsModalOpen] = useState(false); const handleModalClose = () => setIsModalOpen(prev => !prev); From 352e214324e793bd992d985e9900dbd170493d00 Mon Sep 17 00:00:00 2001 From: JitHoon Date: Wed, 24 Jan 2024 23:59:46 +0900 Subject: [PATCH 5/5] =?UTF-8?q?feat:=20=EB=A6=AC=ED=94=84=EB=A0=88?= =?UTF-8?q?=EC=8B=9C=20=ED=86=A0=ED=81=B0=20=EB=A7=8C=EB=A3=8C=20=EC=8B=9C?= =?UTF-8?q?=20=EB=8F=99=EC=9E=91=ED=95=98=EB=8A=94=20=EB=A1=9C=EA=B7=B8?= =?UTF-8?q?=EC=95=84=EC=9B=83=20=EB=A1=9C=EC=A7=81=20=EC=A3=BC=EC=84=9D?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EC=A0=84=EB=8B=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/lib/instance.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/api/lib/instance.ts b/src/api/lib/instance.ts index 8053eb97..ebc8f3e0 100644 --- a/src/api/lib/instance.ts +++ b/src/api/lib/instance.ts @@ -63,6 +63,10 @@ const onErrorResponse = async (error: AxiosResponseError) => { // 리프레시 토큰도 만료되었을 때 = 재로그인 안내 } else if (tokenResponse.status === 404) { console.log(tokenResponse.data.message); + // await postLogout(); + // deleteAllCookies(); + // navigate('/login'); + return Promise.reject(error); } }