Refactor/#52 - 작품 구매자/작가 마이페이지 API 연결

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

src/apis/mypage-author/myPage/myPage.ts

@@ -8,6 +8,13 @@ import { TGetResponse } from '@/apis/type';
  * @author 노찬영
  **/
 export const getAuthorMypage = async (): Promise<TArtistMypage> => {
+  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<TGetResponse<TArtistMypage>>(
     `/api/mypage`
   );

src/apis/mypage-buyer/myPage/myPage.ts

@@ -8,22 +8,17 @@ import { TGetResponse } from '@/apis/type';
  * @author 노찬영
  **/
 export const getBuyerMypage = async (): Promise<TBuyerMypage> => {
-  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<TGetResponse<TBuyerMypage>>(
-      `/api/mypage`
-    );
+  const response = await instance.get<TGetResponse<TBuyerMypage>>(
+    `/api/mypage`
+  );
 
-    return response.data.result;
-  } finally {
-    // 원래 있던 DUMMY_ACCESS_TOKEN으로 복원
-    localStorage.setItem('accessToken', DUMMY_ACCESS_TOKEN ?? '');
-  }
+  return response.data.result;
 };

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(), // 작가 마이페이지 데이터를 조회하는 함수
   };
 };
 

src/pages/artBuyerPage/components/menuMyPage/MyCollection/index.tsx

