[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/clientLogin.ts

@@ -0,0 +1,14 @@
+import { LoginParams } from '../types/Auth';
+
+import login from './login';
+// 클라이언트 측의 로그인 함수
+
+export async function clientLogin(params: LoginParams) {
+  const { accessToken, refreshToken } = await login(params);
+
+  // 세션 스토리지에 저장
+  if (typeof window !== 'undefined') {
+    sessionStorage.setItem('accessToken', accessToken);
+    localStorage.setItem('refreshToken', refreshToken);
+  }
+}

src/apis/queryFunctions/login.ts

@@ -0,0 +1,27 @@
+'use server';
+
+import { setCookie } from '@/utils/cookies';
+
+import { LoginParams } from '../types/Auth';
+// 서버 측의 로그인 함수
+
+async function login(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;
+
+  setCookie('accessToken', accessToken);
+
+  return { accessToken, refreshToken };
+}
+
+export default login;

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

@@ -3,13 +3,15 @@
 import { useForm, SubmitHandler } from 'react-hook-form';
 
 import Link from 'next/link';
+import { useRouter, useSearchParams } from 'next/navigation';
 
-import usePostLogin from '@/apis/queryHooks/Auth/usePostLogin';
+import { clientLogin } from '@/apis/queryFunctions/clientLogin';
 import GoogleIcon from '@/assets/svg/google.svg';
 import NaverIcon from '@/assets/svg/naver.svg';
 import CommonButton from '@/components/CommonButton';
 import CommonInput from '@/components/CommonInput';
 import MaxLayout from '@/components/MaxLayout';
+import { useAuth } from '@/provider/authProvider';
 import sha256 from '@/utils/sha256';
 
 import * as S from './Login.css';
@@ -26,15 +28,31 @@ function Home() {
     formState: { errors },
   } = useForm<Inputs>();
 
-  const { mutate: login } = usePostLogin();
+  const { setIsLoggedIn } = useAuth();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const prevUrl = searchParams.get('prevUrl');
 
   const onSubmit: SubmitHandler<Inputs> = async data => {
     const newPassword = await sha256(data.passwordRequired);
 
-    login({
-      email: data.emailRequired,
-      password: newPassword,
-    });
+    try {
+      await clientLogin({
+        email: data.emailRequired,
+        password: newPassword,
+      });
+      setIsLoggedIn(true);
+      if (prevUrl?.startsWith('/join') || prevUrl?.startsWith('/login')) {
+        router.push('/');
+      } else {
+        router.push(prevUrl || '/');
+      }
+
+      router.refresh();
+    } catch (error) {
+      console.error('Login failed:', error);
+    }
   };
 
   return (

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,10 @@ function useChatSocket({
   onMessage,
   checkBottom,
 }: UseChatSocketParams) {
+  const accessToken = sessionStorage.getItem('accessToken');
+
+  console.log('accessToken: useChatSocket.ts', accessToken);
+
   const [newMessage, setNewMessage] = useState<Message | null>(null);
   const user = useGetUser();
   const timerRef = useRef<NodeJS.Timeout | null>(null); // 타이머 ID 저장
@@ -78,6 +82,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 +91,7 @@ function useChatSocket({
         // 연결을 시도합니다.
         setMessages(lastChat);
       },
+
       onWebSocketError: error => {
         console.log('WebSocket Error :', error);
       },

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

@@ -1,3 +1,5 @@
+'use client';
+
 import Image from 'next/image';
 import Link from 'next/link';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
@@ -11,7 +13,9 @@ import * as S from './UserHeader.css';
 
 function UserHeader() {
   const router = useRouter();
+
   const { isLoggedIn } = useAuth();
+
   const { mutate: logout } = usePostLogout();
   const pathname = usePathname();
   const searchParams = useSearchParams();

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({