👽 Refactor: Integrate Alert API

src/apis/alert/alert.ts

@@ -0,0 +1,26 @@
+import apiInstance from '../axios/instance';
+import type { AlertResponse } from '../../types/alert.type';
+import type { FilterValue } from '../../types/filter.type';
+
+interface FetchAlertsParams {
+  type?: FilterValue;
+  page?: number;
+}
+
+export const alertFetchData = async ({
+  type = 'ALL',
+  page = 0,
+}: FetchAlertsParams): Promise<AlertResponse> => {
+  try {
+    const res = await apiInstance.get<AlertResponse>('api/alerts', {
+      params: {
+        type,
+        page,
+      },
+    });
+
+    return res.data;
+  } catch (err) {
+    throw err;
+  }
+};

src/hooks/useQuery/useGetAlertData.ts

@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query';
+import { alertFetchData } from '../../apis/alert/alert';
+import type { AlertResponse } from '../../types/alert.type';
+import type { FilterValue } from '../../types/filter.type';
+
+interface UseGetAlertDataParams {
+  type: FilterValue;
+  page: number;
+}
+
+export const useGetAlertData = ({ type, page }: UseGetAlertDataParams) => {
+  return useQuery<AlertResponse>({
+    queryKey: ['alerts', type, page],
+    queryFn: () => alertFetchData({ type, page }),
+    staleTime: 0,
+  });
+};

src/mocks/filterData.ts

