Skip to content

Api(client): Dashboard article 전체 조회 API 연결 #82

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
constantly-dev merged 6 commits into from
Sep 13, 2025
Merged

Api(client): Dashboard article 전체 조회 API 연결 #82

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e85bb00
feat: remind card 전체 조회 schema 작성
constantly-dev Sep 12, 2025
ab903be
feat: Bookmark card 전체 조회 schema 작성
constantly-dev Sep 12, 2025
ff723d9
feat: remind card axios, query함수 작성
constantly-dev Sep 12, 2025
d255a18
feat: bookmark card axios, query함수 작성
constantly-dev Sep 12, 2025
1db4d82
api: remind article 전체 조회 api 연결
constantly-dev Sep 12, 2025
a7ef5cd
api: mybookmark articles 전체 조회 & unread 조회 api 연결
constantly-dev Sep 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions apps/client/src/pages/myBookmark/apis/axios.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import apiRequest from '@shared/apis/setting/axiosInstance';

export const getBookmarkReadArticles = async (page: number, size: number) => {
const { data } = await apiRequest.get(
`/api/v1/articles?page=${page}&size=${size}`
);
return data.data;
};
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Sep 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

이름과 실제 동작 불일치(“Read”가 아닌 “All”)

/api/v1/articles는 전부 조회(ALL)로 보입니다. 함수명을 getBookmarkAllArticles로 바꾸거나 최소한 주석으로 명확히 해주세요. 혼동은 호출부/키 캐싱에도 영향을 줍니다.

-import apiRequest from '@shared/apis/setting/axiosInstance';
+import apiRequest from '@shared/apis/setting/axiosInstance';
+import { BookmarkArticleResponse, UnreadBookmarkArticleResponse } from '@pages/myBookmark/types/api';
+
+type ApiResponse<T> = { data: T };

-export const getBookmarkReadArticles = async (page: number, size: number) => {
-  const { data } = await apiRequest.get(
-    `/api/v1/articles?page=${page}&size=${size}`
-  );
-  return data.data;
-};
+// NOTE: returns ALL bookmark articles (read + unread)
+export const getBookmarkAllArticles = async (page: number, size: number): Promise<BookmarkArticleResponse> => {
+  const { data } = await apiRequest.get<ApiResponse<BookmarkArticleResponse>>(
+    '/api/v1/articles',
+    { params: { page, size } }
+  );
+  return data.data;
+};

호환성 필요 시, 아래 별칭도 함께 유지 가능합니다:

+export const getBookmarkReadArticles = getBookmarkAllArticles;
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
export const getBookmarkReadArticles = async (page: number, size: number) => {
const { data } = await apiRequest.get(
`/api/v1/articles?page=${page}&size=${size}`
);
return data.data;
};
import apiRequest from '@shared/apis/setting/axiosInstance';
import { BookmarkArticleResponse, UnreadBookmarkArticleResponse } from '@pages/myBookmark/types/api';
type ApiResponse<T> = { data: T };
// NOTE: returns ALL bookmark articles (read + unread)
export const getBookmarkAllArticles = async (page: number, size: number): Promise<BookmarkArticleResponse> => {
const { data } = await apiRequest.get<ApiResponse<BookmarkArticleResponse>>(
'/api/v1/articles',
{ params: { page, size } }
);
return data.data;
};
export const getBookmarkReadArticles = getBookmarkAllArticles;
🤖 Prompt for AI Agents 
In apps/client/src/pages/myBookmark/apis/axios.ts around lines 3 to 8, the
function name getBookmarkReadArticles misleadingly implies it fetches "read"
articles while the endpoint /api/v1/articles returns all articles; rename the
function to getBookmarkAllArticles (or export a new alias with the new name and
keep the old name for backward compatibility), update the JSDoc/comment to state
it returns ALL bookmarked articles, and search/update callers/cache keys to use
the new name or alias to avoid key collisions.


export const getBookmarkUnreadArticles = async (page: number, size: number) => {
const { data } = await apiRequest.get(
`/api/v1/articles/unread?page=${page}&size=${size}`
);
return data.data;
};
Comment on lines +10 to +15
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Sep 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

