fix: api response와 불일치 interface 수정

Author: constantly-dev

apps/client/src/pages/jobPins/JobPins.tsx

@@ -47,14 +47,14 @@ const JobPins = () => {
         >
           {articlesToDisplay.map((article) => (
             <Card
-              key={article.id}
+              key={article.articleId}
               type="bookmark"
               variant="save"
               title={article.title}
               imageUrl={article.thumbnailUrl}
               content={article.memo}
-              category={article.categoryName}
-              categoryColor={article.categoryColor}
+              category={article.category.categoryName}
+              categoryColor={article.category.categoryColor}
               nickname={article.ownerName}
               onClick={() => window.open(article.url, '_blank')}
             />

apps/client/src/pages/jobPins/apis/axios.ts

@@ -1,12 +1,22 @@
 import apiRequest from '@shared/apis/setting/axiosInstance';
+import { JobPinsResponse } from '@pages/jobPins/types/api';
 
-export const getJobPinsArticles = async (page: number, size: number) => {
+interface ApiResponse<T> {
+  code: string;
+  message: string;
+  data: T;
+}
+
+export const getJobPinsArticles = async (
+  page: number,
+  size: number
+): Promise<JobPinsResponse> => {
   const { data } = await apiRequest.get('/api/v3/articles/shared/job', {
     params: {
       page,
       size,
     },
   });
 
-  return data.data;
+  return (data as ApiResponse<JobPinsResponse>).data;
 };

apps/client/src/pages/jobPins/apis/queries.ts

@@ -1,10 +1,11 @@
 import { useInfiniteQuery } from '@tanstack/react-query';
+import { JobPinsResponse } from '@pages/jobPins/types/api';
 import { getJobPinsArticles } from './axios';
 
 export const useGetJobPinsArticles = () => {
-  return useInfiniteQuery({
+  return useInfiniteQuery<JobPinsResponse>({
     queryKey: ['jobPinsArticles'],
-    queryFn: ({ pageParam = 0 }) => getJobPinsArticles(pageParam, 20),
+    queryFn: ({ pageParam = 0 }) => getJobPinsArticles(pageParam as number, 20),
     initialPageParam: 0,
     getNextPageParam: (lastPage, allPages) => {
       if (lastPage.articles.length === 0) {

apps/client/src/pages/jobPins/types/api.ts

@@ -1,9 +1,17 @@
-export interface JobPinArticle {
+interface JobPinCategory {
+  categoryId: number;
+  categoryName: string;
+  categoryColor: string;
+}
+
+interface JobPinArticle {
+  articleId: number;
   url: string;
   title: string;
   thumbnailUrl: string;
-  categoryName: string;
-  categoryColor: string;
+  memo: string;
+  ownerName: string;
+  category: JobPinCategory;
 }
 
 export interface JobPinsResponse {