diff --git a/src/apis/axios.ts b/src/apis/axios.ts index 34dde46..fb2123a 100644 --- a/src/apis/axios.ts +++ b/src/apis/axios.ts @@ -25,10 +25,9 @@ type TAnotherToken = { type TAuthResponse = { accessToken: string; }; - const DUMMY_ACCESS_TOKEN = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6InJ5dXNlb25naG83QGRndS5hYy5rciIsImlhdCI6MTczOTIwNDY5NiwiZXhwIjoxNzQxNzk2Njk2fQ.iWwnAhIzse5UwvHpR5uWa2o0HRM5G14ikeAtYf_BDec'; -// localStorage.setItem('accessToken', DUMMY_ACCESS_TOKEN); +localStorage.setItem('accessToken', DUMMY_ACCESS_TOKEN); export const instance: AxiosInstance = axios.create({ baseURL: import.meta.env.VITE_APP_SERVER_URL, headers: { diff --git a/src/apis/mypage-author/myPage/myPage.ts b/src/apis/mypage-author/myPage/myPage.ts index 09aee22..9d69f16 100644 --- a/src/apis/mypage-author/myPage/myPage.ts +++ b/src/apis/mypage-author/myPage/myPage.ts @@ -8,6 +8,13 @@ import { TGetResponse } from '@/apis/type'; * @author 노찬영 **/ export const getAuthorMypage = async (): Promise => { + const AUTHOR_TOKEN = + 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6InJ5dXNlb25naG83QGRndS5hYy5rciIsImlhdCI6MTczOTIwNDY5NiwiZXhwIjoxNzQxNzk2Njk2fQ.iWwnAhIzse5UwvHpR5uWa2o0HRM5G14ikeAtYf_BDec'; + console.log('작가 accessToken:', AUTHOR_TOKEN); + + localStorage.setItem('accessToken', AUTHOR_TOKEN); + instance.defaults.headers.common.Authorization = `Bearer ${AUTHOR_TOKEN}`; + const response = await instance.get>( `/api/mypage` ); diff --git a/src/apis/mypage-buyer/myPage/myPage.ts b/src/apis/mypage-buyer/myPage/myPage.ts index ec4e0fa..310751c 100644 --- a/src/apis/mypage-buyer/myPage/myPage.ts +++ b/src/apis/mypage-buyer/myPage/myPage.ts @@ -8,22 +8,17 @@ import { TGetResponse } from '@/apis/type'; * @author 노찬영 **/ export const getBuyerMypage = async (): Promise => { - const DUMMY_ACCESS_TOKEN = localStorage.getItem('accessToken'); // 기존 토큰 저장 const BUYER_TOKEN = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Imh5c29uZzR1QGdtYWlsLmNvbSIsImlhdCI6MTczOTU1MzczMSwiZXhwIjoxNzQyMTQ1NzMxfQ.6ePJhRS1JUNK9BPIOk9oXrYoggois21uBtGsp4gvKrU'; + console.log('구매자 accessToken:', BUYER_TOKEN); - try { - // 기존 토큰 삭제 후 구매자 토큰 저장 - localStorage.removeItem('accessToken'); - localStorage.setItem('accessToken', BUYER_TOKEN); + // 구매자 토큰으로 변경 + localStorage.setItem('accessToken', BUYER_TOKEN); + instance.defaults.headers.common.Authorization = `Bearer ${BUYER_TOKEN}`; - const response = await instance.get>( - `/api/mypage` - ); + const response = await instance.get>( + `/api/mypage` + ); - return response.data.result; - } finally { - // 원래 있던 DUMMY_ACCESS_TOKEN으로 복원 - localStorage.setItem('accessToken', DUMMY_ACCESS_TOKEN ?? ''); - } + return response.data.result; }; diff --git a/src/constants/queryKeys.ts b/src/constants/queryKeys.ts index e3ddda4..0e5edf4 100644 --- a/src/constants/queryKeys.ts +++ b/src/constants/queryKeys.ts @@ -36,42 +36,33 @@ export const getArtistListQuery = () => { }; /** - * 작품 구매자 마이페이지 조회를 위한 쿼리 키 반환 함수 - * @returns 쿼리 키 배열 ['userMypage']을 반환하여 캐시를 사용자별로 관리할 수 있도록 설정 + * 마이페이지 조회를 위한 쿼리 키 반환 함수 + * @returns 쿼리 키 배열 ['Mypage']을 반환하여 캐시를 사용자별로 관리할 수 있도록 설정 * @author 노찬영 */ -export const getBuyerMypageQueryKey = () => ['buyerMypage']; +export const getMypageQueryKey = (role: 'author' | 'buyer') => ['Mypage', role]; /** * 작품 구매자 마이페이지 조회 API를 위한 React Query 설정 함수 * @returns queryKey와 queryFn을 포함한 객체를 반환하여 React Query에서 사용 가능하도록 설정 - * @example - const { data } = useQuery(getUserMypageQuery(123)); * @author 노찬영 */ export const getBuyerMypageQuery = () => { return { - queryKey: getBuyerMypageQueryKey(), - queryFn: () => getBuyerMypage(), // 마이페이지 데이터를 조회하는 함수 + queryKey: getMypageQueryKey('buyer'), + queryFn: () => getBuyerMypage(), // 작품 구매자 마이페이지 데이터를 조회하는 함수 }; }; -/** - * 작가 마이페이지 조회를 위한 쿼리 키 반환 함수 - * @returns 쿼리 키 배열 ['userMypage']을 반환하여 캐시를 사용자별로 관리할 수 있도록 설정 - * @author 노찬영 - */ -export const getAuthorMypageQueryKey = () => ['authorMypage']; - /** * 작가 마이페이지 조회 API를 위한 React Query 설정 함수 * @returns queryKey와 queryFn을 포함한 객체를 반환하여 React Query에서 사용 가능하도록 설정 - * @example - const { data } = useQuery(getUserMypageQuery(123)); * @author 노찬영 */ export const getAuthorMypageQuery = () => { return { - queryKey: getAuthorMypageQueryKey(), - queryFn: () => getAuthorMypage(), // 마이페이지 데이터를 조회하는 함수 + queryKey: getMypageQueryKey('author'), + queryFn: () => getAuthorMypage(), // 작가 마이페이지 데이터를 조회하는 함수 }; }; diff --git a/src/pages/artBuyerPage/components/menuMyPage/MyCollection/index.tsx b/src/pages/artBuyerPage/components/menuMyPage/MyCollection/index.tsx index fc92839..f2b88da 100644 --- a/src/pages/artBuyerPage/components/menuMyPage/MyCollection/index.tsx +++ b/src/pages/artBuyerPage/components/menuMyPage/MyCollection/index.tsx @@ -11,6 +11,7 @@ import { import { Artwork } from '@/components/common/ArtWork'; +import { useNavigate } from 'react-router-dom'; import { useGetBuyerMypage } from '@/pages/artBuyerPage/hooks/useGetBuyerMypage'; /** @@ -18,13 +19,23 @@ import { useGetBuyerMypage } from '@/pages/artBuyerPage/hooks/useGetBuyerMypage' * @author 노찬영 */ const MyCollection = () => { + const navigate = useNavigate(); const { userMypageData } = useGetBuyerMypage(); // 작품 구매자 작품 데이터 - const artworks = userMypageData.myCollection.artworks; - + const artworks = userMypageData?.myCollection?.artworks || []; // 작품 구매자 전시 데이터 - const exhibitions = userMypageData.myCollection.exhibitions; + const exhibitions = userMypageData?.myCollection?.exhibitions || []; + + // 작품 클릭 시 작품 상세 페이지로 이동 + const handleArtworkClick = (artworkId: number) => { + navigate(`/artwork/${artworkId}`); + }; + + // 전시 클릭 시 전시 상세 페이지로 이동 + const handleExhibitionClick = (exhibitionId: number) => { + navigate(`/exhibition/${exhibitionId}`); + }; return ( @@ -33,7 +44,7 @@ const MyCollection = () => { 작품 - {artworks?.map((artwork) => ( + {artworks.map((artwork) => ( { artworkWidth={artwork.width} artworkHeight={artwork.height} artworkId={artwork.id} + isLiked={true} + onClick={() => handleArtworkClick(artwork.id)} /> ))} @@ -51,7 +64,11 @@ const MyCollection = () => { 전시 {exhibitions.map((exhibition) => ( - + handleExhibitionClick(exhibition.id)} + style={{ cursor: 'pointer' }} + > { isLoading, error, } = useSuspenseQuery({ - queryKey: getBuyerMypageQuery().queryKey, + queryKey: getMypageQueryKey('buyer'), queryFn: () => getBuyerMypage(), staleTime: 1000 * 60 * 30, // 30분 gcTime: 1000 * 60 * 60, // 1시간 diff --git a/src/pages/authorPage/components/menuMyPage/Auction/index.tsx b/src/pages/authorPage/components/menuMyPage/Auction/index.tsx index 70263ea..f7018db 100644 --- a/src/pages/authorPage/components/menuMyPage/Auction/index.tsx +++ b/src/pages/authorPage/components/menuMyPage/Auction/index.tsx @@ -9,7 +9,7 @@ import { import { useGetAuthorMypage } from '@/pages/authorPage/hooks/useGetAuthorMypage'; /** - * @description 작품 구매자의 경매 내역을 표시하는 컴포넌트 + * @description 작가의 경매 내역을 표시하는 컴포넌트 * @author 노찬영 */ diff --git a/src/pages/authorPage/hooks/useGetAuthorMypage.ts b/src/pages/authorPage/hooks/useGetAuthorMypage.ts index 6f9b1c7..b2e158b 100644 --- a/src/pages/authorPage/hooks/useGetAuthorMypage.ts +++ b/src/pages/authorPage/hooks/useGetAuthorMypage.ts @@ -1,7 +1,7 @@ import { useSuspenseQuery } from '@tanstack/react-query'; import { toast } from 'sonner'; import { AxiosError } from 'axios'; -import { getAuthorMypageQuery } from '@/constants/queryKeys'; +import { getMypageQueryKey } from '@/constants/queryKeys'; import { getAuthorMypage } from '@/apis/mypage-author/myPage/myPage'; import { TArtistMypage } from '@/apis/mypage-author/myPage/type'; @@ -19,7 +19,7 @@ export const useGetAuthorMypage = () => { isLoading, error, } = useSuspenseQuery({ - queryKey: getAuthorMypageQuery().queryKey, + queryKey: getMypageQueryKey('author'), queryFn: () => getAuthorMypage(), staleTime: 1000 * 60 * 30, // 30분 gcTime: 1000 * 60 * 60, // 1시간 diff --git a/src/router.tsx b/src/router.tsx index 5d15e77..5d88822 100644 --- a/src/router.tsx +++ b/src/router.tsx @@ -1,6 +1,6 @@ import { Route, Routes } from 'react-router-dom'; -import NotFound from '@/pages/not-found'; import { AuthCheckRoute } from '@components/common/AuthCheckRoute'; +import NotFound from './pages/not-found'; import Test from '@pages/test.tsx'; import ArtBuyerPage from './pages/artBuyerPage/ArtBuyerPage'; import AuthorPage from './pages/authorPage/AuthorPage'; @@ -19,7 +19,6 @@ import { Main } from '@/pages/main'; import { ArtWork } from '@/pages/artwork'; import { ArtworkDetail } from '@/pages/artwork-detail'; import { AuctionDetail } from './pages/auction-detail'; -import { LoginRedirect } from './pages/login-redirect'; type TRoutes = { path: string; element: JSX.Element; @@ -31,37 +30,31 @@ type TRoutes = { * @author 홍규진 * */ +/** + * 작품구매자_마이페이지는 /artBuyerPage 이고, + * 작가_마이페이지는 /authorPage 로 구분했습니다. + * @author 노찬영 + * */ + // eslint-disable-next-line react-refresh/only-export-components export const routes: TRoutes[] = [ { path: '/', element:
, isTabBar: true }, - { - path: '/mypage/art-buyer', - element: , - isTabBar: true, - isCheckAuth: true, - }, - { - path: '/mypage/author', - element: , - isTabBar: true, - isCheckAuth: true, - }, + { path: '/mypage/art-buyer', element: , isTabBar: true }, + { path: '/mypage/author', element: , isTabBar: true }, { path: '/test', element: , isTabBar: true }, { path: '/login', element: , isTabBar: true }, - { path: '/login/redirect', element: , isTabBar: true }, { path: '/register', element: , isTabBar: true }, + { path: '/artwork-register', element: , isTabBar: true, - isCheckAuth: true, }, { path: '/auction-register', element: , isTabBar: true, - isCheckAuth: true, }, { path: '/author', @@ -87,7 +80,6 @@ export const routes: TRoutes[] = [ path: '/exhibit-register', element: , isTabBar: true, - isCheckAuth: true, }, { path: '/auction', @@ -98,8 +90,8 @@ export const routes: TRoutes[] = [ path: '/auction/:id', element: , isTabBar: true, - isCheckAuth: true, }, + { path: '/main', element:
, isTabBar: true }, { path: '/artwork', element: , isTabBar: true }, { path: '/artwork/:id', element: , isTabBar: true }, ]; @@ -118,7 +110,7 @@ export default function Router() { key={path} path={path} element={ - {element} + {element} } /> ) : (