✨ feat : privateApi config

src/apis/apis.ts

@@ -7,6 +7,7 @@ import {
   PoseTalkResponse,
   RegisterResponse,
 } from '.';
+import privateApi from './config/privateApi';
 import publicApi from './config/publicApi';
 import { KAKAO_REDIRECT_URI } from '@/constants/env';
 
@@ -24,7 +25,7 @@ export const getPoseFeed = async (
   tags: string,
   pageNumber: number
 ) =>
-  await publicApi.get<PoseFeedResponse>(`/pose`, {
+  await privateApi.get<PoseFeedResponse>(`/pose`, {
     params: {
       frameCount,
       pageNumber,
@@ -57,20 +58,17 @@ export const patchDeleteAccount = (
     withdrawalReason,
   });
 
-export const postBookmark = (accesstoken: string, poseId: number) =>
-  publicApi.post(`/bookmark`, null, {
+export const postBookmark = (poseId: number) =>
+  privateApi.post(`/bookmark`, null, {
     params: { poseId },
-    headers: { Authorization: `Bearer ${accesstoken}` },
   });
 
-export const deleteBookmark = (accesstoken: string, poseId: number) =>
-  publicApi.delete(`/bookmark`, {
+export const deleteBookmark = (poseId: number) =>
+  privateApi.delete(`/bookmark`, {
     params: { poseId },
-    headers: { Authorization: `Bearer ${accesstoken}` },
   });
 
-export const getBookmarkFeed = (accesstoken: string, pageNumber: number) =>
-  publicApi.get<PoseFeedContents>('/bookmark/feed', {
-    headers: { Authorization: `Bearer ${accesstoken}` },
+export const getBookmarkFeed = (pageNumber: number) =>
+  privateApi.get<PoseFeedContents>('/bookmark/feed', {
     params: { pageNumber, pageSize: 10 },
   });

src/apis/config/privateApi.ts

@@ -0,0 +1,34 @@
+import axios from 'axios';
+
+import { CustomInstance } from './type';
+import { BASE_API_URL } from '@/constants/env';
+
+function getAccesstoken() {
+  if (typeof window !== 'undefined') {
+    const item = localStorage.getItem('accesstoken');
+    return item;
+  }
+}
+
+const privateApi: CustomInstance = axios.create({
+  baseURL: `${BASE_API_URL}/api`,
+  withCredentials: true,
+});
+
+privateApi.interceptors.response.use((response) => response.data);
+privateApi.interceptors.request.use(
+  (config) => {
+    const accessToken = getAccesstoken();
+
+    if (accessToken) {
+      config.headers.Authorization = `Bearer ${accessToken}`;
+    }
+
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+export default privateApi;

src/apis/config/type.ts

@@ -19,4 +19,4 @@ export interface CustomInstance extends AxiosInstance {
   patch<T>(...params: Parameters<AxiosInstance['patch']>): Promise<T>;
 }
 
-export type ErrorStatus = 400 | 401 | 403 | 412 | 500;
+export type ErrorStatus = 400 | 401 | 403 | 412 | 500 | 415;

src/apis/queries.ts

@@ -38,8 +38,8 @@ export const usePoseTalkQuery = (options?: UseQueryOptions<PoseTalkResponse>) =>
 export const usePoseFeedQuery = (
   { peopleCount, frameCount, tags }: FilterState,
   options?: UseInfiniteQueryOptions<PoseFeedResponse>
-) =>
-  useSuspenseInfiniteQuery<PoseFeedResponse>(
+) => {
+  return useSuspenseInfiniteQuery<PoseFeedResponse>(
     ['poseFeed', peopleCount, frameCount, tags],
     ({ pageParam = 0 }) => getPoseFeed(peopleCount, frameCount, tags.join(','), pageParam),
     {
@@ -52,14 +52,15 @@ export const usePoseFeedQuery = (
       ...options,
     }
   );
+};
 
 export const useBookmarkFeedQuery = (
   accesstoken: string,
   options?: UseInfiniteQueryOptions<PoseFeedContents>
 ) =>
   useSuspenseInfiniteQuery<PoseFeedContents>(
     ['bookmarkFeed'],
-    ({ pageParam = 0 }) => getBookmarkFeed(accesstoken, pageParam),
+    ({ pageParam = 0 }) => getBookmarkFeed(pageParam),
     {
       getNextPageParam: (lastPage) => {
         return lastPage.last ? undefined : lastPage.number + 1;

src/app/(Main)/mypose/layout.tsx

@@ -3,14 +3,20 @@ import { QueryAsyncBoundary } from '@suspensive/react-query';
 import LoginSection from './components/LoginSection';
 import MyposeTab from './components/MyposeTab';
 import { RejectedFallback } from '@/components/ErrorBoundary';
+import { Loading } from '@/components/Loading';
 import { StrictPropsWithChildren } from '@/types';
 
 export default function Layout({ children }: StrictPropsWithChildren) {
   return (
     <>
       <LoginSection />
       <MyposeTab />
-      <QueryAsyncBoundary rejectedFallback={RejectedFallback}>{children}</QueryAsyncBoundary>
+      <QueryAsyncBoundary
+        rejectedFallback={RejectedFallback}
+        pendingFallback={<Loading className="h-[calc(100dvh-178px)]" />}
+      >
+        {children}
+      </QueryAsyncBoundary>
     </>
   );
 }

src/app/auth/logout/page.tsx

@@ -13,8 +13,8 @@ export default function Page() {
   useEffect(() => {
     if (token) {
       patchLogout(token.accessToken, token.refreshToken).then((response) => {
-        console.log(response);
         alert('로그아웃 성공!');
+        localStorage.removeItem('accesstoken');
       });
     }
     clearUser();

src/app/auth/page.tsx

@@ -15,6 +15,7 @@ export default function Page() {
     if (code) {
       getRegister(code).then((response) => {
         setUser(response);
+        localStorage.setItem('accesstoken', response.token.accessToken);
         alert(`로그인에 성공했어요!`);
         router.back();
       });

src/components/Feed/BookmarkButton.tsx

@@ -24,11 +24,11 @@ export default function BookmarkButton({ poseId, isMarked }: BookmarkButtonI) {
       return;
     }
     if (marked) {
-      deleteBookmark(token?.accessToken, poseId).then(() => {
+      deleteBookmark(poseId).then(() => {
         setMarked(false);
       });
     } else {
-      postBookmark(token?.accessToken, poseId).then(() => {
+      postBookmark(poseId).then(() => {
         setMarked(true);
       });
     }