feat: (#537) 로그아웃 api 함수 구현 및 적용 msw, 테스트 코드 작성

frontend/__test__/api/user.test.ts

@@ -3,8 +3,13 @@ import {
  getUserInfo,
  modifyNickname,
  transformUserInfoResponse,
+ logoutUser,
 } from '@api/userInfo';
 
+import { REFRESH_EXPIRATION_TIME } from '@constants/token';
+
+import { getCookie, setCookie } from '@utils/cookie';
+
 import { MOCK_USER_INFO } from '@mocks/mockData/user';
 
 describe('서버와 통신하여 유저의 정보를 불러올 수 있어야 한다.', () => {
@@ -42,4 +47,14 @@ describe('서버와 통신하여 유저의 정보를 불러올 수 있어야 한
 
  expect(MOCK_USER_INFO.nickname).toBe('cancel');
  });
+
+ test('유저가 로그아웃을 한다', async () => {
+ setCookie({ key: 'hasEssentialInfo', maxAge: REFRESH_EXPIRATION_TIME, value: 'REFRESH!!' });
+
+ await logoutUser();
+
+ const result = getCookie().hasEssentialInfo;
+
+ expect(result).toBe(undefined);
+ });
 });

frontend/src/api/userInfo.ts

@@ -40,3 +40,7 @@ export const withdrawalMembership = async () => {
 export const updateUserInfo = async (userInfo: UpdateUserInfoRequest) => {
  await patchFetch<UpdateUserInfoRequest>(`${BASE_URL}/members/me/detail`, userInfo);
 };
+
+export const logoutUser = async () => {
+ await fetch('/auth/logout', { method: 'DELETE' });
+};

frontend/src/hooks/context/auth.tsx

@@ -4,6 +4,8 @@ import { LoggedInfo } from '@type/user';
 
 import { useUserInfo } from '@hooks/query/user/useUserInfo';
 
+import { logoutUser } from '@api/userInfo';
+
 import { ACCESS_TOKEN_KEY } from '@constants/localStorage';
 
 import { clearCookie } from '@utils/cookie';
@@ -30,6 +32,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
  const clearLoggedInfo = () => {
  removeLocalStorage(ACCESS_TOKEN_KEY);
  clearCookie('hasEssentialInfo');
+ logoutUser();
 
  setLoggedInfo(notLoggedInfo);
  };

frontend/src/mocks/userInfo.ts

@@ -22,4 +22,15 @@ export const mockUserInfo = [
 
  return res(ctx.status(204));
  }),
+
+ rest.delete('/auth/logout', (req, res, ctx) => {
+ const expirationTime = new Date(Date.now() - 1);
+
+ return res(
+ ctx.status(204),
+ ctx.cookie('hasEssentialInfo', 'expired', {
+ expires: expirationTime,
+ })
+ );
+ }),
 ];