axios params 사용 및 반환 타입 명시

동일하게 params 사용과 제네릭으로 안전성을 높여주세요.

-export const getBookmarkUnreadArticles = async (page: number, size: number) => {
-  const { data } = await apiRequest.get(
-    `/api/v1/articles/unread?page=${page}&size=${size}`
-  );
-  return data.data;
-};
+export const getBookmarkUnreadArticles = async (page: number, size: number): Promise<UnreadBookmarkArticleResponse> => {
+  const { data } = await apiRequest.get<ApiResponse<UnreadBookmarkArticleResponse>>(
+    '/api/v1/articles/unread',
+    { params: { page, size } }
+  );
+  return data.data;
+};
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
export const getBookmarkUnreadArticles = async (page: number, size: number) => {
const { data } = await apiRequest.get(
`/api/v1/articles/unread?page=${page}&size=${size}`
);
return data.data;
};
export const getBookmarkUnreadArticles = async (page: number, size: number): Promise<UnreadBookmarkArticleResponse> => {
const { data } = await apiRequest.get<ApiResponse<UnreadBookmarkArticleResponse>>(
'/api/v1/articles/unread',
{ params: { page, size } }
);
return data.data;
};
🤖 Prompt for AI Agents 
In apps/client/src/pages/myBookmark/apis/axios.ts around lines 10 to 15, the
request builds the query string inline and doesn't use axios params or generics
for typing; change the call to use apiRequest.get<TResponse> with a typed
response/interface for the returned shape and pass { params: { page, size } }
instead of interpolating into the URL, and annotate the function return type
(e.g., Promise<YourDataType>) so consumers get compile-time safety.

27 changes: 27 additions & 0 deletions apps/client/src/pages/myBookmark/apis/queries.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { useQuery, UseQueryResult } from '@tanstack/react-query';
import { AxiosError } from 'axios';
import { getBookmarkReadArticles, getBookmarkUnreadArticles } from './axios';
import {
BookmarkArticleResponse,
UnreadBookmarkArticleResponse,
} from '@pages/myBookmark/types/api';

export const useGetBookmarkReadArticles = (
page: number,
size: number
): UseQueryResult<BookmarkArticleResponse, AxiosError> => {
return useQuery({
queryKey: ['bookmarkReadArticles', page, size],
queryFn: () => getBookmarkReadArticles(page, size),
});
};

export const useGetBookmarkUnreadArticles = (
page: number,
size: number
): UseQueryResult<UnreadBookmarkArticleResponse, AxiosError> => {
return useQuery({
queryKey: ['bookmarkUnreadArticles', page, size],
queryFn: () => getBookmarkUnreadArticles(page, size),
});
};
20 changes: 20 additions & 0 deletions apps/client/src/pages/myBookmark/types/api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
interface BookmarkArticle {
articleId: number;
url: string;
memo: string;
createdAt: string;
isRead: boolean;
}

// 북마크 전체 조회
export interface BookmarkArticleResponse {
totalArticle: number;
totalUnreadArticle: number;
articles: BookmarkArticle[];
}

// 북마크 안 읽음 조회
export interface UnreadBookmarkArticleResponse {
totalUnreadArticle: number;
articles: BookmarkArticle[];
}
13 changes: 13 additions & 0 deletions apps/client/src/pages/remind/apis/axios.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import apiRequest from '@shared/apis/setting/axiosInstance';

export const getRemindArticles = async (
nowDate: string,
readStatus: boolean,
page: number,
size: number
) => {
const { data } = await apiRequest.get(
`/api/v1/articles/remind?now=${nowDate}&readStatus=${readStatus}&page=${page}&size=${size}`
);
return data.data;
};
Comment on lines +3 to +13
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Sep 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

쿼리 문자열 직접 합성 지양하고 axios params 사용 + 반환 타입 명시

직접 문자열 합성은 인코딩 이슈(nowDate에 : 등)와 유지보수 비용을 유발합니다. axios params와 제네릭으로 응답 타입을 명확히 해주세요.