@@ -11,20 +11,31 @@ import {
 
 import { Artwork } from '@/components/common/ArtWork';
 
+import { useNavigate } from 'react-router-dom';
 import { useGetBuyerMypage } from '@/pages/artBuyerPage/hooks/useGetBuyerMypage';
 
 /**
  * @description 작품 구매자의 작품과 전시를 표시하는 컴포넌트
  * @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 (
     <MyCollectionContainer>
@@ -33,7 +44,7 @@ const MyCollection = () => {
       <ArtworkContainer>
         <SectionTitle>작품</SectionTitle>
         <ArtworkGrid>
-          {artworks?.map((artwork) => (
+          {artworks.map((artwork) => (
             <Artwork
               key={artwork.id}
               imageUrl={artwork.thumbnail_image_url}
@@ -42,6 +53,8 @@ const MyCollection = () => {
               artworkWidth={artwork.width}
               artworkHeight={artwork.height}
               artworkId={artwork.id}
+              isLiked={true}
+              onClick={() => handleArtworkClick(artwork.id)}
             />
           ))}
         </ArtworkGrid>
@@ -51,7 +64,11 @@ const MyCollection = () => {
         <SectionTitle>전시</SectionTitle>
         <ExhibitionGrid>
           {exhibitions.map((exhibition) => (
-            <ExhibitionItem key={exhibition.id}>
+            <ExhibitionItem
+              key={exhibition.id}
+              onClick={() => handleExhibitionClick(exhibition.id)}
+              style={{ cursor: 'pointer' }}
+            >
               <ExhibitionImage
                 src={exhibition.image_url}
                 alt={exhibition.title}

src/pages/artBuyerPage/hooks/useGetBuyerMypage.ts

@@ -1,7 +1,7 @@
 import { useSuspenseQuery } from '@tanstack/react-query';
 import { toast } from 'sonner';
 import { AxiosError } from 'axios';
-import { getBuyerMypageQuery } from '@/constants/queryKeys';
+import { getMypageQueryKey } from '@/constants/queryKeys';
 import { TBuyerMypage } from '@/apis/mypage-buyer/myPage/type';
 import { getBuyerMypage } from '@/apis/mypage-buyer/myPage/myPage';
 
@@ -19,7 +19,7 @@ export const useGetBuyerMypage = () => {
     isLoading,
     error,
   } = useSuspenseQuery<TBuyerMypage>({
-    queryKey: getBuyerMypageQuery().queryKey,
+    queryKey: getMypageQueryKey('buyer'),
     queryFn: () => getBuyerMypage(),
     staleTime: 1000 * 60 * 30, // 30분
     gcTime: 1000 * 60 * 60, // 1시간

src/pages/authorPage/components/menuMyPage/Auction/index.tsx

@@ -9,7 +9,7 @@ import {
 import { useGetAuthorMypage } from '@/pages/authorPage/hooks/useGetAuthorMypage';
 
 /**
- * @description 작품 구매자의 경매 내역을 표시하는 컴포넌트
+ * @description 작가의 경매 내역을 표시하는 컴포넌트
  * @author 노찬영
  */
 

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<TArtistMypage>({
-    queryKey: getAuthorMypageQuery().queryKey,
+    queryKey: getMypageQueryKey('author'),
     queryFn: () => getAuthorMypage(),
     staleTime: 1000 * 60 * 30, // 30분
     gcTime: 1000 * 60 * 60, // 1시간

src/router.tsx

@@ -1,6 +1,7 @@
 import { Route, Routes } from 'react-router-dom';
-import NotFound from '@/pages/not-found';
+import NotFound from '@pages/notFound.tsx';
 import { AuthCheckRoute } from '@components/common/AuthCheckRoute';
+import Home from '@pages/home.tsx';
 import Test from '@pages/test.tsx';
 import ArtBuyerPage from './pages/artBuyerPage/ArtBuyerPage';
 import AuthorPage from './pages/authorPage/AuthorPage';
@@ -19,7 +20,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 +31,31 @@ type TRoutes = {
  * @author 홍규진
  * */
 
+/**
+ * 작품구매자_마이페이지는 /artBuyerPage 이고,
+ * 작가_마이페이지는 /authorPage 로 구분했습니다.
+ * @author 노찬영
+ * */
+
 // eslint-disable-next-line react-refresh/only-export-components
 export const routes: TRoutes[] = [
   { path: '/', element: <Main />, isTabBar: true },
-  {
-    path: '/mypage/art-buyer',
-    element: <ArtBuyerPage />,
-    isTabBar: true,
-    isCheckAuth: true,
-  },
-  {
-    path: '/mypage/author',
-    element: <AuthorPage />,
-    isTabBar: true,
-    isCheckAuth: true,
-  },
+  { path: '/mypage/art-buyer', element: <ArtBuyerPage />, isTabBar: true },
+  { path: '/mypage/author', element: <AuthorPage />, isTabBar: true },
 
   { path: '/test', element: <Test />, isTabBar: true },
   { path: '/login', element: <Login />, isTabBar: true },
-  { path: '/login/redirect', element: <LoginRedirect />, isTabBar: true },
   { path: '/register', element: <Register />, isTabBar: true },
+
   {
     path: '/artwork-register',
     element: <ArtworkRegister />,
     isTabBar: true,
-    isCheckAuth: true,
   },
   {
     path: '/auction-register',
     element: <AuctionRegister />,
     isTabBar: true,
-    isCheckAuth: true,
   },
   {
     path: '/author',
@@ -87,7 +81,6 @@ export const routes: TRoutes[] = [
     path: '/exhibit-register',
     element: <ExhibitRegister />,
     isTabBar: true,
-    isCheckAuth: true,
   },
   {
     path: '/auction',
@@ -98,8 +91,8 @@ export const routes: TRoutes[] = [
     path: '/auction/:id',
     element: <AuctionDetail />,
     isTabBar: true,
-    isCheckAuth: true,
   },
+  { path: '/main', element: <Main />, isTabBar: true },
   { path: '/artwork', element: <ArtWork />, isTabBar: true },
   { path: '/artwork/:id', element: <ArtworkDetail />, isTabBar: true },
 ];
@@ -118,7 +111,7 @@ export default function Router() {
             key={path}
             path={path}
             element={
-              <AuthCheckRoute redirectPath="/login">{element}</AuthCheckRoute>
+              <AuthCheckRoute redirectPath="/">{element}</AuthCheckRoute>
             }
           />
         ) : (