@@ -1,4 +1,6 @@
-export const filterData = [
+import type { FilterItem } from '../types/filter.type';
+
+export const filterData: FilterItem[] = [
   {
     id: 1,
     label: 'ALL',

src/mocks/siteData.ts

@@ -4,16 +4,16 @@ export const siteData: SiteItem[] = [
   {
     id: 1,
     type: 'BLOCKCHAIN',
-    url: 'https://www.naver.com',
+    url: 'https://www.blockchain.com/',
   },
   {
     id: 2,
     type: 'COINMARKETCAP',
-    url: 'https://www.google.com',
+    url: 'https://coinmarketcap.com/',
   },
   {
     id: 3,
     type: 'BINANCE',
-    url: 'https://www.youtube.com',
+    url: 'https://www.binance.com/en',
   },
 ];

src/pages/home/components/Alert/Alert.tsx

@@ -1,16 +1,29 @@
+import { useState, useEffect } from 'react';
 import Title from '../../../../components/Title/Title';
 import ListAlert from './List/ListAlert';
 import MoreButton from './Button/MoreButton';
-import { alertData } from '../../../../mocks/alertData';
+import { useFilterStore } from '../../../../stores/filterStore';
 
 const Alert = () => {
+  const [page, setPage] = useState(0);
+  const { selectedFilter } = useFilterStore();
+  const [hasNext, setHasNext] = useState(false);
+
+  const handleLoadMore = () => {
+    setPage((prev) => prev + 1);
+  };
+
+  useEffect(() => {
+    setPage(0);
+  }, [selectedFilter]);
+
   return (
     <>
       <Title text="Alert" />
 
-      <ListAlert data={alertData} />
+      <ListAlert page={page} onHasNext={setHasNext} />
 
-      <MoreButton />
+      {hasNext && <MoreButton onClick={handleLoadMore} />}
     </>
   );
 };

src/pages/home/components/Alert/Button/MoreButton.tsx

@@ -1,7 +1,14 @@
-const MoreButton = () => {
+interface MoreButtonProps {
+  onClick: () => void;
+}
+
+const MoreButton = ({ onClick }: MoreButtonProps) => {
   return (
-    <div className="w-full flex justify-center">
-      <button className="px-[1.6rem] py-[0.6rem] text-[1.4rem] text-gray-400 cursor-pointer border border-gray-400 rounded-[11.7rem] border-solid-[0.1rem]">
+    <div className="w-full flex justify-center pb-[3.7rem]">
+      <button
+        onClick={onClick}
+        className="px-[1.6rem] py-[0.6rem] text-[1.4rem] text-gray-400 cursor-pointer border border-gray-400 rounded-[11.7rem]"
+      >
         More
       </button>
     </div>

src/pages/home/components/Alert/Item/ItemAlert.tsx

@@ -7,19 +7,19 @@ interface ItemAlertProps {
 }
 
 const ItemAlert = ({ alert }: ItemAlertProps) => {
-  const { summary, createdAt, links } = alert;
-
   return (
     <details className="w-full group">
       <summary className="bg-white list-none cursor-pointer p-[1.1rem] flex items-start justify-between transition-shadow group-open:shadow-card rounded-[0.8rem]">
         <div className="flex items-start gap-[0.6rem]">
           <span
             aria-hidden="true"
-            className="w-[0.8rem] h-[0.8rem] mt-[0.6rem] bg-red rounded-full"
+            className="min-w-[0.8rem] min-h-[0.8rem] mt-[0.6rem] bg-red rounded-full"
           />
           <div>
-            <p className="text-[1.4rem] font-medium">{summary}</p>
-            <time className="text-[1.2rem] text-gray-200">{createdAt}</time>
+            <p className="text-[1.4rem] font-medium">{alert.message}</p>
+            <time className="text-[1.2rem] text-gray-200">
+              {alert.createdAt}
+            </time>
           </div>
         </div>
         <img
@@ -33,7 +33,7 @@ const ItemAlert = ({ alert }: ItemAlertProps) => {
         <p className="text-[1.4rem]">
           For these reasons, a decline was expected.
         </p>
-        <ListLink data={links} />
+        <ListLink data={alert.links} />
       </div>
     </details>
   );

src/pages/home/components/Alert/Item/ItemLink.tsx

@@ -1,25 +1,21 @@
-import { LINK_ICONS } from '../../../../../config/linkIcons';
-import type { LinkItem } from '../../../../../types/link.type';
 import useNavigation from '../../../../../hooks/useNavigation';
+import type { AlertLink } from '../../../../../types/alert.type';
 
 interface ItemLinkProps {
-  item: LinkItem;
+  item: AlertLink;
 }
 
 const ItemLink = ({ item }: ItemLinkProps) => {
-  const { type, url } = item;
-  const Icon = LINK_ICONS[type];
   const { goTo } = useNavigation();
 
   return (
     <li className="w-full">
       <button
         type="button"
-        onClick={() => goTo(url)}
+        onClick={() => goTo(item.url)}
         className="w-full flex items-center gap-[0.4rem] text-left"
       >
-        <img src={Icon} alt={type.toLowerCase()} className="w-8" />
-        <p className="font-[1.1rem] text-gray-600">{url}</p>
+        <p className="font-[1.1rem] text-gray-600">{item.url}</p>
       </button>
     </li>
   );

src/pages/home/components/Alert/List/ListAlert.tsx

@@ -1,14 +1,44 @@
+import { useEffect, useState } from 'react';
 import ItemAlert from '../Item/ItemAlert';
+import { useGetAlertData } from '../../../../../hooks/useQuery/useGetAlertData';
+import { useFilterStore } from '../../../../../stores/filterStore';
 import type { AlertItem } from '../../../../../types/alert.type';
 
 interface ListAlertProps {
-  data: AlertItem[];
+  page: number;
+  onHasNext: (hasNext: boolean) => void;
 }
 
-const ListAlert = ({ data }: ListAlertProps) => {
+const ListAlert = ({ page, onHasNext }: ListAlertProps) => {
+  const { selectedFilter } = useFilterStore();
+  const [alerts, setAlerts] = useState<AlertItem[]>([]);
+
+  const { data } = useGetAlertData({
+    type: selectedFilter,
+    page,
+  });
+
+  useEffect(() => {
+    if (data?.alerts) {
+      setAlerts((prev) =>
+        page === 0 ? data.alerts : [...prev, ...data.alerts],
+      );
+
+      onHasNext(data.hasNext);
+    }
+  }, [data, page, onHasNext]);
+
+  if (!alerts.length) {
+    return (
+      <p className="text-center text-[1.4rem] text-font mt-[10.3rem] pb-[18.7rem]">
+        There's no data to display yet.
+      </p>
+    );
+  }
+
   return (
-    <div className="w-full flex flex-col gap-[0.8rem] mb-[1.6rem]">
-      {data.map((alert) => (
+    <div className="w-full flex flex-col gap-[0.8rem] pb-[1.6rem]">
+      {alerts.map((alert) => (
         <ItemAlert key={alert.id} alert={alert} />
       ))}
     </div>

src/pages/home/components/Alert/List/ListLink.tsx

@@ -1,8 +1,8 @@
 import ItemLink from '../Item/ItemLink';
-import type { LinkItem } from '../../../../../types/link.type';
+import type { AlertLink } from '../../../../../types/alert.type';
 
 interface ListLinkProps {
-  data: LinkItem[];
+  data: AlertLink[];
 }
 
 const ListLink = ({ data }: ListLinkProps) => {

src/stores/filterStore.ts

@@ -1,6 +1,5 @@
 import { create } from 'zustand';
-
-export type FilterValue = string;
+import type { FilterValue } from '../types/filter.type';
 
 interface FilterState {
   selectedFilter: FilterValue;

src/types/alert.type.ts

@@ -1,8 +1,16 @@
-import type { LinkItem } from './link.type';
+export interface AlertLink {
+  id: number;
+  url: string;
+}
 
 export interface AlertItem {
   id: number;
-  summary: string;
+  message: string;
   createdAt: string;
-  links: LinkItem[];
+  links: AlertLink[];
+}
+
+export interface AlertResponse {
+  alerts: AlertItem[];
+  hasNext: boolean;
 }