diff --git a/src/apis/apis.ts b/src/apis/apis.ts index 886fd9ad..48423826 100644 --- a/src/apis/apis.ts +++ b/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(`/pose`, { + await privateApi.get(`/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('/bookmark/feed', { - headers: { Authorization: `Bearer ${accesstoken}` }, +export const getBookmarkFeed = (pageNumber: number) => + privateApi.get('/bookmark/feed', { params: { pageNumber, pageSize: 10 }, }); diff --git a/src/apis/config/privateApi.ts b/src/apis/config/privateApi.ts new file mode 100644 index 00000000..2b2c91de --- /dev/null +++ b/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; diff --git a/src/apis/config/type.ts b/src/apis/config/type.ts index 5e0c6614..a0a46dfc 100644 --- a/src/apis/config/type.ts +++ b/src/apis/config/type.ts @@ -19,4 +19,4 @@ export interface CustomInstance extends AxiosInstance { patch(...params: Parameters): Promise; } -export type ErrorStatus = 400 | 401 | 403 | 412 | 500; +export type ErrorStatus = 400 | 401 | 403 | 412 | 500 | 415; diff --git a/src/apis/queries.ts b/src/apis/queries.ts index 08ef7118..c516b431 100644 --- a/src/apis/queries.ts +++ b/src/apis/queries.ts @@ -38,8 +38,8 @@ export const usePoseTalkQuery = (options?: UseQueryOptions) => export const usePoseFeedQuery = ( { peopleCount, frameCount, tags }: FilterState, options?: UseInfiniteQueryOptions -) => - useSuspenseInfiniteQuery( +) => { + return useSuspenseInfiniteQuery( ['poseFeed', peopleCount, frameCount, tags], ({ pageParam = 0 }) => getPoseFeed(peopleCount, frameCount, tags.join(','), pageParam), { @@ -52,6 +52,7 @@ export const usePoseFeedQuery = ( ...options, } ); +}; export const useBookmarkFeedQuery = ( accesstoken: string, @@ -59,7 +60,7 @@ export const useBookmarkFeedQuery = ( ) => useSuspenseInfiniteQuery( ['bookmarkFeed'], - ({ pageParam = 0 }) => getBookmarkFeed(accesstoken, pageParam), + ({ pageParam = 0 }) => getBookmarkFeed(pageParam), { getNextPageParam: (lastPage) => { return lastPage.last ? undefined : lastPage.number + 1; diff --git a/src/app/(Main)/mypose/layout.tsx b/src/app/(Main)/mypose/layout.tsx index c7d778f5..712772a6 100644 --- a/src/app/(Main)/mypose/layout.tsx +++ b/src/app/(Main)/mypose/layout.tsx @@ -3,6 +3,7 @@ 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) { @@ -10,7 +11,12 @@ export default function Layout({ children }: StrictPropsWithChildren) { <> - {children} + } + > + {children} + ); } diff --git a/src/app/auth/logout/page.tsx b/src/app/auth/logout/page.tsx index 431696a8..d9695095 100644 --- a/src/app/auth/logout/page.tsx +++ b/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(); diff --git a/src/app/auth/page.tsx b/src/app/auth/page.tsx index 2e485024..3a4636b8 100644 --- a/src/app/auth/page.tsx +++ b/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(); }); diff --git a/src/components/Feed/BookmarkButton.tsx b/src/components/Feed/BookmarkButton.tsx index 27c9b2a1..3b09af44 100644 --- a/src/components/Feed/BookmarkButton.tsx +++ b/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); }); }