🎨 Design: Add Site button component UI

src/config/siteIcons.ts

@@ -0,0 +1,25 @@
+import BlockchainIcon from '../assets/sites/blockchain.svg';
+import CoinmarketcapIcon from '../assets/sites/coinmarketcap.svg';
+import BinanceIcon from '../assets/sites/binance.svg';
+import type { SiteType } from '../types/site.type';
+
+export const SITE_ICONS: Record<
+  SiteType,
+  {
+    icon: string;
+    alt: string;
+  }
+> = {
+  BLOCKCHAIN: {
+    icon: BlockchainIcon,
+    alt: 'blockchain',
+  },
+  COINMARKETCAP: {
+    icon: CoinmarketcapIcon,
+    alt: 'coinmarketcap',
+  },
+  BINANCE: {
+    icon: BinanceIcon,
+    alt: 'binance',
+  },
+};

src/mocks/siteData.ts

@@ -0,0 +1,19 @@
+import type { SiteItem } from '../types/site.type';
+
+export const siteData: SiteItem[] = [
+  {
+    id: 1,
+    type: 'BLOCKCHAIN',
+    url: 'https://www.naver.com',
+  },
+  {
+    id: 2,
+    type: 'COINMARKETCAP',
+    url: 'https://www.google.com',
+  },
+  {
+    id: 3,
+    type: 'BINANCE',
+    url: 'https://www.youtube.com',
+  },
+];

src/pages/home/Home.tsx

@@ -1,16 +1,18 @@
 import Navbar from '../../components/Navbar/Navbar';
 import ListFilter from './components/Filter/ListFilter';
+import ListSite from './components/Site/ListSite';
 import Alert from './components/Alert/Alert';
 import Banner from './components/Banner/Banner';
 import Chart from './components/Chart/Chart';
 
 const Home = () => {
   return (
     <>
-      <Banner />
       <Navbar />
+      <Banner />
       <ListFilter />
       <Chart />
+      <ListSite />
       <Alert />
     </>
   );

src/pages/home/components/Site/ItemSite.tsx

@@ -0,0 +1,26 @@
+import { SITE_ICONS } from '../../../../config/siteIcons';
+import type { SiteItem } from '../../../../types/site.type';
+import useNavigation from '../../../../hooks/useNavigation';
+
+interface ItemSiteProps {
+  item: SiteItem;
+}
+
+const ItemSite = ({ item }: ItemSiteProps) => {
+  const { goTo } = useNavigation();
+  const ui = SITE_ICONS[item.type];
+
+  return (
+    <li>
+      <button
+        type="button"
+        onClick={() => goTo(item.url)}
+        className="flex items-center justify-center"
+      >
+        <img src={ui.icon} alt={ui.alt} className="h-12 w-auto" />
+      </button>
+    </li>
+  );
+};
+
+export default ItemSite;

src/pages/home/components/Site/ListSite.tsx

@@ -0,0 +1,14 @@
+import ItemSite from './ItemSite';
+import { siteData } from '../../../../mocks/siteData';
+
+const ListSite = () => {
+  return (
+    <ul className="w-full flex items-center gap-[1.6rem] px-4 mt-6 mb-12">
+      {siteData.map((item) => (
+        <ItemSite key={item.id} item={item} />
+      ))}
+    </ul>
+  );
+};
+
+export default ListSite;

src/types/site.type.ts

@@ -0,0 +1,7 @@
+export type SiteType = 'BLOCKCHAIN' | 'COINMARKETCAP' | 'BINANCE';
+
+export interface SiteItem {
+  id: number;
+  url: string;
+  type: SiteType;
+}