Api(client): 카테고리별 아티클 조회 API 연결 & 아티클 없는 경우 UI 분기 추가

apps/client/src/layout/Layout.tsx

@@ -1,12 +1,12 @@
 import { Outlet } from 'react-router-dom';
-import { Sidebar } from '../shared/components/sidebar/Sidebar';
+import { Sidebar } from '@shared/components/sidebar/Sidebar';
 
 const Layout = () => {
   return (
     <>
       <div className="flex h-screen">
         <Sidebar />
-        <main className="flex-1 overflow-y-auto">
+        <main className="bg-gray-bg flex-1 overflow-y-auto">
           <Outlet />
         </main>
       </div>

apps/client/src/pages/myBookmark/MyBookmark.tsx

@@ -3,15 +3,22 @@ import { useState } from 'react';
 import {
   useGetBookmarkArticles,
   useGetBookmarkUnreadArticles,
-} from './apis/queries';
+  useGetCategoryBookmarkArticles,
+} from '@pages/myBookmark/apis/queries';
+import { useSearchParams } from 'react-router-dom';
 import { REMIND_MOCK_DATA } from '@pages/remind/constants';
 import CardEditModal from '@shared/components/cardEditModal/CardEditModal';
 import OptionsMenuPortal from '@shared/components/sidebar/OptionsMenuPortal';
 import { useAnchoredMenu } from '@shared/hooks/useAnchoredMenu';
 import { belowOf } from '@shared/utils/anchorPosition';
+import NoArticles from '@pages/myBookmark/components/NoArticles/NoArticles';
+import { Icon } from '@pinback/design-system/icons';
 
 const MyBookmark = () => {
   const [activeBadge, setActiveBadge] = useState<'all' | 'notRead'>('all');
+  const [searchParams] = useSearchParams();
+  const category = searchParams.get('category');
+  const categoryId = searchParams.get('id');
   const [isEditOpen, setIsEditOpen] = useState(false);
 
   const {
@@ -25,83 +32,94 @@ const MyBookmark = () => {
   const getBookmarkTitle = (id: number | null) =>
     id == null ? '' : (REMIND_MOCK_DATA.find((d) => d.id === id)?.title ?? '');
 
-  const { data: readArticles } = useGetBookmarkArticles(1, 10);
-  const { data: unreadArticles } = useGetBookmarkUnreadArticles(1, 10);
+  const { data: articles } = useGetBookmarkArticles(0, 20);
+  const { data: unreadArticles } = useGetBookmarkUnreadArticles(0, 20);
+  const { data: categoryArticles } = useGetCategoryBookmarkArticles(
+    categoryId,
+    1,
+    10
+  );
+
+  const articlesToDisplay =
+    activeBadge === 'all' ? articles?.articles : unreadArticles?.articles;
+
+  // 임시 콘솔
+  console.log('categoryArticles', categoryArticles);
 
   const handleBadgeClick = (badgeType: 'all' | 'notRead') => {
     setActiveBadge(badgeType);
   };
 
   return (
-    <div className="flex flex-col py-[5.2rem] pl-[8rem]">
-      <p className="head3">나의 북마크</p>
+    <div className="flex h-screen flex-col py-[5.2rem] pl-[8rem]">
+      <div className="flex items-center gap-[0.4rem]">
+        <div className="flex items-center gap-[0.4rem]">
+          <p className="head3">나의 북마크</p>
+          {category && (
+            <Icon
+              name="ic_arrow_down_disable"
+              width={24}
+              height={24}
+              rotate={270}
+              color="black"
+            />
+          )}
+        </div>
+        <p className="head3 text-main500">{category || ''}</p>
+      </div>
 
       <div className="mt-[3rem] flex gap-[2.4rem]">
         <Badge
           text="전체보기"
-          countNum={readArticles?.totalArticle || 0}
+          countNum={articles?.totalArticle || 0}
           onClick={() => handleBadgeClick('all')}
           isActive={activeBadge === 'all'}
         />
         <Badge
           text="안 읽음"
-          countNum={readArticles?.totalUnreadArticle || 0}
+          countNum={articles?.totalUnreadArticle || 0}
           onClick={() => handleBadgeClick('notRead')}
           isActive={activeBadge === 'notRead'}
         />
       </div>
 
-      <div className="scrollbar-hide mt-[2.6rem] flex max-w-[104rem] flex-wrap gap-[1.6rem] overflow-y-auto scroll-smooth">
-        {/* TODO: API 연결 후 수정 */}
-        {activeBadge === 'all' &&
-          readArticles?.articles.map((article) => (
+      {articlesToDisplay && articlesToDisplay.length > 0 ? (
+        <div className="scrollbar-hide mt-[2.6rem] flex h-screen max-w-[104rem] flex-wrap gap-[1.6rem] overflow-y-auto scroll-smooth">
+          {articlesToDisplay.map((article) => (
             <Card
               key={article.articleId}
               type="bookmark"
               title={article.url}
               content={article.memo}
-              // category={article.category.categoryName}
-              date={new Date(article.createdAt).toLocaleDateString('ko-KR')}
-              onClick={() => {}}
-              onOptionsClick={(e) =>
-                openMenu(article.articleId, e.currentTarget)
-              }
-            />
-          ))}
-
-        {activeBadge === 'notRead' &&
-          unreadArticles?.articles.map((article) => (
-            <Card
-              key={article.articleId}
-              type="bookmark"
-              title={article.url}
-              content={article.memo}
-              // category={article.}
+              category={article.category.categoryName}
               date={new Date(article.createdAt).toLocaleDateString('ko-KR')}
               onClick={() => {}}
               onOptionsClick={(e) =>
                 openMenu(article.articleId, e.currentTarget)
               }
             />
           ))}
+        </div>
+      ) : (
+        <NoArticles />
+      )}
 
-        <OptionsMenuPortal
-          open={menu.open}
-          style={style ?? undefined}
-          containerRef={containerRef}
-          categoryId={menu.categoryId}
-          getCategoryName={getBookmarkTitle}
-          onEdit={() => {
-            setIsEditOpen(true);
-            closeMenu();
-          }}
-          onDelete={(id) => {
-            console.log('delete', id);
-            closeMenu();
-          }}
-          onClose={closeMenu}
-        />
-      </div>
+      <OptionsMenuPortal
+        open={menu.open}
+        style={style ?? undefined}
+        containerRef={containerRef}
+        categoryId={menu.categoryId}
+        getCategoryName={getBookmarkTitle}
+        onEdit={() => {
+          setIsEditOpen(true);
+          closeMenu();
+        }}
+        onDelete={(id) => {
+          console.log('delete', id);
+          closeMenu();
+        }}
+        onClose={closeMenu}
+      />
 
       {isEditOpen && (
         <div className="fixed inset-0 z-[1000]" aria-modal="true" role="dialog">
@@ -110,7 +128,6 @@ const MyBookmark = () => {
             onClick={() => setIsEditOpen(false)}
           />
           <div className="absolute inset-0 flex items-center justify-center p-4">
-            {/* 필요하면 menu.categoryId를 모달에 전달 */}
             <CardEditModal onClose={() => setIsEditOpen(false)} />
           </div>
         </div>

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

@@ -13,3 +13,14 @@ export const getBookmarkUnreadArticles = async (page: number, size: number) => {
   );
   return data.data;
 };
+
+export const getCategoryBookmarkArticles = async (
+  categoryId: string | null,
+  page: number,
+  size: number
+) => {
+  const { data } = await apiRequest.get(
+    `/api/v1/articles/category?categoryId=${categoryId}&page=${page}&size=${size}`
+  );
+  return data.data;
+};

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

@@ -1,8 +1,13 @@
 import { useQuery, UseQueryResult } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
-import { getBookmarkArticles, getBookmarkUnreadArticles } from './axios';
+import {
+  getBookmarkArticles,
+  getBookmarkUnreadArticles,
+  getCategoryBookmarkArticles,
+} from './axios';
 import {
   BookmarkArticleResponse,
+  CategoryBookmarkArticleResponse,
   UnreadBookmarkArticleResponse,
 } from '@pages/myBookmark/types/api';
 
@@ -25,3 +30,15 @@ export const useGetBookmarkUnreadArticles = (
     queryFn: () => getBookmarkUnreadArticles(page, size),
   });
 };
+
+export const useGetCategoryBookmarkArticles = (
+  categoryId: string | null,
+  page: number,
+  size: number
+): UseQueryResult<CategoryBookmarkArticleResponse, AxiosError> => {
+  return useQuery({
+    queryKey: ['categoryBookmarkArticles', categoryId, page, size],
+    queryFn: () => getCategoryBookmarkArticles(categoryId, page, size),
+    enabled: !!categoryId,
+  });
+};

apps/client/src/pages/myBookmark/components/NoArticles/NoArticles.tsx

@@ -0,0 +1,23 @@
+import chippiNoArticles from '@assets/chippi_x.svg';
+import { Icon } from '@pinback/design-system/icons';
+
+const NoArticles = () => {
+  return (
+    <div className="mx-auto mt-[14rem] flex flex-col items-center">
+      <img src={chippiNoArticles} alt="No Articles" />
+
+      <p className="head2 mt-[1.6rem]">첫 북마크가 저장되면 여기에 모여요 ✨</p>
+      <div className="mt-[0.8rem] flex items-center">
+        <p className="body1-m text-font-gray-3 gap-[0.4rem]">
+          원하는 페이지에서
+        </p>
+        <div className="flex items-center text-center">
+          <Icon name="ic_extension" width={28} height={28} />
+          <p className="body1-m text-font-gray-3">아이콘을 눌러주세요.</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NoArticles;

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

@@ -1,20 +1,31 @@
+interface Category {
+  categoryId: number;
+  categoryName: string;
+  categoryColor: string;
+}
+
 interface BookmarkArticle {
   articleId: number;
   url: string;
   memo: string;
   createdAt: string;
   isRead: boolean;
+  category: Category;
 }
 
 // 북마크 전체 조회
 export interface BookmarkArticleResponse {
   totalArticle: number;
   totalUnreadArticle: number;
+  isNewUser: boolean;
   articles: BookmarkArticle[];
 }
 
 // 북마크 안 읽음 조회
 export interface UnreadBookmarkArticleResponse {
+  totalArticle: number;
   totalUnreadArticle: number;
   articles: BookmarkArticle[];
 }
+
+export type CategoryBookmarkArticleResponse = UnreadBookmarkArticleResponse;

apps/client/src/pages/remind/Remind.tsx

@@ -5,8 +5,10 @@ import OptionsMenuPortal from '@shared/components/sidebar/OptionsMenuPortal';
 import { useAnchoredMenu } from '@shared/hooks/useAnchoredMenu';
 import { belowOf } from '@shared/utils/anchorPosition';
 import { REMIND_MOCK_DATA } from './constants';
-import { useGetRemindArticles } from './apis/queries';
+import { useGetRemindArticles } from '@pages/remind/apis/queries';
 import { formatLocalDateTime } from '@shared/utils/formatDateTime';
+import NoReadArticles from '@pages/remind/components/noReadArticles/NoReadArticles';
+import NoUnreadArticles from '@pages/remind/components/noUnreadArticles/NoUnreadArticles';
 
 const Remind = () => {
   const [isEditOpen, setIsEditOpen] = useState(false);
@@ -21,7 +23,7 @@ const Remind = () => {
 
   const getItemTitle = (id: number | null) =>
     id == null ? '' : (REMIND_MOCK_DATA.find((d) => d.id === id)?.title ?? '');
-  const [activeBadge, setActiveBadge] = useState('notRead');
+  const [activeBadge, setActiveBadge] = useState<'read' | 'notRead'>('notRead');
   const formattedDate = formatLocalDateTime();
 
   const { data } = useGetRemindArticles(
@@ -31,10 +33,13 @@ const Remind = () => {
     10
   );
 
-  const handleBadgeClick = (badgeType: string) => {
+  const handleBadgeClick = (badgeType: 'read' | 'notRead') => {
     setActiveBadge(badgeType);
   };
 
+  const EmptyStateComponent =
+    activeBadge === 'read' ? <NoReadArticles /> : <NoUnreadArticles />;
+
   return (
     <div className="flex flex-col py-[5.2rem] pl-[8rem]">
       <p className="head3">리마인드</p>
@@ -53,39 +58,43 @@ const Remind = () => {
         />
       </div>
 
-      <div className="scrollbar-hide mt-[2.6rem] flex max-w-[104rem] flex-wrap gap-[1.6rem] overflow-y-auto scroll-smooth">
-        {/* TODO: API 연결 후 수정 */}
-        {data?.articles?.map((article) => (
-          <Card
-            key={article.articleId}
-            type="remind"
-            title={article.url}
-            content={article.memo}
-            timeRemaining={article.remindAt}
-            category={article.category.categoryName}
-            onOptionsClick={(e) =>
-              openMenu(article.category.categoryId, e.currentTarget)
-            }
-          />
-        ))}
+      {data?.articles && data.articles.length > 0 ? (
+        <div className="scrollbar-hide mt-[2.6rem] flex max-w-[104rem] flex-wrap gap-[1.6rem] overflow-y-auto scroll-smooth">
+          {data.articles.map((article) => (
+            <Card
+              key={article.articleId}
+              type="remind"
+              title={article.url}
+              content={article.memo}
+              timeRemaining={article.remindAt}
+              category={article.category.categoryName}
+              {...(activeBadge === 'notRead' && {
+                onOptionsClick: (e) =>
+                  openMenu(article.category.categoryId, e.currentTarget),
+              })}
+            />
+          ))}
+        </div>
+      ) : (
+        EmptyStateComponent
+      )}
 
-        <OptionsMenuPortal
-          open={menu.open}
-          style={style ?? undefined}
-          containerRef={containerRef}
-          categoryId={menu.categoryId}
-          getCategoryName={getItemTitle}
-          onEdit={() => {
-            setIsEditOpen(true);
-            closeMenu();
-          }}
-          onDelete={(id) => {
-            console.log('delete', id);
-            closeMenu();
-          }}
-          onClose={closeMenu}
-        />
-      </div>
+      <OptionsMenuPortal
+        open={menu.open}
+        style={style ?? undefined}
+        containerRef={containerRef}
+        categoryId={menu.categoryId}
+        getCategoryName={getItemTitle}
+        onEdit={() => {
+          setIsEditOpen(true);
+          closeMenu();
+        }}
+        onDelete={(id) => {
+          console.log('delete', id);
+          closeMenu();
+        }}
+        onClose={closeMenu}
+      />
 
       {isEditOpen && (
         <div className="fixed inset-0 z-[1000]" aria-modal="true" role="dialog">