[ Feature/dev 76 ] 로그아웃 API 연동

[soomin9106]

🔥 Related Issues

https://linear.app/fewletter/issue/DEV-76/%EB%A1%9C%EA%B7%B8%EC%95%84%EC%9B%83-api-%EC%97%B0%EB%8F%99

💜 작업 내용

• 로그아웃 API remotes 작성

import { UseMutationOptions } from "@tanstack/react-query";

import { ApiResponse, fewFetch } from "@api/fewFetch";

import { API_ROUTE, QUERY_KEY } from "./api";

export const logOut = () => {
    return fewFetch().delete(API_ROUTE.LOGOUT())
}

export const logOutOptions = (): UseMutationOptions<
    ApiResponse<any>,
    Error
> => {
    return {
        mutationKey: [QUERY_KEY.LOGOUT],
        mutationFn: () => logOut()
    }
}

• mutation hook 작성 - 로그아웃 시 쿠키 삭제 및 로그인 화면으로 이동 로직 작성

const { mutate: handleLogout } = useMutation({
    ...logOutOptions(),
    onSuccess: (response: ApiResponse<any>) => {
        if (response.data.message === "성공") {
            // 쿠키 삭제 및 로그인 페이지로 이동
            deleteCookie("accessToken");
            deleteCookie("refreshToken");
            router.push('/auth');
        }
    },
    onError: (error: any) => {
      console.error('Logout failed:', error);
    },
  });

• Logout Link Component 작성 (테코 포함)

const LogoutLink = ({ title }: { title: string }) => {
  const handleLogout = useLogout();

  return (
    <Link href="/" onClick={(e) => {
      e.preventDefault();
      handleLogout();
    }}>
      {title}
    </Link>
  );
};

논의 했을 때 회원 탈퇴랑 로그아웃이랑 똑같이 해서 보낸다고 결론 나서 일단 같은 컴포넌트 끼워놨습니다!

[Happhee]

야무지게 핸들러 조합해주셨네여 ㅎㅎㅎ 수고하셨습니다!!

그리고 테스트 에러는 dynamic import 때문에 나타나는건데 차차 해결방법 찾아보겠습니다!

[Happhee]

이거 QueryClientProvider 컴포넌트 쓰면 됩니다!

[Happhee]

vi.mock 으로 next/navigation하는 부분이 꽤있는데 따로 함수로 작성해놓고 사용하는게 좋을까요?

[soomin9106]

이거 리팩토링으로 반영하면 좋을 듯 합니당!!

[Happhee]

오..근데 로그아웃 하면...auth 페이지로 이동하나요? / 메인이 아니라..?!! (궁금)

[soomin9106]

앗 메인입니다.. !!

[Happhee]

logOutMutaionOption 이라고 지정하면 더 명확할것같아여!

[Happhee]

야무지게 바꿔주셨네요..! 감사합니다!

[soomin9106]

@Happhee
일단 필요한 부분은 수정이나 리팩토링 했습니다 !! 머지하께요 ㅎㅎ