[FEAT] 세션 방식의 인증인가로 수정

src/apis/queryFunctions/Auth.ts

@@ -1,6 +1,5 @@
 import createApiClient from '@/apis/queryFunctions/apiClient';
 import {
-  LoginParams,
   RegisterParams,
   CheckEmailParams,
   PostRegisterResponseData,
@@ -14,10 +13,7 @@ const apiClient = createApiClient();
 export const postRegister = (param: RegisterParams) =>
   apiClient.post<Response<PostRegisterResponseData>>('/v2/auth/register', param);
 
-export const postLogin = (param: LoginParams) =>
-  apiClient.post<Response<null>>('/v2/auth/login', param);
-
-export const postLogout = () => apiClient.post<Response<null>>('v2/auth/logout');
+export const postLogout = () => apiClient.post<Response<null>>('v2/auth/logout'); // 없어져야할 것
 
 export const getEmailValidation = async (params: CheckEmailParams) => {
   const response = await apiClient.get<Response<boolean>>('v2/auth/validate-email', {

src/apis/queryFunctions/apiClient.ts

@@ -1,37 +1,38 @@
 import axios from 'axios';
 
-function createApiClient(cookie?: string) {
+const isServer = typeof window === 'undefined';
+
+function createApiClient() {
   const client = axios.create({
     baseURL: `${process.env.NEXT_PUBLIC_SERVER_API_URL}/api`,
     timeout: 100000,
     withCredentials: true,
     headers: {
-      ...(cookie ? { Cookie: cookie } : {}),
+      'Content-Type': 'application/json',
     },
   });
 
-  client.interceptors.request.use(
-    config => {
-      // 성공한 요청
+  client.interceptors.request.use(async config => {
+    if (isServer) {
+      // 서버에서 실행되는 경우에는 쿠키에서 access_token 가져옵니다.
+      const { cookies } = await import('next/headers');
+      const accessToken = cookies().get('accessToken')?.value;
 
-      return config;
-    },
-    error => {
-      // 실패한 요청
-      return Promise.reject(error);
-    },
-  );
+      if (accessToken && !config.headers.Authorization) {
+        // eslint-disable-next-line no-param-reassign
+        config.headers.Authorization = accessToken;
+      }
+    } else {
+      // 클라이언트에서 실행되는 경우에는 스토리지에서 access_token 가져옵니다.
+      const accessToken = sessionStorage.getItem('accessToken');
 
-  client.interceptors.response.use(
-    response => {
-      // 성공한 응답
-      return response;
-    },
-    error => {
-      // 실패한 응답
-      return Promise.reject(error);
-    },
-  );
+      if (accessToken && !config.headers.Authorization) {
+        // eslint-disable-next-line no-param-reassign
+        config.headers.Authorization = accessToken;
+      }
+    }
+    return config;
+  });
 
   return client;
 }

src/apis/queryFunctions/deleteTokenCookies.ts

@@ -0,0 +1,11 @@
+'use server';
+
+import { cookies } from 'next/headers';
+
+function deleteTokenCookies() {
+  cookies().set('accessToken', '', {
+    maxAge: 0,
+  });
+}
+
+export default deleteTokenCookies;

src/apis/queryFunctions/setTokenCookies.ts

@@ -0,0 +1,26 @@
+'use server';
+
+import { setCookies } from '@/utils/setCookies';
+
+import { LoginParams } from '../types/Auth';
+
+async function setTokenCookies(params: LoginParams) {
+  const loginData = await fetch(`${process.env.NEXT_PUBLIC_SERVER_API_URL}/api/v2/auth/login`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(params),
+  })
+    .then(res => res.json())
+    .then(jsonRes => jsonRes.result_data);
+
+  const accessToken = loginData.access_token;
+  const refreshToken = loginData.refresh_token;
+
+  setCookies('accessToken', accessToken);
+
+  return { accessToken, refreshToken };
+}
+
+export default setTokenCookies;

src/apis/queryHooks/Auth/usePostLogin.ts → src/apis/queryHooks/Auth/useLogin.ts

@@ -1,31 +1,33 @@
 import { useMutation } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
-import { useSearchParams, useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 
-import { postLogin } from '@/apis/queryFunctions/Auth';
+import setTokenCookies from '@/apis/queryFunctions/setTokenCookies';
 import { LoginParams } from '@/apis/types/Auth';
 import { Response } from '@/apis/types/common';
 import { useAuth } from '@/provider/authProvider';
 import { useToast } from '@/provider/toastProvider';
 
-function usePostLogin() {
+function useLogin() {
+  const { setIsLoggedIn } = useAuth();
   const router = useRouter();
   const searchParams = useSearchParams();
+
   const prevUrl = searchParams.get('prevUrl');
-  const { setIsLoggedIn } = useAuth();
   const { showToast } = useToast();
 
-  const { mutate, error } = useMutation({
-    mutationFn: (param: LoginParams) => postLogin(param),
-    onSuccess: () => {
+  const { mutate } = useMutation({
+    mutationFn: (loginParams: LoginParams) => setTokenCookies(loginParams),
+    onSuccess: data => {
+      sessionStorage.setItem('accessToken', data.accessToken);
+      localStorage.setItem('refreshToken', data.refreshToken);
+      setIsLoggedIn(true);
+      showToast('success', '로그인 되었습니다.');
       if (prevUrl?.startsWith('/join') || prevUrl?.startsWith('/login')) {
         router.push('/');
       } else {
         router.push(prevUrl || '/');
       }
-      router.refresh();
-      setIsLoggedIn(true);
-      showToast('success', '로그인에 성공했습니다.');
     },
     onError: (e: AxiosError<Response<string>>) => {
       if (e.response) {
@@ -37,7 +39,7 @@ function usePostLogin() {
     },
   });
 
-  return { mutate, error };
+  return { mutate };
 }
 
-export default usePostLogin;
+export default useLogin;

src/apis/queryHooks/User/useGetUser.ts

@@ -5,6 +5,7 @@ import { useAuth } from '@/provider/authProvider';
 
 function useGetUser() {
   const { isLoggedIn } = useAuth();
+
   const { data, isLoading } = useQuery({
     queryKey: ['userInfo'],
     queryFn: () => getUser(),

src/apis/types/Auth.ts

@@ -17,6 +17,11 @@ export interface LoginParams {
   password: string;
 }
 
+export interface PostLoginResponseData {
+  access_token: string;
+  refresh_token: string;
+}
+
 export interface CheckEmailParams {
   email: string;
 }

src/app/basicauction/[id]/HaveToLoginNotiModal.tsx

@@ -6,6 +6,7 @@ import * as S from './HaveToLoginNotiModal.css';
 
 function HaveToLoginNotiModal() {
   const { isLoggedIn } = useAuth();
+
   const router = useRouter();
   const pathname = usePathname();
 

src/app/layout.tsx

@@ -38,10 +38,11 @@ export default async function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const cookie = cookies();
-  const isLoggedIn = cookie.has('access');
+  const isLoggedIn = !!cookies().get('accessToken')?.value;
 
   const queryClient = await usePrefetchQueriesWithCookie([
+    // TODO 로그인이 필요한 호출을 따로 빼던가 불리해야함
+    // 현재 useInfo의 경우 로그인을 해야만 호출 가능한데 프리패치로 미로그인 상태에서도 호출 되는 중
     { queryKey: ['userInfo'], api: '/v2/member' },
     { queryKey: ['category'], api: '/v2/categories' },
   ]);

src/app/login/page.tsx

@@ -4,7 +4,7 @@ import { useForm, SubmitHandler } from 'react-hook-form';
 
 import Link from 'next/link';
 
-import usePostLogin from '@/apis/queryHooks/Auth/usePostLogin';
+import useLogin from '@/apis/queryHooks/Auth/useLogin';
 import GoogleIcon from '@/assets/svg/google.svg';
 import NaverIcon from '@/assets/svg/naver.svg';
 import CommonButton from '@/components/CommonButton';
@@ -26,8 +26,7 @@ function Home() {
     formState: { errors },
   } = useForm<Inputs>();
 
-  const { mutate: login } = usePostLogin();
-
+  const { mutate: login } = useLogin();
   const onSubmit: SubmitHandler<Inputs> = async data => {
     const newPassword = await sha256(data.passwordRequired);
 

src/components/AuctionInfo/AuctionBidListModal.tsx

@@ -11,6 +11,7 @@ interface AuctionBidListModalProps {
 
 function AuctionBidListModal({ id }: AuctionBidListModalProps) {
   const { isLoggedIn } = useAuth();
+
   const router = useRouter();
   const pathname = usePathname();
 

src/components/AuctionInfo/hooks/usePermissionBidPrice.ts

@@ -6,6 +6,7 @@ import { useAuth } from '@/provider/authProvider';
 
 export function usePermissionBidPrice(auctionId: number, sellerId: number) {
   const { isLoggedIn } = useAuth();
+
   const { data: user } = useGetUser();
   const [expired, setExpired] = useState('');
   const { data: auctionBidList } = useGetBasicAuctionBidList(auctionId);

src/components/Chatting/ChattingIconButton.tsx

@@ -12,6 +12,7 @@ import * as S from './ChattingIconButton.css';
 
 function ChattingIconButton() {
   const { isLoggedIn } = useAuth();
+
   const [isOpen, setIsOpen] = useState(false);
 
   if (!isLoggedIn) return null;

src/components/Chatting/ChattingMessageSection.tsx

@@ -20,6 +20,7 @@ interface ChattingMessageSectionProps {
 
 function ChattingMessageSection({ lastChat, roomId }: ChattingMessageSectionProps) {
   const { data: user } = useGetUser();
+
   const { refetch } = useGetChatroomList({
     pageable: 0,
   });

src/components/Chatting/hooks/useChatSocket.ts

@@ -23,6 +23,8 @@ function useChatSocket({
   onMessage,
   checkBottom,
 }: UseChatSocketParams) {
+  const accessToken = sessionStorage.getItem('accessToken');
+
   const [newMessage, setNewMessage] = useState<Message | null>(null);
   const user = useGetUser();
   const timerRef = useRef<NodeJS.Timeout | null>(null); // 타이머 ID 저장
@@ -78,6 +80,7 @@ function useChatSocket({
   };
 
   const { client } = useSocket({
+    access: accessToken,
     url: `${process.env.NEXT_PUBLIC_SOCKET_SERVER_URL}`,
     config: {
       // https://stomp-js.github.io/api-docs/latest/classes/Client.html
@@ -86,6 +89,7 @@ function useChatSocket({
         // 연결을 시도합니다.
         setMessages(lastChat);
       },
+
       onWebSocketError: error => {
         console.log('WebSocket Error :', error);
       },

src/components/HeaderSection/components/UserHeader/index.tsx

@@ -1,21 +1,37 @@
+'use client';
+
 import Image from 'next/image';
 import Link from 'next/link';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 
-import usePostLogout from '@/apis/queryHooks/Auth/usePostLogout';
+// import usePostLogout from '@/apis/queryHooks/Auth/usePostLogout';
+// import logout from '@/apis/queryFunctions/deleteCookies';
 import logoIcon from '@/assets/png/logo.png';
+import useLogout from '@/hooks/useLogout';
 import { useAuth } from '@/provider/authProvider';
 import { SUB_CATEGORY } from '@/static/category';
 
 import * as S from './UserHeader.css';
 
 function UserHeader() {
   const router = useRouter();
+
   const { isLoggedIn } = useAuth();
-  const { mutate: logout } = usePostLogout();
+
+  // const { mutate: logout } = usePostLogout();
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
+  const handleLogout = useLogout();
+
+  // const handleLogout = () => {
+  //   logout();
+  //   localStorage.removeItem('refreshToken');
+  //   sessionStorage.removeItem('accessToken');
+
+  //   router.push('/');
+  // };
+
   return (
     <section className={S.topHeader}>
       <Link href="/" scroll={false} className={S.topHeaderLogo}>
@@ -60,7 +76,7 @@ function UserHeader() {
           );
         })}
         {isLoggedIn ? (
-          <button className={S.logoutButton} type="button" onClick={() => logout()}>
+          <button className={S.logoutButton} type="button" onClick={handleLogout}>
             로그아웃
           </button>
         ) : (

src/hooks/useLogout.ts

@@ -0,0 +1,24 @@
+import { useRouter } from 'next/navigation';
+
+import deleteCookies from '@/apis/queryFunctions/deleteTokenCookies';
+import { useAuth } from '@/provider/authProvider';
+import { useToast } from '@/provider/toastProvider';
+
+function useLogout() {
+  const router = useRouter();
+  const { setIsLoggedIn } = useAuth();
+  const { showToast } = useToast();
+
+  const handleLogout = () => {
+    deleteCookies();
+    localStorage.removeItem('refreshToken');
+    sessionStorage.removeItem('accessToken');
+    setIsLoggedIn(false);
+    router.push('/');
+    showToast('success', '로그아웃 되었습니다.');
+  };
+
+  return handleLogout;
+}
+
+export default useLogout;

src/hooks/usePrefetchQueriesWithCookie.ts

@@ -1,6 +1,5 @@
 import { QueryClient, QueryKey } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
-import { cookies } from 'next/headers';
 
 import createApiClient from '@/apis/queryFunctions/apiClient';
 import { Response } from '@/apis/types/common';
@@ -14,8 +13,7 @@ interface UsePrefetchQueriesWithCookieProps<T, TQueryKey extends QueryKey> {
 async function usePrefetchQueriesWithCookie<T, TQueryKey extends QueryKey>(
   queries: UsePrefetchQueriesWithCookieProps<T, TQueryKey>[],
 ) {
-  const cookie = cookies();
-  const apiClient = createApiClient(cookie.toString());
+  const apiClient = createApiClient();
   const queryClient = new QueryClient();
 
   await Promise.all(

src/hooks/usePrefetchQueryWithCookie.ts

@@ -1,5 +1,4 @@
 import { QueryClient, QueryKey } from '@tanstack/react-query';
-import { cookies } from 'next/headers';
 
 import createApiClient from '@/apis/queryFunctions/apiClient';
 import { Response } from '@/apis/types/common';
@@ -14,8 +13,7 @@ async function usePrefetchQueryWithCookie<T, TQueryKey extends QueryKey>({
   queryKey,
   api,
 }: UsePrefetchQueryWithCookieProps<T, TQueryKey>) {
-  const cookie = cookies();
-  const apiClient = createApiClient(cookie.toString());
+  const apiClient = createApiClient();
   const queryClient = new QueryClient();
 
   await queryClient.prefetchQuery({