+import { ArticleListResponse } from '@pages/remind/types/api';
+
+type ApiResponse<T> = { data: T };
+
 export const getRemindArticles = async (
   nowDate: string,
   readStatus: boolean,
   page: number,
   size: number
-) => {
-  const { data } = await apiRequest.get(
-    `/api/v1/articles/remind?now=${nowDate}&readStatus=${readStatus}&page=${page}&size=${size}`
-  );
+) : Promise<ArticleListResponse> => {
+  const { data } = await apiRequest.get<ApiResponse<ArticleListResponse>>(
+    '/api/v1/articles/remind',
+    { params: { now: nowDate, readStatus, page, size } }
+  );
   return data.data;
 };
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
export const getRemindArticles = async (
nowDate: string,
readStatus: boolean,
page: number,
size: number
) => {
const { data } = await apiRequest.get(
`/api/v1/articles/remind?now=${nowDate}&readStatus=${readStatus}&page=${page}&size=${size}`
);
return data.data;
};
import { ArticleListResponse } from '@pages/remind/types/api';
type ApiResponse<T> = { data: T };
export const getRemindArticles = async (
nowDate: string,
readStatus: boolean,
page: number,
size: number
): Promise<ArticleListResponse> => {
const { data } = await apiRequest.get<ApiResponse<ArticleListResponse>>(
'/api/v1/articles/remind',
{ params: { now: nowDate, readStatus, page, size } }
);
return data.data;
};
🤖 Prompt for AI Agents 
In apps/client/src/pages/remind/apis/axios.ts around lines 3 to 13, the function
builds the query string manually which can cause encoding issues and lacks an
explicit return type; change the axios call to use the params option (passing
nowDate, readStatus, page, size as separate keys) and add a TypeScript generic
for the expected response shape (e.g., ApiResponse<{ data: Article[] }> or the
correct DTO) on apiRequest.get so the function returns a typed value (update the
function signature to return Promise<YourReturnType> and return the typed
response.data).

16 changes: 16 additions & 0 deletions apps/client/src/pages/remind/apis/queries.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { useQuery, UseQueryResult } from '@tanstack/react-query';
import { AxiosError } from 'axios';
import { getRemindArticles } from './axios';
import { ArticleListResponse } from '@pages/remind/types/api';

export const useGetRemindArticles = (
nowDate: string,
readStatus: boolean,
page: number,
size: number
): UseQueryResult<ArticleListResponse, AxiosError> => {
return useQuery({
queryKey: ['remindArticles', nowDate, readStatus, page, size],
queryFn: () => getRemindArticles(nowDate, readStatus, page, size),
});
};
22 changes: 22 additions & 0 deletions apps/client/src/pages/remind/types/api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
// 리마인드 전체 조회
interface Category {
categoryId: number;
categoryName: string;
categoryColor: string;
}
Comment on lines +2 to +6
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Sep 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

공유 Category 타입과의 혼동 방지(이름 충돌 회피)

@shared/types/api.ts에도 Category가 있어 의미가 다른 동일 명칭이 혼선을 줄 수 있습니다. 지역 타입명을 구체화하거나(예: RemindCategory) 또는 공유 타입을 확장/별칭 처리하세요.

-interface Category {
+interface RemindCategory {
   categoryId: number;
   categoryName: string;
   categoryColor: string;
 }

그리고 Line 15의 참조를 함께 갱신하세요:

-  category: Category;
+  category: RemindCategory;
🤖 Prompt for AI Agents 
In apps/client/src/pages/remind/types/api.ts around lines 2 to 6, the local
interface named Category conflicts with a shared Category type in
@shared/types/api.ts; rename the local type to a more specific name (e.g.,
RemindCategory) or create an alias/extend the shared type, and update any
references (including the use at line 15) to the new name so there is no
ambiguous/duplicate Category identifier.


interface ArticleWithCategory {
articleId: number;
url: string;
memo: string;
createdAt: string;
isRead: boolean;
remindAt: string;
category: Category;
}

export interface ArticleListResponse {
readArticleCount: number;
unreadArticleCount: number;
articles: ArticleWithCategory[];
}
Loading