{/* desktop */}
diff --git a/src/hooks/mutations/useMeetingFormMutation.ts b/src/hooks/mutations/useMeetingFormMutation.ts
index e2c20e8..997786f 100644
--- a/src/hooks/mutations/useMeetingFormMutation.ts
+++ b/src/hooks/mutations/useMeetingFormMutation.ts
@@ -1,4 +1,4 @@
-import { authAPI } from '@/lib/axios/authApi';
+import axiosInstance from '@/lib/axios/axiosInstance';
import { useMutation } from '@tanstack/react-query';
import { meetingURL } from 'service/api/endpoints';
import { CreateMeetingPayload } from 'types/meetingForm';
@@ -16,7 +16,7 @@ const useMeetingFormMutation = ({
}) => {
const createMeeting = useMutation({
mutationFn: async (formData: CreateMeetingPayload) => {
- const response = await authAPI.post
(
+ const response = await axiosInstance.post(
meetingURL.create,
formData,
);
diff --git a/src/hooks/mutations/useUserMutation.ts b/src/hooks/mutations/useUserMutation.ts
index 8b8459a..52bb981 100644
--- a/src/hooks/mutations/useUserMutation.ts
+++ b/src/hooks/mutations/useUserMutation.ts
@@ -1,6 +1,10 @@
import { useToast } from '@/components/common/ToastContext';
-import { setAccessToken } from '@/lib/serverActions';
-import { useMutation } from '@tanstack/react-query';
+import { setAccessToken, setRefreshToken } from '@/lib/serverActions';
+import {
+ QueryClient,
+ useMutation,
+ useQueryClient,
+} from '@tanstack/react-query';
import {
getEmailCheck,
getNameCheck,
@@ -9,21 +13,26 @@ import {
} from 'service/api/user';
import { ISignupFormData } from 'types/auth';
+import { QUERY_KEYS } from '../queries/useMyPageQueries';
+
const useLoginMutation = ({
onSuccessCallback,
}: {
onSuccessCallback: () => void;
}) => {
const { showToast } = useToast();
+ const queryClient = useQueryClient();
+
return useMutation({
mutationFn: ({ email, password }: { email: string; password: string }) =>
postLogin({ email, password }),
onSuccess: async (res) => {
- // 쿠키 저장
- const accessToken = res.headers.token;
- if (accessToken) {
- await setAccessToken(accessToken);
- }
+ // 유저 정보 불러오기
+ console.log('유저 정보 invalidate');
+ // queryClient.invalidateQueries({ queryKey: QUERY_KEYS.banner() });
+
+ // refreshToken 저장
+ await setRefreshToken(res.refreshToken);
showToast('로그인 성공', 'success');
// 메인페이지로 리다이렉트
diff --git a/src/hooks/queries/useMyPageQueries.ts b/src/hooks/queries/useMyPageQueries.ts
index 4b5bafd..15291a5 100644
--- a/src/hooks/queries/useMyPageQueries.ts
+++ b/src/hooks/queries/useMyPageQueries.ts
@@ -43,7 +43,7 @@ export const useProfileQuery = (options = {}) => {
export const useBannerQueries = (options = {}) => {
return useQuery({
queryKey: QUERY_KEYS.banner(),
- queryFn: () => getBanner(),
+ queryFn: getBanner,
staleTime: 5 * 60 * 1000, // 5분 동안 fresh 상태 유지
...options,
});
diff --git a/src/lib/axios/authApi.ts b/src/lib/axios/authApi.ts
deleted file mode 100644
index 4ae9fa4..0000000
--- a/src/lib/axios/authApi.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import axios from 'axios';
-
-import { getAccessToken, removeAccessToken } from '../serverActions';
-import { defaultConfig } from './defaultConfig';
-
-export const authAPI = axios.create(defaultConfig);
-
-authAPI.interceptors.request.use(
- async (config) => {
- const accessToken = await getAccessToken();
- if (accessToken) {
- config.headers.token = `${accessToken}`;
- }
- return config;
- },
- async (error) => {
- /**
- * TODO
- * 에러 발생했다는 팝업, 모달 추가
- */
- return Promise.reject(error);
- },
-);
-
-authAPI.interceptors.response.use(
- (response) => response,
- async (error) => {
- /**
- * TODO:(refresh 토큰 발급 이후)
- * - 토근 재발급 로직
- */
-
- /**
- * - 401 에러로 실패하면, 로그인 페이지로 리다이렉트하는 로직
- * - 리다이렉트 전에 사용자에게 경고 메시지
- */
- if (error.response?.status === 401) {
- await removeAccessToken();
- window.location.href = '/login';
- }
- return Promise.reject(error);
- },
-);
diff --git a/src/lib/axios/axiosInstance.ts b/src/lib/axios/axiosInstance.ts
new file mode 100644
index 0000000..a519cc8
--- /dev/null
+++ b/src/lib/axios/axiosInstance.ts
@@ -0,0 +1,108 @@
+import axios from 'axios';
+
+import {
+ getRefreshToken,
+ removeAccessToken,
+ removeRefreshToken,
+} from '../serverActions';
+
+export const baseURL = process.env.NEXT_PUBLIC_API_URL;
+
+const axiosInstance = axios.create({
+ baseURL,
+ withCredentials: true,
+ timeout: 10000,
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+});
+
+// 토큰 갱신 중인지 여부를 확인하는 플래그
+let isRefreshing = false;
+let refreshSubscribers: (() => void)[] = [];
+
+// 모든 대기 중인 요청을 재시도하는 함수
+const onAccessTokenFetched = () => {
+ refreshSubscribers.forEach((callback) => callback());
+ refreshSubscribers = []; // 모든 요청이 처리되었기에 배열 초기화
+};
+axiosInstance.interceptors.request.use(
+ async (config) => {
+ console.log(`[API Request] ${config.method?.toUpperCase()} ${config.url}`);
+ return config;
+ },
+ async (error) => {
+ return Promise.reject(error);
+ },
+);
+
+axiosInstance.interceptors.response.use(
+ (response) => response,
+ async (error) => {
+ /**
+ * TODO:(refresh 토큰 발급 이후)
+ * - 토근 재발급 로직
+ */
+
+ /**
+ * - 401 에러로 실패하면, 로그인 페이지로 리다이렉트하는 로직
+ * - 리다이렉트 전에 사용자에게 경고 메시지
+ */
+ if (error.response?.status === 401) {
+ // await removeAccessToken();
+ console.log('401 Unauthorized - 토큰 재발급 시도');
+
+ const refreshToken = await getRefreshToken();
+ console.log('refreshToken: ', refreshToken);
+
+ if (!refreshToken) {
+ console.log('Refresh Token 없음 -> 강제 로그아웃');
+ await removeAccessToken();
+ await removeRefreshToken();
+ window.location.href = '/login';
+ return Promise.reject(error);
+ }
+
+ if (!isRefreshing) {
+ isRefreshing = true;
+
+ try {
+ // Refresh Token으로 Access Token 재발급 시도
+ await axios.post(
+ 'https://deving.shop/api/v1/auths/refresh',
+ {
+ refreshToken,
+ },
+ { withCredentials: true },
+ );
+
+ isRefreshing = false;
+
+ // 대기중인 요청들을 새로운 access token으로 실행
+ onAccessTokenFetched();
+ // ✅ 기존 요청 다시 실행 (Access Token 갱신 후)
+ return axiosInstance(error.config);
+ } catch (refreshError) {
+ console.error('Refresh Token 만료 -> 강제 로그아웃');
+
+ // Refresh Token이 만료되었다면 강제 로그아웃 및 로그인 페이지 이동
+ await removeAccessToken();
+ await removeRefreshToken();
+ window.location.href = '/login';
+ return Promise.reject(refreshError);
+ }
+ } else {
+ // refresh token 요청이 진행 중이라면 대기 (Promise를 반환)
+
+ return new Promise((resolve) => {
+ refreshSubscribers.push(() => {
+ resolve(axiosInstance(error.config)); // 기존의 요청을 새로운 토큰으로 재시도
+ });
+ });
+ }
+ }
+ return Promise.reject(error);
+ },
+);
+
+export default axiosInstance;
diff --git a/src/lib/axios/basicApi.ts b/src/lib/axios/basicApi.ts
deleted file mode 100644
index e1d9a24..0000000
--- a/src/lib/axios/basicApi.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import axios from 'axios';
-
-import { defaultConfig } from './defaultConfig';
-
-export const basicAPI = axios.create(defaultConfig);
diff --git a/src/lib/axios/defaultConfig.ts b/src/lib/axios/defaultConfig.ts
deleted file mode 100644
index aa2e131..0000000
--- a/src/lib/axios/defaultConfig.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { AxiosRequestConfig } from 'axios';
-
-export const baseURL = process.env.NEXT_PUBLIC_API_URL;
-
-export const defaultConfig: AxiosRequestConfig = {
- baseURL,
- withCredentials: true,
- timeout: 10000,
- headers: {
- 'Content-Type': 'application/json',
- },
-};
diff --git a/src/lib/serverActions.ts b/src/lib/serverActions.ts
index d5b1062..122b01f 100644
--- a/src/lib/serverActions.ts
+++ b/src/lib/serverActions.ts
@@ -7,9 +7,19 @@ export async function getAccessToken() {
return cookieStore.get('token')?.value || null;
}
+export async function getRefreshToken() {
+ const cookieStore = cookies();
+ return cookieStore.get('refreshToken')?.value || null;
+}
+
export async function removeAccessToken() {
const cookieStore = cookies();
- cookieStore.delete('token');
+ cookieStore.delete('access_token');
+}
+
+export async function removeRefreshToken() {
+ const cookieStore = cookies();
+ cookieStore.delete('refreshToken');
}
export async function setAccessToken(token: string) {
@@ -17,7 +27,19 @@ export async function setAccessToken(token: string) {
const isProd = process.env.NODE_ENV === 'production';
cookieStore.set('token', token, {
httpOnly: true,
- // sameSite: 'strict', // 개발환경에서는 불필요
+ sameSite: 'none',
+ secure: true,
+ path: '/',
+ domain: isProd ? process.env.COOKIE_DOMAIN : undefined,
+ maxAge: parseInt(process.env.NEXT_TOKEN_MAX_AGE as string) || 60 * 60,
+ });
+}
+
+export async function setRefreshToken(token: string) {
+ const cookieStore = cookies();
+ const isProd = process.env.NODE_ENV === 'production';
+ cookieStore.set('refreshToken', token, {
+ httpOnly: true,
sameSite: 'none',
secure: true,
path: '/',
diff --git a/src/service/api/comment.ts b/src/service/api/comment.ts
index ba4968e..5375bd7 100644
--- a/src/service/api/comment.ts
+++ b/src/service/api/comment.ts
@@ -1,5 +1,4 @@
-import { authAPI } from '@/lib/axios/authApi';
-import { basicAPI } from '@/lib/axios/basicApi';
+import axiosInstance from '@/lib/axios/axiosInstance';
export interface ICommentsCount {
fives: number;
@@ -48,7 +47,7 @@ export interface Comments {
}
const getCommentsCount = async (meetingId: number): Promise => {
- const res = await basicAPI.get(`/api/v1/comments/count/${meetingId}`);
+ const res = await axiosInstance.get(`/api/v1/comments/count/${meetingId}`);
return res.data.data;
};
@@ -56,7 +55,7 @@ const getCommentsMeeting = async (
meetingId: number,
lastCommentId: number,
): Promise => {
- const res = await basicAPI.get(
+ const res = await axiosInstance.get(
`/api/v1/comments/${meetingId}?lastCommentId=${lastCommentId}&size=3`,
);
return res.data.data;
@@ -66,7 +65,7 @@ const postComment = async (
meetingId: number,
req: { score: number; content: string },
) => {
- const res = await authAPI.post(`/api/v1/comments/${meetingId}`, req);
+ const res = await axiosInstance.post(`/api/v1/comments/${meetingId}`, req);
return res.data.data;
};
diff --git a/src/service/api/meeting.ts b/src/service/api/meeting.ts
index 34cff72..eb38ff8 100644
--- a/src/service/api/meeting.ts
+++ b/src/service/api/meeting.ts
@@ -1,5 +1,4 @@
-import { authAPI } from '@/lib/axios/authApi';
-import { basicAPI } from '@/lib/axios/basicApi';
+import axiosInstance from '@/lib/axios/axiosInstance';
import { getAccessToken } from '@/lib/serverActions';
import type {
CategoryTitle,
@@ -14,7 +13,7 @@ const getTopMeetings = async (
): Promise => {
const token = await getAccessToken();
- const res = await (token ? authAPI : basicAPI).get(`/api/v1/meetings/top`, {
+ const res = await axiosInstance.get(`/api/v1/meetings/top`, {
params: { categoryTitle },
});
@@ -29,7 +28,7 @@ const getMeetings = async (
const newSearchQueryObj = { ...searchQueryObj, lastMeetingId: pageParams };
const token = await getAccessToken();
- const res = await (token ? authAPI : basicAPI).post(
+ const res = await axiosInstance.post(
`/api/v1/meetings/search?categoryTitle=${category}`,
newSearchQueryObj,
);
@@ -38,13 +37,13 @@ const getMeetings = async (
};
const likeMeeting = async (meetingId: number) => {
- const res = await authAPI.post(`/api/v1/meetings/${meetingId}/likes`);
+ const res = await axiosInstance.post(`/api/v1/meetings/${meetingId}/likes`);
return res.data.data;
};
const cancelLikeMeeting = async (meetingId: number) => {
- const res = await authAPI.delete(`/api/v1/meetings/${meetingId}/likes`);
+ const res = await axiosInstance.delete(`/api/v1/meetings/${meetingId}/likes`);
return res.data.data;
};
@@ -74,12 +73,12 @@ export interface MeetingManager {
}
const getMeetingDetail = async (id: number): Promise => {
- const res = await authAPI.get(`/api/v1/meetings/detail/${id}`);
+ const res = await axiosInstance.get(`/api/v1/meetings/detail/${id}`);
return res.data.data;
};
const getMeetingDetailManager = async (id: number): Promise => {
- const res = await basicAPI.get(`/api/v1/meetings/detail/manager/${id}`);
+ const res = await axiosInstance.get(`/api/v1/meetings/detail/manager/${id}`);
return res.data.data;
};
@@ -91,13 +90,17 @@ const postMeetingRegister = async ({
meetingId: number;
message: string;
}) => {
- const res = await authAPI.post(`/api/v1/members/${meetingId}`, { message });
+ const res = await axiosInstance.post(`/api/v1/members/${meetingId}`, {
+ message,
+ });
return res.data.data;
};
// Approve 상태에서 모임 탈퇴
const deleteMeetingQuit = async (meetingId: number) => {
- const res = await authAPI.delete(`/api/v1/mymeetings/quit/${meetingId}`);
+ const res = await axiosInstance.delete(
+ `/api/v1/mymeetings/quit/${meetingId}`,
+ );
return res.data.data;
};
diff --git a/src/service/api/meetingForm.ts b/src/service/api/meetingForm.ts
index 37b110b..5a62c9c 100644
--- a/src/service/api/meetingForm.ts
+++ b/src/service/api/meetingForm.ts
@@ -1,10 +1,10 @@
-import { authAPI } from '@/lib/axios/authApi';
+import axiosInstance from '@/lib/axios/axiosInstance';
import { CreateMeetingPayload } from 'types/meetingForm';
import { meetingURL } from './endpoints';
export const createMeeting = async (data: CreateMeetingPayload) => {
- const response = await authAPI.post(meetingURL.create, data);
+ const response = await axiosInstance.post(meetingURL.create, data);
return response.data;
};
diff --git a/src/service/api/mymeeting.ts b/src/service/api/mymeeting.ts
index 3b9e6b9..f8995b6 100644
--- a/src/service/api/mymeeting.ts
+++ b/src/service/api/mymeeting.ts
@@ -1,4 +1,4 @@
-import { authAPI } from '@/lib/axios/authApi';
+import axiosInstance from '@/lib/axios/axiosInstance';
import { Paginated } from 'types/meeting';
import type { IMemberProfile, IMyMeetingManage } from 'types/myMeeting';
@@ -8,7 +8,7 @@ import { myMeetingURL } from './endpoints';
const getMyMeetingManage = async (
lastMeetingId: number,
): Promise> => {
- const res = await authAPI.get(
+ const res = await axiosInstance.get(
`${myMeetingURL.manage}?lastMeetingId=${lastMeetingId}&size=${6}`,
);
@@ -19,7 +19,7 @@ const getMyMeetingManage = async (
const getMyMeetingParticipated = async (
lastMeetingId: number,
): Promise> => {
- const res = await authAPI.get(
+ const res = await axiosInstance.get(
`${myMeetingURL.all}?lastMeetingId=${lastMeetingId}&size=${6}`,
);
@@ -34,7 +34,7 @@ const getMyMeetingMemberProfile = async ({
userId?: number;
meetingId: number;
}): Promise => {
- const res = await authAPI.get(
+ const res = await axiosInstance.get(
`${myMeetingURL.memberProfile}?userId=${userId}&meetingId=${meetingId}`,
);
@@ -51,7 +51,7 @@ const putMemberStatus = async ({
meetingId: number;
setMemberStatus: 'APPROVED' | 'REJECTED';
}) => {
- const res = await authAPI.put(`${myMeetingURL.memberStatus}`, {
+ const res = await axiosInstance.put(`${myMeetingURL.memberStatus}`, {
userId,
meetingId,
setMemberStatus,
@@ -70,7 +70,7 @@ const putExpel = async ({
meetingId: number;
setMemberStatus: 'EXPEL';
}) => {
- const res = await authAPI.put(`${myMeetingURL.expel}`, {
+ const res = await axiosInstance.put(`${myMeetingURL.expel}`, {
userId,
meetingId,
setMemberStatus,
@@ -81,7 +81,7 @@ const putExpel = async ({
// 공개 / 비공개 설정
const putIsPublic = async (meetingId: number) => {
- const res = await authAPI.put(`${myMeetingURL.isPublic(meetingId)}`);
+ const res = await axiosInstance.put(`${myMeetingURL.isPublic(meetingId)}`);
return res.data.data;
};
diff --git a/src/service/api/mypageProfile.ts b/src/service/api/mypageProfile.ts
index 5e46d03..62d6cbb 100644
--- a/src/service/api/mypageProfile.ts
+++ b/src/service/api/mypageProfile.ts
@@ -1,4 +1,4 @@
-import { authAPI } from '@/lib/axios/authApi';
+import axiosInstance from '@/lib/axios/axiosInstance';
import { fileToBase64 } from '@/util/imageBase64';
import { IBanner } from 'types/myMeeting';
@@ -17,7 +17,7 @@ import {
// 프로필 조회 API 함수 (통합된 엔드포인트)
export const getProfile = async (): Promise => {
try {
- const response = await authAPI.get('/api/v1/mypage/profile');
+ const response = await axiosInstance.get('/api/v1/mypage/profile');
return response.data;
} catch (error) {
throw error;
@@ -29,7 +29,10 @@ export const updateProfile = async (
profileData: IProfileUpdateRequest,
): Promise => {
try {
- const response = await authAPI.put('/api/v1/mypage/profile', profileData);
+ const response = await axiosInstance.put(
+ '/api/v1/mypage/profile',
+ profileData,
+ );
return response.data;
} catch (error) {
throw error;
@@ -41,7 +44,10 @@ export const updateContactInfo = async (
contactData: IContactInfoUpdateRequest,
): Promise => {
try {
- const response = await authAPI.put('/api/v1/mypage/contact', contactData);
+ const response = await axiosInstance.put(
+ '/api/v1/mypage/contact',
+ contactData,
+ );
return response.data;
} catch (error) {
throw error;
@@ -62,7 +68,7 @@ export const updateProfileImage = async (
profilePicName: file.name,
};
- const response = await authAPI.put(
+ const response = await axiosInstance.put(
'/api/v1/mypage/profilepic',
requestData,
);
@@ -77,7 +83,10 @@ export const updatePassword = async (
passwordData: IPasswordUpdateRequest,
): Promise => {
try {
- const response = await authAPI.put('/api/v1/mypage/password', passwordData);
+ const response = await axiosInstance.put(
+ '/api/v1/mypage/password',
+ passwordData,
+ );
return response.data;
} catch (error) {
throw error;
@@ -89,7 +98,7 @@ export const updateSkills = async (
skillArray: string[],
): Promise => {
try {
- const response = await authAPI.post('/api/v1/mypage/skills', {
+ const response = await axiosInstance.post('/api/v1/mypage/skills', {
skillArray,
});
return response.data;
@@ -99,7 +108,11 @@ export const updateSkills = async (
};
// 배너 정보 불러오기
-export const getBanner = async (): Promise => {
- const res = await authAPI.get('/api/v1/mypage/banner');
- return res.data.data;
+export const getBanner = async (): Promise => {
+ try {
+ const res = await axiosInstance.get('/api/v1/mypage/banner');
+ return res.data.data;
+ } catch (error) {
+ return null;
+ }
};
diff --git a/src/service/api/user.ts b/src/service/api/user.ts
index 80dc0f4..1b243d5 100644
--- a/src/service/api/user.ts
+++ b/src/service/api/user.ts
@@ -1,4 +1,4 @@
-import { basicAPI } from '@/lib/axios/basicApi';
+import axiosInstance from '@/lib/axios/axiosInstance';
import { ISignupFormData } from 'types/auth';
const postLogin = async ({
@@ -8,23 +8,28 @@ const postLogin = async ({
email: string;
password: string;
}) => {
- const res = await basicAPI.post('/api/v1/auths/login', { email, password });
+ const res = await axiosInstance.post('/api/v1/auths/login', {
+ email,
+ password,
+ });
- return res;
+ return res.data.data;
};
const getNameCheck = async (name: string) => {
- const res = await basicAPI.get(`/api/v1/auths/signup/name?name=${name}`);
+ const res = await axiosInstance.get(`/api/v1/auths/signup/name?name=${name}`);
return res;
};
const getEmailCheck = async (email: string) => {
- const res = await basicAPI.get(`/api/v1/auths/signup/email?email=${email}`);
+ const res = await axiosInstance.get(
+ `/api/v1/auths/signup/email?email=${email}`,
+ );
return res;
};
const postSignup = async (data: ISignupFormData) => {
- const res = await basicAPI.post('/api/v1/auths/signup', data);
+ const res = await axiosInstance.post('/api/v1/auths/signup', data);
return res;
};